DOM v JavaScriptu I: Základy

Kurz je určen pro začínající JS programátory, kteří už jsou seznámení se základní JS syntaxí, a chtěli by použít JS na tvorbu interaktivních HTML stránek. Student pak může vytvářet vlastní dynamické stránky pomocí JS a DOM, které reagují na uživatelské události a sbírají a validují data pomocí formulářů. Student pak může pokračovat ve vzdělávání v konkrétní front-end knihovně (React, Angular, Vue…).

• Dynamicky ovládat prvky na HTML stránce pomocí JavaScriptu
• Reagovat na uživatelské události
• Používat objekty poskytované prohlížečem, jako jsou Document nebo Window
• Používat a validovat formuláře pomocí programové logiky
• Používat uložiště poskytovaná prohlížečem, jako je cookies nebo LocalStorage
• Dynamicky generovat obsah dokumentu

• Základní znalost jazyka HTML na úrovni kurzu [HTMLCSS].
• Znalost syntaxe jazyka JavaScript na úrovni kurzu [JS_PROG1].

Úvod

• Skriptování na webovských stránkách
• Vlastnosti jazyka JavaScript (připomenutí)
• Začlenění JavaScriptu do HTML

Úvod do Document Object Model (DOM)

• Použití objektů
• Node, Element, Attribute a jejich vlastnosti a metody
• Vyhledání elementu v DOM

Použití událostí

• Inline registrace
• DOM Property Event Handlers
• Standardní přístup pomocí addEventListener
• Stornování defaultní akce události
• Probublávání události

Document Object Model (DOM)

• Objekt Window
• Objekt Document
• Objekt Image
• Objekt Navigator

Vytváření interaktivních formulářů

• Formulářové prvky
• Odeslání dat formuláře
• Přístup k formulářovým prvkům
• Validace dat formuláře

Moduly

• Druhy modulů
• Lazy loading

Základy Cookies a Web Storage

• Cookies
  • Vytváření a čtení cookies
  • Možnosti a omezení cookies
  • Bezpečnostní aspekty a omezení platnosti
• Local Storage
  • Ukládání dat
  • Načítání dat
  • Odstraňování dat
  • Omezení a bezpečnostní aspekty
• Session Storage
  • Rozdíly mezi Local Storage a Session Storage
  • Příklady použití

Předchozí kurzy

JavaScript I: Základy [JS_PROG1]

Navazující kurzy

Komunikace se serverem pomocí AJAX a Fetch API [JS_AJAX]

Asynchronní a reaktivní programování v JavaScriptu [JS_ASYNC]

Angular I: Základy [JS_ANGULAR1]

Redux a jeho implementace v Angular a React aplikacích [JS_REDUXJS1]

React II: Pokročilé techniky [JS_REACT2]

React I: Základy [JS_REACT1]

DOM v JavaScriptu II: Pokročilé techniky [JS_DOM2]

Úvod do frameworku Solid.js [JS_SOLID1]

Automatizované testování JS aplikací pomocí knihovny Jest [JS_TEST_JEST]

Úvod do frameworku Svelte [JS_SVELTE1]

Úvod do Vue.js [JS_VUE1]

TypeScript - typová kontrola pro JavaScript [JS_TS1]

Tvorba JS aplikací s využitím protokolu WebSocket [JS_WEBSOCKET]

jQuery Framework [JS_JQUERY]