01 - Javascript - wat is javascript

JavaScript: De Taal van Interactiviteit
1 / 15
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1,2

In deze les zitten 15 slides, met interactieve quizzen, tekstslides en 1 video.

time-iconLesduur is: 60 min

Onderdelen in deze les

JavaScript: De Taal van Interactiviteit

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over JavaScript?

Slide 3 - Woordweb

Deze slide heeft geen instructies

Slide 4 - Video

Deze slide heeft geen instructies

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."

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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";
      }
 }

Slide 7 - Tekstslide

Deze slide heeft geen instructies

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

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Slide 9 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

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?

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Wat moet al klaar zijn?
Werk de introductiecursus t/m KELVIN Javascript op CodeCademy door. Je moet hier even een account voor aanmaken.
Ingeleverd = screenshot in Teams in van je inlogpagina en een screenshot van de opdracht waar je bent gebleven.

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Wat nu?
Zie Teams voor specifieke eisen

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

Slide 14 - Tekstslide

Deze slide heeft geen instructies

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

Slide 15 - Open vraag

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.