TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Objekty a formuláře.
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;).
