FLEXBOX https://www.youtube.com/watch?v=fYq5PXgSsbE https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS Reset Dvě dobré možnosti: úplný základ např.: * { margin: 0; padding: 0; } normalize.css https://github.com/necolas/normalize.css/ Blanka boilerplate https://github.com/machal/blanka-html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Webová kartografie 2 / 46 Filip Leitner HTML, CSS SRCSET + SIZES JavaScript Cvičení 5 Webová kartografie – úvod Podzim 2022 Filip Leitner ÚKOL 1 let sentence = "You have selected 7 features."; 1 převeďte větu na array (seznam, []) nelezněte jedinou číselnou položku seznamu (ale ne pomocí indexu položky) k nalezenému číslu přičtěte libovolné číslo seznam převeďte zpátky na string (textový řetězec) 2 3 4 ÚKOL 1 1 Riešenie: https://gist.github.com/FilipLeitner/d6ce6a6e083342d3f6a4377869a80e05 Klíčové dovednosti z tohoto příkladu: * použití funkcí `string.split(substring)`, `array.join(substring)` * převody mezi datovými typy: `String`, `parseFloat(string)`, `parseInt(string)` * použití cyklů: `for (let i in words) { … }` * použití podmínek: `if (a > b) { … }` 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) 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 ÚKOL 2 1 spočítejte všechny elementy

ve vaší stránce (kde je alespoň jeden

) nejděte jeden element pomocí jeho ID a změňte barvu jeho pozadí vyberte si část své webové stránky a odstraňte ji z DOM 2 3 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) ÚKOL 2 1 Riešenie: https://gist.github.com/FilipLeitner/0d090b69422973d3dc1e389cb57707c1 Úkol Jak dál? JAK DÁL? Ukážky manipulácie dom elementov https://htmldom.dev/ Ú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/ Ptejte se kdykoliv kdekoliv jakkoliv co nejdřív … e-mail: 451242@mail.muni.cz