Dynamické HTML
aneb jak by Diogenes chápal Javascript
Diogénes byl znám tím, že potřeboval k životu velmi málo věcí. Javascript je
relativně složitý programovací jazyk a je blbost snažit se ho naučit celý.
Koneckonců to není potřeba. Chci vás naučit jenom to málo, co potřebujete vědět
k tomu, abyste na stránkách mohli začít dělat svoje vlastní kouzla. Budu hodně
zjednodušovat.
Předpokládám, že znáte HTML a trochu toho CSS. Také že jste si už někdy
zkoušeli hrát s Javascriptem.
Příklady úloh k řešení
Ty příklady jsou trošku umělé, ale dobře ilustrativní:
- Chci třeba, aby se nějaké slovo v textu při kliknutí na něj
změnilo na
jiné slovo.
- Nebo chci, aby se po načtení dokumentu změnila barva pozadí celého
dokumentu.
- Nebo budu chtít, aby se při přejetí myší jednoho prvku objevil druhý (to
se používá ve vyskakovacím menu).
- Jiný fígl je zašedit políčko formuláře v závislosti na jiném políčku,
aby do něj nešlo psát.
Takovéhle věci byste se měli v tomto kurzu naučit. Budou to všechno aplikace Javascriptu.
Jde o změny dokumentu
Co vás naučím a co vám nakonec bude stačit:
- jak poznat, kdy se ta změna má stát (vazba na události)
- najít v dokumentu prvek, s nímž chci pracovat
- změnit obsah toho prvku
- změnit vzhled toho prvku
- případně změnit některé další věci, které s prvkem souvisejí
Upozornění pro profíky, aby to nečetli zbytečně
Jak na to půjdu: Ukážu příklady vlastností. Prvky v dokumentu hledám metodou
getElementById(). Obsah prvků měním vlastností innerHTML. Vzhled měním přes
prvek.style.vlastnost = hodnota. To je vše. Pokud tohle umíte, nemusíte číst
dál, nic vám to nedá.
Dvě důležité úvodní poznámky
- Nejedu podle standardů. Ačkoli využívám DOM (document object model) tam,
kde se mi to hodí, jindy vás budu učit nestandardní věci (ale v současnosti
zcela funkční). Pro mě je podstatné, co to funguje v prohlížečích Internet
Explorer od 5.0, v Mozille a v Opeře 7. Chcete-li ryzí standardy, hledejte
jinde nebo jděte louskat anglická slovíčka na w3c.org (a že to nakonec
nebude fungovat, je váš problém).
- Nejsem on-line poradna. Nebudu řešit vaše problémy a ladit vaše skripty.
Budu mít radost, pokud mě upozorníte na nepřesnosti a chyby.