Zpět na přehled

javascript, html, css

Informatika Střední škola Petr 22.10.2026

Komplexní seznámení s webovými technologiemi HTML, CSS a JavaScript, které tvoří základ moderního webového vývoje. Studenti se naučí strukturovat obsah, stylizovat prvky a přidávat interaktivitu pomocí skriptování.

Osnova hodiny

1. Úvod do webových technologií
  • Historický vývoj WWW (World Wide Web) a role Tima Bernerse-Lee
  • Architektura klient-server a role prohlížeče
  • Rozdíl mezi statickými a dynamickými webovými stránkami
  • Vztah mezi HTML (struktura), CSS (vzhled) a JavaScriptem (chování)
2. HTML – Základy struktury
  • DOCTYPE deklarace a správná struktura dokumentu
  • Sémantické prvky: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`
  • Formuláře a jejich prvky: `<input>`, `<textarea>`, `<select>`, `<button>`
  • Atributy: `id`, `class`, `data-*` pro komunikaci s CSS a JavaScriptem
  • Validace HTML – W3C validátor a nejčastější chyby
3. CSS – Stylizace a layouty
  • Selektory: prvkové, třídové (`class`), identifikátorové (`id`), atributové
  • Kombinátory selektorů: potomek, přímý potomek, sourozenec
  • Box model: margin, border, padding, content a vlastnost `box-sizing`
  • Flexbox layout: `display: flex`, `justify-content`, `align-items`, `flex-direction`
  • CSS Grid: `display: grid`, `grid-template-columns`, `grid-gap`
  • Responzivní design: media queries a mobile-first přístup
  • Cascading a specificita – jak prohlížeč řeší konflikty stylů
  • Transformace a přechody: `transform`, `transition`, `animation`
4. JavaScript – Základy jazyka
  • Syntaxe a datové typy: `string`, `number`, `boolean`, `null`, `undefined`, `object`, `symbol`
  • Proměnné: `var`, `let`, `const` a rozdíly v jejich scopu
  • Operátory: aritmetické, porovnávací, logické (`&&`, `||`, `!`)
  • Podmíněné příkazy: `if`/`else`, ternární operátor, `switch`
  • Cykly: `for`, `while`, `do...while`, `for...in`, `for...of`
  • Funkce: deklarace, výrazy, strzlové funkce (`=>`), parametry a return
5. JavaScript – DOM manipulace
  • Co je DOM (Document Object Model) – stromová reprezentace dokumentu
  • Výběr prvků: `getElementById()`, `querySelector()`, `querySelectorAll()`
  • Modifikace obsahu: `textContent`, `innerHTML`, `innerText`
  • Práce s atributy: `getAttribute()`, `setAttribute()`, `removeAttribute()`
  • Přidávání a odebírání tříd: `classList.add()`, `remove()`, `toggle()`
  • Vytváření a mazání prvků: `createElement()`, `appendChild()`, `removeChild()`
  • Navigace DOM stromu: `parentElement`, `children`, `nextSibling`, `previousSibling`
6. JavaScript – Udalosti (Events)
  • Event listener: `addEventListener()` vs inline eventy
  • Klíčové události: `click`, `submit`, `change`, `input`, `mouseover`, `keydown`
  • Event object – informace o event: `event.target`, `event.key`, `event.preventDefault()`
  • Event delegation – obsluha více prvků jedním listenerem
  • Event propagation: capturing fáze, target fáze, bubbling fáze
  • Praktické příklady: validace formuláře, dynamické přidávání do seznamu
7. JavaScript – Práce s daty
  • Pole (arrays): metody `push()`, `pop()`, `map()`, `filter()`, `reduce()`, `forEach()`
  • Objekty: vlastnosti, metody, notace tečka vs hranatá závorka
  • Destrukturování: přiřazení z polí a objektů
  • JSON (JavaScript Object Notation) – formát pro výměnu dat
  • Převody mezi datovými typy: `JSON.parse()` a `JSON.stringify()`
8. JavaScript – Asynchronní programování
  • Callback funkce – tradiční přístup k asynchronnímu kódu
  • Promise – lepší čitelnost, stavy (pending, fulfilled, rejected)
  • Řetězování Promisů: `.then()`, `.catch()`, `.finally()`
  • Async/await – syntaktický cukr nad Promisy
  • Fetch API – práce se serverem, HTTP requesty
  • Praktické příklady: stažení dat z API, zobrazení v HTML
9. Propojení HTML, CSS a JavaScriptu
  • Strategie vkládání JavaScriptu: inline, externí soubor, umístění v HTML
  • Best practices: oddělení obsahu, stylu a logiky
  • Dynamická změna CSS: modifikace `style` vlastnosti vs přidávání tříd
  • Animace pomocí JavaScriptu a CSS spolu
  • Praktický projekt: interaktivní todo aplikace (CRUD operace)
  • Debugging – Developer Tools v prohlížeči (F12), console.log(), breakpointy
10. Moderní přístupy a frameworky
  • Modulárnost: export/import, ES6 moduly
  • Úvod do frontend frameworků: React, Vue.js, Angular – jejich role
  • Build tools: webpack, Vite – zpracování kódu před nasazením
  • Package managery: npm, yarn – správa závislostí
  • Verzování: Git a GitHub pro spolupráci
  • Příprava kódu na produkci: minifikace, optimalizace
11. Bezpečnost a best practices
  • XSS (Cross-Site Scripting) – ochrana před injektáží JavaScriptu
  • CSRF (Cross-Site Request Forgery) – prevence neoprávněných akcí
  • Validace dat: na klientské straně (UX) i na serverové straně (bezpečnost)
  • Správné použití `innerHTML` vs `textContent` pro bezpečnost
  • HTTPS a CORS – bezpečná komunikace se serverem
  • Ochrana citlivých údajů – kde a jak je ukládat
12. Praktická cvičení a projekty
  • Cvičení 1: Vytvoření odpovídajícího webu s flexbox layoutem
  • Cvičení 2: Interaktivní kalkulačka se správou stavu
  • Cvičení 3: Todo seznam s persistencí dat v localStorage
  • Cvičení 4: API projekt – počasí, fotografie, či zprávy
  • Cvičení 5: Responzivní dashboard s grafem nebo mapou
  • Finální projekt: Vlastní webová aplikace kombinující všechny prvky

Klíčové pojmy

HTML (HyperText Markup Language)
Značkovací jazyk pro definici struktury a obsahu webových stránek. Používá elementy (tagy) jako `<div>`, `<p>`, `<h1>` k organizaci obsahu. Je sémantický v tom, že některé elementy mají konkrétní význam (např. `<article>`, `<nav>`).
CSS (Cascading Style Sheets)
Jazyk pro popis vizuálního stylu a layoutu HTML prvků. Umožňuje barevnost, typografii, pozicování a animace. Termín 'cascading' znamená, že se aplikují pravidla v pořadí od nejméně specifických po nejspecifičtější.
JavaScript
Interpretovaný programovací jazyk, který běží v prohlížeči a umožňuje interaktivnost webových stránek. Může manipulovat DOM, reagovat na uživatelské akce, komunikovat se serverem a správovat stav aplikace.
DOM (Document Object Model)
Stromová reprezentace HTML dokumentu v paměti prohlížeče. Každý HTML prvek je objektem (node), který lze programově přistupovat a modifikovat pomocí JavaScriptu.
Event (Udalost)
Akce iniciovaná uživatelem (klik, zadání textu, pohyb myši) nebo prohlížečem (načtení stránky, změna velikosti okna). JavaScript může na tyto události reagovat pomocí event listenerů.
Flexbox
CSS model pro jednodimenzionální layouty. Usnadňuje zarovnání a distribuci prostoru mezi prvky. Hlavní vlastnosti: `display: flex`, `justify-content`, `align-items`, `flex-direction`.
CSS Grid
CSS model pro dvoudimenzionální layouty. Umožňuje vytváření složitých mřížkovitých designů. Prvky lze umisťovat do řádků a sloupců definovaných pomocí `grid-template-columns` a `grid-template-rows`.
Asynchronní programování
Přístup, kde se úkoly vykonávají bez blokování hlavního vlákna. V JavaScriptu se používají callbacky, Promise a async/await. Zásadní pro síťové požadavky a časově náročné operace.
Promise
Objekt reprezentující budoucí výsledek asynchronní operace. Má tři stavy: pending (čekání), fulfilled (úspěch), rejected (chyba). Umožňuje čitelnější kód než tradiční callbacky.
Fetch API
Moderní rozhraní pro vytváření HTTP požadavků z JavaScriptu. Vrací Promise, který se vyrešuje na data nebo chybu. Nahrazuje starší `XMLHttpRequest`.
Sémantické HTML
Použití HTML elementů, které mají konkrétní sémantický význam (např. `<header>`, `<nav>`, `<article>`, `<footer>`). Zlepšuje přístupnost, SEO a čitelnost kódu.
Responsive design
Přístup k webovému designu, kdy se stránka přizpůsobuje různým velikostem obrazovky. Využívá CSS media queries, flexbox a relativní jednotky (em, rem, %).
Scope proměnné
Rozsah, ve kterém je proměnná dostupná. JavaScript má globální scope (dostupné všude), funkční scope (dostupné v rámci funkce) a blokový scope (dostupné v rámci bloku `{}`). Rozdíl mezi `var`, `let` a `const`.
Event Listener
Funkce, která čeká na výskyt konkrétní udalosti na prvku. Registruje se pomocí `addEventListener('eventName', callbackFunction)`. Umožňuje oddělení logiky od HTML.
Destrukturování
Syntaktický cukr pro extrahování hodnot z polí nebo vlastností z objektů. Příklad: `const {name, age} = person;` nebo `const [first, second] = array;`
JSON (JavaScript Object Notation)
Lehký textový formát pro výměnu dat. Používá se v API komunikaci. Syntaxe podobná objektům JavaScriptu, ale s přesnějšími pravidly (např. klíče musí být v uvozovkách).
localStorage
Mechanismus prohlížeče pro trvalé uložení dat na straně klienta. Data zůstávají i po zavření prohlížeče. Alternativa: sessionStorage (data zmizí po zavření).
CSS Specificity
Pravidlo, kterým prohlížeč určuje, který CSS styl se aplikuje, když se více pravidel shoduje. Pořadí: inline styly > ID selektory > třídové selektory > prvkové selektory.
Event Delegation
Technika, kdy se jeden event listener přidá na rodiče prvků místo na každý prvek zvlášť. Utilizes event bubbling k obsluze více prvků efektivněji.
Frontend Framework
Knihovna nebo sada nástrojů (React, Vue, Angular) pro strukturování a správu komplexních webových aplikací. Usnadňují správu stavu, komponent a efektivní aktualizaci DOM.

Vygenerovat materiály k hodině

Vygenerujte si, prezentaci, pracovní listy, testy, hru, kvíz, křížovky a další materiály k této hodině.

Začít zdarma Přihlásit se