Page Title

Základy JavaScriptu, SVG Cvičení 1 Z8144 Počítačová grafika v kartografii Jaro 2019 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Jaro 2019 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 … Jaro 2019 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 Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript – Principy Kompilovaný × interpretovaný jazyk Jaro 2019 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 Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript – Principy Jaro 2019 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, Chrome snippets (https://developers. google.com/web/tools/chrome-devtools/snippets) Online editor http://codepen.io/pen/ Jaro 2019 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 :/'); Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol JavaScript v HTML5 Page Title Jaro 2019 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 obsah změna atributů změna stylů (HTML i CSS) Jaro 2019 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"; Jaro 2019 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; Jaro 2019 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"; Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Principy Použití 1. úkol 2. úkol Jak si to mám zapamatovat? Jaro 2019 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 … Jaro 2019 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! Jaro 2019 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! Jaro 2019 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/ Jaro 2019 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 Jaro 2019 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 % Jaro 2019 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); } Jaro 2019 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 Jaro 2019 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? Jaro 2019 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? Jaro 2019 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? Jaro 2019 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 Jaro 2019 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 Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Příklad SVG Jaro 2019 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 Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol Tvorba Příklady SVG Základní tvary 3. úkol Použití CSS Jaro 2019 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 bute tento soubor obsahovat svg obrázek s žlutě ohraničenou modou elipsou.(atributy pro elipsu jsou: cx, cy, rx, ry) Jaro 2019 Základy JavaScriptu, SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Opakování JavaScript SVG Domácí úkol 1. bodovaný úkol Stáhněte si šablonu pro 1. bodovaný úkol. V tomto souboru proveďte následující změny a poté jej odevzdejte do odevzdávárny k tomu určené v ISu: Ú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. Řešení je podobné jako ukázky na prvním cvičení. Prakticky by to mělo vypadat tak, že pomocí javascriptu umístěného mezi výše zmíněné tagy provedete požadované změny v souboru. 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. Jaro 2019 Základy JavaScriptu, SVG Díky za pozornost! https://discord.gg/UHTPUDU . . . . . . . . . . . . . . . . . . . .