skrabanek
1 month ago
7 changed files with 265 additions and 3 deletions
@ -0,0 +1,29 @@ |
|||
# 21 - Souhrnné Opakování |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
Tato lekce slouží k upevnění znalostí z předchozích částí kurzu, zejména práce s Bootstrapem, layoutem a základní DOM manipulací. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **Bootstrap Layout** - container, row, col a jejich kombinace |
|||
- **Komponenty** - Card, Navbar, Buttons |
|||
- **Responzivita** - breakpointy a utility třídy |
|||
- **DOM interakce** - načítání dat a jejich zobrazování v Bootstrap struktuře |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `index.html` - hlavní soubor s opakováním |
|||
- `css/` - vlastní styly pro doplnění Bootstrapu |
|||
- `js/` - JavaScriptová logika |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `index.html` v prohlížeči. |
|||
2. Projděte si strukturu stránky a podívejte se, jak jsou použity Bootstrap třídy. |
|||
3. Zkuste změnit barvy nebo rozložení prvků pomocí utility tříd. |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 20_ajax - Práce s daty |
|||
- **Navazující:** 22_javascripthra - Praktické využití v logice hry |
|||
@ -0,0 +1,31 @@ |
|||
# 22 - JavaScript Hra (Logika a DOM) |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
V této lekci si vytvoříte jednoduchou hru, na které si procvičíte herní logiku, stavové proměnné a dynamickou aktualizaci HTML. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **Stav hry (State)** - proměnné, které drží aktuální skóre, počet životů apod. |
|||
- **Události (Events)** - reakce na kliknutí, stisk klávesy |
|||
- **DOM Manipulace** - přepisování textu, měnění barev a obrázků podle stavu hry |
|||
- **Podmínky a Cykly** - logika pro výhru/prohru |
|||
- **Raw vs. Final** - rozdíl mezi základní kostrou (`index_raw.html`) a hotovým projektem |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `index.html` - hotová hra |
|||
- `index_raw.html` - výchozí stav pro začátek kódování |
|||
- `hra.js` - kompletní logika hry |
|||
- `hra_raw.js` - šablona pro samostatnou práci |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `index.html` a zahrajte si hru. |
|||
2. Podívejte se do `hra.js` na to, jak jsou ošetřeny různé herní situace. |
|||
3. Zkuste si hru upravit (přidat úrovně obtížnosti, změnit grafiku). |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 21_opakovani - Základy pro stavbu aplikací |
|||
- **Následující:** 23_zvetsovadlo - Interaktivní prvky |
|||
@ -0,0 +1,30 @@ |
|||
# 23 - Zvětšovadlo (Dynamické Styly) |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
V této lekci se naučíte, jak pomocí JavaScriptu ovládat vzhled prvků v reálném čase, včetně práce s barvami a velikostmi. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **Input Events** - události `input`, `change` |
|||
- **Dynamic Styling** - přímá manipulace s `element.style` |
|||
- **Typy Inputů** - práce s `color`, `range` a `text` |
|||
- **Interpolace řetězců** - skládání CSS hodnot (např. `fontSize = size + "px"`) |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `index.html` - interaktivní stránka s ovládacími prvky |
|||
- `css/` - základní stylování |
|||
- `js/` - logika pro změnu stylů |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `index.html`. |
|||
2. Hýbejte s posuvníky a sledujte, jak se mění text uprostřed. |
|||
3. Vyzkoušejte změnu barvy pozadí i textu. |
|||
4. Prostudujte kód v JavaScriptu, který tyto změny provádí. |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 22_javascripthra - Logika aplikací |
|||
- **Následující:** 24_fetch - Načítání externích dat |
|||
@ -0,0 +1,53 @@ |
|||
# 24 - Fetch API (Praktické ukázky) |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
V této lekci si prakticky vyzkoušíte práci s externími API pro načítání textových i obrazových dat. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **Fetch API** - základní použití s `.then()` |
|||
- **Dynamické URL** - skládání parametrů do URL adresy |
|||
- **Template Literals** - práce s backticks (`` ` ``) pro vkládání proměnných do řetězců |
|||
- **Práce s obrázky** - dynamická změna `src` atributu a událost `onload` |
|||
- **Integrace Bootstrapu** - vizuální stránka aplikací |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `cnj.html` - generátor náhodných vtipů Chucka Norrise (api.chucknorris.io) |
|||
- `picsum.html` - generátor náhodných obrázků s nastavitelnými rozměry (picsum.photos) |
|||
|
|||
## 💻 Klíčové koncepty |
|||
|
|||
### Načítání JSON dat (cnj.html): |
|||
```javascript |
|||
function getJoke(){ |
|||
fetch("https://api.chucknorris.io/jokes/random") |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
jokeText.textContent = data.value; |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
### Práce s obrázky a parametry (picsum.html): |
|||
```javascript |
|||
function getRandomImg(){ |
|||
let width = widthIn.value; |
|||
let height = heightIn.value; |
|||
// Použití template literals a náhodného parametru pro zamezení cachování |
|||
let newImgUrl = `https://picsum.photos/${width}/${height}?random=${Math.random()}` |
|||
randomImg.src = newImgUrl; |
|||
} |
|||
``` |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `cnj.html` a vyzkoušejte tlačítko pro nový vtip. |
|||
2. Otevřete `picsum.html`, změňte rozměry a klikněte na "Další obrázek". |
|||
3. Prozkoumejte, jak se v JavaScriptu mění atributy HTML elementů. |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 20_ajax - Základy Fetch API |
|||
- **Následující:** 25_fetch_await - Moderní zápis pomocí async/await |
|||
@ -0,0 +1,59 @@ |
|||
# 25 - Moderní Fetch s Async / Await |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
V této lekci se naučíte moderní a přehlednější způsob práce s asynchronním kódem pomocí klíčových slov `async` a `await`. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **async / await** - moderní syntax pro asynchronní operace |
|||
- **try / catch / finally** - komplexní ošetření chyb v asynchronním kódu |
|||
- **Response.ok** - kontrola úspěšnosti HTTP požadavku (stavové kódy 200-299) |
|||
- **Dynamické generování HTML** - vytváření seznamů a karet (cards) z JSON dat |
|||
- **Vnořené požadavky** - načítání souvisejících dat (např. příspěvky konkrétního uživatele) |
|||
- **Stav aplikace** - práce s UI během načítání (loading indicators, zablokování tlačítek) |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `index.html` - uživatelské rozhraní pro vyhledávání uživatelů a jejich příspěvků |
|||
- `script.js` - logika aplikace s využitím `async/await` a JSONPlaceholder API |
|||
- `style.css` - stylování výsledků a karet uživatelů |
|||
|
|||
## 💻 Klíčové koncepty |
|||
|
|||
### Struktura async funkce s error handlingem: |
|||
```javascript |
|||
async function nactiData() { |
|||
try { |
|||
const odpoved = await fetch(url); |
|||
|
|||
// Kontrola, zda server odpověděl úspěšně |
|||
if (!odpoved.ok) { |
|||
throw new Error("Data se nepodařilo načíst"); |
|||
} |
|||
|
|||
const data = await odpoved.json(); |
|||
// Práce s daty... |
|||
|
|||
} catch (error) { |
|||
// Ošetření chyby |
|||
console.error("Chyba:", error.message); |
|||
} finally { |
|||
// Provede se vždy (např. skrytí loaderu) |
|||
console.log("Pokus o načtení dokončen"); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `index.html`. |
|||
2. Klikněte na "Načíst vše" pro zobrazení seznamu uživatelů. |
|||
3. Zadejte ID uživatele (1-10) a vyhledejte konkrétní osobu. |
|||
4. Po nalezení uživatele se aktivuje tlačítko pro načtení jeho příspěvků (postů). |
|||
5. Sledujte v `script.js`, jak jsou funkce řetězeny a jak se mění stav UI. |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 24_fetch - Fetch API se syntaxí .then() |
|||
- **Následující:** 26_localstorage - Ukládání dat v prohlížeči |
|||
@ -0,0 +1,57 @@ |
|||
# 26 - LocalStorage (Perzistence dat) |
|||
|
|||
## 🎯 Co se naučíte |
|||
|
|||
V této lekci se naučíte, jak ukládat jednoduchá data přímo do prohlížeče uživatele, aby zůstala zachována i po zavření okna nebo restartování počítače. |
|||
|
|||
## 📚 Témata lekce |
|||
|
|||
- **LocalStorage** - úložiště v prohlížeči (trvalé, dokud není smazáno) |
|||
- **setItem(key, value)** - uložení dat pod konkrétním klíčem |
|||
- **getItem(key)** - načtení dat pomocí klíče |
|||
- **removeItem(key)** / **clear()** - mazání dat |
|||
- **Perzistence** - zachování stavu aplikace (vítání uživatele, počítadlo návštěv) |
|||
- **JSON.stringify / JSON.parse** - techniky pro ukládání objektů a polí (v této lekci jen zmíněno pro jednoduchá data) |
|||
|
|||
## 📂 Soubory v projektu |
|||
|
|||
- `index.html` - rozhraní pro zadání jména a zobrazení počítadla |
|||
- `script.js` - logika pro práci s `localStorage` |
|||
- `style.css` - stylování stránky |
|||
|
|||
## 💻 Klíčové koncepty |
|||
|
|||
### Práce s daty v LocalStorage: |
|||
```javascript |
|||
// Uložení jména |
|||
localStorage.setItem("userName", "Jan Novák"); |
|||
|
|||
// Načtení jména |
|||
const savedName = localStorage.getItem("userName"); |
|||
|
|||
// Smazání konkrétního klíče |
|||
localStorage.removeItem("userName"); |
|||
|
|||
// Smazání celého úložiště |
|||
localStorage.clear(); |
|||
``` |
|||
|
|||
### Počítadlo návštěv: |
|||
```javascript |
|||
let visits = localStorage.getItem("visitCount") || 0; |
|||
visits = parseInt(visits) + 1; |
|||
localStorage.setItem("visitCount", visits); |
|||
``` |
|||
|
|||
## 🚀 Jak s lekcí pracovat |
|||
|
|||
1. Otevřete `index.html`. |
|||
2. Zadejte své jméno a klikněte na tlačítko uložit. |
|||
3. Obnovte stránku (F5) - uvidíte, že vás stránka stále vítá jménem a počítadlo návštěv se zvýšilo. |
|||
4. Zavřete prohlížeč a znovu jej otevřete - data tam stále budou. |
|||
5. Klikněte na tlačítko pro vymazání dat a pozorujte změnu. |
|||
|
|||
## 🔗 Související lekce |
|||
|
|||
- **Předchozí:** 25_fetch_await - Práce s asynchronními daty |
|||
- **Dokumentace:** [Web Storage API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) |
|||
Loading…
Reference in new issue