Embedded Files
🎓 Kurs: Utveckling av program som nyttjar kommunikation över internet (HTML, CSS, JS, API)
🎓 Kurs: Utveckling av program som nyttjar kommunikation över internet (HTML, CSS, JS, API)
DEL 1: Skapa grunden – HTML, CSS och JavaScript i samspel
DEL 1: Skapa grunden – HTML, CSS och JavaScript i samspel
🔧 Struktur: Hur kopplar man ihop HTML, CSS och JS?
HTML – Sidan vi ser. Innehåll.
CSS – Hur sidan ser ut. Stil.
JavaScript – Vad sidan gör. Funktionalitet.
🧱 Exempel: Grundskelett för en webbsida med allt ihopkopplat
🧱 Exempel: Grundskelett för en webbsida med allt ihopkopplat
html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Min Första Webbsida</title>
<!-- Koppling till CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hej världen!</h1>
<button id="minKnapp">Klicka mig</button>
<p id="output"></p>
<!-- Koppling till JavaScript -->
<script src="script.js"></script>
</body>
</html>
📁 Filer som behövs i samma mapp:
index.html
style.css
script.js
🎨 style.css – gör så att det ser snyggt ut
🎨 style.css – gör så att det ser snyggt ut
css
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
button {
background-color: #0077cc;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
⚙️ script.js – lägger till funktion
⚙️ script.js – lägger till funktion
javascript
// Vänta tills sidan är laddad
document.addEventListener("DOMContentLoaded", function() {
// Välj knappen och paragrafen
const knapp = document.getElementById("minKnapp");
const output = document.getElementById("output");
// Lägg till klick-händelse
knapp.addEventListener("click", function() {
output.textContent = "Du klickade på knappen!";
});
});
🧠 Kommentarer för elever:
document.getElementById(...): Hämtar element från HTML.
addEventListener("click", ...): Lyssnar på klick.
textContent: Ändrar texten i ett HTML-element.
🔗 DEL 2: Vad är ett API och hur pratar vi med det i JavaScript?
🔗 DEL 2: Vad är ett API och hur pratar vi med det i JavaScript?
Ett API (Application Programming Interface) är en "dörr" till data från andra system. Vi pratar med det via JavaScript, ofta med hjälp av fetch().
📦 JSON = dataformatet vi oftast får tillbaka
📦 JSON = dataformatet vi oftast får tillbaka
json
{
"name": "Paul",
"email": "paul@example.com"
}
🌐 Exempel: Vi hämtar ett skämt från ett publikt API
🌐 Exempel: Vi hämtar ett skämt från ett publikt API
html
<h2>Tryck på knappen för ett skämt:</h2>
<button id="skamtKnapp">Ge mig ett skämt!</button>
<p id="skamtText"></p>
<script>
document.getElementById("skamtKnapp").addEventListener("click", async () => {
const svar = await fetch("https://api.chucknorris.io/jokes/random");
const data = await svar.json();
document.getElementById("skamtText").textContent = data.value;
});
</script>
💬 Förklaring steg för steg:
Vi använder fetch() för att göra ett HTTP-anrop.
Vi använder await för att vänta på svaret.
Svaret innehåller ett JSON-objekt.
Vi visar data.value, som är själva skämtet.
🧪 DEL 3: Elevernas första API-övning – Vädersök
🧪 DEL 3: Elevernas första API-övning – Vädersök
Instruktion:
Gå till https://openweathermap.org/api
Skapa ett konto och hämta en API-nyckel (gratis)
Använd nyckeln i JavaScript
HTML:
html
<input type="text" id="stad" placeholder="Skriv in stad...">
<button id="sokVader">Sök väder</button>
<p id="vaderSvar"></p>
JavaScript (script.js):
javascript
document.getElementById("sokVader").addEventListener("click", async () => {
const stad = document.getElementById("stad").value;
const API_KEY = "DIN_API_NYCKEL_HÄR";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${stad}&appid=${API_KEY}&units=metric&lang=sv`;
const svar = await fetch(url);
const data = await svar.json();
const temp = data.main.temp;
const beskrivning = data.weather[0].description;
document.getElementById("vaderSvar").textContent =
`I ${stad} är det ${temp}°C och ${beskrivning}.`;
});
Längst ner så kan du se hur det ser ut
Google Sites
Report abuse