JavaScript - 11. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

JavaScript - 11. lekceJavaScript - 11. lekce

 

JavaScript - 11. lekce

Google       Google       25. 10. 2008       31 984×

Objekty a formuláře.

Reklama
Reklama

Na úvod bych chtěl upozornit, že budu postupně předělávat úvodní lekce. Obsah zůstane stejný, ale změní se styl psaní a opravím chyby. Děkuji za pochopení.

Objekty

JavaScript je jazyk založený na jednoduchém objektově orientovaném vzoru. Objekt se skládá z parametrů, jimiž jsou proměnné nebo jiné objekty. Objekt obsahuje funkce, kterým se říká metody. A pro nás nejdůležitější poznatek - v JavaScriptu můžete vytvářet vlastní objekty.

Vytváření objektů

Zápis objektu v JavaScriptu je odlišný od ostatních jazyků s jejich podporou. Pokud jste zvyklí, že je objekt definován slovem class, tak v JavaScriptu to neplatí. Definovat budeme pouze jednotlivé funkce, ale můžeme je volat přímo v závislosti na proměnné či jiném objektu, jak už jsem na začátku říkal. Nejpatrnější to bude na jednoduchém příkladu. Tím je vytvoření nejjednoduššího objektu, kterému přiřadíme hodnoty.

produkt.nazev = "LCD Monitor ACER";
produkt.popis = "Sedmnáctipalcový monitor s výbornou odezvou.";
produkt.cena = 2000;

Tento kód vám bude nejspíš velmi připomínat pole. Můžete se tedy ptát, proč vůbec používat objekt, když můžeme použít pole? Odpověď je jednoduchá, v poli lze řadit a hledat prvky pouze podle indexu, zatímco v objektu i podle logické vlastnosti (název, popis, cena atd.). Na vypisování dat z objektu se používá konstrukce for...in. V následujícím příkladu vám ukážu, jak vypsat hodnoty z předchozího příkladu (i s názvem objektu a vlastnostmi).

function ukazVlastnosti(objekt, nazevObjektu) {
  var vysledek = "";
  for (var i in objekt) {
    vysledek += nazevObjektu + "." + i + " = " + objekt[i] + "\n";  // tady vidíte, že ve výsledku přistupujeme k objektu jako k poli
  }
  return vysledek;  // vrací výsledek, který po zavolání funkce vypíše
}

Do tagu body napište například:

<body onLoad="ukazVlastnosti(produkt, 'produkt');">

Teď se konečně dostanu k vytváření opravdových objektů. Náš objekt bude tedy funkce, která ponese svůj název, vlastnosti a metody. Pokud budete tedy chtít mít více produktů, vytvoříte si pro produkt objekt, kterému už potom budete pouze předávat hodnoty. Ukážu vám to na následujícím příkladu.

Nejdříve vytvoříme objekt k produktu a poté funkci (v našem případě už metodu) k vypisování zavolaného objektu. A na úplný konec objekt na ukázku dvakrát zavoláme.

