Gjør nettsider dynamiske med JavaScript, inkludert DOM-manipulering, hendelseshåndtering og brukerinteraksjon.
JavaScript for interaktivitet
HTML gir struktur, CSS gir utsjånad, og JavaScript gir interaktivitet. Med JavaScript kan du reagere på handlingane til brukaren, endre innhald utan å laste sida på nytt, validere skjema, lage animasjonar og mykje meir.
JavaScript er den tredje grunnpilaren i webutvikling og køyrer direkte i nettlesaren.
JavaScript i HTML og DOM-manipulering
JavaScript blir lagt til med <script>-taggen, helst nedst i <body> eller i ei eiga fil:
<!-- Inline JavaScript -->
<script>
console.log("Hei fra JavaScript!");
</script>
<!-- Ekstern fil (anbefalt) -->
<script src="script.js"></script>DOM-en (Document Object Model) er nettlesaren si framstilling av HTML-dokumentet som eit tre av objekt. JavaScript kan finne, endre og lage element:
// 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 å knyte ein funksjon til ei hending:const knapp = document.querySelector("#minKnapp");
knapp.addEventListener("click", function() {
alert("Du klikket på knappen!");
});Vanlege hendingar:
- click – brukar klikkar
- submit – skjema blir sendt inn
- input – brukar skriv i eit felt
- keydown / keyup – tast blir trykt/sleppt
- mouseover / mouseout – musepeikar over/bort frå element
Skjemavalidering
JavaScript kan sjekke at brukaren har fylt ut skjemaet rett før det blir sendt:
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() hindrar at skjemaet blir sendt dersom valideringa feilar.
Animasjonar med JavaScript og CSS
Du kan lage animasjonar ved å kombinere JavaScript (for hendingar) med CSS-overgangar:
/* 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 meir avanserte animasjonar brukar ein 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 lèt brukaren leggje til oppgåver med knappen eller Enter-tasten, og klikke på dei for å markere dei som ferdige.
Oppsummering
- JavaScript gjer nettsider interaktive og dynamiske
- DOM-en er nettlesaren si trestruktur av HTML-dokumentet
- document.querySelector() finn element med CSS-selektorar
- addEventListener knyter funksjonar til hendingar som klikk og tastetrykk
- Skjemavalidering sjekkar brukarinndata før innsending med event.preventDefault()
- Animasjonar blir best laga med CSS-overgangar styrte 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.