Tvorba klientských aplikací v JavaScriptu

Obsah

1. O cvičení
2. Pracovní prostředí
3. HTML5
4. DOM: práce s elementy, classList
5. Cykly
6. Moduly
7. Aplikace

Představení cvičení

• Tvorba klientských aplikací v JavaScriptu
• HTML5, CSS3, Javascript
• Zápočet s body
• Semestrální práce
• Přednášky: RNDr. Ondřej Žára, Seznam.cz
• Cvičení:
  • Bc. Zdeněk Vlach, Seznam.cz
  • Bc. Petr Huřťák
  • Ing. Jan Dušek, Seznam.cz

Zápočet s bodovým hodnocením

• Docházka - povinná
• Test - 2 x max 10b.; min. 5b.
• Semestrální práce - max 35b.; min. 17.5b.
• Zápočet - min. 26b.; max. 2 neomluvené absence

Zkouška

• Možno získat body v rozpětí -10..+10 (střední hodnota nula)
• Přičtou se k bodům za semestr (ovlivní známku o max. jeden až dva stupně)

Semestrální práce

• Semestrální práce - max 35b.; min. 17.5b.
• Hodnotící tabulka
• Webová klientská aplikace využívající moderní technologie a postupy
• Studenti musí vytvořit samostatně, práce v týmech není povolena!
• Penalizace minus jeden bod za každý pracovní den, počínaje druhým týdnem zkouškového období

Pracovní prostředí

• Moderní prohlížeč s ladícími nástroji:
• Firefox, Google Chrome, Opera, Edge, Safari
• Integrované nástroje prohlížečů
• Textový editor:
• Sublime Text, PSPad, VSCode, jEdit, Eclipse, notepad? :)

HTML5 TODO applikace

• Vytvoříme stránku dle https://todomvc.com/

HTML5

• Vytvořte správnou kostru aplikace v HTML5
• zadani.html
• Podívejte se na kaskádové styly

Javascript - DOM

• Napište aplikaci, která data v proměnné todos objektu state vypíše do stránky

• let state = {
  	todos: [
  		{ text: 'Hi', completed: true  },
  		{ text: 'Hello', completed: false },
  		{ text: 'Hi there!', completed: true },
  	],
  	filter: 'all'
  };
  

• Pro výpis dat do stránky použijte DOM metody jako document.createElement a Element.append
• Zkuste také vypsat data do stránky pomocí JS/HTML stringu, zkuste document.innerHTML a Element.insertAdjacentHTML

Javascript - cykly

• Použijte for cyklus
• Nepoužívejte for - in cyklus

Javascript - IIFE

• Immediately-invoked function expression
• Odstiňte vaši aplikaci od globálního jmenného prostoru

Javascript - Moduly

• Vytvoření modulu pomocí volitelného atributu "type"
• Řeší problémy s kolizemi a umožňuje používat import/export
• Nutnost výdeje pomocí HTTP tzn. "http://"
• <script type="module" src="app.js"></script>

Řešení

Prostor pro otázky