8. diel - Základy práce s DOM a udalosti v JavaScriptu

V predchádzajúcom cvičení, Riešené úlohy k 7. lekcii JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 7. lekcii JavaScriptu , 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:

DOM v JavaScripte - Základné konštrukcie jazyka JavaScript

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:

Tvoja stránka

localhost

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, Manipulácia s DOM v JavaScripte , budeme pokračovať s manipuláciou DOM.

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é 1885x (2.45 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Michal Žůrek - misaz

Užívateľské hodnotenie:

6 hlasov

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