Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

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

V předešlém cvičení, Řešené úlohy k 7. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Až doteď jsme se ú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ř. stisknutí tlačítka vypočítá příklad nebo zobrazí/skryje určitou část webu). Takovým aktivním webům se potom říká spíše webové aplikace, než webové stránky. 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 kalkulačku v JavaScriptu.

Co je to DOM

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 webovou stránku. 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 tedy dokument vidí jako strom objektů. Značně zjednodušeně bychom si DOM pro dokument výše mohli představit následovně:

DOM v JavaScriptu

Na obrázku chybí nějaké uzly (celý element <head>, chybí tam i tzv. textové uzly, což je samotný text elementu, např. v elementu <p>), 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, kdy chceme pracovat v JavaScriptu s DOM, odkazujeme se na objekt document, který má pro to určené metody.

Příprava HTML stránky pro kalkulačku

Pro naši kalkulačku si vytvořme opravdu jednoduchou webovou stránku, která bude obsahovat 2 elementy <input> pro zadání čísel a 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ýsledná stránka vypadá asi takto:

Your page
localhost
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Všimněte si, že je náš skript vložený až pod inputy a tlačítkem. Je tomu z toho důvodu, že kdybychom ho vložili nad tyto elementy, spustil by se ve chvíli, kdy ve stránce formulářové prvky ještě nejsou a nemohl by je tak používat.

Výběr elementu na základě id

Pro výběr elementu na základě id se hodí metoda (funkce) getElementById(), která bere jako parametr v závorkách textový řetězec s id vybíraného elementu. Naše kalkulačka bude pracovat s vytvořeným tlačítkem i inputy na číslo, proto si je všechny načteme do proměnných.

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

Každý element má nějaké vlastnosti. Elementy <input> (ve kterých máme čísla) například mají vlastnost value, ve které je hodnota, kterou do tohoto pole uživatel zadal. Vytvořme si funkci secti(), která si pomocí výše vytvořených proměnných získá obsahy polí, sečte je jako 2 čísla a výsledek zobrazí funkcí alert() ve vyskakovacím okně.

function secti() {
    alert(cislo1.value + cislo2.value);
}

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, začínají vždy na on, např. onclick je událost kliknutí. Právě tu si vybereme na našem tlačítku a uložíme do ní naši funkci secti(). To způsobí, že se funkce zavolá pokaždé, když se na tlačítko klikne.

tlacitko.onclick = secti;

Vlastností je samozřejmě více, lze obsluhovat např. pohyb myši na tlačítku a několik dalších věcí. Všimněte si, že když někam funkci ukládáme, neuvádíme závorky. Nyní máme kalkulačku téměř hotovou. Zdrojový kód (javascriptová část) celé kalkulačky je následující

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;

Jak jste jistě zjistili, naše kalkulačka hodnoty z inputů sčítá jako textové řetězce. To je logické, protože se o text jedná. Po zadání "10" + "20" tedy vypíše "1020" namísto 30. Oprava bude jednoduchá, využijeme funkce parseInt(), která nám text převede na číslo. Funkci secti() upravíme do následující podoby:

function secti() {
    alert(parseInt(cislo1.value) + parseInt(cislo2.value));
}

Naše kalkulačka nyní funguje dle očekávání. Abychom ji dovedli k dokonalosti, provedeme ještě 2 úpravy.

Událost onload

Abychom se nemuseli strachovat jestli je skript na konci stránky a jestli se spouští ve chvíli, když je stránka kompletně načtená, využijeme události onload. Ta se nalézá na objektu window a spustí se ve chvíli, kdy je celá stránka načtená (i včetně obrázků a podobně). 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í tentokrát využijeme anonymní funkce, které jsme se naučili v minulé lekci.

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));
    };
}

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

Externí soubory

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

Ve složce projektu si vytvoříme podložku js. Celý kód výše uložme do souboru js/kalkulacka.js (již bez elementu <script>) a z HTML kódu element skript úplně odstraníme. Do hlavičky stránky (elementu <head>) potom přidáme pouze následující řádek, který na skript odkáže:

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

Skripty se někdy alternativně vkládají také těsně před </ body>. U větších aplikací bychom si na javascriptové soubory měli ideálně vytvořit složku, nabízí se názvy skripty, scripts, js a podobně. U některých menších aplikací v kurzu toto zanedbáme. Dnešní kalkulačka je jako vždy ke stažení v příloze pro případ, že jste udělali někde chybu.

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.


 

Stáhnout

