JavaScript 1 - IDE commentaar invoer gebruiker variabelen

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 1 tot en met 2.2

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

Leerdoelen:

1. Je weet wat een IDE is en waar het voor staat
   
2. Je kunt de termen editor en console uitleggen
3. Je kunt 3 verschillende manieren van variabelen definiëren benoemen in JS en het verschil uitleggen
   
4. Je kunt uitleggen hoe je op 2 manieren commentaar toevoegt in JS en wat het verschil ertussen is
5. Je kunt invoer van de gebruiker verwerken in JS

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.

IDE

Een IDE is een Integrated Development Environment

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

Als VSC te zwaar is voor je laptop, dan kun je ook gebruik maken van https://vscode.dev/

Dat is een online versie van VS Code, waar je echter geen code kunt uitvoeren (maar wel schrijven)

Bestandsnaam extensie

De bestandsnaam extensie voor JS is .js

Bij Python bestanden was de extensie .py

Bij HTML bestanden was de extensie .htm en .html

Bij CSS bestanden was de extensie .css

Let wel: je kunt JS ook in een .htm/.html gebruiken!

Console

Net als bij Python, heeft JS een console

Een console is een interface, een schermpje, waar alleen tekstuitvoer op staat

De console heeft vaak een zwarte achtergrond

Je bent dit ook al gewend van Python

Console

Je kunt output naar de console geven door de JS functie:

console.log()

Via Inspector (CTRL-SHIFT-C) kun je dat zien in je Browser:

Console

In VS Code kun
je de console
ook zien
(debug console)

Opdracht # 1

1. Kopieer de code
   rechts
2. sla het op als:
   index1_1.htm
3. open het bestand met je browser
4. open "Inspecteren" (CTRL-SHIFT-C)
5. selecteer "console"... zie je nu de melding?

Opdracht # 2

1. Kopieer de code
   rechts
2. sla het op als:
   index1_2.htm
3. open en inspecteer je
   console
4. wat zie je?

Variabelen

Er zijn 3 belangrijke soorten variabelen in JS:

• var
  
• let
• const

voorbeeld:
var abc = 123

Variabelen: var

var is de oude manier van definiëren

een met var gedefinieerde variable heeft Global scope, waardoor hij overal in je script te gebruiken is!

dat lijkt handig, maar kan ook heel onhandig zijn, bijvoorbeeld omdat je dan erg goed moet opletten dat je die variabele niet al ergens anders hebt gebruikt

Variabelen: let en const

let en const zijn in 2015 geïntroduceerd met als doel aan te sluiten bij andere programmeertalen: de variabele is beperkt tot het stuk code waarin het is aangemaakt 

let kan wel worden gewijzigd, 

const kan niet worden gewijzigd

Variabelen: scope

Elke variabele heeft een "scope", deze scope bepaalt of iets beschikbaar is op een bepaalde plek in je code

Er zijn in JS drie soorten scope:

• Global (variabele beschikbaar in het hele script)
• Local (beperkt tot de functie)
• Block (beperkt binnen het block { })

Commentaar

Commentaar werkt net als in Python, bedoeld om je code begrijpelijker te maken, de syntax is wel anders:

// enkele regel commentaar in JS

/* 

     meerdere regels
     commentaar in JS

*/

Invoer gebruiker: prompt()

Waar we bij Python de functie input() hadden, heeft JS de functie prompt()

let vandaag;

vandaag = prompt("Welke dag is het vandaag?");

console.log(vandaag);

Opdracht # 3

1. Kopieer de code
   rechts
2. sla het op als:
   index1_3.htm
3. voer het uit
   en begrijp de code, ik ga er vragen over stellen
   
4. je hebt 3 minuten!

Nu volgen er enkele vragen

Welke van onderstaande opties is geen netwerk?

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

Leerdoelen:

1. Je weet wat een IDE is en waar het voor staat
   
2. Je kunt de termen editor en console uitleggen
   
3. Je kunt 3 verschillende manieren van variabelen definiëren benoemen in JS en het verschil uitleggen
   
4. Je kunt uitleggen hoe je op 2 manieren commentaar toevoegt in JS en wat het verschil ertussen is
   
5. Je kunt invoer van de gebruiker verwerken in JS

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?

Uitdagingen:

a) met 1 knop tussen blauw en rood toggelen
b) een dark-modus maakt van een index0_2.htm