01 - Javascript - wat is javascript

• ICT
• MBO
• Studiejaar 1,2

JavaScript: De Taal van Interactiviteit

Leerdoel

Aan het einde van de les zul je begrijpen wat JavaScript is en hoe het wordt gebruikt in webontwikkeling.

Wat weet je al over JavaScript?

Wat is JavaScript?

JavaScript is een programmeertaal die:

• Interactieve elementen op websites creëert
• De gebruikerservaring verbetert
• Dynamische en interactieve functionaliteiten toevoegt, zoals formulieren en games."

Voorbeeld: Interactief Formulier (1)

 JavaScript kan bijvoorbeeld gebruikt worden om invoervelden van een formulier te veranderen op basis van de gebruikers-input, waardoor real-time validatie mogelijk is.

Voorbeeld: Interactief Formulier (2)

// HTML

<form>

      

    <label for="age">Leeftijd:</label><br>

    

    <input type="text" id="age" name="age"                onkeyup="validateAge()">

    

    <p id="message"></p>

</form>

// JavaScript

function validateAge() {

      let age = document.getElementById("age").value;

      let message = document.getElementById("message");

      if(age >= 18) {

        message.style.color = "green";

        message.innerHTML = "Toegang tot de website!";

      } else {

        message.style.color = "red";

        message.innerHTML = "Sorry, geen toegang";

      }

 }

Hoe voegen we JavaScript toe aan een website?

Je kan javascript op 3 manieren toevoegen aan je website:

• Inline scripting

• Externe javascript bestanden

• Direct in een HTML element

• JavaScript-code wordt dan binnen <script> tags geplaats

• JavaScript-code wordt in een extern bestand geplaatst met extensie .js

•  In HTML-attributen om te reageren op bepaalde gebeurtenissen

Hoe voegen we JavaScript toe aan een website?

<script>

  document.write('JavaScript geschreven.');

</script>

INTERN

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

<button onclick="alert('Hallo Wereld!')">

Klik op mij</button>

EXTERN

HTML

Praktische Toepassingen

JavaScript wordt gebruikt voor het maken van animaties, het laden van inhoud zonder de pagina te vernieuwen en het implementeren van interactieve kaarten.

Oefening: Bouw een Eenvoudige JavaScript Functie

1. Maak een HTML-bestand met een knop.

2. Voeg een JavaScript-functie toe voor een klik op de knop.

3. Toon een bericht op de pagina bij de klik.

4. Zoek online hoe je dit doet.

5. Lever in via Teams.

Samenvatting

Je hebt geleerd wat Javascript en je hebt gezien op welke manieren je Javascript kan toevoegen aan je HTML pagina's.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.