3I_WTL_2025/24_fetch

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):

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):

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