JavaScript 0 - introductie

                      JavaScript
1 / 20
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4,5

In deze les zitten 20 slides, met interactieve quiz en tekstslides.

time-iconLesduur is: 45 min

Onderdelen in deze les

                      JavaScript

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Hoofdstuk 7; Interactief
Ontwikkelen met Javascript (JS)

Werk de opdrachten 24 tot en met 31 uit het boekje door (hoofdstuk 7 en 8). Je mag de codes verwerken in je eigen website. Zet de bestanden in een apart mapje en lever het in een .zip file in. 



Slide 2 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen:
  1. Je kunt uitleggen wat JS is
  2. Je kunt uitleggen waar JS voor "is"
  3. Je kunt drie voorbeelden geven van waar JS voor wordt gebruikt

Slide 3 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Opdracht # 1
  1. bekijk de code:
  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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 10 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Slide 13 - Tekstslide

Deze slide heeft geen instructies

JavaScript vs Python
Ook functies worden anders gemaakt in JS:

Slide 14 - Tekstslide

Deze slide heeft geen instructies

JavaScript vs Python
Het aanroepen gaat echter wel hetzelfde:


JavaScript:
                       add()

           Python:
                              add()



Slide 15 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Nu volgen er enkele vragen

Slide 17 - Tekstslide

Deze slide heeft geen instructies


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

Slide 18 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies