Introductie in JavaScript

Startpagina

Onderwerpen
Hover voor toelichting, klik voor uitgebreide uitleg, klik op logo voor startpagina.

Toelichting
Open de inspector om de output van JavaScript te zien

De Browser en DOM

Wat is de DOM?

De DOM (Document Object Model) is een programmeerinterface voor HTML en XML documenten. Het vertegenwoordigt de pagina zodat programma's de structuur, stijl en inhoud kunnen wijzigen. De DOM stelt ontwikkelaars in staat om elementen op een webpagina te manipuleren, zoals het toevoegen, verwijderen of wijzigen van HTML-elementen en hun inhoud, evenals het reageren op gebruikersinteracties zoals klikken of typen. Het is een essentieel onderdeel van webontwikkeling en maakt het mogelijk om dynamische en interactieve webpagina's te creëren.

DOM DOM2

Toelichting
Open de inspector om de output van JavaScript te zien

Waar plaatsen we de JavaScript code?

Inline

JavaScript code kan inline worden geplaatst in HTML-elementen met behulp van de onclick, onload, of andere event-handlers. Bijvoorbeeld:

<button onclick="alert('Hallo!')">Klik mij</button>


      <p>Dit is een paragraaf html element.</p>
   </div>

   <script>
      let x = 5;
      let name = "John";
      console.log("De waarde van x is: " + x);
      console.log("De naam is: " + name);
   </script>

</body>

Extern

JavaScript code kan ook extern worden geplaatst in een aparte .js bestand dat wordt geladen in de HTML pagina met behulp van de <script> tag. Bijvoorbeeld:

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

In de <head> tag

JavaScript code kan ook worden geplaatst in de <head> tag van de HTML pagina. Dit zorgt ervoor dat de JavaScript code wordt geladen voordat de HTML pagina wordt getoond. Bijvoorbeeld:

<head>
   <script src="js/script.js"></script>
</head>

In de <body> tag

JavaScript code kan ook worden geplaatst in de <body> tag van de HTML pagina. Dit zorgt ervoor dat de JavaScript code wordt geladen nadat de HTML pagina is getoond. Bijvoorbeeld:

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

Toelichting
Open de inspector om de output van JavaScript te zien

Variabelen in JavaScript

LET, CONST en VAR

In JavaScript zijn er drie manieren om variabelen te declareren: let, const, en var.

  • let: Hiermee kun je een variabele declareren die kan worden herkend en opnieuw toegewezen. Bijvoorbeeld: let x = 5;
  • const: Hiermee kun je een constante variabele declareren die niet kan worden herkend of opnieuw toegewezen. Bijvoorbeeld: const y = 10;
  • var: Dit is de oude manier om variabelen te declareren in JavaScript. Het heeft function scope in plaats van block scope, wat kan leiden tot onverwacht gedrag. Het wordt over het algemeen afgeraden om var te gebruiken in moderne JavaScript code. Bijvoorbeeld: var z = 15;

Scope

De scope van een variabele bepaalt waar deze toegankelijk is in de code. Variabelen gedeclareerd met let en const hebben block scope, wat betekent dat ze alleen toegankelijk zijn binnen het blok waarin ze zijn gedeclareerd. Variabelen gedeclareerd met var hebben function scope, wat betekent dat ze toegankelijk zijn binnen de hele functie waarin ze zijn gedeclareerd.

Variabele typen

JavaScript heeft verschillende datatypes, waaronder:

  • String: Tekstuele gegevens, bijvoorbeeld: let name = "John";
  • Number: Numerieke gegevens, bijvoorbeeld: let age = 30;
  • Boolean: Waar of onwaar waarden, bijvoorbeeld: let isStudent = true;
  • Array: Geordende lijsten van waarden, bijvoorbeeld: let colors = ["red", "green", "blue"];
  • Object: Gegevensstructuren die sleutel-waarde paren bevatten, bijvoorbeeld: let person = { name: "Alice", age: 25 };

Toelichting
Open de inspector om de output van JavaScript te zien

Logica/Controles in JavaScript

IF-statement

De if statement wordt gebruikt om een blok code uit te voeren als aan een bepaalde voorwaarde is voldaan. Bijvoorbeeld:

let age = 18;
if (age >= 18) {
   console.log("Je bent volwassen.");
} else {
   console.log("Je bent minderjarig.");
}

Switch-statement

De switch statement wordt gebruikt om een blok code uit te voeren op basis van verschillende mogelijke waarden van een expressie. Bijvoorbeeld:

