JavaScript 1 - console variabelen scope commentaar prompt

• 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/2

Na deze les kun je (voor JS):

• aangeven welke bestandextensie JS gebruikt
• drie verschillende manieren benoemen waarop je
   variabelen kunt definiëren en de verschillen uitleggen
• uitleggen hoe je op twee manieren commentaar
   toevoegt en wat het verschil ertussen is

...

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.

Leerdoelen 2/2

• aangeven met welke functie je invoer van de gebruiker
   krijgt en met welke functie je naar de console output
• de verschillende scopes binnen JS benoemen
• bij gegeven code aangeven welke scope een bepaalde
   variabele heeft en uitleggen waarom

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: 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 mee 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 1/2

Net als bij Python, heeft JS een console

Dit is een interface waar alleen tekstuitvoer op staat

De console is waar we in Python de uitkomsten van print() en input() zagen,

zoals in Thonny:

Console 2/2

In JS kun je output naar de console sturen met console.log()

Via Inspector kun je dat zien in je browser in Console:

Console 3/3

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

Opdracht # 1

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

Opdracht # 2

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

Opdracht # 3

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

Vragen:

1. wat gebeurt er? de pagina wordt aangepast na de input
2. door welke regels gebeurt dat? de prompt en de document regel
   "document" is blijkbaar een standaard object
3. wat doet .getElementById ?
   selecteert voor het document (de webpagina) een element met een bepaald ID
4. wat doet .textContent?
   dat vervangt de inhoud van het geselecteerde element met de waarde van de variabele "vandaag"
5. bonus: welke scope heeft "vandaag"? global scope, want buiten een block gedefinieerd

Variabelen 1/2

Bij het definiëren van variabelen verschilt JS met Python

Python:

variabele = "waarde variabele"

JS:

let variabele = "waarde variabele"

Variabelen

Bij het definiëren van variabelen verschilt JS met Python

Er zijn 3 soorten variabelen in JS:

• var (bijv: var naamvar = "abc")
  
• let (bijv: let naamvar = "abc")
• const (bijv: const naamvar = "abc")

Het verschil zit vooral in de scope en de aanpasbaarheid...

Variabelen: var

var is de oude manier van definiëren

een met var gedefinieerde variabele heeft altijd global scope, waardoor hij overal in je script te gebruiken is!

dat lijkt handig, maar kan ook heel verwarrend zijn, bijvoorbeeld als je die variabele al ergens anders in je code hebt gebruikt en de variabele daardoor wordt aangepast

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 

Belangrijk:

• let kan wel worden gewijzigd terwijl de code runt
• const kan niet worden gewijzigd terwijl de code runt,
   daardoor moet je een waarde toekennen bij definiëren

Variabelen: scope 1/2

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

Er zijn in JS twee soorten scope:

• Global (variabele is beschikbaar in het hele script)
• Block (beperkt tot binnen het code-block { }
   let op: dit kan dus ook een functie zijn!)
  

Variabelen: scope 2/2

Global scope:

• elke variabele gemaakt met var 
• let en const variabelen gemaakt buiten een code-block

Block scope:

• let en const variabelen gemaakt binnen een code-block

Definiëren voor gebruik?

Net als in Python moet je in JS een variabele definiëren vóór je die kunt gebruiken

Als je goed kijkt, dan zie je hierboven dat de user defined function in JS is aangeroepen vóór die is gedefinieerd!

Definiëren voor aanroepen? 2/2

Een user defined function kun je in JS wèl aanroepen vóór die is gedefinieerd (dat is anders dan in Python!)

De functie wordt wel gewoon aangeroepen:

Commentaar

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

// enkele regel commentaar in JS

/* 

     meerdere regels
     commentaar in JS

*/

Commentaar: best practice

Het is goed gebruik om een commentaar blok te gebruiken voor functies, om aan te geven hoe die functie werkt:

Invoer gebruiker: prompt()

Om input te vragen van de gebruiker, heeft JS de functie prompt() 

deze is vergelijkbaar met de Python functie input()

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

console.log(vandaag);

Welke scope heeft variabele a ?

<script>
let a;
function test() {
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
function test() {
let a;
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
function test() {
var a;
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
function test() {
const a = "1";
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
function test() {
var a;
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
const a = "1";
function test {
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

foutmelding want geen ( ) achter de naam

Welke scope heeft variabele a ?

<script>
const a = "1";
function test() {
alert(b);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Welke scope heeft variabele a ?

<script>
const a = "1";
function test() {
let a;
alert(a);
}
</script>

1. global
2. block
3. foutmelding
4. ¯\_(ツ)_/¯

Leerdoelen 1/2

Nu kun je (voor JS):

• aangeven welke bestandextensie JS gebruikt
• drie verschillende manieren benoemen waarop je
   variabelen kunt definiëren en de verschillen uitleggen
• uitleggen hoe je op twee manieren commentaar
   toevoegt en wat het verschil ertussen is

...

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.

Leerdoelen 2/2

• aangeven met welke functie je invoer van de gebruiker
   krijgt en met welke functie je naar de console output
• de verschillende scopes binnen JS benoemen 
• bij gegeven code aangeven welke scope een bepaalde
   variabele heeft en uitleggen waarom

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

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6