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





Lekce
Příklady

Budete-li se někdy prodírat referencemi DHTML, zjistíte, že jsou často rozčleněny do tří základních skupin: události - events, vlastnosti - proprties a metody - methods (samozřejmě se mohou objevit i seznamy objektů, kolekcí a čert ví čeho ještě, ale to teď není důležité). Událostmi jsme se zaobírali ve druhé lekci a uzrál čas vrhnout se právě na vlastnosti.

Čí vlastnosti?

Kdo sleduje pozorně naše lekce, už se cosi dočetl i o objektech. Každý objekt má nějaké vlastnosti. Možná o tom ještě nevíte, ale pokud umíte alespoň částečně "programovat" v HTML, dokážete i velkou řadu vlastností vyjmenovat. Vezměme si třeba objekt obrázek. Samotný tag <img> by asi neměl moc smysl. Minimálně je třeba určit vlastnost src (chytří tvůrci stránek doplní i vlastnosti width, height, alt atd.).

Věčný problém kompatibility

V nových prohlížečích je možné téměř všechny vlastnosti měnit, u těch starších jsme značně okleštěni. Vlastnosti můžeme třeba jenom číst a podobně. Proto budou mé další příklady směřovat pouze k novějším verzím nejpoužívanějších prohlížečů a je dost dobře možné, že stránky v některých veteránech nebudou dělat nic a možná, což je mrzuté, obdržíte i nějakou tu chybovou hlášku... V praxi, pokud víte, že se na vaše stránky budou dívat i lidé vlastnící právě ty obstarožní prohlížeče (a na internetu dříve nebo později budou!), je nutné takové případy ošetřit (možná se tomu budeme v některé další lekci také věnovat). V následujících příkladech jsem se těmito problémy z důvodů zjednodušení a mé lenosti příliš nezabýval. Na druhou stranu browsery se vyvíjí a už není zas tak moc těch, které by působily velké potíže - zkrátka Netscape Communicator 4 a jemu podobní opravdu vymírají.

Aplikace a praxe

Víme, že vlastnosti v DHTML se shodují s vlastnostmi, které znáte z HTML. Kromě toho existuje i "pár" dalších (celkem je v DHTML, mám pocit, něco přes 400 vlastností). Není v mých silách je tu všechny vyjmenovat, proto se omezím na ukázku použití a uvedu několik mých nejoblíbenějších vlastností, které z HTML těžko odvodíte.

Změna obrázku:

Klasické - známe to všichni, najedete na obrázek a on se změní na jiný (mačkající se tlačítka a podobně):

<img src="vytlac.gif" onMouseOver="this.src='stlac.gif'" onMouseOut="this.src='vytlac.gif'">

vytlac.gif

Pro tento účel jsme použili události onMouseOver a onMouseOut. Nic nového, ale pozor za rovná se přijde this.src: už víme, že src je vlastnost převzatá z HTML. This potom označuje právě tento obrázek a žádný jiný. Jedná se o klíčové slovo, takže ho prostě berte jako fakt. Za rovná se nepatří samozřejmě nic jiného než adresa nového obrázku.

Další změna obrázku

V našem příkladu byl použit vložený obslužný skript a po absolvování minulé lekce víme, že to není jediná možnost. Můžeme definovat funkci, která provede změnu obrázku, a potom se na ni jen odkazovat:

<script type="text/javascript">
<!--
function zmen(obj)
{
obj.width=50
}
//-->
</script>

</head>

<body bgcolor="#ffffcc">
<img src="dhtml.gif" onMouseOver="zmen(this)">
</body>

vytlac.gif

Tady by nemělo být moc nejasností. Zápis funkce známe z první a třetí lekce, metodu onMouseOver pro změnu z druhé. Trochu zmatku nám sem však vneslo jakési obj (v příkladu vyznačeno tučně). Jedná se o vstupní parametr (mimochodem vstupními parametry se zabývám podrobněji ve 5. lekci JavaScript). Slouží k předání nějaké informace funkci - v našem případě předáváme objekt označený díky klíčovému slovu this (u nás obrázek). Tam, kde se ve funkci vyskytuje obj, jedná se právě o obrázek. Ještě jednou popořadě: proměnné obj se nám podařilo pomocí slůvka this přiřadit objekt obrázek a s ním dále pracovat (měníme jeho šířku). Poznámka: příklad s funkcí a předcházející příklad s vloženým obslužným skriptem fungují, ač se to možná na první pohled nezdá, na velmi podobném principu.

ID

ID, jako identifikace, je vlastnost, kterou můžete přiřadit snad každému prvku na stránce. Bohužel musím opět podotknout, že s vlastností id moc úspěšně pracovat zatím pouze v Exploreru a dokonce už i v Opeře (testoval jsem ve verzi 7.11). V ostatních prohlížečích je nutné využívat kolekce prvků a podobné berličky, o některých z nich píši v 5. lekci JavaScript. Vraťme se k ID - pokud je prvek identifikován jakýmkoliv smysluplným jménem, které mu přiřadíte, můžete ho pomocí tohoto jména ovládat. Nejprve vychrlím příklad a následně dovysvětlím:

<table bgcolor="#666677">
 <tr>
  <td id="bunka1"> bunka1 </td>
  <td id="bunka2" onClick="bunka1.bgColor='#ff6600'" onDblClick="bunka1.bgColor='#666677'"> bunka2 </td>
 </tr>
</table>

bunka1 bunka2

Výtažek z kódu představuje jakousi tabulku. Má nastavenu barvu pozadí na šedomodrou, takže obě buňky jsou přišedlé. Ovšem... až do doby než kliknete na tu pravou, potom se barva levé buňky změní na oranžovou. Používáme k tomu právě vlastnost ID (levá buňka se jmenuje bunka1) a pomocí této vlastnosti ukazujeme z pravé buňky na levou. Je to velmi výhodné, protože vyvoláním nějaké události v jedné části stránky můžete ovládat prvky někde úplně jinde (takových výsledků nelze dosáhnout pomocí this, nýbrž to odkazuje pouze na objekt, v němž byla událost vyvolána). A málem bych zapomněl, po dvojkliknutí nad pravou buňkou se vše vrátí do původního stavu (událost onDblClick).

Závěr

Do závěru jsem většinou psal nějaký nesmyslný blábol a mnozí z vás si ho možná zvykli nečíst - ti mají teď smůl. Změna je život a já se tentokrát výjimečně pokusím shrnout celou lekci. Pochopil bych, kdyby teď někteří zanevřeli na používání funkcí, protože je to jenom těžší a zdlouhavější než vkládání obslužných skriptů - nedělejte to! Nastane doba, kdy po jedné události budete chtít změnit více vlastností u více objektů a to se vám podaří jen s pomocí funkce. Krom toho je možné a dokonce velmi užitečné kombinovat DHTML a JavaScript (nebo VBScript), tak můžete vytvářet i mírně inteligentní a silně dynamické stránky... Celá lekce se mi trochu vymkla z rukou a dost značně se rozrostla, proto jsem nucen přistoupit k radikálnímu řezu a rozdělit ji do dvou částí. Nashle u té druhé!

Wanneer je de leden van HollandGokken.com vertrouwd dan speel je ieder casino game in een vertrouwde omgeving. Zo kun je voor het blackjack spel bij Holland Gokken diverse aanbieders vinden die het spel in topvorm aanbieden. HG heeft daarnaast veel informatie over de Blackjack geschiedenis, de Blackjack waarschijnlijkheden en de Blackjack termen.

Mort




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

Valid XHTML 1.0!   Valid CSS!
TOPlist