Articles
Introductie tot JavaScript
JavaScript en HTML

JavaScript en HTML

Dit artikel legt JavaScript en HTML uit.

YouTube Video

javascript-html-dom.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>Execute External JS</title>
 6  <style>
 7    body {
 8      font-family: sans-serif;
 9      padding: 1em;
10      background: #f0f0f0;
11    }
12    #output {
13      white-space: pre-line;
14      background: #1e1e1e;
15      color: #00ff00;
16      padding: 1em;
17      border-radius: 8px;
18      margin-top: 1em;
19      font-family: monospace;
20      font-size: 1.2em;
21    }
22    button {
23      font-size: 1rem;
24      padding: 0.5em 1em;
25      cursor: pointer;
26    }
27    .highlight {
28    background-color: yellow;
29    color: black;
30    font-weight: bold;
31    }
32    .active {
33    background-color: #007bff;
34    color: white;
35    border: none;
36    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
37    }
38  </style>
39</head>
40<body>
41  <h1>Run External JavaScript</h1>
42  <button id="executeBtn">Execute</button>
43
44  <div id="content">Hello, World!</div>
45  <button id="changeText">Change Text</button>
46  <div id="output"></div>
47
48  <script>
49    (function () {
50      const originalLog = console.log;
51      console.log = function (...args) {
52        originalLog.apply(console, args);
53        const output = document.getElementById('output');
54        output.textContent += args.map(String).join(' ') + '\n';
55      };
56    })();
57
58    document.getElementById('executeBtn').addEventListener('click', () => {
59      if (document.getElementById('externalScript')) return;
60
61      const script = document.createElement('script');
62      script.src = 'javascript-html-dom.js';
63      script.id = 'externalScript';
64      script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
65      script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
66      document.body.appendChild(script);
67    });
68  </script>
69</body>
70</html>

Het window-object in JavaScript

Het window-object in JavaScript is het globale object in een browseromgeving, dat functies en informatie biedt met betrekking tot de webpagina en browservenster. Aangezien window de globale scope van de browser is, wordt alle JavaScript-code die in de browser wordt uitgevoerd onderdeel van het window-object. Het window-object speelt een belangrijke rol bij het uitvoeren van JavaScript in de browseromgeving en biedt veel API's en eigenschappen.

Belangrijkste kenmerken van het window-object

Eigenschappen 

 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: Toegankelijk voor het huidige HTML-document.
  • window.location: Beheert de huidige URL en browsernavigatie.
  • window.history: Heeft toegang tot de geschiedenisinformatie van de browser en staat vooruit- en terugnavigatie toe.
  • window.navigator: Biedt informatie over de browser en het apparaat.
  • window.innerWidth / window.innerHeight: Haalt de breedte en hoogte van de viewport op.

Methodes 

 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(): Toont een waarschuwingsdialoogvenster.
  • window.confirm(): Toont een dialoogvenster waarin om gebruikersbevestiging wordt gevraagd en geeft een OK- of Annuleren-resultaat terug.
  • window.prompt(): Toont een dialoogvenster waarin de gebruiker om invoer wordt gevraagd en haalt de ingevoerde waarde op.
  • window.open(): Opent een nieuw venster of tabblad.
  • window.setTimeout() / window.setInterval(): Stelt een timer in om een functie uit te voeren na een bepaalde tijd of op regelmatige intervallen.

Gebeurtenisafhandeling 

 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};
  • Het window.onload Deze gebeurtenis wordt geactiveerd wanneer de pagina volledig geladen is.
  • Het window.onresize Deze gebeurtenis wordt geactiveerd wanneer het venster wordt aangepast.
  • "Window.onscroll." Deze gebeurtenis brandt wanneer de gebruiker de pagina scrollt.

Rol als een Globale Variabele 

1var myVar = 10;
2console.log(window.myVar); // 10
  • Het window object bevat globale variabelen en functies. Met andere woorden, gedeclareerde variabelen en functies worden automatisch eigenschappen van window.

DOM-manipulatie in JavaScript

JavaScript DOM (Document Object Model) manipulatie wordt gebruikt om dynamisch te interageren met elementen op de webpagina. De DOM vertegenwoordigt de structuur van een HTML-document als een boom, die kan worden aangepast met JavaScript om de structuur te wijzigen en de weergave van de pagina te beheren.