let day = "maandag";
switch (day) {
   case "maandag":
      console.log("Vandaag is het maandag.");
      break;
   case "dinsdag":
      console.log("Vandaag is het dinsdag.");
      break;
   default:
      console.log("Vandaag is het een andere dag.");
}

Toelichting
Open de inspector om de output van JavaScript te zien

Code blokken herhalen

De for-loop

De for loop wordt gebruikt om een blok code een bepaald aantal keren uit te voeren. Bijvoorbeeld:


for(let i = 0; i < 5; i++) {
   console.log("Dit is iteratie nummer " + i);
}

De while-loop

De while loop wordt gebruikt om een blok code uit te voeren zolang een bepaalde voorwaarde waar is. Bijvoorbeeld:


let i = 0;

while (i < 5) {
   console.log("Dit is iteratie nummer " + i);
   i++;
}

De foreach-loop

De forEach loop wordt gebruikt om een blok code uit te voeren voor elk element in een array. Bijvoorbeeld:


let numbers = [1, 2, 3, 4, 5];

numbers.forEach( function(number) {
   console.log("Het getal is " + number);
});

Toelichting
Open de inspector om de output van JavaScript te zien

Reageren op gebruikersinteracties

Events

In JavaScript kunnen we reageren op gebruikersinteracties door middel van events. Een event is een actie die plaatsvindt in de browser, zoals een muisklik, toetsenbordtoets, of het laden van een pagina. We kunnen event listeners toevoegen aan HTML-elementen om te reageren op deze events. Bijvoorbeeld:


let button = document.querySelector("button");

button.addEventListener("click", function() {
   alert("Je hebt op de knop geklikt!");
});

In dit voorbeeld voegen we een event listener toe aan een knop die reageertt op het "click" event. Wanneer de knop wordt geklikt, wordt de functie uitgevoerd die een alert toont met de boodschap "Je hebt op de knop geklikt!".

Event argument

De functie die wordt uitgevoerd wanneer een event plaatsvindt, kan een argument ontvangen dat informatie bevat over het event. Bijvoorbeeld:


let button = document.querySelector("button");

button.addEventListener("click", function(event) {
   console.log("Je hebt op de knop geklikt!");
   console.log("De muispositie is: " + event.clientX + ", " + event.clientY);
});

In dit voorbeeld ontvangt de functie een argument genaamd event, dat informatie bevat over het click event, zoals de positie van de muis op het scherm op het moment van de klik.

Veelvoorkomende events

  • click: Gebruiker klikt op een element.
  • mouseover: Gebruiker beweegt de muis over een element.
  • keydown: Gebruiker drukt een toets in op het toetsenbord.
  • load: De pagina is volledig geladen.
  • submit: Een formulier wordt ingediend.

Toelichting
Open de inspector om de output van JavaScript te zien

JavaScript code opdelen in modules

Wat zijn modules?

JavaScript modules zijn bestanden die JavaScript-code bevatten die op een gestructureerde manier kunnen worden georganiseerd en hergebruikt. Modules maken het mogelijk om complexe applicaties op te delen in kleinere, beheersbare stukken code. Ze kunnen zowel in de browser als in Node.js worden gebruikt.

Importeren en exporteren

In JavaScript kunnen we functies, objecten of waarden exporteren vanuit een module en importeren in een andere module. Bijvoorbeeld:

// math.js
export function add(a, b) {
   return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

In dit voorbeeld exporteren we de functie add vanuit het bestand math.js en importeren we deze functie in main.js om deze te gebruiken.

Voordelen van modules

  • Code kan hergebruikt worden in meerdere bestanden.
  • Code is beter georganiseerd en leesbaar.
  • Modules maken het gemakkelijker om complexe applicaties te ontwikkelen.

Wanneer gebruik je modules?

Modules zijn handig wanneer je een groter project ontwikkelt. Ze helpen om code te organiseren, hergebruikbaar te maken en het beheer van grote applicaties te vereenvoudigen.

Hoe schrijf je modules?

Modules schrijf je in aparte bestanden met een .js extensie. In deze bestanden definieer je functies, objecten of waarden die je wilt exporteren. Vervolgens importeer je deze modules in andere bestanden waar je ze nodig hebt.

Naamgeving van modules en single responsibility

Modules moeten een duidelijke naam hebben die hun functie beschrijft. Elke module moet één specifieke taak uitvoeren (single responsibility principle). Dit maakt de code beter leesbaar en onderhoudbaar.

Voorbeeld van een module die verantwoordelijk is voor het beheren van gebruikers:

// user.js
export function createUser(name, age) {
   return { name, age };
}
// main.js
import { createUser } from './user.js';
let user = createUser("Alice", 25);
console.log(user); // Output: { name: "Alice", age: 25 }