Staženo 986x (1.48 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Řešené úlohy k 7. lekci JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
43 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 (13)

 

 

Komentáře
Zobrazit starší komentáře (24)

Avatar
Pluhtík
Člen
Avatar
Pluhtík:27.6.2018 20:37

Ano, já vím, došlo mi to.

Tak jinak. Není snad hodnotou elementu string? A jestli ano, tak n1.value mi nepomůže dosáhnout kalkulačky (přinejmenším ne takové kalkulačky, kterou bych mohl reálně použít na práci s čísly), nebo se mýlím?

Já mám v kódu

num1 = document.getElementById('n1');
num2 = document.getElementById('n2');
num1 = parseInt(num1.value);
num2 = parseInt(num2.value);

Aha, tak už vidím, proč jsem tě zmátl. Já omylem nepoužíval num1, num2 v té funkci, ale pouze n1, n2.
Bude tedy můj kód korektní za předpokladu, že doplním metodu bind a n1, n2 uvnitř funkce nahradím proměnnýma num1 a num2?

 
Odpovědět
27.6.2018 20:37
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Pluhtík
Pluhtík:27.6.2018 20:47

Blbost, to ty jsi zmátl mě :D n1 a n2 jsou parametry funkce. Takže s num1 a num2 reálně pracuji, protože jsem je zadal jako parametry n1 a n2.

 
Odpovědět
27.6.2018 20:47
Avatar
Odpovídá na Pluhtík
Michal Žůrek - misaz:27.6.2018 21:01

aha, takže odmaž

num1 = parseInt(num1.value);
num2 = parseInt(num2.value);

a ve výpočtu nahraď n1.value za parseInt(n1.value)

 
Odpovědět
27.6.2018 21:01
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Pluhtík:27.6.2018 21:04

Děkuji, udělal jsem to asi minutu předtím :) každopádně s metodou bind jsi mi pomohl (vím, že to první poděkování může vyznít ironicky, není to ironie, myslím to vážně ;) )

 
Odpovědět
27.6.2018 21:04
Avatar
Tomáš Pekár:26.3.2020 17:07

V předposledním odstavci je chyba ve slově "podložku". Místo toho má být logicky slovo "podsložka". Jinak děkuji za tyto kurzy, jsou pěkné a poučné. :)

 
Odpovědět
26.3.2020 17:07
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Martin Přikryl:29.12.2020 15:32

onclick je zde málo vysvětlený. Jen je zmíněno, že vkládáme funkci a neuvádíme závorky. Už tam ale není důvod. A důvodem nejspíš je, že kdybychom uvedli závorky, již nepředáváme funkci, ale její výsledek. Ale jak je to s funkcemi s parametry - ty v onclick nelze použít?

 
Odpovědět
29.12.2020 15:32
Avatar
Jurajs
Člen
Avatar
Odpovídá na Martin Přikryl
Jurajs:30.12.2020 9:52

Co na onclick v JS nechápeš ? Je to normální event
Máš nějaké ID ...
viz.kód

let x = document.getElementById("mojeID");
x.onclick = myFunc;

function myFunc(){
   //tvůj kód
}

Toť vše...jednoduché jak facka :D :D

 
Odpovědět
30.12.2020 9:52
Avatar
Martin Přikryl:30.12.2020 11:51

Díky za odpověď. Myslím, že nejsem jediný, kdo v tom nemá úplně jasno. V dřívějším komentáři se někdo pokoušel např.

sum.onclick = after_Button(1, num1, num2);

Už ale chápu, že musí přiřadit funkce nevyžadující parametr - a to opravdu funkce a ne její volání, tedy bez závorek.
A jako další omezení se zdá, že funkce předaná do onclick nesmí být metoda. Tedy přesněji metoda, která používá "this". Nějak je to tu zmíněno v části o OOP.
Např. toto funguje, ale pokud se uvnitř metody unlock() používá this, nebude definované:

image.onclick = this.unlock;

V takovém případě je třeba použít např.:

image.onclick = () => this.unlock();

Zkrátka řekl bych, že už jsem na to došel, ale bylo by lepší, kdyby to tu bylo hned zřejmě vysvětleno a nemusel bych na to docházet.
Takto by nejspíš šly vyřešit i ty parametry:

sum.onclick = () => after_Button(1, num1, num2);
 
Odpovědět
30.12.2020 11:51
Avatar
Odpovídá na Martin Přikryl
Martin Přikryl:31.12.2020 14:42

Tak je to dokonce ještě složitější, funkce předávaná v onclick dostává jeden parametr, a to instanci MouseEvent. Proto tvrdím, že tu není onclick dostatečně vzsvětlený. Viz. https://developer.mozilla.org/…lers/onclick

 
Odpovědět
31.12.2020 14:42
Avatar
Jakub Janáček:23. února 14:37

Opět skvělý článek, moc Děkuji !!!

 
Odpovědět
23. února 14:37
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 34. Zobrazit vše