Základy JavaScriptu, SVG
Cvičení 1
Filip Leitner
Z8144 Počítačová grafika v kartografii
Jar 2022
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Minimum 60% bodov
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 2 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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/
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 3 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – Principy
Kompilovaný × interpretovaný jazyk
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 4 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 5 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – Principy
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 6 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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/
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 7 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – Principy
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 8 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Použití
Nie vždy podľa očakávaní
console.log('Yeeeee, I am in cosole!');
alert('Noooo an annoying popup alert window :/');
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 9 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript v HTML5
Page Title
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 10 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Co umí JS?
Práce s HTML/XML DOM:
změna obsahu
změna atributů
změna stylů (HTML i CSS)
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 11 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Změna obsahu
document.getElementById("test").innerHTML = "Hello World";
const testConst = document.getElementById("test");
testConst.innerHTML = "Hello World";
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 12 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Změna atributů
Výpis atribútov elementu: console.dir()
document.getElementById("image").width = 100;
const myImage = document.getElementById("image");
myImage.width = 100;
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 13 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Změna stylů
document.getElementById("paragraph").style.fontWeight = "bold";
const myPar = document.getElementById("paragraph");
myPar.style.fontWeight = "bold";
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 14 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Operátory
standardní aritmetické operace (+, -, *, /, %)
provnávání hodnot (>, >=, <, <=, ===, !==)
používejte === a !==
porovnává hodnoty stejných datových typů
nepoužívejte ==, != (pokud nevíte co děláte)
"0" == 0 → vrátí true, často má ale nepředvídatelné chování, proto pro porovnání
hodnot používáme první variantu a hodnoty případně převedeme do stejného
datového typu pomocí parseInt(); parseFloat(); String();
logické operátory
&& AND
|| OR
! NOT
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 15 / 34
let speedKmph = distanceM / durationS / 3.6
let isEven = 90 % 2 === 0;
console.log(activity.type !== "bike");
let msg = "Your speed is " + speedKmph;
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Operátory
Addition assignment (+=)
let a = 2;
let b = 'hello‘;
console.log(a += 3); // Addition
// expected output: 5
Nullish coalescing operator (??)
let foo = null ?? 'default string‘;
console.log(foo)
// expected output: ‘default string
a ďalšie...
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 17 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak si to mám zapamatovat?
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 18 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak si to mám zapamatovat?
Nijak …
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 18 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak si to mám zapamatovat?
Nijak … stačí mozek!
… a internet!
http://www.w3schools.com/jsref/
https://javascript.info/
https://google.com/
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 18 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 19 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1. úkol - riešenie
// first task
document.getElementById("first").innerHTML = "Hello
world";→
// second task
document.getElementById("second").id = "druhy";
// third task
document.getElementById("third").style.fontSize =
"7px";→
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 20 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 %
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 21 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2. úkol - riešenie
const LIST = document.getElementById("seznam");
// první úkol
for (let i = 1; i <= 7; i++) {
const NEW_ITEM = document.createElement("li");
NEW_ITEM.innerHTML = `item ${i + 4}`;
LIST.appendChild(NEW_ITEM);
}
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 22 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2. úkol - riešenie
// druhý úkol
const PAR = document.getElementById("lipsum");
const LINKS = PAR.getElementsByTagName("a");
for (let LINK of LINKS) {
LINK.style.color = "red";
LINK.style.textDecoration = "underline";
}
// třetí úkol
const PARS = document.getElementsByTagName("p");
for (let PAR of PARS) {
if (PAR.classList.contains("big")) {
PAR.style.fontSize = "2em";
}
}
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 23 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – základní pojmy
vektor / rastr
XML (eXtensible Markup Language)
tree strom
element prvek
attribute atribut
parent rodič
child potomek
sibling sourozenec
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 24 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Tvorba grafiky
Grafický editor – Inkscape, Adobe Illustrator
Textový editor
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 25 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Výhody, nevýhody, rozdíly?
rychlost?
přesnost?
datové atributy
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 26 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG v HTML
Page Title
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 27 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Příklad SVG
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 28 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG Súradnice
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 29 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 30 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Použití CSS
Presentation attributes
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 31 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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)
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 32 / 34
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 28. 2. 4:00
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 33 / 34
Díky za pozornost!
. . . . . . . . . . . . . . . . . . . .