JavaScript, events og dynamisk innhold.
JavaScript er motoren bak moderne webapplikasjonar. Ved å manipulere DOM (Document Object Model) kan vi endre HTML og CSS dynamisk, hente data frå serverar, og skape interaktive brukaropplevingar.
I dette kapittelet skal vi sjå på avansert JavaScript, asynkron programmering med fetch og async/await, og korleis vi byggjer dynamiske grensesnitt.
Vanlege DOM-operasjonar:
Hente element:
const element = document.getElementById('minId');
const elementer = document.querySelectorAll('.minKlasse');Endre innhald:
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 leggje til element:
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
Kvifor asynkront?
Å hente data over nettverk tek tid. Vi vil ikkje blokkere heile programmet medan vi ventar på svar.
Promises:
JavaScript brukar "promises" for asynkrone operasjonar:
- pending: Operasjonen pågår
- fulfilled: Operasjonen fullført (resolved)
- rejected: Operasjonen feila
Fetch returnerer ein 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 pausar funksjonen til promise er løyst
- try/catch handterer feil
- Koden ser meir synkron ut, men er framleis 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ønster: fetch, async/await, DOM-manipulering og feilhandtering.
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økkelpunkt:
- method: 'POST' for å sende data
- headers spesifiserer dataformat
- body inneheld data (konvertert til JSON med JSON.stringify)
- Serveren responderer vanlegvis med den oppretta ressursen
No skal du løyse oppgåver om DOM-manipulering, fetch API og asynkron JavaScript.
Oppsummering
I dette kapittelet har du lært:
- DOM-manipulering: endre nettsida dynamisk med JavaScript.
- Event-handtering: reagere på brukarhandlingar.
- async/await: moderne asynkron kode.
- Hente data frå API: byggje dynamisk innhald.
- POST: sende data til serveren.
Nøkkelbegrep
| Begrep | Forklaring |
|---|---|
| DOM-manipulering | Å endre nettsida 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.