JavaScript 0 - introductie

                      JavaScript
1 / 20
next
Slide 1: Slide
InformaticaWOStudiejaar 4,5

This lesson contains 20 slides, with interactive quiz and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

                      JavaScript

Slide 1 - Slide

This item has no instructions

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

This item has no instructions

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

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

This item has no 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 - Slide

This item has no instructions

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

This item has no 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 - Slide

This item has no instructions

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

Slide 8 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

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

Slide 12 - Slide

This item has no 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 - Slide

This item has no instructions

JavaScript vs Python
Ook functies worden anders gemaakt in JS:

Slide 14 - Slide

This item has no instructions

JavaScript vs Python
Het aanroepen gaat echter wel hetzelfde:


JavaScript:
                       add()

           Python:
                              add()



Slide 15 - Slide

This item has no 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 - Slide

This item has no instructions

Nu volgen er enkele vragen

Slide 17 - Slide

This item has no instructions


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

Slide 18 - Quiz

This item has no 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 - Slide

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

This item has no instructions