Articles
Introduksjon til JavaScript
JavaScript og HTML

JavaScript og HTML

Denne artikkelen forklarer JavaScript og HTML.

YouTube Video

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(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: 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: En hendelse som utføres når siden er fullstendig lastet.
  • window.onresize: En hendelse som utføres når størrelsen på vinduet endres.
  • window.onscroll: En hendelse som utløses når brukeren ruller nedover 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.

 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>

Hente DOM-elementer

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

  • document.getElementById(): Hent et element ved hjelp av id-attributt
  • document.getElementsByClassName(): Hent elementer ved klassenavn (HTMLCollection)
  • document.getElementsByTagName(): Hent elementer ved taggnavn (HTMLCollection)
  • document.querySelector(): Hent det første elementet som matcher ved bruk av en CSS-velger
  • document.querySelectorAll(): Hent alle elementer som matcher ved bruk av en CSS-velger (NodeList)

Eksempel: getElementById og querySelector 

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"

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(): Legg til en klasse
  • remove(): Fjern en klasse
  • toggle(): Legger til eller fjerner en klasse basert på om den finnes
  • contains(): Sjekk om en klasse eksisterer
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: Få tilgang til overordnet node
  • childNodes: Få tilgang til underordnede noder (av alle typer)
  • firstChild / lastChild: Første/siste barnelement
  • nextSibling / previousSibling: Neste søsken-/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<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 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