Lekce 8 - Základy práce s DOM a události v JavaScriptu
V předešlém cvičení, Řešené úlohy k 7. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Až doteď jsme se ú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ř. stisknutí tlačítka vypočítá příklad nebo zobrazí/skryje určitou část webu). Takovým aktivním webům se potom říká spíše webové aplikace, než webové stránky. 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 kalkulačku v JavaScriptu.
Co je to DOM
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 webovou stránku. 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 tedy 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, např. v
elementu <p>
), 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, kdy chceme
pracovat v JavaScriptu s DOM, odkazujeme se na objekt document
,
který má pro to určené metody.
Příprava HTML stránky pro kalkulačku
Pro naši kalkulačku si vytvořme opravdu jednoduchou webovou stránku,
která bude obsahovat 2 elementy <input>
pro zadání čísel
a 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ýsledná stránka vypadá asi takto:
Všimněte si, že je náš skript vložený až pod inputy a tlačítkem. Je tomu z toho důvodu, že kdybychom ho vložili nad tyto elementy, spustil by se ve chvíli, kdy ve stránce formulářové prvky ještě nejsou a nemohl by je tak používat.
Výběr elementu na základě id
Pro výběr elementu na základě id
se hodí metoda (funkce)
getElementById()
, která bere jako parametr v závorkách textový
řetězec s id
vybíraného elementu. Naše kalkulačka bude
pracovat s vytvořeným tlačítkem i inputy na číslo, proto si je všechny
načteme do proměnných.
let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2");
Každý element má nějaké vlastnosti. Elementy <input>
(ve kterých máme čísla) například mají vlastnost value
, ve
které je hodnota, kterou do tohoto pole uživatel zadal. Vytvořme si funkci
secti()
, která si pomocí výše vytvořených proměnných
získá obsahy polí, sečte je jako 2 čísla a výsledek zobrazí funkcí
alert()
ve vyskakovacím okně.
function secti() { alert(cislo1.value + cislo2.value); }
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, začínají vždy na on
, např.
onclick
je událost kliknutí. Právě tu si vybereme na našem
tlačítku a uložíme do ní naši funkci secti()
. To způsobí,
že se funkce zavolá pokaždé, když se na tlačítko klikne.
tlacitko.onclick = secti;
Vlastností je samozřejmě více, lze obsluhovat např. pohyb myši na tlačítku a několik dalších věcí. Všimněte si, že když někam funkci ukládáme, neuvádíme závorky. Nyní máme kalkulačku téměř hotovou. Zdrojový kód (javascriptová část) celé kalkulačky je následující
let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2"); function secti() { alert(cislo1.value + cislo2.value); } tlacitko.onclick = secti;
Jak jste jistě zjistili, naše kalkulačka hodnoty z inputů sčítá jako
textové řetězce. To je logické, protože se o text jedná. Po zadání
"10" + "20"
tedy vypíše "1020"
namísto
30
. Oprava bude jednoduchá, využijeme funkce
parseInt()
, která nám text převede na číslo. Funkci
secti()
upravíme do následující podoby:
function secti() { alert(parseInt(cislo1.value) + parseInt(cislo2.value)); }
Naše kalkulačka nyní funguje dle očekávání. Abychom ji dovedli k dokonalosti, provedeme ještě 2 úpravy.
Událost onload
Abychom se nemuseli strachovat jestli je skript na konci stránky a jestli se
spouští ve chvíli, když je stránka kompletně načtená, využijeme
události onload
. Ta se nalézá na objektu window
a
spustí se ve chvíli, kdy je celá stránka načtená (i včetně obrázků a
podobně). 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í tentokrát využijeme anonymní funkce, které jsme se naučili v
minulé lekci.
window.onload = function() { let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2"); tlacitko.onclick = function() { alert(parseInt(cislo1.value) + parseInt(cislo2.value)); }; }
Aplikace funguje stejně dobře jako předtím. Můžete si zkusit skript
přesunout třeba pod začátek <body>
, aplikace bude
fungovat stejně, protože se kód spustí až ve chvíli, když je celá
stránka načtená.
Externí soubory
JavaScript bychom ideálně neměli v souboru s příponou HTML vůbec zahlédnout, protože míchat jazyky v jednom souboru je téměř vždy špatná praktika. Jistě víte, že např. CSS soubory se píší samostatně a do HTML se na ně poté odkazuje. Když to uděláme stejně s JavaScriptem, hovoříme o tzv. neobtruzivním JavaScriptu, tedy kódu, který v HTML nijak nepřekáží, ale je v samostatných souborech.
Ve složce projektu si vytvoříme podložku js
. Celý kód
výše uložme do souboru js/kalkulacka.js
(již bez elementu
<script>
) a z HTML kódu element skript úplně odstraníme.
Do hlavičky stránky (elementu <head>
) potom přidáme pouze
následující řádek, který na skript odkáže:
<script src="js/kalkulacka.js"></script>
Skripty se někdy alternativně vkládají také těsně před
</ body>
. U větších aplikací bychom si na javascriptové
soubory měli ideálně vytvořit složku, nabízí se názvy
skripty
, scripts
, js
a podobně. U
některých menších aplikací v kurzu toto zanedbáme. Dnešní kalkulačka je
jako vždy ke stažení v příloze pro případ, že jste udělali někde
chybu.
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.
Stáhnout
Staženo 986x (1.48 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
Komentáře


Zobrazeno 10 zpráv z 34. Zobrazit vše