Základy JavaScriptu, SVG
Cvičení 1
Filip Leitner
Z8144 Počítačová grafika v kartografii
Jar 2021
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Minimum 60% bodov
Odovzdanie vždy do 4.00 k danému dátumu
Cvičenie 1 => do 16.3 4:00, Cvičenie 4 => 23.4 4:00
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 2 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – Principy
Kompilovaný × interpretovaný jazyk
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 4 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – Principy
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 6 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Použití
console.log('Yeeeee, I am in cosole!');
alert('Noooo an annoying popup alert window :/');
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 8 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript v HTML5
Page Title
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 9 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 10 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 11 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Změna atributů
document.getElementById("image").width = 100;
const myImage = document.getElementById("image");
myImage.width = 100;
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 12 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 13 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak si to mám zapamatovat?
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 14 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak si to mám zapamatovat?
Nijak …
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 14 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 14 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 15 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 16 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 17 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 18 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 19 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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);
}
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 20 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 21 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Tvorba grafiky
Grafický editor – Inkscape, Adobe Illustrator
Textový editor
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 22 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Výhody, nevýhody, rozdíly?
rychlost?
přesnost?
datové atributy
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 23 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG v HTML
Page Title
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 24 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Příklad SVG
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 25 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG Súradnice
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 26 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 27 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Použití CSS
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 28 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 29 / 31
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 16. 3. 4:00
Filip Leitner Základy JavaScriptu, SVG Počítačová grafika 30 / 31
Díky za pozornost!
https://join.slack.com/t/z8144potaovgr-3mw2221/shared_
invite/zt-mnl33j86-vYMhEig_1lco5lpcK3GzjQ
. . . . . . . . . . . . . . . . . . . .