Basisprincipes van de DOM

De DOM behandelt de HTML van een webpagina als objecten, waardoor toegang tot en wijziging van elementen en attributen mogelijk is. Gebruik het document object om toegang te krijgen tot het HTML-document.

 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>

DOM-elementen ophalen

JavaScript heeft een aantal methoden om toegang te krijgen tot elementen in de DOM.

  • ** Ophaalt een element door zijn.
  • ** Ophalen van elementen op klassenaam. Geeft een Wat?..
  • ** Ophalen van elementen op tagnaam. Geeft een Wat?.
  • ** Gebruikt een CSS-selector om het eerste overeenkomende element op te halen.
      • Document.querySelectorAll() ***: Gebruikt een CSS-selector om alle overeenkomende elementen op te halen. Geeft een NodeList terug Wat?..

Voorbeeld: getElementById en querySelector 

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

DOM-manipulatie

Diverse operaties kunnen worden uitgevoerd op de opgehaalde elementen.

Tekst wijzigen

Om de tekst van een element te wijzigen, gebruik textContent of innerHTML.

  • textContent: Haal de tekstinhoud van een element op of wijzig deze. HTML-tags worden niet geïnterpreteerd.
  • innerHTML: Haal de HTML-inhoud van een element op of wijzig deze. Strings die HTML-tags bevatten worden ook verwerkt.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Attribuuten Wijzigen

Gebruik setAttribute() en getAttribute() om attributen van een element te wijzigen.

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

CSS Wijzigen

Gebruik de style-eigenschap om CSS-stijlen te wijzigen.

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

Klassen Manipuleren

Gebruik classList om klassen aan een element toe te voegen of te verwijderen.

  • ** Voegt een klasse toe.
  • ** Verwijdert een klasse.
  • ** Voegt een klasse toe of verwijdert, afhankelijk van of deze bestaat.
  • ** Controleren of een klasse bestaat.
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

DOM-elementen Aanmaken en Verwijderen

Nieuwe Elementen Aanmaken

Gebruik document.createElement() om een nieuw element te maken en dit aan de DOM toe te voegen.

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

Elementen verwijderen

Gebruik de methode remove() om een element te verwijderen.

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

Gebeurtenissen Toevoegen

Als onderdeel van DOM-manipulatie kun je gebeurtenishandlers toevoegen die reageren op gebruikersinteracties. Gebruik addEventListener() om gebeurtenissen zoals klikken en toetsenbordinteracties te verwerken.

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

In dit voorbeeld verandert klikken op een knop de tekst van het #content-element.

Door de DOM-boom Navigeren

Je kunt door de DOM navigeren om ouder- en siblingelementen te benaderen.

  • **BgenderNode ***: Toegang tot het ouderknooppunt.
  • Bibliotheek: Toegang tot de kindknooppunten. U kunt toegang krijgen tot alle soorten knooppunten, niet alleen elementknooppunten zoals HTML-tags, maar ook tekstknooppunten en commentaarknooppunten.
  • ***Eerste Kind *: Toegang tot de eerste en laatste kindelementen.
  • VolgendeVerslingeren / Toegang tot de volgende en vorige broer-elementen.
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Voorbeeld: Een Nieuw Item Aan Een Lijst Toevoegen

Hier is een voorbeeld van het toevoegen van een nieuw item aan een lijst.

 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});

In deze code voegt het klikken op de knop "Item toevoegen" een nieuw <li>-element toe aan de lijst.

Samenvatting

  • Met JavaScript DOM-manipulatie kun je elementen in een HTML-document ophalen, wijzigen, aanmaken en verwijderen.
  • Je kunt elementen ophalen met methoden zoals getElementById() en querySelector().
  • Gebruik textContent of innerHTML om tekst en HTML te wijzigen, en setAttribute() om attributen te manipuleren.
  • Gebruik createElement() om nieuwe elementen aan te maken en remove() om ze te verwijderen.
  • Je kunt interactieve webpagina's maken die reageren op gebruikersacties via eventhandling.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Generatorfuncties in JavaScript