8. diel - Základy práce s DOM a udalosti v JavaScriptu
V minulej lekcii, Cyklus for v JavaScripte , sme sa naučili pracovať s for
cyklom.
V minulej lekcii, Cyklus for v JavaScripte , sme sa naučili používať funkcie. Až doteraz sme sa úspešne vyhýbali hlavnému využitie 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 užívateľa (napr. Stlačenie tlačidla vypočíta príklad alebo zobrazí / skryje určitú časť webu). Takým aktívnym webom sa potom hovorí skôr webové aplikácie, ako webové stránky. Na udalosti reagujeme pomocou funkcií, ktoré už ovládame. Dnes si v tutoriálu ukážeme, ako sa také webové aplikácie robia a naprogramujeme si veľmi jednoduchú kalkulačku v JavaScripte.
Čo je to DOM
DOM je skratka pre Document Object Model. Jedná sa 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ú webovú stránku. 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>Svete</p> </article> </main> </body> </html>
JavaScript teda dokument vidí ako strom objektov. Značne zjednodušene by sme si DOM pre dokument vyššie mohli predstaviť nasledovne:
Na obrázku chýba nejaké uzly (celý element <head>
,
chýba tam aj tzv. Textové uzly, čo je samotný text elementu, napr. V
elemente <p>
), však vidíme ako JavaScript stránku vníma.
Po stromu 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, keď chceme
pracovať v JavaScripte s DOM, odkazujeme sa na objekt document
,
ktorý má pre to stanovenej metódy.
Príprava HTML stránky pre kalkulačku
Pre našu kalkulačku si vytvorme naozaj jednoduchú webovú stránku, ktorá
bude obsahovať 2 elementy <input>
pre zadanie čísel a
jedno tlačidlo <button>
pre 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">Spočítaj!</button> <script type="text/javascript"> // Sem budeme písať náš kód </script> </body> </html>
Výsledná stránka vyzerá asi takto:
Všimnite si, že je náš skript vložený až pod Input a tlačidlom. Je tomu z toho dôvodu, že keby sme ho vložili nad tieto elementy, spustil by sa vo chvíli, keď v stránke formulárové prvky ešte nie sú a nemohol by ich tak používať.
Výber elementu na základe id
Pre výber elementu na základe id
sa hodí metóda (funkcia)
getElementById()
, ktorá berie ako parameter v zátvorkách
textový reťazec s id
vyberaného elementu. Naša kalkulačka bude
pracovať s vytvoreným tlačidlom i Input na číslo, preto si ich všetky
načítame do premenných.
let tlacitko = document.getElementById("tlacitko"); let cislo1 = document.getElementById("cislo1"); let cislo2 = document.getElementById("cislo2");
Každý element má nejaké vlastnosti. Elementy <input>
(v ktorých máme čísla) napríklad majú vlastnosť value
, v
ktorej je hodnota, ktorú do tohto poľa užívateľ zadal. Vytvorme si funkciu
secti()
, ktorá si pomocou vyššie vytvorených premenných získa
obsahy polí, spočíta je ako 2 čísla a výsledok zobrazí funkcií
alert()
vo vyskakovacom okne.
function secti() { alert(cislo1.value + cislo2.value); }
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, začínajú vždy na on
, napr.
onclick
je udalosť kliknutie. Práve tu si vyberieme na našom
tlačidle a uložíme do nej našu funkciu secti()
. To spôsobí,
že sa funkcia zavolá zakaždým, keď sa na tlačidlo klikne.
tlacitko.onclick = secti;
Vlastnosťou je samozrejme viac, možno obsluhovať napr. Pohyb myši na tlačidle a niekoľko ďalších vecí. Všimnite si, že keď niekam funkciu ukladáme, neuvádzame zátvorky. Teraz máme kalkulačku takmer hotovú. Zdrojový kód (JavaScriptová časť) celej kalkulačky je nasledujúca
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;
Ako ste iste zistili, naša kalkulačka hodnoty z inputov sčíta ako
textové reťazce. To je logické, pretože sa o text jedná. Po zadaní
"10" + "20"
teda vypíše "1020"
namiesto
30
. Oprava bude jednoduchá, využijeme funkcie
parseInt()
, ktorá nám text prevedie na číslo. Funkciu
secti()
upravíme do nasledujúcej podoby:
function secti() { alert(parseInt(cislo1.value) + parseInt(cislo2.value)); }
Naša kalkulačka teraz funguje podľa očakávaní. Aby sme ju doviedli k dokonalosti, vykonáme ešte 2 úpravy.
Udalosť onload
Aby sme sa nemuseli strachovať či je skript na konci stránky a či sa
spúšťa vo chvíli, keď je stránka kompletne načítané, využijeme
udalosti onload
. Tá sa nachádza na objekte window
a
spustí sa vo chvíli, keď je celá stránka načítaná (aj vrátane obrázkov
a podobne). Upravíme náš kód tak, aby sa spustil práve po načítaní
stránky bez ohľadu na to v akej časti stránky je vložený. Na obsluhu
udalostí tentoraz využijeme anonymné funkcie, ktoré sme sa naučili v
minulej lekcii.
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)); }; }
Aplikácia funguje rovnako dobre ako predtým. Môžete si skúsiť skript
presunúť napríklad pod začiatok <body>
, aplikácia bude
fungovať rovnako, pretože sa kód spustí až vo chvíli, keď je celá
stránka načítaná.
Externé súbory
JavaScript by sme ideálne nemali v súbore s príponou HTML vôbec zahliadnuť, pretože miešať jazyky v jednom súbore je takmer vždy zlá praktika. Iste viete, že napr. CSS súbory sa píšu samostatne a do HTML sa na ne potom odkazuje. Keď to urobíme rovnako s JavaScriptom, hovoríme o tzv. Neobtruzivním JavaScriptu, teda kódu, ktorý v HTML nijako neprekáža, ale je v samostatných súboroch.
V priečinku projektu si vytvoríme podložku js
. Celý kód
vyššie uložme do súboru js/kalkulacka.js
(už bez elementu
<script>
) az HTML kódu element skript úplne odstránime. Do
hlavičky stránky (elementu <head>
) potom pridáme iba
nasledujúci riadok, ktorý na skript odkáže:
<script src="js/kalkulacka.js"></script>
Skripty sa niekedy alternatívne vkladajú tiež tesne pred
</ body>
. U väčších aplikácií by sme si na
javascriptové súbory mali ideálne vytvoriť priečinok, ponúka zo názvy
skripty
, scripts
, js
a podobne. U
niektorých menších aplikácií v kurze toto zanedbáme. Dnešné kalkulačka
je ako vždy k stiahnutiu v prílohe pre prípad, že ste urobili niekde chybu.
V budúcej lekcii, Riešené úlohy k 7.-8. lekciu JavaScriptu , budeme pokračovať s manipuláciou DOM.
V nasledujúcom cvičení, Riešené úlohy k 7.-8. lekciu JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
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é 1903x (2.45 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript