JavaScript 0 - introductie

                      JavaScript
1 / 20
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4,5

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

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

Éléments de cette leçon

                      JavaScript

Slide 1 - Diapositive

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

Fundament
Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)
introductie
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10560


Slide 2 - Diapositive

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

Leerdoelen:
  1. Je kunt uitleggen wat JS is
  2. Je kunt uitleggen waar JS voor "is"
  3. Je kunt drie overeenkomsten noemen tussen JS en Python
  4. Je kunt drie verschillen noemen tussen JS en Python
  5. Je kunt drie voorbeelden geven van waar JS voor wordt gebruikt

Slide 3 - 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 (hierna: JS) was vroeger een scripttaal
JS kan geen op zichzelf staand programma maken, daarom zeggen sommigen dat het geen echte programmeertaal is
(maar ik vind het wel een echte programmeertaal)

JS heeft NIETS te maken met Java!

Slide 4 - Diapositive

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

JavaScript - waar is het voor?
JS wordt voornamelijk gebruikt in webomgevingen, net als HTML en CSS
Je kunt JS gebruiken:
  • op een website (server-side)
  • maar ook lokaal (client-side)

Je kunt Visual Studio Code (VS Code) gebruiken voor JS
Met JS kun je dingen maken zoals: mobiele applicaties, VR, reserveringssystemen, spellen, animaties, datavisualisatie, en meer

Slide 5 - Diapositive

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

Opdracht # 1
  1. Kopieer de code
    rechts
  2. Sla het op als:
    index0_1.htm
  3. Open het bestand
    in je browser
  4. Wat gebeurt er? Welke functie van JS doet dat?

Slide 6 - Diapositive

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

Opdracht # 2
  1. Kopieer de code
    rechts
  2. Sla het op als:
    index0_2.htm
  3. Open het bestand
    in je browser
  4. Wat gebeurt er? Waarom?

Slide 7 - Diapositive

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

Opdracht # 3
  1. Bekijk de code
    rechts
  2. Hoe kan deze code
    efficiënter?
  3. Je hebt 1 minuut

Slide 8 - Diapositive

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

Opdracht # 4
  1. Kopieer de code
    rechts
  2. Sla het op als:
    index0_4.htm
  3. Open het bestand
    in je browser
  4. Hoe verschilt deze code van die van opdracht #3?

Slide 9 - Diapositive

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

Opdracht # 5
  1. Bekijk de code
    rechts 
  2. Neem 2 minuten
    om de code te
    begrijpen
  3. Hoe kan dit
    efficiënter?

Slide 10 - Diapositive

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

JavaScript vs Python
Veel van de logica van Python gaat ook op voor JS, zoals:
  • if-statements
  • for-loops
  • while loops

Maar, ze zijn wel degelijk verschillend!

Slide 11 - Diapositive

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

JavaScript code
Zie de code rechtsonder, komt dat je bekend voor?

Slide 12 - Diapositive

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

JavaScript vs Python
Het verschil zit in een aantal kleine dingen, zoals het gebruik van { } voor code-blokken, en het gebruik van ;

Slide 13 - Diapositive

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

JavaScript vs Python
Ook functies worden anders gemaakt in JS:

Slide 14 - Diapositive

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

JavaScript vs Python
Het aanroepen gaat echter wel hetzelfde:


JavaScript:
                       add()

           Python:
                              add()



Slide 15 - Diapositive

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

JavaScript vs Python
Waar we in Python vaak iets lieten zien via print, gaat dat bij JS via console.log:

JS:                                                  Python:
 console.log("Hello World!");             print("Hello World!")

maarrrrrr...

Slide 16 - Diapositive

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

Nu volgen er enkele vragen

Slide 17 - Diapositive

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


Welke van onderstaande opties is geen netwerk?
A
ARPA
B
LAN
C
WAN
D
PAN

Slide 18 - Quiz

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

Leerdoelen:
  1. Je kunt uitleggen wat JS is
  2. Je kunt uitleggen waar JS voor "is"
  3. Je kunt drie overeenkomsten noemen tussen JS en Python
  4. Je kunt drie verschillen noemen tussen JS en Python
  5. Je kunt drie voorbeelden geven van waar JS voor wordt gebruikt

Slide 19 - 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.
En nu?
Je kunt nu kiezen uit:
  • verder werken aan je PO netwerken
  • Fundament huiswerk doen
  • opzoeken in w3schools hoe je met JavaScript:
    a) met 1 knop tussen blauw en rood toggelt
    b) een dark-modus maakt van een index0_2.html

Slide 20 - Diapositive

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