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
Pluhtík:27.6.2018 20:47
Blbost, to ty jsi zmátl mě 
n1 a n2 jsou parametry funkce. Takže s num1 a num2 reálně
pracuji, protože jsem je zadal jako parametry n1 a n2.
Pluhtík:27.6.2018 21:04
Děkuji, udělal jsem to asi minutu předtím 
každopádně s metodou bind jsi
mi pomohl (vím, že to první poděkování může vyznít ironicky, není to
ironie, myslím to vážně 
)
V předposledním odstavci je chyba ve slově "podložku". Místo toho má
být logicky slovo "podsložka". Jinak děkuji za tyto kurzy, jsou pěkné a
poučné.
Jurajs:30.12.2020 9:52
Co na onclick v JS nechápeš ? Je to normální event
Máš nějaké ID ...
viz.kód
let x = document.getElementById("mojeID");
x.onclick = myFunc;
function myFunc(){
//tvůj kód
}Toť vše...jednoduché jak facka
Zobrazeno 10 zpráv z 34. Zobrazit vše