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í. Naprogramujeme si velmi jednoduchou webovou kalkulačku v JavaScriptu, která po kliknutí na tlačítko sečte zadaná čísla:
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 tlacitkoElement = document.getElementById("tlacitko"); let cislo1Element = document.getElementById("cislo1"); let cislo2Element = 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(){ let cislo1 = parseFloat(cislo1Element.value); let cislo2 = parseFloat(cislo2Element.value); alert(cislo1 + cislo2); }
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:
tlacitkoElement.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:
V příští lekci, Zpracování událostí DOM pomocí posluchačů v JavaScriptu, vylepšíme naši webovou kalkulačku. Rozdělíme její HTML a JavaScript kód do samostatných souborů a naučíme se zpracovávat události DOM pomocí posluchačů.
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 2072x (1.33 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
