JavaScript
Cvičení 5 – 2.časť
Webová kartografie – úvod
Podzim 2024  Filip Leitner

DOM
Document Object Model
rozhraní pro práci s HTML dokumenty
prostřednictvím DOM můžeme číst konkrétní části  dokumentu, měnit jeho strukturu, styl a obsah
implementace DOM v prohlížečích je založena na standardech,  ale mezi prohlížeči se může měnit
Přečtěte si: https://developer.mozilla.org/en-US/ docs/Web/API/Document_Object_Model/Introduction
document.getElementById(‘id‘).style.backgroundColor = ‘red‘

JAK  DÁL?
Ukážky manipulácie dom elementov
https://phuoc.ng/collection/html-dom/







Alternatíva



EVENTY
https://www.smashingmagazine.com/2013/11/ an-introduction-to-dom-events/
oznámení že se ve stránce něco stalo
např. kliknutí na tlačítko, pohyb myši, posuv obsahu stránky,  odeslání formuláře, …
eventům můžeme v kódu naslouchat a na jejich základě  provádět další akce (kontrolovat obsah
formuláře, zobrazit  další obsah, odstraňovat obsah, …)

const FORM = document.getElementById("login");  FORM.addEventListener("submit", function(event) {
alert("The form was submitted!");
});

const FORM = document.getElementById("login");  FORM.addEventListener("submit", function(event) {
alert("The form was submitted!");
});

ÚKOL  3
1
2
3
4
stáhněte si vzor formuláře z https://gist.github.com/ a32a22e3c6dfa4d8b4da5fae6e193a2c
pomocí funkce console.log() vypište hodnotu zadanou do  formuláře <form> po jeho odeslání (submit)
upravte kód tak, aby se stránka po odeslání formuláře  neobnovila (googlete ...)
využijte kód z domácího úkolu (převeďte výpočet obsahu
kruhu na funkci) a výsledek vypište do nového elementu <p>
Bude se hodit:
https://www.w3schools.com/js/js_events.asp
event.target
addEventListener("submit", function(event) { … });  element.innerText ....
parent.appendChild(element)

ÚKOL  3
doplňte také výpočet obvodu
(bonus) vytvořte nový element <div>, který bude mít tvar  kruhu
1
při každém odeslání formuláře změňte jeho rozměry tak aby  odpovídaly zadané hodnotě v pixelech
změňte jeho barvu pozadí na náhodnou barvu
2

ÚKOL  3
https://gist.github.com/FilipLeitner/2d6b3523a457b93ac2ffd2db910bcc2d


ÚKOL  4
1
2
3
stáhněte si vzor šachovnice z https://gist.github.com/ 766e2741e4c9c501c522fad47acae6e1
pomocí CSS zvýrazněte element při najetí myší  po kliknutí myší změňte vzhled elementu
použijte funkci pro přepnutí (přidání nebo odebrání) class
selected
přidejte do stránky element <p>, ve kterém budete  aktualizovat počet vybraných prvků
4

ÚKOL  4
1
https://gist.github.com/FilipLeitner/ca6e8add5df62973e367edc993835392

vytvořte formulář HTML formulář <form>, který bude sloužit k převodu:  zeměpisných souřadnic z
jednoho formátu do jiného
např. stupně, minuty → stupně, minuty, vteřiny || stupně, minuty, vteřiny -> decimal
nebo vzdáleností / plochy podle daného měřítka mapy (možnosť zmeny jednotky)
nebo výpočtu vzdálenosti po ortodromě mezi dvěma body danými  souřadnicemi
nebo jiný užitečný formulář - napište mi s návrhem :)
pro formulář vytvořte validaci vstupu, uživateli se zobrazí text ve stránce jako  varování
mělo by být možné zadat jen kladné hodnoty
v případě souřadnic zkontrolovat možné rozmezí hodnot   zamyslite sa nad ďalšími obmedzeniami ktoré
logicky vyplývajú z kontextu vášho formulára
PS: nech to vyzerá aspoň trošku k svetu
uživateli se výsledek objeví jako text ve stránce (např. element <p>)
odevzdat do 19. 11. bodované (max 20 b.)
ÚKOL

JAK  DÁL?
Přečtěte si víc a procvičujte
https://javascript.info/
e-booky zdarma
https://github.com/getify/You-Dont-Know-JS
https://medium.com/ https://bost.ocks.org/mike/
https://htmldom.dev/loop-over-a-nodelist/

Ptejte se
kdykoliv  kdekoliv  jakkoliv
co nejdřív …