DOM in JavaScript I: Basics

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]

• Odborný výklad s praktickými ukázkami, cvičení na počítačích.

• Prezentace probírané látky v tištěné nebo online formě

Ú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

Previous courses

JS_PROG1 - JavaScript I: Basics [JS_PROG1]

Next courses

Communication with server using AJAX and Fetch API [JS_AJAX]

Angular I: Basics [JS_ANGULAR1]

Asynchronous and reactive programming in JavaScript [JS_ASYNC]

React I: Basics [JS_REACT1]

DOM in JavaScript II: Advanced Techniques [JS_DOM2]

Introduction to Solid.js framework [JS_SOLID1]

Introduction to the Svelte framework [JS_SVELTE1]

Redux and its implementation in Angular and React applications [JS_REDUXJS1]

React II: Advanced techniques [JS_REACT2]

TypeScript - type checker for JavaScript [JS_TS1]

Introduction to Vue.js [JS_VUE1]

Automated testing of JS applications using the Jest library [JS_TEST_JEST]

Creating JS applications using the WebSocket protocol [JS_WEBSOCKET]

jQuery Framework [JS_JQUERY]