DOM v JavaScriptu I: Základy

Kurz je určen pro začínající programátory v jazyce JavaScript, kteří již ovládají základní syntaxi a chtějí se naučit používat JavaScript pro tvorbu interaktivních HTML stránek. Studenti si osvojí práci s DOM (Document Object Model) a naučí se vytvářet dynamické webové stránky, které reagují na uživatelské události, sbírají data z formulářů a provádějí jejich validaci. Navazující kurz JS_DOM2 se zaměřuje na další webová API, popřípadě studenti mohou dále pokračovat ve studiu konkrétních front-end knihoven, jako jsou React, Angular nebo Vue.

• Přistupovat k prvkům na HTML stránce pomocí JavaScriptu
• Používat css pro dynamické formátování stránky
• Reagovat na události DOMu, používat propagaci událostí
• Validovat formuláře pomocí vestavěné i programové logiky
• Travesovat, prohledávat DOM a manipulovat s ním

• 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

Použití Document Object Model (DOM)

• Přístup k css
• Travesování DOM
• Prohledávání DOM
• Manupulace s DOM

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

Předchozí kurzy

JavaScript I: Základy [JS_PROG1]

Navazující kurzy

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

Angular I: Základy [JS_ANGULAR1]

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

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

React I: Základy [JS_REACT1]

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

React II: Pokročilé techniky [JS_REACT2]

Úvod do frameworku Solid.js [JS_SOLID1]

Úvod do frameworku Svelte [JS_SVELTE1]

TypeScript - typová kontrola pro JavaScript [JS_TS1]

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

Úvod do Vue.js [JS_VUE1]

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

jQuery Framework [JS_JQUERY]