Gjør nettsider dynamiske med JavaScript, inkludert DOM-manipulering, hendelseshåndtering og brukerinteraksjon.
JavaScript for interaktivitet
HTML gir struktur, CSS gir utseende, og JavaScript gir interaktivitet. Med JavaScript kan du reagere på brukerens handlinger, endre innhold uten å laste siden på nytt, validere skjemaer, lage animasjoner og mye mer.
JavaScript er den tredje grunnpilaren i webutvikling og kjøres direkte i nettleseren.
JavaScript i HTML og DOM-manipulering
JavaScript legges til med <script>-taggen, helst nederst i <body> eller i en egen fil:
<!-- Inline JavaScript -->
<script>
console.log("Hei fra JavaScript!");
</script>
<!-- Ekstern fil (anbefalt) -->
<script src="script.js"></script>DOM-en (Document Object Model) er nettleserens representasjon av HTML-dokumentet som et tre av objekter. JavaScript kan finne, endre og lage elementer:
// Finne elementer
const tittel = document.querySelector("h1");
const knapper = document.querySelectorAll(".btn");
const skjema = document.getElementById("kontaktskjema");
// Endre innhold
tittel.textContent = "Ny tittel!";
tittel.innerHTML = "<em>Kursiv</em> tittel";
// Endre stil
tittel.style.color = "blue";
tittel.classList.add("aktiv");
tittel.classList.toggle("synlig");
// Lage nye elementer
const nyParagraf = document.createElement("p");
nyParagraf.textContent = "Dynamisk innhold!";
document.body.appendChild(nyParagraf);addEventListener til å knytte en funksjon til en hendelse:const knapp = document.querySelector("#minKnapp");
knapp.addEventListener("click", function() {
alert("Du klikket på knappen!");
});Vanlige hendelser:
- click – bruker klikker
- submit – skjema sendes inn
- input – bruker skriver i et felt
- keydown / keyup – tast trykkes/slippes
- mouseover / mouseout – musepeker over/bort fra element
Skjemavalidering
JavaScript kan sjekke at brukeren har fylt ut skjemaet riktig før det sendes:
const skjema = document.querySelector("#registrering");
skjema.addEventListener("submit", function(event) {
const navn = document.querySelector("#navn").value;
const epost = document.querySelector("#epost").value;
const passord = document.querySelector("#passord").value;
// Valider navn
if (navn.length < 2) {
event.preventDefault(); // Stopp innsending
visFeil("Navnet må ha minst 2 tegn.");
return;
}
// Valider e-post (enkel sjekk)
if (!epost.includes("@") || !epost.includes(".")) {
event.preventDefault();
visFeil("Ugyldig e-postadresse.");
return;
}
// Valider passord
if (passord.length < 8) {
event.preventDefault();
visFeil("Passordet må ha minst 8 tegn.");
return;
}
});
function visFeil(melding) {
const feilDiv = document.querySelector("#feilmelding");
feilDiv.textContent = melding;
feilDiv.style.display = "block";
}event.preventDefault() forhindrer at skjemaet sendes dersom valideringen feiler.
Animasjoner med JavaScript og CSS
Du kan lage animasjoner ved å kombinere JavaScript (for hendelser) med CSS-overganger:
/* CSS-overgang */
.kort {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kort.aktiv {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}// JavaScript: Toggle animasjon ved klikk
const kort = document.querySelectorAll(".kort");
kort.forEach(function(element) {
element.addEventListener("click", function() {
element.classList.toggle("aktiv");
});
});For mer avanserte animasjoner brukes CSS @keyframes:
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}HTML:
<div id="todo-app">
<h2>Gjøremålsliste</h2>
<input type="text" id="nyOppgave" placeholder="Ny oppgave...">
<button id="leggTil">Legg til</button>
<ul id="oppgaveliste"></ul>
</div>JavaScript:
const input = document.querySelector("#nyOppgave");
const knapp = document.querySelector("#leggTil");
const liste = document.querySelector("#oppgaveliste");
knapp.addEventListener("click", function() {
const tekst = input.value.trim();
if (tekst === "") return;
const li = document.createElement("li");
li.textContent = tekst;
// Klikk for å markere som ferdig
li.addEventListener("click", function() {
li.classList.toggle("ferdig");
});
liste.appendChild(li);
input.value = "";
input.focus();
});
// Legg til med Enter-tast
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
knapp.click();
}
});Denne koden lar brukeren legge til oppgaver med knappen eller Enter-tasten, og klikke på dem for å markere dem som ferdige.
Oppsummering
- JavaScript gjør nettsider interaktive og dynamiske
- DOM-en er nettleserens trestruktur av HTML-dokumentet
- document.querySelector() finner elementer med CSS-selektorer
- addEventListener knytter funksjoner til hendelser som klikk og tastetykk
- Skjemavalidering sjekker brukerinndata før innsending med event.preventDefault()
- Animasjoner lages best med CSS-overganger styrt av JavaScript
- Bruk ekstern JavaScript-fil for ryddig kode
Oppgaver
Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.