JavaScript, events og dynamisk innhold.
JavaScript er motoren bak moderne webapplikasjoner. Ved å manipulere DOM (Document Object Model) kan vi endre HTML og CSS dynamisk, hente data fra servere, og skape interaktive brukeropplevelser.
I dette kapittelet skal vi se på avansert JavaScript, asynkron programmering med fetch og async/await, og hvordan vi bygger dynamiske grensesnitt.
Vanlige DOM-operasjoner:
Hente elementer:
const element = document.getElementById('minId');
const elementer = document.querySelectorAll('.minKlasse');Endre innhold:
element.textContent = 'Ny tekst';
element.innerHTML = '<strong>Bold tekst</strong>';Endre styling:
element.style.color = 'red';
element.classList.add('aktiv');
element.classList.remove('skjult');Opprette og legge til elementer:
const nyDiv = document.createElement('div');
nyDiv.textContent = 'Hei!';
document.body.appendChild(nyDiv);const knapp = document.getElementById('minKnapp');
knapp.addEventListener('click', function() {
console.log('Knappen ble klikket!');
this.textContent = 'Klikket!';
});Moderne syntaks med arrow function:
knapp.addEventListener('click', () => {
console.log('Klikket!');
});Hindre standard oppførsel:
const skjema = document.getElementById('mittSkjema');
skjema.addEventListener('submit', (e) => {
e.preventDefault(); // Stopp vanlig form-submit
const data = new FormData(skjema);
console.log('Sender:', Object.fromEntries(data));
});Andre events:
- mouseover, mouseout
- keydown, keyup
- change, input
- load, scroll
Hvorfor asynkront?
Å hente data over nettverk tar tid. Vi vil ikke blokkere hele programmet mens vi venter på svar.
Promises:
JavaScript bruker "promises" for asynkrone operasjoner:
- pending: Operasjonen pågår
- fulfilled: Operasjonen fullført (resolved)
- rejected: Operasjonen feilet
Fetch returnerer en promise:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Mottatt data:', data);
})
.catch(error => {
console.error('Feil:', error);
});async function hentBrukerdata() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Nettverksforespørsel feilet');
}
const data = await response.json();
console.log('Brukere:', data);
return data;
} catch (error) {
console.error('Feil ved henting:', error);
}
}
// Kalle funksjonen
hentBrukerdata();Forklaring:
- async markerer funksjonen som asynkron
- await pauser funksjonen til promise er løst
- try/catch håndterer feil
- Koden ser mer synkron ut, men er fortsatt asynkron
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Brukerliste</title>
</head>
<body>
<h1>Brukere</h1>
<button id="hentKnapp">Hent brukere</button>
<div id="loading" style="display:none;">Laster...</div>
<ul id="brukerliste"></ul>
<script src="app.js"></script>
</body>
</html>JavaScript (app.js):
const hentKnapp = document.getElementById('hentKnapp');
const loading = document.getElementById('loading');
const liste = document.getElementById('brukerliste');
hentKnapp.addEventListener('click', async () => {
// Vis loading
loading.style.display = 'block';
liste.innerHTML = '';
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const brukere = await response.json();
// Skjul loading
loading.style.display = 'none';
// Vis brukere
brukere.forEach(bruker => {
const li = document.createElement('li');
li.innerHTML = `
<strong>${bruker.name}</strong><br>
Email: ${bruker.email}<br>
By: ${bruker.address.city}
`;
liste.appendChild(li);
});
} catch (error) {
loading.style.display = 'none';
liste.innerHTML = '<li style="color:red;">Feil ved henting av data</li>';
console.error(error);
}
});Dette viser moderne mønstre: fetch, async/await, DOM-manipulering og feilhåndtering.
async function opprettBruker(brukerdata) {
try {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(brukerdata)
});
if (!response.ok) {
throw new Error('Kunne ikke opprette bruker');
}
const nyBruker = await response.json();
console.log('Opprettet:', nyBruker);
return nyBruker;
} catch (error) {
console.error('Feil:', error);
throw error;
}
}
// Bruk funksjonen
opprettBruker({
navn: 'Ola Nordmann',
email: 'ola@example.com',
alder: 25
});Nøkkelpunkter:
- method: 'POST' for å sende data
- headers spesifiserer dataformat
- body inneholder data (konvertert til JSON med JSON.stringify)
- Serveren responderer vanligvis med den opprettede ressursen
Nå skal du løse oppgaver om DOM-manipulering, fetch API og asynkron JavaScript.
Oppsummering
I dette kapittelet har du lært:
- DOM-manipulering: endre nettsiden dynamisk med JavaScript.
- Event-håndtering: reagere på brukerhandlinger.
- async/await: moderne asynkron kode.
- Hente data fra API: bygge dynamisk innhold.
- POST: sende data til serveren.
Noekkelbegreper
| Begrep | Forklaring |
|---|---|
| DOM-manipulering | Å endre nettsiden via JavaScript |
| async/await | Moderne syntaks for asynkron 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.