NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předešlém cvičení, Řešené úlohy k 12.-14. 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í. Naprogramujeme si velmi jednoduchou webovou kalkulačku v JavaScriptu, která po kliknutí na tlačítko sečte zadaná čísla:

Jednoduchá webová kalkulačka
localhost

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 tlacitkoElement = document.getElementById("tlacitko");
let cislo1Element = document.getElementById("cislo1");
let cislo2Element = 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(){
    let cislo1 = parseFloat(cislo1Element.value);
    let cislo2 = parseFloat(cislo2Element.value);

        alert(cislo1 + cislo2);
}

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:

tlacitkoElement.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:

Tvoje stránka
localhost

V příští lekci, Zpracování událostí DOM pomocí posluchačů v JavaScriptu, vylepšíme naši webovou kalkulačku. Rozdělíme její HTML a JavaScript kód do samostatných souborů a naučíme se zpracovávat události DOM pomocí posluchačů.


 

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

 

Předchozí článek
Řešené úlohy k 12.-14. lekci JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Zpracování událostí DOM pomocí posluchačů v JavaScriptu
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
1135 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