15. diel - Základy práce s DOM a udalosti v JavaScriptu
V predchádzajúcom cvičení, Riešené úlohy k 12.-14. lekciu JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V dnešnom tutoriále základov JavaScriptu si vysvetlíme, čo je to DOM a ako z neho načítať elementy z webovej stránky. Až doteraz sme sa totiž úspešne vyhýbali hlavnému využitiu JavaScriptu, ktorým je manipulácia s obsahom webovej stránky. Tá zahŕňa čítanie a zmenu obsahu stránky v reakcii na nejaké akcie od používateľa (napríklad stlačenie tlačidla vypočíta príklad, zobrazí alebo skryje určitú časť webu a podobne). Miesto o webových stránkach potom hovoríme o webovej aplikácii.
Na udalosti reagujeme pomocou funkcií, ktoré už ovládame. Dnes si v tutoriále ukážeme, ako sa takéto webové aplikácie robia. Naprogramujeme si veľmi jednoduchú webovú kalkulačku v JavaScripte, ktorá po kliknutí na tlačidlo sčíta zadané čísla:
Document Object Model
DOM je skratka pre Document Object Model. Ide o strom elementov (objektov), z ktorých je HTML stránka zložená. Objekty v DOM môžeme pomocou JavaScriptu meniť a tým samozrejme meníme výslednú podobu webovej stránky. Predstavme si nejaký jednoduchý HTML dokument:
<!DOCTYPE html> <html> <head> <title>Moja webová stránka</title> <meta charset="utf-8" /> </head> <body> <nav> <img src="logo.png" alt="logo" /> <ul> <li>Referencie</li> <li>Fotogaléria</li> </ul> </nav> <main> <article> <p>Ahoj</p> <p>Obrovský</p> <p>Svet</p> </article> </main> </body> </html>
JavaScript tento dokument vidí ako strom objektov. Značne zjednodušene by sme si DOM pre dokument vyššie mohli predstaviť nasledovne:
Na obrázku chýbajú nejaké uzly (celý element <head>),
chýbajú tam aj tzv. textové uzly, čo je samotný text
elementu. Napriek tomu vidíme, ako JavaScript stránku vníma. Po
strome sa môžeme pohybovať a do jeho vetiev pridávať nové elementy, meniť
ich obsah alebo ich mazať. V našej kalkulačke budeme zatiaľ z DOM vyberať
prvky iba podľa ich id. Kedykoľvek chceme pracovať v JavaScripte
s DOM, odkazujeme sa na objekt document, ktorý má na to určené
metódy.
Tvorba jednoduchej webovej kalkulačky
Poďme si teraz krok po kroku pripraviť našu kalkulačku.
Príprava HTML stránky
Najprv si vytvorme naozaj jednoduchú webovú stránku, ktorá bude obsahovať:
- dva elementy typu
<input>na zadanie čísel, - jedno tlačidlo
<button>na vykonanie výpočtu.
Kalkulačka bude vedieť čísla len sčítať, ale to nás zatiaľ nebude trápiť:
<!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šimnite si, že všetky prvky, s ktorými chceme z JavaScriptu
pracovať, sú opatrené atribútmi id.
Výsledná stránka vyzerá takto:
Všimnime si, že je náš skript vložený až na konci
<body>. Keby sme ho totiž vložili pred elementy
<input> a <button>, spustil by sa vo
chvíli, keď vo stránke formulárové prvky ešte nie sú a nemohol by ich
používať.
Výber elementu na základe
id
Najprv si elementy na stránke vyberieme podľa ich id pomocou
metódy getElementById(). Tá berie ako parameter textový reťazec
s názvom id vyberaného elementu. Naša kalkulačka bude pracovať
s vytvoreným tlačidlom a dvoma vstupmi pre čísla, preto si všetky tieto
elementy načítame do premenných:
let tlacitkoElement = document.getElementById("tlacitko"); let cislo1Element = document.getElementById("cislo1"); let cislo2Element = document.getElementById("cislo2");
Funkcia secti()
Každý element má nejaké vlastnosti. Element
<input> má napríklad vlastnosť value, v
ktorej je uložená hodnota, ktorú do daného poľa
používateľ zadal. Vytvorme si funkciu secti(), ktorá si pomocou
vyššie vytvorených premenných získa obsah elementov
<input>, sčíta ich ako dve čísla a výsledok zobrazí
funkciou alert() vo vyskakovacom okne:
function secti(){ let cislo1 = parseFloat(cislo1Element.value); let cislo2 = parseFloat(cislo2Element.value); alert(cislo1 + cislo2); }
Vo funkcii secti() sme použili aj funkciu
parseFloat(), ktorá prevádza textové reťazce na desatinné
čísla. Vďaka tomu vráti naša kalkulačka správny výsledok. Bez funkcie
parseFloat() by sme ako súčet reťazcov 10 a
20 získali výsledok 1020.
Udalosti
Kedykoľvek sa v našej aplikácii niečo stane (používateľ niečo niekam
zadá, niekam klikne, dôjde k chybe a podobne...), JavaScript začne
spúšťať tzv. obsluhy udalostí. Udalosti nájdeme ako
vlastnosti na jednotlivých elementoch z DOM. Často
začínajú na on, napríklad onclick je udalosť
kliknutia. Práve tú si vyberieme na našom tlačidle a uložíme do nej našu
funkciu secti().
Vlastností je samozrejme viac, možno obsluhovať napríklad pohyb myši na
tlačidle a ďalšie veci, ktoré si ukážeme neskôr. Nastavením udalosti
onclick v našej kalkulačke zabezpečíme, že sa funkcia zavolá
vždy, keď sa na tlačidlo klikne:
tlacitkoElement.onclick = secti;
Všimnime si, že keď niekam funkciu ukladáme, neuvádzame zátvorky.
Naša aplikácia je teraz funkčná a môžeme si ju vyskúšať:
V budúcej lekcii, Manipulácia s DOM v JavaScripte, budeme vyberať prvky DOM. Vďaka tomu potom môžeme vytvárať prvky nové, vkladať ich do iných, presúvať, mazať a upravovať.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 0x (1.33 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
