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.

Hoe pas je inline CSS toe?

1. Met een aparte CSS-file
2. In een script-tag
3. Met de style-attribuut in een tag

Wat is een externe stylesheet?

1. Een apart CSS-bestand
2. Inline CSS in een element
3. CSS binnen een HTML-tag

Wat is de functie van de class selector?

1. Selecteert elementen met een bepaalde class
2. Kan stijl veranderen van meerdere elementen
3. Selecteert alleen ID's van elementen

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

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.