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.

Datatypes in JavaScript

In JavaScript zijn er verschillende datatypes, waaronder string, number, boolean, object en meer.

Jullie hebben hier al mee kennisgemaakt in CodeCademy

DataTypes komen in alle programmeertalen voor. In HTML CSS hebben we daar niet mee gewerkt. Hoe komt dat?

Wat moet al klaar zijn?

Werk de introductiecursus t/m KELVIN Javascript op CodeCademy door. Je moet hier even een account voor aanmaken.

https://www.codecademy.com/learn/introduction-to-javascript

Ingeleverd = screenshot in Teams in van je inlogpagina en een screenshot van de opdracht waar je bent gebleven.

Wat nu?

Zie Teams voor specifieke eisen

• Maak map aan: Javascript
• Boekje: hoofdstuk 7 vanaf blz 43

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.