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.
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
document.formular.policko- je ekvivalentní se zápisem
document.forms['formular']['policko'] - nebo s
document.formular[0], pokud by to vstupní pole bylo ve formuláři první, - nebo
document.forms[3][0]pro přístup k prvnímu políčku čtvrtého formuláře (počítá se to od nuly).
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
