Les 1: Introductie tot JavaScript
Home ›JavaScript-track ›Les 1

🟡 Introductie tot JavaScript

⏱ Geschatte leestijd: 20 minuten · 6 stappen

HTML geeft je de structuur van een pagina, CSS de opmaak — maar JavaScript geeft je pagina leven. Met JavaScript kun je reageren op klikken, gegevens valideren, animaties afspelen en veel meer. In deze les leer je wat JavaScript is en schrijf je je eerste code.

1 Wat is JavaScript?

Wat betekent dit?

JavaScript is een programmeertaal die rechtstreeks in de browser draait. We noemen dit client-side scripting: de code wordt uitgevoerd op de computer van de bezoeker, niet op de server.

Voorbeelden van wat JavaScript kan:

  • Formulieren valideren vóór verzending
  • Animaties en overgangen uitvoeren
  • Interactieve content tonen (dropdowns, modals, sliders)
  • Data ophalen zonder de pagina te herladen (AJAX / Fetch)
  • Spellen en visualisaties bouwen in de browser

⚠️ Let op: JavaScript is niet hetzelfde als Java! De namen lijken op elkaar, maar het zijn compleet andere talen met verschillende doelen. JavaScript is ontworpen voor het web; Java is een algemene programmeertaal.

2 De <script>-tag

Wat betekent dit?

Je voegt JavaScript toe aan een HTML-pagina met de <script>-tag. Zet deze tag bij voorkeur vlak voor </body>, zodat de HTML al geladen is voordat de JavaScript start.

Inline JavaScript
<!DOCTYPE html>
<html>
<body>
  <h1>Mijn pagina</h1>

  <script>
    console.log("Hallo!");
  </script>
</body>
</html>
Extern bestand (aanbevolen)
<!-- In index.html -->
<script src="script.js"></script>

<!-- In script.js -->
console.log("Extern bestand!");

💡 Tip: Gebruik het src-attribuut om een extern .js-bestand te koppelen. Dat houdt je HTML en JavaScript netjes gescheiden — net zoals je CSS in een apart .css-bestand zet.

3 console.log() — output in de console

Wat betekent dit?

console.log() schrijft een bericht naar de DevTools-console van je browser. Dit is de meest gebruikte manier om te controleren of je code werkt. Open de console met F12 → tabblad Console.

Voorbeelden van console.log()
console.log("Hallo, wereld!");       // tekst (string)
console.log(42);                     // getal (number)
console.log(true);                   // boolean
console.log("Leeftijd:", 17);        // meerdere waarden
console.log(3 + 7);                  // expressie → 10
console.log("5" + 3);               // opgelet: "53" (string + number)

💡 Tip: In de oefeningen hieronder zie je de console-uitvoer direct onder de editor — je hoeft F12 niet te openen. In echte projecten gebruik je de DevTools-console van je browser.

4 Commentaar in JavaScript

Met commentaar kun je uitleg toevoegen aan je code. De browser voert commentaar niet uit — het is puur voor de lezer.

Enkelvoudig en meervoudig commentaar
// Dit is een enkelvoudig commentaar (één regel)

let naam = "Sara"; // commentaar kan ook achter code staan

/*
  Dit is een meervoudig commentaar.
  Het beslaat meerdere regels.
  Handig voor langere uitleg of tijdelijk code uitschakelen.
*/

console.log(naam); // → Sara

✓ Goede gewoonte: Schrijf commentaar bij complexe stukken code zodat jij (en anderen) later begrijpen wat de code doet. Overdrijf niet — simpele code heeft geen commentaar nodig.

5 Oefening 1: Drie console.log-statements

Opdracht:

Schrijf drie console.log()-statements die achtereenvolgens loggen: je naam, je leeftijd (als getal) en de tekst "JavaScript is cool".

✓ Minimaal 3 console.log()-aanroepen

editor
Console output

6 Eindopdracht: Vijf console.log-statements

Opdracht:

Schrijf vijf console.log()-statements die loggen:

✓ Je naam (string)

✓ De som 3 + 7

✓ De boolean true

✓ De aaneengevoegde string "Hello" + " World"

✓ De huidige datum met new Date().toLocaleDateString('nl-NL')

editor
Console output
📄 Volledig voorbeeld: introductie.js 
// ── Wat is JavaScript ──────────────────────────────
// JavaScript draait in de browser (client-side scripting).
// Het is NIET hetzelfde als Java!

// ── De script-tag ──────────────────────────────────
// Zet altijd vlak voor </body>:
// <script src="script.js"></script>

// ── console.log() ─────────────────────────────────
console.log("Hallo, wereld!");         // string
console.log(42);                       // number
console.log(true);                     // boolean
console.log("Naam:", "Sara");          // meerdere waarden
console.log(3 + 7);                    // expressie → 10
console.log("Vandaag:", new Date().toLocaleDateString('nl-NL'));

// ── Commentaar ────────────────────────────────────
// Enkelvoudig commentaar

/*
  Meervoudig commentaar
  over meerdere regels
*/
← Les 1 Les 2 →