103 lines
4.2 KiB
HTML
103 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<title>API e Asincronia</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="controls">
|
|
<h1>Tutorial: API e Asincronia</h1>
|
|
<button id="btn-esegui">▶️ Esegui Codice</button>
|
|
<button id="btn-reset">🧹 Pulisci Console</button>
|
|
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
|
|
</div>
|
|
|
|
<script>
|
|
function mostraOutput(stepNumero, messaggio) {
|
|
const elemento = document.getElementById(`output-${stepNumero}`);
|
|
if (elemento) {
|
|
messaggio = messaggio || "❌";
|
|
let isObject = (typeof messaggio === 'object' && messaggio !== null);
|
|
elemento.textContent = isObject ? JSON.stringify(messaggio, null, 2) : String(messaggio);
|
|
elemento.classList.remove("loading");
|
|
|
|
elemento.style.transition = "";
|
|
elemento.style.backgroundColor = "#666";
|
|
setTimeout(() => {
|
|
elemento.style.transition = "background-color 1s ease";
|
|
elemento.style.backgroundColor = "#2d3436";
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
[
|
|
{
|
|
title: "1. Il concetto di Attesa (Simulazione)",
|
|
description: "Le API sono lente. Simuliamo un ritardo di 1 secondo prima di mostrare il messaggio.",
|
|
outputLabel: "Output Step 1:"
|
|
},
|
|
{
|
|
title: "2. Async/Await",
|
|
description: "Per usare 'await', la funzione deve essere dichiarata come 'async'.",
|
|
outputLabel: "Output Step 2:"
|
|
},
|
|
{
|
|
title: "3. Prima chiamata Fetch (GET)",
|
|
description: "Recuperiamo un oggetto JSON reale da un server pubblico.",
|
|
outputLabel: "Dati ricevuti:"
|
|
},
|
|
{
|
|
title: "4. Risposta Grezza (Raw Response)",
|
|
description: "La risposta di fetch è un oggetto complesso. Vediamo cosa contiene davvero.",
|
|
outputLabel: "Oggetto Response:"
|
|
},
|
|
{
|
|
title: "5. Estrazione Dati (JSON)",
|
|
description: "La risposta grezza non basta. Dobbiamo convertirla ed estrarre il titolo.",
|
|
outputLabel: "Titolo del Post:"
|
|
},
|
|
{
|
|
title: "6. Gestione Errori (Try/Catch)",
|
|
description: "Proviamo a chiamare un sito che non esiste per vedere se il codice sopravvive.",
|
|
outputLabel: "Stato operazione:"
|
|
},
|
|
{
|
|
title: "7. Lavorare con le Liste (Array)",
|
|
description: "Scarichiamo 10 utenti e mostriamo solo i loro nomi.",
|
|
outputLabel: "Elenco Utenti:"
|
|
},
|
|
{
|
|
title: "8. Invio Dati (POST)",
|
|
description: "Simuliamo l'invio di un nuovo post al server.",
|
|
outputLabel: "Risposta Server:"
|
|
}
|
|
].forEach((step, i) => {
|
|
document.write(`
|
|
<div class="step-card">
|
|
<div class="step-header">
|
|
<div class="step-title">${step.title}</div>
|
|
</div>
|
|
<div class="step-desc">${step.description}</div>
|
|
<span class="label">${step.outputLabel}</span>
|
|
<div id="output-${i + 1}" class="output-box"></div>
|
|
</div>
|
|
`);
|
|
});
|
|
</script>
|
|
<script src="script.js"></script>
|
|
<script>
|
|
document.getElementById('btn-reset').addEventListener('click', () => {
|
|
localStorage.clear();
|
|
location.reload();
|
|
});
|
|
document.getElementById('btn-esegui').addEventListener('click', () => {
|
|
const el = document.querySelectorAll('[id^="output-"]');
|
|
el.forEach(box => box.className = "output-box loading");
|
|
eseguiTutorial();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |