JavaScript 6 - methoden, nesten, functies declareren, lijsten en dictionaries

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 5.4 tot en met 5.6
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10560

Leerdoelen:

Je kunt na deze les (in JS):

• een functie herkennen die ook een methode is
• methode, attribuut en property kort beschrijven
• beschrijven wat het nesten van functies is
• uitleggen wanneer je functies zou willen nesten
• uit je hoofd op papier een simpele functie schrijven
• een lijst en een dictionary herkennen

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.

Functies: methoden?

Sommige functies in JS zijn methoden, en sommige niet... vergelijk:

prompt("Hoe heet je?")

variabele.toUpperCase()

prompt() staat "op zichzelf", terwijl .toUpperCase() wordt toegepast op iets dat ervoor staat (variabele hierboven)

object

Het object kan van alles zijn, zoals bijvoorbeeld een lijst, een variabele, een string, een integer, een dictionary, een class, etc, etc...

var = "abc";

var.toUpperCase();

methoden

JS heeft zgn. methoden

Bij een methode staat er iets voor, soms een object, soms iets anders (of een object met iets anders), zoals:

• string.toLowerCase()
• array.append()
• object.toString()
  
• number.toFixed()

attribuut en property 1/3

JavaScript heeft zgn. attributen en properties

Een property en attribuut hebben net als een methode het object ervoor, maar zijn geen functies!

• string.length
• inputElement.value
• document.getElementById("startmessage").style.display

attribuut en property 2/3

Het verschil tussen property en attribuut is klein:

• een property is een kenmerk van een object
  bijv: .textContent, .length, .value, .classList
• een attribuut is een eigenschap gedefinieerd in HTML
  bijv: .class, .id, .src, .href, .name, .value
• sommige kunnen zowel property als attribuut zijn
  bijv: .value, .className, .innerHTML, .style

attribuut en property 3/3

Om het nog wat ingewikkelder te maken heeft JS ook (een paar) properties en attributen die methoden hebben, zoals:

• element.classList.add("invisible");
• element.attributes.getNamedItem("naam");

Dit is lastig en het is voldoende dat je weet dat deze nuances er zijn, je hoeft ze niet uit je hoofd te kennen

nesten van functies

Eerder zagen we dat JS weakly typed is, en toen gebruikten we de functie Number() om de prompt() output van string om te zetten naar een getal

Daarbij maakten we gebruik van nesting

Nesten is hier als je een functie binnen een andere zet:

Number( prompt( "hallo" ) )

functies

We hebben ondertussen al meerdere functies als voorbeeld gezien ... maar wat is daarvan blijven hangen in je hoofd?

Op de volgende slide staat een opdracht voor het schrijven van een functie, doe hiervoor zo goed mogelijk je best!

Het is niet om een cijfer, het is belangrijk om denkfouten zichtbaar te maken!

Schrijf een JS functie "vraag"
die de gebruiker vraagt
om een getal

Schrijf een JS functie "optellen"
met 2 parameters die deze parameters optelt en teruggeeft

pseudo code

Eerder dit jaar hebben we al pseudo code behandeld

Pseudo code is heel handig voor beginnende programmeurs

Het geeft je namelijk houvast en structuur wanneer de code uitgebreider wordt (en daardoor lastiger leesbaar)

Je gebruikt pseudo code om het probleem in mensentaal in kleinere stappen op te delen ... dan wordt ook duidelijk waarom je iets in een bepaalde volgorde

lijsten

Met Python hebben we al kennis gemaakt met lijsten

JS kent ook lijsten: [ 1, "string", [ "a" ], [ ] ]

Net als Python heeft een lijst in JS de volgende kenmerken:

1. heeft een volgorde,
   
2. is veranderbaar, (let op: tenzij met const gemaakt!) en
   
3. kan dubbele elementen hebben

dictionaries 1/3

Een dictionary bestaat in JS en in Python

Zie het verschil tussen een lijst en een dictionary in JS:

dictionaries 2/3

Elk element heeft een sleutel (key) en een waarde (value):

dictionaries 3/3

Een key veranderen of toevoegen gaat hetzelfde:

dictnaam[keynaam] = waarde;

Verwijderen heeft een andere syntax:

delete dictionarynaam.keyleeftijd

Leerdoelen:

Je kunt nu (in JS):

• een functie herkennen die ook een methode is
• methode, attribuut en property kort beschrijven
• beschrijven wat het nesten van functies is
• uitleggen wanneer je functies zou willen nesten
• uit je hoofd op papier een simpele functie schrijven
• een lijst en een dictionary herkennen

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.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6