Articles
Introduktion til JavaScript
JavaScript og HTML

JavaScript og HTML

Denne artikel forklarer JavaScript og HTML.

YouTube Video

window-objektet i JavaScript

window-objektet i JavaScript er det globale objekt i et browsermiljø, der giver funktioner og information om websiden og browservinduet. Da window er browserens globale omfang, bliver al JavaScript-kode, der kører i browseren, en del af window-objektet. window-objektet spiller en vigtig rolle i afviklingen af JavaScript i browsermiljøet og tilbyder mange API'er og egenskaber.

Nøglefunktioner i window-objektet

Egenskaber 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: Tilgår det aktuelle HTML-dokument.
  • window.location: Håndterer den aktuelle URL og browsernavigation.
  • window.history: Tilgår browserens historikoplysninger og tillader navigation frem og tilbage.
  • window.navigator: Giver information om browseren og enheden.
  • window.innerWidth / window.innerHeight: Henter bredden og højden af visningsområdet.

Metoder 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): Viser en advarselsdialog.
  • window.confirm(): Viser en dialog, der beder om brugerens bekræftelse, og returnerer et OK- eller Annuller-resultat.
  • window.prompt(): Viser en dialog, der beder om brugerinput, og henter den indtastede værdi.
  • window.open(): Åbner et nyt vindue eller faneblad.
  • window.setTimeout() / window.setInterval(): Indstiller en timer til at køre en funktion efter en bestemt tid eller med regelmæssige intervaller.

Håndtering af begivenheder 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: En begivenhed, der kører, når siden er fuldt indlæst.
  • window.onresize: En begivenhed, der kører, når vinduets størrelse ændres.
  • window.onscroll: En begivenhed, der aktiveres, når brugeren ruller på siden.

Rollen som en global variabel 

1var myVar = 10;
2console.log(window.myVar); // 10
  • window-objektet indeholder globale variabler og funktioner. Med andre ord bliver erklærede variabler og funktioner automatisk egenskaber for window.

DOM-manipulation i JavaScript

JavaScript DOM (Document Object Model)-manipulation bruges til dynamisk interaktion med elementer på websiden. DOM repræsenterer strukturen af et HTML-dokument som et træ, der kan ændres ved hjælp af JavaScript for at tilpasse strukturen og kontrollere visningen af siden.

Grundprincipper for DOM'en

DOM'en behandler HTML'en på en webside som objekter, hvilket giver mulighed for adgang og ændring af elementer og attributter. Brug document-objektet til at få adgang til HTML-dokumentet.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Hentning af DOM-elementer

JavaScript har flere metoder til at få adgang til elementer i DOM'en.

  • document.getElementById(): Hent et element via id-attributten
  • document.getElementsByClassName(): Hent elementer via klassebetegnelse (HTMLCollection)
  • document.getElementsByTagName(): Hent elementer via tag-navn (HTMLCollection)
  • document.querySelector(): Hent det første matchende element ved brug af en CSS-selector
  • document.querySelectorAll(): Hent alle matchende elementer ved brug af en CSS-selector (NodeList)

Eksempel: getElementById og querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM-manipulation

Forskellige operationer kan udføres på de hentede elementer.

Ændring af tekst

For at ændre teksten i et element skal du bruge textContent eller innerHTML.

  • textContent: Hent eller ændr tekstindholdet i et element. HTML-tags fortolkes ikke.
  • innerHTML: Hent eller ændr HTML-indholdet i et element. Strenge, der indeholder HTML-tags, bliver også behandlet.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Ændring af attributter

Brug setAttribute() og getAttribute() til at ændre elementattributter.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Ændring af CSS

Brug style-egenskaben til at ændre CSS-stilarter.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulation af klasser

Brug classList til at tilføje eller fjerne klasser fra et element.

  • add(): Tilføj en klasse
  • remove(): Fjern en klasse
  • toggle(): Tilføj eller fjern en klasse baseret på dens tilstedeværelse
  • contains(): Tjek, om en klasse findes
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Oprettelse og sletning af DOM-elementer

Oprettelse af nye elementer

Brug document.createElement() til at oprette et nyt element og tilføje det til DOM'en.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Sletning af elementer

Brug metoden remove() til at slette et element.

1newDiv.remove();  // Remove the created element

Tilføjelse af hændelser

Som en del af DOM-manipulation kan du tilføje hændelseshåndterere, der reagerer på brugerinteraktioner. Brug addEventListener() til at håndtere hændelser som klik og tastaturinteraktioner.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

I dette eksempel ændrer klik på en knap teksten i #content-elementet.

Navigering i DOM-træet

Du kan navigere i DOM'en for at få adgang til forældre- og søskendeelementer.

  • parentNode: Adgang til forældrenoden
  • childNodes: Adgang til børnenoder (af alle typer)
  • firstChild / lastChild: Første/sidste børnelement
  • nextSibling / previousSibling: Næste søskendement/forrige søskendement
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Eksempel: Tilføjelse af et nyt punkt til en liste

Her er et eksempel på at tilføje et nyt element til en liste.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

I denne kode tilføjer et klik på knappen "Tilføj element" et nyt <li>-element til listen.

Sammendrag

  • JavaScript DOM-manipulation gør det muligt at hente, ændre, oprette og slette elementer i et HTML-dokument.
  • Du kan hente elementer ved at bruge metoder som getElementById() og querySelector().
  • Brug textContent eller innerHTML til at ændre tekst og HTML, og setAttribute() til at manipulere attributter.
  • Brug createElement() til at oprette nye elementer og remove() til at slette dem.
  • Du kan oprette interaktive websider, der reagerer på brugerhandlinger gennem hændelseshåndtering.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Generatorfunktioner i JavaScript