Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 14 - Základy práce s DOM a události v JavaScriptu

V předešlém cvičení, Řešené úlohy k 13. 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í a naprogramujeme si velmi jednoduchou webovou kalkulačku v JavaScriptu.

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ě:

DOM v JavaScriptu - Základní konstrukce jazyka JavaScript

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:

Tvoje stránka
localhost

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 tlacitko = document.getElementById("tlacitko");
let cislo1 = document.getElementById("cislo1");
let cislo2 = 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() {
    alert(parseFloat(cislo1.value) + parseFloat(cislo2.value));
}

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:

tlacitko.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.

Posluchač událostí

Ačkoli události typu onclick jsou stále funkční a mohou být vhodné pro jednoduché účely, ukážeme si ještě druhý způsob zpracování událostí. Tlačítku v něm pomocí metody addEventListener() přidáme posluchače událostí. Ten umožňuje přiřadit více obslužných funkcí ke stejné události na jednom elementu. V prvním parametru metody addEventListener() uvádíme název události a ve druhém funkci, která se má provést.

Řádek s obsluhou události kliknutí nyní přepíšeme na následující:

tlacitko.addEventListener("click", secti);

Funkci secti() předáváme jako tzv. callback.

Aplikace nyní funguje úplně stejně, ale splňuje dobré praktiky. Tlačítko v budoucnu může vyvolávat i další události.

Použití anonymní funkce

Ukažme si ještě pro úplnost, jak lze stávající kód upravit s využitím anonymní funkce. Funkci secti() tedy smažeme a její tělo přesuneme do metody addEventListener(). Celý skript kalkulačky bude vypadat takto:

let tlacitko = document.getElementById("tlacitko");
let cislo1 = document.getElementById("cislo1");
let cislo2 = document.getElementById("cislo2");

tlacitko.addEventListener("click", function() {
    alert(parseFloat(cislo1.value) + parseFloat(cislo2.value));
});

Shrňme si v krátkosti jeho jednotlivé části:

  • document je objekt reprezentující celý obsah webové stránky. V JavaScriptu je to vstupní bod pro práci s DOM.
  • getElementById() je metoda objektu document, která vyhledá a vrátí element s konkrétním id zadaném v parametru. Výsledkem je reference na konkrétní element na stránce, v našem případě na tlačítko pro součet a pole pro zadání čísel.
  • addEventListener() je metoda, která "naslouchá" konkrétním událostem, jež se na daném elementu vyskytnou. Jako parametr ji zde zadáváme název události, kterou chceme sledovat ("click") a funkci, která se má po kliknutí vykonat.

Externí soubory

JavaScript bychom ideálně neměli v HTML souboru vůbec zahlédnout, protože míchat jazyky v jednom souboru je téměř vždy špatná praktika. Jistě již víme, že např. CSS soubory se píší samostatně a z HTML se na ně poté odkazuje. Když to uděláme stejně s JavaScriptem, hovoříme o tzv. neobtruzivním JavaScriptu. Tímto výrazem označujeme kód, který v HTML nijak nepřekáží, ale je v samostatných souborech.

Doposud jsme pro jednoduchost psali náš kód v JavaScriptu přímo do HTML stránky mezi tagy <script>.

Odteď JavaScript budeme psát do externího souboru, na který z hlavní stránky odkážeme.

Ve složce projektu si tedy nyní vytvoříme podložku js/, v ní vytvoříme soubor kalkulacka.js a celý kód pro obsluhu kalkulačky (bez tagů <script>) do něj uložíme. Z HTML jej úplně odstraníme. V hlavičce naší stránky pak přidáme následující řádek, který na skript odkáže:

<script src="js/kalkulacka.js"></script>

Událost onload

Skripty se někdy alternativně vkládají také těsně před zavírací tag </body>. Skript se tak spouští až ve chvíli, kdy je stránka kompletně načtená. Stejného výsledku dosáhneme pomocí události onload, která se nalézá na objektu window. 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í využijeme znovu anonymní funkci:

window.onload = function() {
    let tlacitko = document.getElementById("tlacitko");
    let cislo1 = document.getElementById("cislo1");
    let cislo2 = document.getElementById("cislo2");

    tlacitko.addEventListener("click", function() {
        alert(parseFloat(cislo1.value) + parseFloat(cislo2.value));
    });
}

Aplikace funguje stejně dobře jako předtím. Můžeme si zkusit skript přesunout třeba pod začátek <body> a uvidíme, že se kód spustí až ve chvíli, kdy je celá stránka načtená.

Řešení pomocí posluchače událostí

I v tomto případě lze nahradit událost onload metodou addEventListener(). Ekvivalentní zápis kódu výše s využitím posluchače událostí pak vypadá takto:

document.addEventListener("DOMContentLoaded", function() {
    let tlacitko = document.getElementById("tlacitko");
    let cislo1 = document.getElementById("cislo1");
    let cislo2 = document.getElementById("cislo2");

    tlacitko.addEventListener("click", function() {
        alert(parseFloat(cislo1.value) + parseFloat(cislo2.value));
    });
});

Dnešní kalkulačka je jako vždy ke stažení v archivu pod lekcí.

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.


 

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 1872x (2.45 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Řešené úlohy k 13. lekci JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Manipulace s DOM v JavaScriptu
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
856 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity