Adresování prvků dokumentu

zejména příklady

Změna obrázku - Změna hodnoty políčka formuláře - Vypnutí stylu

Ukážu několik velmi jednoduchých použití objektů dokumentu. Vždy budu chtít, aby se mi objekt nějak změnil po té, co se myší přejede sousední odkaz, (čemuž v zápise odpovídá událost onmouseover).

Změna obrázku

<img border="0" src="prvni.gif" name="jmeno"> <!-- obrázek, který se bude měnit -->

<a href="..." onmouseover="document.images['jmeno'].src='druhy.gif'" >přejeď</a>

Do stránky je vložen obrázek img, který má nastavený zdroj (src) a jméno (name). Jméno musí být mezi obrázky v dokumentu jednoznačné. Pomocí toho jména se přes sbírku images pak může zaměnit zdroj (src) obrázku.

Ukázka: přejeď

Na tomto místě bych měl ještě poznamenat, že jsou možné i jiné zápisy objektu konkrétního obrázku (funkční příklad). Bacha na uvozovky, apostrofy a mezery! Stačí ale naučit se zápis jeden:

v příkladu byl použit zápis document.images['jmeno']
stručněji se dá psát document['jmeno']
víte, kolikátý obrázek v dokumentu to je (počítáno od nuly)? Pak nemusí mít name. document.images[0]

Kdybych chtěl, aby se mi obrázek po odjetí myši vrátil do původního vzhledu, přidal bych událost onmouseout, případně další vychytávky. Nyní mi šlo jen o to, abych objasnil způsob adresace objektu obrázku javascriptem.

Změna hodnoty políčka formuláře

Zase budu mít vedle formulářového políčka odkaz a budu chtít, aby se při přejetí odkazu do políčka <input> zapsala hodnota "ahoj".

<form name="formular"><input type="text" name="policko" size="20" value=""><!-- prázdné políčko, kterému se bude měnit value -->

<a href="#" onmouseover="document.formular.policko.value = 'ahoj'">přejeď</a></form>

Ve stránce je formulář pojmenovaný (name) jako "formular", v něm je vstupní políčko <input>, které má name=policko. Potom zápis document.formular.policko jednoznačně identifikuje to políčko. Zápis document.formular.policko.value potom zpřístupňuje hodnotu v tomto políčku.

Ukázka: přejeď

V tomto příkladu je hodnota inputu použita pro zápis (tj. do políčka se napsalo "ahoj"). Ta hodnota se ale dá použít i pro čtení, což je mnohdy mnohem výhodnější.

Opět je možno několik různých možností zápisu objektů, z nichž stačí umět jeden. Např. zápis

S formuláři se v Javascriptu dá dělat spousta věcí. Dají se do nich zapisovat hodnoty, číst hodnoty, aktivovat pole, kontrolovat pole při odesílání, znepřístupňovat pole, zjišťovat zatržení, měnit zacílení formuláře a možná ještě něco :-)

Vypnutí stylu

Další příklad použije objekt document.styleSheets. Ten obsahuje sbírku všech prvků <style> a <link rel="stylesheet">. Zejména je umožňuje vypínat a zapínat. Zápis

<style disabled>
body {color: zelený}
</style>

nezpůsobí, že text stránky nebude zelený, protože tam je to disabled. To zatím není vůbec javascript. Ten zapojím teď. Budu mít odkaz a po jeho přejetí styl zapnu:

<a href="#" onmouseover="document.styleSheets[0].disabled = false">přejeď a zapni styl</a>

Objekt document.styleSheet[0] ukazuje na první styl v dokumentu (počítá se od nuly). Tento styl má vlastnost disabled, která určuje, zda je vypnutý. Když se disabled nastaví na false, vypnutí se zruší a styl funguje.

Kdyby bylo třeba styl opět vypnout, dá se disabled = true. Vypínání a zapínání stylů se zpravidla používá s více styly -- prostě se napíše více elementů <style> nebo <link rel="stylesheet"> a ty se pomocí disabled nechávají zapínat a vypínat. Příklad záměny stylů.

 

 

 

Na tomto místě jsem ustrnul v psaní, snad to někdy dopíšu. Můžete mě povzbudit mailem.

 

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy, objekty Příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.