JavaScript Cvičení 4 Webová kartografie Podzim 2019 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 Úkol 1 let sentence = "You have selected 7 features."; 1 převeďte větu na array (seznam, []) 2 nelezněte jedinou číselnou položku seznamu (ale ne pomocí indexu položky) 3 k nalezenému číslu přičtěte libovolné číslo 4 seznam převeďte zpátky na string (textový řetězec) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 BOM Browser Object Model globální objekty dostupné v prohlížeči není standardizováno → mezi prohlížeči se implementace může lišit pro nás základní: window, document, (console) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 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 Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 Úkol 2 1 spočítejte všechny elementy
ve vaší stránce (kde je alespoň jeden
) 2 nejděte jeden element pomocí jeho ID a změňte barvu jeho pozadí 3 vyberte si část své webové stránky a odstraňte ji z DOM 4 vytvořte nový DOM element a připojte jej na konec Bude se hodit: https://www.w3schools.com/js/js_htmldom_nodes.asp something.length document.getElementsByTagName(string) document.getElementById(string) element.style; element.style.color element.remove(); parentElement.removeChild(element) parent.appendChild(element) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 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, …) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 const FORM = document.getElementById("login"); FORM.addEventListener("submit", function(event) { alert("The form was submitted!"); }); Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 Úkol 3 1 stáhněte si vzor formuláře z https://gist.github.com/ a32a22e3c6dfa4d8b4da5fae6e193a2c 2 pomocí funkce console.log() vypište hodnotu zadanou do formuláře
po jeho odeslání (submit) 3 upravte kód tak, aby se stránka po odeslání formuláře neobnovila (googlete ...) 4 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

Bude se hodit: https://www.w3schools.com/js/js_events.asp addEventListener("submit", function(event) { … }); element.innerText parent.appendChild(element) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 Úkol 3 doplňte také výpočet obvodu (bonus) vytvořte nový element

, 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 2 změňte jeho barvu pozadí na náhodnou barvu Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol 1 Úkol 2 Eventy Úkol 3 Úkol 4 Úkol 4 1 stáhněte si vzor šachovnice z https://gist.github.com/ 766e2741e4c9c501c522fad47acae6e1 2 pomocí CSS zvýrazněte element při najetí myší 3 po kliknutí myší změňte vzhled elementu použijte funkci pro přepnutí (přidání nebo odebrání) class selected 4 přidejte do stránky element

, ve kterém budete aktualizovat počet vybraných prvků Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol Jak dál? Úkol vytvořte formulář HTML formulář , který bude sloužit k převodu: souřadnic z jednoho formátu do jiného např. stupně, minuty → stupně, minuty, vteřiny nebo vzdáleností / ploch podle daného měřítka mapy 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 atd. uživateli se výsledek objeví jako text ve stránce (např. element

) do 21. 10. 24:00 a na příští hodinu si připravte minimálně kostru formuláře + základ JS (nesplnění znamená automaticky –5 b.) odevzdat do 28. 10. 24:00 bodované (max 10 b.) odevzdávat v archivu (web.zip) Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol Jak dál? 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/ Podzim 2019 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procvičování Závěr Úkol Jak dál? Ptejte se kdykoliv kdekoliv jakkoliv co nejdřív … e-mail: leitgeb@mail.muni.cz discord: https://discord.gg/ppscspX Podzim 2019 JavaScript