function produkt(nazev, popis, cena) {
  this.nazev = nazev;
  this.popis = popis;
  this.cena = cena;
  this.ukazProdukt = function () {     //metoda objektu, kterou budeme volat jako ukazProdukt()
    var vysledek = "" + this.nazev + "
" + this.popis + "
" + this.cena + " Kč

"; document.write(vysledek); } } var harddisk = new produkt("HDD 500GB", "Vynikající harddisk s 15000rpm.", 3600); // vytvoření nových objektů var procesor = new produkt("Intel QuadCore 2.4GHz", "Čtyřjádrový procesor s maximálním výkonem.", 6450); harddisk.ukazProdukt(); // volání metody procesor.ukazProdukt();

Pravděpodobně jste zjistili, že s objekty se setkáváte v JavaScriptu již delší dobu. Určitě jste se v průběhu lekcí setkali s objekty typu window, document a jinými. Znáte-li objektové programování v jiných jazycích, povšimnete si, že v JavaScriptu není žádná funkce jako konstruktor, na druhou stranu se zároveň celý objekt chová jako konstruktor a obsahuje také metody. Klasicky je to tak, že při zavolání třídy se automaticky volá její první metoda - konstruktor. Avšak v JavaScriptu voláme víceméně přímo konstruktor, který povětšinou udává hodnoty, se kterými se bude pracovat.

Prototype

Když už jsem u objektů, stojí za zmínku pohovořit o prototype. Dejme tomu, že máte objekt produkt z prvního příkladu a vytvořené proměnné harddisk a procesor a teď chcete každému přiřadit ještě proměnnou cislo_vyrobku. A k tomu nám slouží právě prototype, neboť definuje vlastnost, kterou poté přidá všem objektům stejného typu - pro nás typu produkt. Takže vlastnost cislo_vyrobku přidáme následovně.

produkt.prototype.cislo_vyrobku = null;     // null nastaví výchozí hodnotu na žádnou
harddisk.cislo_vyrobku = 26549;
procesor.cislo_vyrobku = 49536;

Nyní tedy budou mít všechny objekty typu produkt vlastnost cislo_vyrobku. Promocí prototype můžete také přidávat do objektu nové metody a to vám předvedu na následujícím příkladu.

function auto(nazev) {
  this.nazev = nazev;
  this.nastartovat = function() {
    document.write(this.nazev + " nastartovalo!");
  }
}

var bmw = new auto("BMW X5");
bmw.nastartovat();

auto.prototype.chcipnout = function () {
  document.write(this.nazev + " chcíplo!");
}

bmw.chcipnout();

Pomocí prototypu můžete upravovat a obohacovat nejen vlastní objekty, ale i základní objekty JavaScriptu, jako je například Array (pole). Jako ukázku vytvořím script, který přiřadí všem objektům typu Array metodu, která po zavolání spočítá počet prvků v poli.

Array.prototype.spocitej = function() {
  document.write(this.length);
}

var pole = new Array("prvni", "druhy", 3, "ctvrty", 5);
pole.spocitej();

Samozřejmě je jednodušší použít přímo pole.length, ale chtěl jsem vám to ukázat pro případ, že byste chtěli se základními JavaScriptovými objekty nějak pracovat - například nastavit maximální délky všech polí. Pokud byste například sestavili funkci pro nějaký dobrý výpočet, můžete si ho přidat jako metodu do objektu Math.

Formuláře

Druhou částí dnešní lekce jsou formuláře. Formulář jsem lehce nakousl v minulé lekci u příkladu s kalkulačkou. Pokud jste dobře sledovali, tak už možná tušíte, že rozhodující pro nás bude objekt Form. Každý z vás určitě zná tlačítka zpět a vpřed ve vašem prohlížeči. Jako první příklad vám ukážu dva inputy, které budou dělat to samé (posouvat vás zpět a vpřed v historii prohlížeče). Tím se dostáváme k DOM elementu jimiž všechny druhy inputů jsou. O DOM vám povím více v příští lekci. Nyní již příklad s přesouváním se v historii.

<input type="button" value="« zpět" onClick="history.back()">
<input type="button" value="vpřed »" onClick="history.forward()">

Toto je víceméně zbytečné a nepoužitelné, těžko totiž donutíte uživatele, aby místo tradičního „zpět“ a „vpřed“ v prohlížeči používali vaši alternativu na stránce. Použitelnější je kontrolování formulářů JavaScriptem, což probíhá na straně klienta. Nemusíte tedy čekat na znovunačtení stránky a informace, zda jsou zadané hodnoty správné. JavaScriptem dostanete varování nebo chybové hlášení o nevyplněných nebo nesprávně vyplněných polích ihned. Jeden takový script na zkontrolování, zdali bylo pole vyplněno, vám ukážu na následujícím příkladu.

<script language="JavaScript" type="text/javascript">
  function zkontroluj() {
    if(document.kontrola.policko.value.length == 0) {
      alert("Zapomněli jste vyplnit políčko!");
    }
  }
</script>

<form name="kontrola" onSubmit="zkontroluj();">
  <input type="text" name="policko" />
  <input type="submit" value="odeslat" />
</form>

To byl lehký úvod do formulářů, které nejsou samy o sobě vůbec složité. V příští lekci se dozvíte více o DOM.

Úkol

Vytvořte objekt, do kterého se budou vkládat dvě číselné hodnoty. První metoda tyto hodnoty sečte a vypíše výsledek, druhá metoda (vložená pomocí prototype) hodnoty odečte a vypíše výsledek. Druhou částí bude formulář, který bude dělat to samé - tři prvky input typu text a dvě tlačítka typu button. Jedno tlačítko zavolá funkci, která hodnoty sečte a vypíše do třetího pole text, druhé udělá to stejné nad operací odečítání.

Chtěl bych zdůraznit, že se hodnotí i úprava kódu (zarovnání jednotlivých řádků, používání mezerníku na rozčlenění kódu pro přehlednost - např. místo var vek=15; bych uvítal var vek = 15;).

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Tomáš BobekAutor je designérem stránek (2D grafika), ovládá jazyky HTML, CSS, PHP, JavaScript a zajímá se o programování v Javě.Krom programujte.com se podílí na projektech maths.cz (jako redaktor a grafik), ceskewebstudio.cz (jako designér) a webber.cz (jako JavaScript scriptař). Ostatní volný čas rád tráví s přáteli nebo sportuje (tenis, nohejbal, hokejbal, závodně fotbal).
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý