13. března 2004
.:Přidat k oblíbeným
.:Napsat e-mail





Články
Lekce
Příklady

Vymyslet název této lekci je dost těžké. Je to takový miš-maš. Splácání všeho, co jsem z nějakých důvodů zatajil v minulých kapitolách. Rozebereme ještě jeden datový typ, tentokrát obecně object a dále objekt pole. Pokud zbude místo a čas, přidáme k dobru poněkud specifický cyklus a možná přijdou i vstupní parametry funkcí.

Object

Už kdesi v hloubi druhé lekce DHTML jsem se pokoušel nastínit, co to je. Víme tedy, že objektem se rozumí prvky, ze kterých se stránka skládá (obrázky, tabulky, tělo dokumentu atd. atd.). Abychom mohli s těmito prvky pracovat, zavádí JavaScript datový typ object... a jsme doma. I když ne tak úplně. Proměnnou tohoto typu asi těžko vypíšete např. pomocí metody alert, ovšem objekty jsou od toho, aby měly vlastnosti. Třeba objekt obrázek má vlastnosti výška, šířka, zarovnání,... Ty můžete číst a dnes je možné většinu vlastností i měnit (o tom ve 4. Lekci DHTML) - říkam dnes, neboť některé archaické prohlížeče toto nedovolují. Vraťme se ale čistě k JavaScriptu. Zatím blábolím jen tak do větru, takže by to chtělo nejspíš nějaký příklad. Budiž, jak přiřadíme nějaké proměnné nějaký objekt na stránce? Jako obvykle máme minimálně dvě možnosti:

  1. použít vlastnost ID: snad každému prvku na stránce lze přiřadit jeho ID a následně se jeho pomocí na tento prvek odkazovat.

    <img src="obrazky/blikac.gif" width=38 height=38 id="obr">

    ...potom ve skriptu přiřadíme proměnné obj tento objekt a vypíšeme s její pomocí šířku obrázku...

    obj = obr
    alert("Šířka obrázku je "
           + obj.width)

    Jenom bych chtěl upozornit, že pokud pracujete ve skriptu s ID tímto způsobem, nepište úvozovky (jinak řečeno NE obj = "obr")!!

    Bohužel, jak už to tak bývá, ne všechno je úplně stoprocentní a výše popsaný postup není stoprocentní ani zdaleka. Některé prohlížeče - většinou ty, které alespoň trochu ctí standardy (Netscape, Mozilla) - nedokáží v dokumentu id zpracovat v jeho úplně syrové podobě pouhého názvu (alespoň v době psaní tohoto článku to nedokázaly). Pročež raději místo obj = obr pište:

    obj = document.getElementById("obr")

    Metoda getElementById() vrací element, jehož ID udáte v závorce a to už by měl být jistější postup.

  2. Poněkud zběsilejší metodou je použití kolekcí, se kterými uspějete i v prohlížečích takového kalibru, jako je vetchý kmet a veterán Netscape 4.5. Prohlížeče totiž podporují určité kolekce prvků na stránce (např. kolekce obrázků: images, nebo formulářů: forms). Prvky těchto kolekcí se nijak nejmenují, ale číslují se (a číslujeme - jak je v programování obvyklé - od nuly!!). Pro ilustraci vytvoříme formulář s textovým polem a budeme číst vlastnost value tohoto formuláře:

    <script type="text/javascript">
    function cist()
    {
     a = document.forms[0].elements[0]
     alert(a.value)
    }
    </script>

    Pro názornost vypíšu i příklad našeho formuláře:

    <form>
     <input type="Text" size=20>
     <input type="Button" value="Přečti" onClick="cist()">
    </form>

Objekty mohou mít jiné podřízené objekty. Např. budete mít na stránce nějaký obrázek (v tuto chvíli objekt) a ten je podřízený objektu document. Proč o tom píšu, asi jste si už všimli, že jednotlivé objekty nenaflákáme bez ladu a skladu za sebou, ale oddělujeme je tečkou (říká se tomu tečková notace). Stejně tak vlastnosti jednotlivých objektů oddělujeme tečkou (obrazek.width, forms[0].elements[0].value). A konečně kromě kolekce forms máme ještě pár dalších. Těmi nejužitečnějšími jsou links (všechny odkazy na stránce) a images (všechny obrázky). Pracujeme s nimi úplně stejně jako s forms, takže ke 4. odkazu na stránce se dostaneme pomocí: document.links[3]

Pole

