JavaScript og HTML

Articles

JavaScript og HTML

Denne artikel forklarer JavaScript og HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

`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(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Denne hændelse udløses, når siden er fuldt indlæst.
window.onresize: Denne hændelse udløses, når vinduets størrelse ændres.
window.onscroll: Denne hændelse udløses, 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.

Hentning af DOM-elementer

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

document.getElementById(): Henter et element ved dets id-attribut.
document.getElementsByClassName(): Henter elementer efter klassenavn. Returnerer en HTMLCollection. HTMLCollection er en levende samling, som afspejler ændringer i DOM'en i realtid.
document.getElementsByTagName(): Henter elementer efter tag-navn. Returnerer en HTMLCollection.
document.querySelector(): Bruger en CSS-vælger til at hente det første matchende element.
document.querySelectorAll(): Bruger en CSS-vælger til at hente alle matchende elementer. Returnerer en NodeList. NodeList er en statisk samling, som fastholder tilstanden på hentetidspunktet og afspejler ikke efterfølgende ændringer i DOM'en.

Eksempel: `getElementById` og `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

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"
3console.log(id);

Æ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øjer en klasse.
remove(): Fjerner en klasse.
toggle(): Tilføjer eller fjerner en klasse alt efter, om den findes.
contains(): Tjekker, 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: Giver adgang til forældrenoden.
childNodes: Giver adgang til børnenoderne. Du har adgang til alle typer noder, ikke kun elementnoder som HTML-tags, men også tekst- og kommentarnoder.
firstChild / lastChild: Giver adgang til det første og sidste barnelement.
nextSibling / previousSibling: Giver adgang til næste og forrige søskendeelevement.

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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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 Shadow DOM i JavaScript

JavaScript og HTML

YouTube Video

window-objektet i JavaScript

Nøglefunktioner i window-objektet

Egenskaber

Metoder

Håndtering af begivenheder

Rollen som en global variabel

DOM-manipulation i JavaScript

Grundprincipper for DOM'en

Hentning af DOM-elementer

Eksempel: getElementById og querySelector

DOM-manipulation

Ændring af tekst

Ændring af attributter

Ændring af CSS

Manipulation af klasser

Oprettelse og sletning af DOM-elementer

Oprettelse af nye elementer

Sletning af elementer

Tilføjelse af hændelser

Navigering i DOM-træet

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

Sammendrag

YouTube Video

`window`-objektet i JavaScript

Nøglefunktioner i `window`-objektet

Eksempel: `getElementById` og `querySelector`