JavaScript 0 - introductie

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

introductie

https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10560

Leerdoelen

Na deze les kun je:

• uitleggen wat JS is
• uitleggen waar JS voor "is"
• vertellen waar IDE voor staat en wat het doet
• drie overeenkomsten noemen tussen JS en Python
• drie verschillen noemen tussen JS en Python
• drie voorbeelden geven waar JS voor wordt gebruikt

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 ook: JS) is ontstaan als een scripttaal

Omdat JS geen op zichzelf staand programma kan maken, zeggen sommigen dat het geen echte programmeertaal is

(maar ik vind het wel een echte programmeertaal)

Het is bedoeld voor webpagina's (in je browser dus)

JS heeft NIETS te maken met Java!        

JavaScript: wat voor taal is het?

JS is net als Python een "interpreted language"

Dit wil zeggen dat code niet hoeft te worden gecompileerd voor uitvoering... compileren is het omzetten van menselijke taal naar machinetaal (binair)

Geïnterpreteerd, omdat de code regel voor regel wordt geïnterpreteerd voordat het wordt uitgevoerd

Interpreted language is langzamer dan gecompileerd

JavaScript: waar is het voor?

JS wordt vooral gebruikt in webomgevingen (HTML/CSS)

Je kunt JS gebruiken net als HTML: server-side (website) en client-side (eigen computer, ook wel lokaal genoemd)

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

JavaScript: IDE

Een IDE is een Integrated Development Environment

Visual Studio Code (VS Code) is een voorbeeld van een IDE

Andere IDE's zijn (in volgorde van mijn voorkeur):

• Visual Studio Code (VS Code)  https://vscode.dev
• Notepad++  https://www.notepad-plus-plus.org
• Atom  https://atom-editor.cc/

JavaScript: opdrachten

Net als bij HTML/CSS en Python kun je bij JS ook veel leren van voorbeelden

Dus: sla de bestanden van de opdrachten in de les op een gestructureerde manier op, dan kun je daar voor het PO en een toets of SE in terugkijken

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? Zie je een JS functie?

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? Overeenkomsten met Python?

Opdracht # 3

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

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?

Opdracht # 5

1. Bekijk de code
   rechts 
2. Neem 1 minuut
   om de code te
   begrijpen
3. Hoe kan dit
   efficiënter?

JavaScript code

Zie de code rechtsonder, komt dat je bekend voor?

JavaScript vs Python

Veel van de logica van Python geldt ook voor JS, zoals:

• gebruik van variabelen
• gebruik van functies
• gebruik van if-statements
• gebruik van for- en while loops
• gebruik van Booleaanse waarden en operatoren

Maar, ze zijn niet exact hetzelfde!

JavaScript vs Python 1/3

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

JavaScript vs Python 2/3

Ook functies worden anders gemaakt:

JavaScript                                      Python

JavaScript vs Python 3/3

Het aanroepen van een functie gaat wel hetzelfde:

JavaScript:

                      add("arg1","arg2")

Python:

                      add("arg1","arg2")

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

Puntkomma 1/2

In JS wordt ; (puntkomma) gebruikt om een uitdrukking te "termineren" (terminate a statement)

Het is goed gebruik (good practice) om die ; zelf toe te voegen, maar JS voegt ze ook automatisch toe

Voor de leesbaarheid en eenvoud voor onderhoud is het belangrijk om ; zelf consequent te gebruiken

Puntkomma 2/2

Bij parameters in functies en het aanroepen van functies wordt , gebruikt:

Maar bij een for-loop staan ; opeens wel tussen de ()... waarom?

Puntkomma 2/2

Bij parameters in functies en het aanroepen van functies wordt , gebruikt:

Maar bij een for-loop staan ; opeens wel tussen de ()... waarom?                                          Omdat het 3 optionele 

                                                        regels zijn!

                                           

Welke van onderstaande opties is geen netwerk?

1. ARPA
2. LAN
3. WAN
4. PAN

Leerdoelen

Nu kun je:

• uitleggen wat JS is
• uitleggen waar JS voor "is"
• vertellen waar IDE voor staat en wat het doet
• drie overeenkomsten benoemen tussen JS en Python
• drie verschillen benoemen tussen JS en Python
• drie voorbeelden geven waar JS voor wordt gebruikt

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:

• voorbereiding: verder werken aan je PO
• voorbereiding: (Fundament) huiswerk doen
• uitdaging: 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

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6