Page Title

Základy JavaScriptu, SVG Cvičení 1 Šimon Leitgeb Z8144 Počítačová grafika v kartografii Jaro 2020 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Nástroje JavaScript SVG Nástroje Textový editor: Visual Studio Code, Sublime Text, Atom, … Internetový prohlížeč, vývojářská konzole (F12) Výuka JavaScriptu, reference: https://javascript.info/ Reference JavaScript: https://www.w3schools.com/jsref/ Online HTML/CSS/JS editor: http://codepen.io/pen/ 1. úkol: Pracovní HTML soubor 2. úkol: Pracovní HTML soubor Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Nástroje JavaScript SVG JavaScript – základní pojmy program program variable proměnná constant konstanta value hodnota data type datový typ expression výraz operator operátor comment komentář function funkce keyword klíčové slovo if, else, for, while … Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Nástroje JavaScript SVG SVG – základní pojmy vektor / rastr XML (eXtensible Markup Language) tree strom element prvek attribute atribut parent rodič child potomek sibling sourozenec Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript – Principy Kompilovaný × interpretovaný jazyk Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol interpreter A person who interprets, especially one who translates speech orally or into sign language. A program that can analyse and execute a program line by line. Zdroj: https://en.oxforddictionaries.com/definition/interpreter Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript – Principy Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Interpretery JS JS engine (Chrome V8, SpiderMonkey, JavaScriptCore) just-in-time compilation Developer tools (F12) Firefox Scratchpad (odebráno od verze 72, nahrazeno multi-line konzolí) Chrome snippets (https://developers.google.com/web/ tools/chrome-devtools/snippets) Online editor http://codepen.io/pen/ Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Použití console.log('Yeeeee, I am in cosole!'); alert('Noooo an annoying popup alert window :/'); Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript v HTML5 Page Title Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Co umí JS? Práce s HTML/XML DOM: změna obsahu změna atributů změna stylů (HTML i CSS) Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Změna obsahu document.getElementById("test").innerHTML = "Hello World"; const testConst = document.getElementById("test"); testConst.innerHTML = "Hello World"; Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Změna atributů document.getElementById("image").width = 100; const myImage = document.getElementById("image"); myImage.width = 100; Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Změna stylů document.getElementById("paragraph").style.fontWeight = "bold";→ const myPar = document.getElementById("paragraph"); myPar.style.fontWeight = "bold"; Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Nijak … Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Nijak … stačí mozek! Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Nijak … stačí mozek! … a internet! Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Nijak … stačí mozek! … a internet! http://www.w3schools.com/jsref/ https://javascript.info/ https://google.com/ Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol 1. úkol Pracovní HTML soubor Pomocí konzole JavaScriptu: změňte text prvního odstavce na "Hello world" změňte id druhého odstavce na "druhy" změňte velikost fontu(font-size: 7px) u třetího odstavce na 7px Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol 2. úkol Pracovní HTML soubor Pomocí konzole JavaScriptu: přidejte 7 nových položek do seznamu(li) změňte barvu všech hypertextových odkazů v odstavci s id "lipsum" na červenou (color: red;) a podtrhněte je (text-decoration: underline;) zvětšete velikost písma (font-size: 2em;) všech odstavců (p), pokud obsahují třídu "big" (if) o 50 % Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Tipy: document.createElement("li"); element.appendChild(aChild); document.getElementsByTagName("a"); element.classList.contains(className); // pro seznamy HTML elementů použijte for (item of list) { console.log(item); } Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Tvorba grafiky Grafický editor – Inkscape, Adobe Illustrator Textový editor Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Výhody, nevýhody, rozdíly? Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Výhody, nevýhody, rozdíly? rychlost? Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Výhody, nevýhody, rozdíly? rychlost? přesnost? Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Výhody, nevýhody, rozdíly? rychlost? přesnost? datové atributy Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol SVG v HTML Page Title Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Příklad SVG Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Základní tvary rectangle rect obdélník/čtverec circle circle kruh ellipse ellipse elipsa line line úsečka polygon polygon polyline polyline lomená čára path path trasa text text Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Použití CSS Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol 3. úkol Vytvořte HTML soubor (lokálně), se všemi náležitostmi (hlava, tělo, …). Tento soubor bude obsahovat odstavec textu, který bude popisovat přiložený svg obrázek. Dále bude tento soubor obsahovat svg obrázek se žlutě ohraničenou modrou elipsou.(atributy pro elipsu jsou: cx, cy, rx, ry) Šimon Leitgeb Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol 1. bodovaný úkol Stáhněte si šablonu pro 1. bodovaný úkol Úkol vypracovávejte sami. Smíte měnit pouze část souboru mezi tagy , který se nachází na úplném konci souboru. Zbytek souboru žádným způsobem neměňte. Odevzdaný soubor bude tedy vypadat shodně jako vzorový až na část s javascriptem. Vypracovnání úkolu zabere cca 20 řádků. V případě jakýchkoli dotazů či nejasností napište na Discord nebo e-mail. Každý z následujících bodů vypracujte pomocí JavaScriptu: Pozměňte barvu všech hypertextových odkazů, které mají atribut třídy nastaven na red (class=’red’), na červenou. Změňte velikost písma všech nadpisů (h3) na 24px. Pomocí javacriptu přidejte do druhého odstavce přes for cyklus 5 hypertextových odkazů, které odkazují na is.muni.cz. Úkol odevzdávejte do 3. 3. 4:00 Šimon Leitgeb Základy JavaScriptu, SVG Díky za pozornost! https://discord.gg/TKt6s3n . . . . . . . . . . . . . . . . . . . .