Skip to content

Introductie tot het gecombineerde gebruik van JavaScript en HTML

JavaScript en HTML werken samen om interactieve en dynamische webpagina’s te maken. HTML biedt de structuur van de pagina, zoals knoppen, tekstvelden en andere elementen, terwijl JavaScript gedrag toevoegt door te reageren op gebruikersacties. In dit voorbeeld laten we zien hoe een eenvoudige pagina kan worden gemaakt waar een tekstveld wordt bijgewerkt door middel van knoppen.

Voorbeeld: Ping Pong Interactie

Hier is een voorbeeld van een HTML-bestand en bijbehorende JavaScript-code. De pagina bevat een tekstveld en twee knoppen waarmee je respectievelijk "Ping" of "Pong" in het tekstveld kunt zetten.

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping Pong Voorbeeld</title>
<style>
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
    }
    #output {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    }
    button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
    }
</style>
</head>
<body>
<h1>Ping Pong Voorbeeld</h1>
<input type="text" id="output" placeholder="Klik op een knop" readonly>
<br><br>
<button id="pingButton">Ping</button>
<button id="pongButton">Pong</button>

<script src="script.js"></script>
</body>
</html>

Uitleg: - Het tekstveld (<input>) heeft het attribuut readonly, zodat het niet handmatig kan worden aangepast. - Twee knoppen hebben unieke id's waarmee ze kunnen worden gekoppeld aan JavaScript.

// Selecteer de HTML-elementen
const outputField = document.getElementById('output');
const pingButton = document.getElementById('pingButton');
const pongButton = document.getElementById('pongButton');

// Voeg eventlisteners toe aan de knoppen
pingButton.addEventListener('click', () => {
outputField.value = 'Ping'; // Stel de tekst van het tekstveld in op "Ping"
});

pongButton.addEventListener('click', () => {
outputField.value = 'Pong'; // Stel de tekst van het tekstveld in op "Pong"
});

Uitleg: 1. Elementen selecteren: De knoppen en het tekstveld worden opgehaald met document.getElementById(). 2. Eventlisteners toevoegen: Met addEventListener wordt een actie (zoals klikken) gekoppeld aan een functie. 3. Gedrag definiëren: Wanneer een knop wordt aangeklikt, verandert de waarde van het tekstveld.

Ping Pong Voorbeeld



Belangrijke Mogelijkheden voor Gebruikersinvoer

HTML biedt verschillende manieren om gebruikersinvoer te accepteren. Enkele belangrijke elementen zijn:

  • Knoppen (<button>): Voor acties zoals klikken.
  • Tekstvelden (<input type="text">): Voor tekstinvoer.
  • Checkboxen (<input type="checkbox">): Voor selecteerbare opties.
  • Dropdowns (<select>): Voor keuze uit meerdere opties.

Met JavaScript kun je gedrag toevoegen, zoals valideren van invoer of dynamisch aanpassen van waarden.

Belangrijke Mogelijkheden voor Uitvoer

  • Tekstvelden (<input> met readonly): Voor het tonen van resultaten.
  • Paragrafen (<p>): Voor dynamische tekst.
  • Divs (<div>): Voor het tonen van grotere hoeveelheden content.

Verschillende Manieren om JavaScript te Koppelen

  1. Eventlisteners (voorkeur): Gebruik addEventListener om gedrag los van de HTML-structuur te definiëren:
knop.addEventListener("click", () => {
  // Actie
});
  1. Inline JavaScript (niet aanbevolen): JavaScript direct in een HTML-attribuut schrijven:
<button onclick="alert('Hallo!')">Klik</button>

Dit is minder flexibel en moeilijker te onderhouden.

  1. Externe bestanden (voorkeur): Link naar een apart JavaScript-bestand met <script src="bestand.js"></script>. Dit houdt de code gestructureerd en overzichtelijk.

Conclusie

Met JavaScript en HTML kun je eenvoudig interactieve webpagina’s bouwen. Door gebruikersinvoer te koppelen aan acties, zoals in ons Ping Pong-voorbeeld, maak je dynamische ervaringen. Met kennis van de verschillende invoer- en uitvoermogelijkheden en manieren om JavaScript te koppelen, kun je krachtige toepassingen ontwikkelen.