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