Pouze tento týden sleva až 80 % na e-learning týkající se Javy. A zároveň využij akce až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme koordinátorku kurzů a programátora, 100% home office, 100% flexibilní. Prozkoumej aktuální pozice
Java week

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.


 

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 1151x (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
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í:
79 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

 

 

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

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
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jakub Janáček:23.2.2021 14:37

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

 
Odpovědět
23.2.2021 14:37
Avatar
Jana Levorová:25.4.2021 21:45

Tak přesně od téhle kapitoly to nechápu. Dokud to psal David Čápka, tak mi bylo všechno jasné. Pak to někomu předal a nechápu nic :(

 
Odpovědět
25.4.2021 21:45
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Jana Levorová
Alesh:25.4.2021 21:54

Javascript jsem nikdy moc nestudoval, mám to ale v plánu. ;-) Každopádně tohle mi nedalo a lekci jsem letmo pročetl a nepřijde mi, že by to bylo nějaké nesrozumitelné. Co konkrétně ti není jasné? Já myslím, že jsem z toho pochopil všechno, tak bych to snad dokázal laicky "přebásnit", aby z "nechápu nic" vzniklo "dyť je to jasný"! :-)

 
Odpovědět
25.4.2021 21:54
Avatar
Jana Levorová:26.4.2021 6:55

Tak tuhle lekci jeste chapu. Od pristi uz je to na prd. Zadny jednoduchy priklad, jen popis co ktery prikaz dela. Pak je to vysvetleno v dalsi kapitole na zbytecne slozitem prikladu s editorem tabulek.

 
Odpovědět
26.4.2021 6:55
Avatar
Tomas Matusek:11.8.2021 15:33

Pěkný den,už někdo absolvoval kompletní kurz objektově orientované programování v JavaScriptu? ?

Otazka vyzni mozna hloupe, ale jak moc jste byli uspesni, pri hledani prace a se zkusenostmi z onoho kurzu, mohlo vam to a jak moc?
Děkuji.

 
Odpovědět
11.8.2021 15:33
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 38. Zobrazit vše