JavaScript og HTML

Articles

JavaScript og HTML

Denne artikkelen 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 objektet i et nettlesermiljø, og gir funksjoner og informasjon relatert til nettsiden og nettleservinduet. Siden window er det globale omfanget til nettleseren, blir all JavaScript-kode som kjører i nettleseren en del av window-objektet. window-objektet spiller en viktig rolle når det gjelder å kjøre JavaScript i nettlesermiljøet, og tilbyr mange API-er og egenskaper.

Nøkkelfunksjoner ved `window`-objektet

Egenskaper

 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: Får tilgang til det gjeldende HTML-dokumentet.
window.location: Håndterer den gjeldende URL-en og nettlesernavigasjonen.
window.history: Får tilgang til nettleserhistorikk-informasjonen og tillater navigering fremover og bakover.
window.navigator: Gir informasjon om nettleseren og enheten.
window.innerWidth / window.innerHeight: Henter bredden og høyden på 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 varslingsdialog.
window.confirm(): Viser en dialog som ber om brukerbekreftelse og returnerer et OK- eller Avbryt-resultat.
window.prompt(): Viser en dialog som ber om brukerinput og henter den angitte verdien.
window.open(): Åpner et nytt vindu eller en ny fane.
window.setTimeout() / window.setInterval(): Setter en timer for å kjøre en funksjon etter en viss tid eller med jevne mellomrom.

Hendelseshåndtering

 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 hendelsen utløses når siden er fullstendig lastet.
window.onresize: Denne hendelsen utløses når vinduet endrer størrelse.
window.onscroll: Denne hendelsen utløses når brukeren ruller på siden.

Rolle som en global variabel

1var myVar = 10;
2console.log(window.myVar); // 10

window-objektet inneholder globale variabler og funksjoner. Med andre ord, erklærte variabler og funksjoner blir automatisk egenskaper av window.

DOM-manipulering i JavaScript

DOM-manipulering i JavaScript (Document Object Model) brukes for å samhandle dynamisk med elementer på nettsiden. DOM representerer strukturen til et HTML-dokument som et tre, som kan endres ved hjelp av JavaScript for å modifisere strukturen og kontrollere visningen av siden.

Grunnleggende om DOM

DOM behandler HTML-en til en nettside som objekter, som gir tilgang til og mulighet for å endre elementer og attributter. Bruk document-objektet for å få tilgang til HTML-dokumentet.

Hente DOM-elementer

JavaScript har flere metoder for å få tilgang til elementer i DOM.

document.getElementById(): Henter et element ved hjelp av dets id-attributt.
document.getElementsByClassName(): Henter elementer basert på klassenavn. Returnerer en HTMLCollection. HTMLCollection er en levende samling som reflekterer endringer i DOM-en i sanntid.
document.getElementsByTagName(): Henter elementer basert på taggnavn. Returnerer en HTMLCollection.
document.querySelector(): Bruker en CSS-velger for å hente det første samsvarende elementet.
document.querySelectorAll(): Bruker en CSS-velger for å hente alle samsvarende elementer. Returnerer en NodeList. NodeList er en statisk samling som gjenspeiler tilstanden på hentetidspunktet, og reflekterer ikke senere endringer 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-manipulering

Ulike operasjoner kan utføres på elementene som er hentet.

Endre tekst

For å endre teksten til et element, bruk textContent eller innerHTML.

textContent: Hent eller endre tekstinnholdet til et element. HTML-tagger tolkes ikke.
innerHTML: Hent eller endre HTML-innholdet til et element. Strenger som inneholder HTML-tagger behandles også.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Endre attributter

Bruk setAttribute() og getAttribute() for å endre elementattributter.

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

Endre CSS

Bruk egenskapen style for å endre CSS-stiler.

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

Manipulere klasser

Bruk classList for å legge til eller fjerne klasser fra et element.

add(): Legger til en klasse.
remove(): Fjerner en klasse.
toggle(): Legger til eller fjerner en klasse avhengig av om den finnes.
contains(): Sjekker om en klasse finnes.

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Opprette og slette DOM-elementer

Opprette nye elementer

Bruk document.createElement() for å opprette et nytt element og legge det til i 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

Slette elementer

Bruk metoden remove() for å slette et element.

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

Legge til hendelser

Som en del av DOM-manipulasjon kan du legge til hendelseshåndterere som reagerer på brukerinteraksjoner. Bruk addEventListener() for å håndtere hendelser som klikk og tastaturinteraksjoner.

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

I dette eksempelet endrer et knappetrykk teksten til #content-elementet.

Navigering i DOM-treet

Du kan navigere i DOM-en for å få tilgang til overordnede og søskenelementer.

parentNode: Gir tilgang til foreldre-noden.
childNodes: Gir tilgang til barne-nodene. Du kan få tilgang til alle typer noder, ikke bare elementnoder som HTML-tagger, men også tekstnoder og kommentarnoder.
firstChild / lastChild: Gir tilgang til første og siste barnelement.
nextSibling / previousSibling: Gir tilgang til neste og forrige søskenelement.

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Eksempel: Legge til et nytt element i en liste

Her er et eksempel på å legge til et nytt element i 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 koden legger det å klikke på knappen "Legg til element" til et nytt <li>-element i listen.

Sammendrag

JavaScript DOM-manipulering lar deg hente, endre, opprette og slette elementer i et HTML-dokument.
Du kan hente elementer ved hjelp av metoder som getElementById() og querySelector().
Bruk textContent eller innerHTML for å endre tekst og HTML, og setAttribute() for å manipulere attributter.
Bruk createElement() for å opprette nye elementer og remove() for å slette dem.
Du kan lage interaktive nettsider som reagerer på brukerhandlinger gjennom hendelseshåndtering.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Generator-funksjoner i JavaScript Shadow DOM i JavaScript

JavaScript og HTML

YouTube Video

window-objektet i JavaScript

Nøkkelfunksjoner ved window-objektet

Egenskaper

Metoder

Hendelseshåndtering

Rolle som en global variabel

DOM-manipulering i JavaScript

Grunnleggende om DOM

Hente DOM-elementer

Eksempel: getElementById og querySelector

DOM-manipulering

Endre tekst

Endre attributter

Endre CSS

Manipulere klasser

Opprette og slette DOM-elementer

Opprette nye elementer

Slette elementer

Legge til hendelser

Navigering i DOM-treet

Eksempel: Legge til et nytt element i en liste

Sammendrag

YouTube Video

`window`-objektet i JavaScript

Nøkkelfunksjoner ved `window`-objektet

Eksempel: `getElementById` og `querySelector`