01 - Javascript - introductie

Javascipt - Introductie
1 / 11
suivant
Slide 1: Diapositive
ICTMBOStudiejaar 3,4

Cette leçon contient 11 diapositives, avec quiz interactif et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Javascipt - Introductie

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Leerdoelen
Na deze les kun je:
  • De student begrijpt wat JavaScript
  • De student kan benoemen hoe het JavaScript kan integreren in HTML 
  • De student kan Javascript toepassen binnen HTML

Slide 2 - Diapositive

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
JavaScript: wat is het?
JavaScript is een programmeertaal die:
  • Interactieve elementen op websites creëert
  • De gebruikerservaring verbetert
  • Dynamische en interactieve functionaliteiten toevoegt,  zoals formulieren en games.

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

JavaScript: waar is het voor?
JS wordt vooral gebruikt in webomgevingen (HTML/CSS)

Met JS kun je dingen maken zoals: mobiele applicaties,
web applicaties, AR, VR, reserveringssystemen, spellen, animaties, datavisualisatie, en meer

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Interne JavaScript toevoegen
Je kunt ook JavaScript-code rechtstreeks in de <script> tag in de HTML-pagina plaatsen om interne scripts toe te voegen.
<script>
  document.write('JavaScript geschreven.');
</script>

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Opdracht 1
  1. Neem de code
    rechts over
  2. Sla het op als:
    index-js-01.html
  3. Open het bestand
    in je browser
  4. Wat gebeurt er?
    Zie je een JS functie?
timer
5:00
  <!DOCTYPE html>
  <html>
      <body>
          <button onclick="hallo()">knop</button>
          <script>
                  alert("Hello World");
          </script>
      </body>
  </html>

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Opdracht 2
  1. Neem de code
    rechts over
  2. Sla het op als:
    index-js-02.html
  3. Open het bestand
    in je browser
  4. Wat gebeurt er?
    Waarom?
timer
3:00
<html>
    <body>
        <button onclick="vraagNaam()">Klik hier</button>
        <script>
            function vraagNaam() {
                 let naam = prompt("Wat is jouw naam?");
                
                // Controleert of de gebruiker iets heeft ingevuld
                if (naam) {
                    alert("Hallo " + naam + "! Leuk je te ontmoeten!");
                } else {
                    alert("Je hebt niets ingevuld!");
                }
            }
        </script>
    </body>
</html>

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Externe JavaScript toevoegen
Met het <script> element en het src attribuut kun je externe Javascript bestand(en) toevoegen aan je HTML-pagina
<script src="mijnScript.js"></script>
   function hallo() {
      alert("Hello World");
   }

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Opdracht

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting
  • De student begrijpt wat JavaScript
  • De student kan benoemen hoe het JavaScript kan integreren in HTML
  • De student kan Javascript toepassen binnen HTML

Slide 10 - Diapositive

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Question ouverte

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.