Lekce 15 - Základy práce s DOM a události v JavaScriptu
V předešlém cvičení, Řešené úlohy k 12.-14. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
V dnešním tutoriálu základů JavaScriptu si vysvětlíme, co je to DOM a jak z něj načítat elementy z webové stránky. Až doteď jsme se totiž úspěšně vyhýbali hlavnímu využití JavaScriptu, kterým je manipulace s obsahem webové stránky. Ta zahrnuje čtení a změnu obsahu stránky v reakci na nějaké akce od uživatele (například stisknutí tlačítka vypočítá příklad, zobrazí nebo skryje určitou část webu a podobně). Místo o webových stránkách potom hovoříme o webové aplikaci.
Na události reagujeme pomocí funkcí, které již ovládáme. Dnes si v tutoriálu ukážeme, jak se takové webové aplikace dělají a naprogramujeme si velmi jednoduchou webovou kalkulačku v JavaScriptu.
Document Object Model
DOM je zkratka pro Document Object Model. Jedná se o strom elementů (objektů), ze kterých je HTML stránka složena. Objekty v DOM můžeme pomocí JavaScriptu měnit a tím samozřejmě měníme výslednou podobu webové stránky. Představme si nějaký jednoduchý HTML dokument:
<!DOCTYPE html> <html> <head> <title>Moje webová stránka</title> <meta charset="utf-8" /> </head> <body> <nav> <img src="logo.png" alt="logo" /> <ul> <li>Reference</li> <li>Fotogalerie</li> </ul> </nav> <main> <article> <p>Ahoj</p> <p>Obrovský</p> <p>Světe</p> </article> </main> </body> </html>
JavaScript tento dokument vidí jako strom objektů. Značně zjednodušeně bychom si DOM pro dokument výše mohli představit následovně:
Na obrázku chybí nějaké uzly (celý element <head>
),
chybí tam i tzv. textové uzly, což je samotný text
elementu. Nicméně vidíme, jak JavaScript stránku vnímá. Po stromu
se můžeme pohybovat a do jeho větví přidávat nové elementy, měnit jejich
obsah nebo je mazat. V naší kalkulačce budeme zatím z DOM vybírat prvky
pouze podle jejich id
. Kdykoli chceme pracovat v JavaScriptu s DOM,
odkazujeme se na objekt document
, který má pro to určené
metody.
Tvorba jednoduché webové kalkulačky
Pojďme si nyní krok po kroku připravit naši kalkulačku.
Příprava HTML stránky
Nejprve si vytvořme opravdu jednoduchou webovou stránku, která bude obsahovat:
- dva elementy typu
<input>
pro zadání čísel, - jedno tlačítko
<button>
pro provedení výpočtu.
Kalkulačka bude umět čísla jen sčítat, ale to nás zatím nebude trápit:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="UTF-8"> <title>Jednoduchá webová kalkulačka</title> </head> <body> <h1>Jednoduchá webová kalkulačka</h1> <input type="text" id="cislo1" size="5" /> + <input type="text" id="cislo2" size="5" /> <button id="tlacitko">Sečti!</button> <script type="text/javascript"> // Sem budeme psát náš kód </script> </body> </html>
Všimněte si, že všechny prvky, se kterými chceme z
JavaScriptu pracovat, jsou opatřeny atributy id
.
Výsledná stránka vypadá takto:
Všimněme si, že je náš skript vložený až na konci
<body>
. Kdybychom ho totiž vložili před elementy
<input>
a <button>
, spustil by se ve
chvíli, kdy ve stránce formulářové prvky ještě nejsou a nemohl by je
používat.
Výběr elementu na základě
id
Nejprve si elementy na stránce vybereme podle jejich id
pomocí
metody getElementById()
. Ta bere jako parametr textový řetězec s
názvem id
vybíraného elementu. Naše kalkulačka bude pracovat s
vytvořeným tlačítkem a dvěma vstupy pro čísla, proto si všechny tyto
elementy načteme do proměnných:
let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2");
Funkce secti()
Každý element má nějaké vlastnosti. Element
<input>
má například vlastnost value
, v níž
je uložena hodnota, kterou do daného pole uživatel zadal.
Vytvořme si funkci secti()
, která si pomocí výše vytvořených
proměnných získá obsah elementů <input>
, sečte je jako
dvě čísla a výsledek zobrazí funkcí alert()
ve vyskakovacím
okně:
function secti() { alert(parseFloat(cislo1.value) + parseFloat(cislo2.value)); }
Ve funkci secti()
jsme použili také funkci
parseFloat()
, která převádí textové řetězce na desetinná
čísla. Díky tomu vrátí naše kalkulačka správný výsledek. Bez funkce
parseFloat()
bychom jako součet řetězců 10
a
20
získali výsledek 1020
.
Události
Kdykoliv se v naší aplikaci něco stane (uživatel něco někam zadá,
někam klikne, dojde k chybě a podobně...), JavaScript začne spouštět tzv.
obsluhy událostí. Události nalezneme jako vlastnosti
na jednotlivých elementech z DOM. Často začínají na
on
, například onclick
je událost kliknutí. Právě
tu si vybereme na našem tlačítku a uložíme do ní naši funkci
secti()
. Vlastností je samozřejmě více, lze obsluhovat
například pohyb myši na tlačítku a další věci, které si ukážeme
později. Nastavením události onclick
v naší kalkulačce
zajistíme, že se funkce zavolá pokaždé, když se na tlačítko klikne:
tlacitko.onclick = secti;
Všimněme si, že když někam funkci ukládáme, neuvádíme závorky.
Naše aplikace je nyní funkční a můžeme si ji vyzkoušet.
Posluchač událostí
Ačkoli události typu onclick
jsou stále funkční a mohou
být vhodné pro jednoduché účely, ukážeme si ještě druhý způsob
zpracování událostí. Tlačítku v něm pomocí metody
addEventListener()
přidáme posluchače
událostí. Ten umožňuje přiřadit více obslužných
funkcí ke stejné události na jednom elementu. V prvním parametru
metody addEventListener()
uvádíme název události a ve druhém
funkci, která se má provést.
Řádek s obsluhou události kliknutí nyní přepíšeme na následující:
tlacitko.addEventListener("click", secti);
Funkci secti()
předáváme jako tzv. callback.
Aplikace nyní funguje úplně stejně, ale splňuje dobré praktiky. Tlačítko v budoucnu může vyvolávat i další události.
Použití anonymní funkce
Ukažme si ještě pro úplnost, jak lze stávající kód upravit s
využitím anonymní funkce. Funkci secti()
tedy smažeme a její
tělo přesuneme do metody addEventListener()
. Celý skript
kalkulačky bude vypadat takto:
let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2"); tlacitko.addEventListener("click", function() { alert(parseFloat(cislo1.value) + parseFloat(cislo2.value)); });
Shrňme si v krátkosti jeho jednotlivé části:
document
je objekt reprezentující celý obsah webové stránky. V JavaScriptu je to vstupní bod pro práci s DOM.getElementById()
je metoda objektudocument
, která vyhledá a vrátí element s konkrétnímid
zadaném v parametru. Výsledkem je reference na konkrétní element na stránce, v našem případě na tlačítko pro součet a pole pro zadání čísel.addEventListener()
je metoda, která "naslouchá" konkrétním událostem, jež se na daném elementu vyskytnou. Jako parametr ji zde zadáváme název události, kterou chceme sledovat ("click"
) a funkci, která se má po kliknutí vykonat.
Externí soubory
JavaScript bychom ideálně neměli v HTML souboru vůbec zahlédnout, protože míchat jazyky v jednom souboru je téměř vždy špatná praktika. Jistě již víme, že např. CSS soubory se píší samostatně a z HTML se na ně poté odkazuje. Když to uděláme stejně s JavaScriptem, hovoříme o tzv. neobtruzivním JavaScriptu. Tímto výrazem označujeme kód, který v HTML nijak nepřekáží, ale je v samostatných souborech.
Doposud jsme pro jednoduchost psali náš kód v JavaScriptu přímo do HTML
stránky mezi tagy <script>
.
Odteď JavaScript budeme psát do externího souboru, na který z hlavní stránky odkážeme.
Ve složce projektu si tedy nyní vytvoříme podložku js/
, v
ní vytvoříme soubor kalkulacka.js
a celý kód pro obsluhu
kalkulačky (bez tagů <script>
) do něj uložíme. Z HTML
jej úplně odstraníme. V hlavičce naší stránky pak přidáme
následující řádek, který na skript odkáže:
<script src="js/kalkulacka.js"></script>
Událost onload
Skripty se někdy alternativně vkládají také těsně před zavírací tag
</body>
. Skript se tak spouští až ve chvíli, kdy je
stránka kompletně načtená. Stejného výsledku dosáhneme pomocí události
onload
, která se nalézá na objektu window
.
Upravíme náš kód tak, aby se spustil právě po načtení stránky bez
ohledu na to, v jaké části stránky je vložený. K obsluze událostí
využijeme znovu anonymní funkci:
window.onload = function() { let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2"); tlacitko.addEventListener("click", function() { alert(parseFloat(cislo1.value) + parseFloat(cislo2.value)); }); }
Aplikace funguje stejně dobře jako předtím. Můžeme si zkusit skript
přesunout třeba pod začátek <body>
a uvidíme, že se
kód spustí až ve chvíli, kdy je celá stránka načtená.
Řešení pomocí posluchače událostí
I v tomto případě lze nahradit událost onload
metodou
addEventListener()
. Ekvivalentní zápis kódu výše s využitím
posluchače událostí pak vypadá takto:
document.addEventListener("DOMContentLoaded", function() { let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2"); tlacitko.addEventListener("click", function() { alert(parseFloat(cislo1.value) + parseFloat(cislo2.value)); }); });
Dnešní kalkulačka je jako vždy ke stažení v archivu pod lekcí.
V příští lekci, Manipulace s DOM v JavaScriptu, budeme vybírat prvky DOM. Díky tomu pak můžeme vytvářet prvky nové, vkládat je do jiných, přesouvat, mazat a upravovat.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 2019x (2.45 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript