Funktioner og DOM-manipulation
Computerspace · FGU · Programmering i JavaScript
🎯 Hvad er funktioner og DOM-manipulation?
Funktioner er genbrugelige kodeblokke. DOM-manipulation lader JavaScript ændre HTML og CSS på en hjemmeside.
Funktioner i JavaScript:
```javascript
// Traditionel funktion
function hilsen(navn) {
return Hej, ${navn}!;
}
// Function expression
const hilsen2 = function(navn) {
return Hej, ${navn}!;
};
// Arrow function (C++11 lambda-lignende, moderne JS)
const hilsen3 = (navn) => Hej, ${navn}!;
const tilføj = (a, b) => a + b; // Implicit return
// Higher-order functions – funktioner der tager funktioner som argument
const tal = [1, 2, 3, 4, 5];
const dobbelt = tal.map(x => x * 2); // [2, 4, 6, 8, 10]
const store = tal.filter(x => x > 2); // [3, 4, 5]
const sum = tal.reduce((acc, x) => acc + x, 0); // 15
```
DOM-manipulation – ændr HTML fra JavaScript:
```javascript
// Find HTML-elementer
const overskrift = document.getElementById("titel");
const knap = document.querySelector(".min-knap"); // CSS selector
const alleLinks = document.querySelectorAll("a"); // Alle links
// Ændr indhold og styling
overskrift.textContent = "Ny titel!";
overskrift.innerHTML = "<strong>Fed titel!</strong>";
overskrift.style.color = "blue";
overskrift.classList.add("aktiv");
overskrift.classList.remove("skjult");
```
Event listeners – reagér på brugerhandlinger:
```javascript
const knap = document.getElementById("minKnap");
// Lyt efter klik
knap.addEventListener("click", function() {
console.log("Knappen blev klikket!");
});
// Arrow function (kortere)
knap.addEventListener("click", () => {
alert("Klik!");
});
// Med event-objekt
knap.addEventListener("click", (event) => {
console.log("Klik på:", event.target);
event.preventDefault(); // Forhindre standard browser-adfærd
});
// Tastatur-event
document.addEventListener("keydown", (e) => {
});
```
---
🎓 Læringsmål for Funktioner og DOM-manipulation
Læringsmål
- Skrive funktioner med traditionel syntax, function expressions og arrow functions
- Bruge higher-order functions: map, filter og reduce på arrays
- Finde HTML-elementer med getElementById, querySelector og querySelectorAll
- Ændre tekst, HTML og CSS-klasser på DOM-elementer
- Tilføje event listeners til at reagere på klik, tastatur og andre brugerhandlinger
Sådan kan du arbejde med emnet
- Hvad er forskellen på traditionelle funktioner og arrow functions?
- Hvad er map(), filter() og reduce()?
- Hvad er DOM og hvad bruges document.querySelector() til?
- Hvad er addEventListener og hvad er et event?
⚠️ Typiske fejl at undgå
- Kører JS før DOM er klar – placer
<script>i bunden af<body>eller brugDOMContentLoaded - Bruger innerHTML med brugerinput – sikkerheds-risiko! Brug
textContenti stedet - Glemmer event.preventDefault() – ved form-submit skal du oftest forhindre page reload
---
💡 Tips til at komme i gang
- Byg en interaktiv quiz – brug DOM til at vise spørgsmål og registrere svar
- Lav en todo-liste – add/remove items med DOM-manipulation og events
- Eksperimentér med CSS-klasser – brug classList.toggle() til show/hide animationer
Øv dette emne med AI — quizzer, forklaringer og feedback tilpasset dit niveau.
Prøv Fagportalen gratis