Samozřejmě dříve nebo později se setkáte se situací, kdy budete potřebovat více než jednu, dvě, tři, čtyři, pět, šest... pardon - mírně jsem se zamyslel - více proměnných. Může se stát, že budete třeba potřebovat dvě stě proměnných (nebo dokonce 1000, nebo dokonec i - a pozor přátelé, tady přestává všechna legrace - mnohem víc proměnných). Potom by bylo minimálně trochu nudné vymýšlet těmto proměnným názvy a práce s nimi by také skýtala četná dobrodružství. Ozřejmíme si tedy, co je to objekt pole, který vám mimochodem řešení těchto problémů usnadní. Pole je jakýsi číslovaný seznam proměnných. Deklarujeme ho asi takto:

var pole = new Array();

Nebo, chceme-li přesně určit počet prvků pole (např. pole, které může obshovat jen 5 položek):

var pole = new Array(5);

A nyní s ním pracujeme stejně jako s jakoukoli proměnnou - skoro stejně - až na malou kosmetickou úpravu. Musíme k identifikátoru (u nás pole) uvést ještě v hranatých závorkách číslo, označující pořadí prvku v poli - tak zvaný index:

pole[0] = 20
pole[1] = 4
pole[2] = "Hola!"

A podobně můžeme plnit až do aleluja. Lze dokonce některý index přeskočit, čili nemusíte pokračovat indexem 3, ale třeba 128. V takovém případě se položky pole s indexy mezi 2 a 128 jeví stejně prázdné jako obyčejné nenaplněné proměnné (tedy hodnota nedefinovaná). A teď pro někoho možná trochu nezvyklá možnost: prvky jednoho pole nemusí být stejného typu! Proto tu můžeme mít na indexech 0 a 1 typ číslo, ovšem na indexu 2 typ řetězec - JavaScriptu to nevadí. Objekt pole se používá velmi často ve spolupráci s cykly, z těch zejména s cyklem for - a to jak s klasickým, o kterém byla řeč v minulé kapitole, tak i s trochu specifickým for...in

for...in

Toto je poslední cyklus, o kterém bude řeč. A věnujeme mu jen pár řádků. Používá se k procházení všech položek pole (pokud např. potřebujete mezi těmito položkami vyhledat jen některé). Zápis:

for (hodnota in pole) { 
  if hodnota > 0 { 
     alert(hodnota)  
  }
}

Proměnná pole je tady nějaké dříve naplněné pole a do proměnné hodnota se ukládají jednotlivé položky procházeného pole. V našem příkladu dále zjišťujeme, zda je tato hodnota větší než nula a pokud ano, vypíšeme ji. Takže si to shrňme:

for ( promenna_do_ktere_nacitame in pole_ze_ktereho_cteme )

Vstupní parametry

Prakticky v každé předcházející lekci jsem se o nich chtěl zmínit, ale nikdy nezbylo místo ani čas. Co to je?

function delej(parametr)
{ 
  alert(parametr)
}

Tak to je on. Vstupní parametr je ve skutečnosti proměnná, kterou funkci předáváme, když ji spouštíme. Alert se v našem příkladu objevuje trochu navíc, má jen decentně naznačit, že se vstupním parametrem uvnitř funkce pracujeme prakticky jako s obyčejnou proměnnou (nejčastěji ho asi čteme). Vstupní parametry se většinou používají, pokud chceme funkci sdělit nějakou smrtelně důležitou zprávu. Např. předáme informaci o objektu, který vyvolal nějakým způsobem naši funkci. Na tomto konkrétním příkladu si ukážeme, jak se parametr naplní:

<img src="obr.gif" width=80 onClick="cti(this)">

DHTML totiž nabízí kouzelné slůvko this, které vrací proměnnou typu objekt, a to sice objekt, ve kterém ho používáme - tady obrázek. Komu to stále není jasné: nemusíme používat žádné id ani kolekce, prostě se ptáme na this. Ve funkci dále informaci zpracujeme následovně:

function cti(obj)
{
 alert("Šířka obrázku je: "
	+ obj.width)
}

Jednoduše vypíšeme vlastnost width obrázku, který vyvolal událost onCilck a spustil funkci.

Závěr

"No a to je konec přátelé..."
"Ttttotototo to mám ppřece říct já!!"
"Tak to řekni!"
"Tjadydádydádydádýdadá!!"
"To je konec."
Ale ne definitivní, minimálně jednu lekci vám ještě uštědřím, do té doby nashle!

Mort


<< Předchozí lekce
_
^
Back to top

Valid XHTML 1.0!   Valid CSS!
Začněte nový den radostněji, hra blackjack zdarma už čeká. Pak se přesuňte jinam a zkuste cz keno. Vyzkoušejte i jiné stolní hry, třeba kostky. Nezapomeňte ani na automaty. A bez hry ruleta to také určitě nepůjde. TOPlist