6.Díl: Dynamické HTML
Dynamické HTML
Dnes si představíme spojení a spolupráci CSS s JavaScriptem. Pomocí JavaScriptu můžeme téměř libovolně manipulovat s CSS styly a tak vytvářet velice zajímavé efekty. Různá grafická menu reagující na uživatele a další zajímavé věci.
Nečekejte ale nějaké zvláštnosti, je to pouze řízení stylů pomocí Javascriptu. Celá tato tecnika se souhrnně označuje DHTML - Dynamické HTML.
Podpora prohlížečů?
Ještě než začneme, povíme si něco o tom, jak DHTML běhá pod různými prohlížeči. S podporou prohlížečů to není zrovna nejlepší. Základním předpokladem podpory DHTML je, aby prohlížeč podporoval CSS a JavaScript. Většinou ale ani to nestačí. Nicméně všechny nové moderní prohlížeče DHTML podporují. (Opera 8, Firefox, IE 6 sp1,....) U starších prohlížečů budete však podporu hledat marně. Proto není nejlepší na DHTML stavět celý desing nebo layout vašich stránek. DHTML používejte střídmě, a pouze na takové věci, u kterých nebude vadit chyba zobrazení ve starších prohlížečích.
(Je například hloupost udělat celé menu pomocí DHTML a nenabídnout žádný jiný způsob navigace mezi stránkami. Uživatelé starších prohlížečů pak přicházejí o jakoukoli možnost se nějak na stránce navigovat, a to není dobré.)
Takže pojďme do toho.
K jednotlivým CSS vlastnostem prvků v dokumentu se přistupuje pomocí objektu style.
Zápis je následující
jednoznacna_cesta_k_prvku.style.css_vlastnost = 'hodnota';
Příklad
<div width="150" onmouseover="this.style.backgroundColor = 'blue'">Najeď sem, budu mít modré pozadí!!</div>
Zkuste tohle použít v dokumentu. Pokud máte prohlížeč s podporou DHTML, tak když najedete myší na text, který obsahuje element div, zbarví se pozadí elementu modře.
Proč tomu tak je, aneb krátká analýza zdrojového kódu:
Vlastnost onmouseover je událost JavaScriptu, která se dá přidělit téměř všem zobrazitelným prvkům v dokumentu. Kód JavaScriptu zapsaný jako hodnota vlastnosti onmouseover se vykoná vdžy, když najedete na objekt s touto událostí myší.
Slovíčko this slouží v tomto případě k určení cesty k elementu v dokumentu. Toto klíčové slovo odkazuje na objekt, který vyvolal událost, která spustila skript. V tomto případě náš tag DIV.
Dále následuje tečka, která signalizuje přístup k objektu elementu DIV. (objektově orientovaní programátoři už jistě znají i jiných jazyků - Java, C++ a další).
Dále následuje název objektu, který chceme modifikovat. V DHTML nás bude zajímat objekt style, který umožňuje manipulovat se styly objektů.
Za objektem style je další tečka, která opět signalizuje přístup k podobjektu objektu style. Tímto podobjektem bude daná CSS vlastnost, jejíž hodnotu chcete modifikovat (její název je stejný jako v CSS, jenom pomlčky se vynechávají a místo nich se píše první písmeno slova za pomlčkou velkým písmenem). Např. název vlastnosti v CSS :
background-color
název v DHTML
backgroundColor
Nehledejte vtom žádnou vědu, není to nic složitého.
Potom následuje rovná se (=), což je ve většině programovacích jazycích operátor přiřazení. Jednoduše: Vloží hodnotu napsanou na pravé straně, do objektu specifikovaného na straně levé.
V tomto případě:
this.style.backgroundColor = 'blue'
se vloží hodnota 'blue' (všimněte si apostrofů, na ty nesmíte zapomínat, bez nich to nepůjde!) do objektu this.style.backgroundColor
Další příklad:
<div width="150" onclick="this.style.color = 'red'">Klikni, zčervenám!!</div>
Tentokrát byla událost vyvolávající spuštění kódu změněna na onclick - spouští se při kliknutí.
A měněná CSS vlastnost byla změněna
Pokud chceme zapsat více příkazů JavaScriptu, můžeme je oddělit středníkem. všechny pak budou spuštěny popořadě. Viz tento příklad:
width="150" onmouseout="this.style.backgroundColor = 'blue'; this.style.color = 'red'">Najeď a odjeď myší odtud.</div>
Tak tohle byla kombinace dvou předchozích příkladů v jeden.
Tak, zkuste s tímto experimentovat. Příště si dáme pokračování DHTML, protože mi přijde škoda, nezabývat se tak zajímavou technologií.