JavaScript is een krachtige scripttaal die in de browser draait en waarmee we de inhoud en het gedrag van de webpagina kunnen manipuleren. Vergelijkbaar met een huis fungeert JavaScript als de functionaliteit van het huis, waaronder elementen zoals elektrische systemen, sanitair, huisautomatisering en centrale verwarming – in feite alles wat functionaliteit biedt.

Hier volgt hoe we JavaScript kunnen toevoegen aan het HTML-document:

Inline JavaScript

We kunnen JavaScript direct opnemen in het HTML-document met behulp van de <script>-tag. Deze methode is handig voor het toevoegen van snelle, eenmalige scripts.

Voorbeeld:

Klik op de Klik Mij knop hieronder.

Externe JavaScript

Voor grotere scripts of wanneer code op meerdere pagina's hergebruikt moet worden, is het gebruikelijk om externe JavaScript-bestanden te gebruiken. Maak een apart JavaScript-bestand aan (bijvoorbeeld index.js) en koppel dit aan het HTML-document met behulp van de <script>-tag.

Voorbeeld:

Zorg ervoor dat alle drie de bestanden in het gegeven voorbeeld worden bekeken.

JavaScript-basisprincipes

JavaScript maakt het mogelijk om interactiviteit en dynamisch gedrag toe te voegen aan webpagina's. Hier volgen enkele basisconcepten:

Variabelen

Variabelen worden gebruikt om gegevenswaarden op te slaan. Variabelen kunnen worden gedeclareerd met de sleutelwoorden let of const.

let age = 30;
const name = "Peter";

Functies

Functies zijn herbruikbare codeblokken die een specifieke taak uitvoeren. Functies kunnen worden gedefinieerd met het sleutelwoord function.

function greet() {
  alert('Hello, World!');
}

DOM-manipulatie

Het Document Object Model (DOM) vertegenwoordigt de structuur van een webpagina. Met JavaScript kan de DOM worden gemanipuleerd om de inhoud en het gedrag van de webpagina dynamisch aan te passen.

document.getElementById('myElement').innerHTML = 'New Content';

Voorwaardelijke verklaringen

Voorwaardelijke verklaringen maken het mogelijk om verschillende codeblokken uit te voeren op basis van gespecificeerde voorwaarden.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Videotutorial