JavaScript 2 - uitwisselbaarheid herbruikbaarheid variabelen

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 2.3 tot en met 2.6

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

Leerdoelen:

Na deze les kun je (voor JS):

• uitleggen wat code conventions zijn
• vertellen wat uitwisselbaarheid van code is
• in je eigen woorden herbruikbaarheid van code uitleggen
• cAmElCaSe uitleggen
• goed commentaar toevoegen aan je code

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.

Code conventions

Code conventions zijn regels van goed gebruik

Bij programmeren zijn voorbeelden van code conventions:

• uitwisselbaarheid van code
• herbruikbaarheid van code
• logische indeling functies
  
• gebruik commentaar

Uitwisselbaarheid 1/2

Het doel van uitwisselbare code is:

• om samenwerking en hergebruik te bevorderen, en 
• om de onderhoudbaarheid van de code te verbeteren

Dit wordt gedaan door code modulair te maken

Code wordt dan opgedeeld in kleinere, onafhankelijke stukken (modules) die elk een specifieke taak uitvoeren

Uitwisselbaarheid 2/2

Ook is het belangrijk dat code duidelijk is... dat je dus bijvoorbeeld aan de naam van een variabele/functie kunt zien wat die doet of betekent

Fout                                       Goed

Als je code uitwisselbaar is, kan je code gemakkelijk door anderen worden gebruikt, aangepast en begrepen

Herbruikbaarheid

Herbruikbaarheid: hiermee wordt bedoeld dat je code  (meestal een functie) zonder veel aanpassingen kan worden (her)gebruikt in een andere context

Denk hierbij bijvoorbeeld aan flexibele inrichting, overzichtelijke layout, gebruik van lokale variabelen, parameters, helder commentaar, en een heldere return

Naamgeving

Een goede naam (variabele, functie, bestandsnaam):

• overschrijft geen standaard functie
• beschrijft duidelijk (voor een andere programmeur) wat 
   de variabele betekent of functie doet
• we gebruiken camelCase om in één woord meerdere
   woorden te combineren

camelCase

Om meerdere woorden overzichtelijk zonder spaties weer te geven wordt camelCase gebruikt, zoals bijvoorbeeld bij de methoden .toUpperCase() en .toLowerCase()

Je kunt camelCase ook gebruiken

bij variabelen en zelf gemaakte

functies

Logische indeling van functies

Met logische indeling van functies wordt bedoeld dat:

• er geen meerdere functies zijn die exact hetzelfde doen
• functies die bij elkaar horen, ook bij elkaar staan in de
   code (en dus niet ver uit elkaar)

Goed commentaar

Met goed commentaar geef je:

• aan waarom je bepaalde keuzes in je code hebt gemaakt
• informatie over (de werking van) een functie:
• de bron aan van code die je ergens
   anders vandaan hebt gehaald

Opdracht # 1

1. Kopieer de code
   rechts
2. sla het op als:
   index2_1.htm
3. open het bestand met je browser
4. wat gebeurt er?

Opdracht # 2

1. Kopieer de code
   rechts
2. sla het op als:
   index2_2.htm
3. open het bestand met je browser
4. wat gebeurt er?
5. is dat wat je verwachtte?

Plek in HTML

De <script> tags kunnen praktisch overal binnen de HTML code worden neergezet, maar het is good practice dat de script pas aan het einde van de HTML wordt opgenomen

Hierdoor laadt de pagina snel (en is er eerder iets te zien), en kan de JS hier acties op uitvoeren (dat kan niet als de elementen er nog niet zijn)

Weakly typed: type 1/3

JS is "weakly typed"

Dit wil zeggen dat het type van een variabele flexibel is en kan veranderen binnen een programma

Van belang voor de volgende pagina's is dat je weet dat je in JS variabelen kunt combineren met +

Weakly typed: type 2/3

Bekijk de code

rechts ... 




wat denk je dat er gebeurt?

Weakly typed: type 3/3

Bij Python zou

je een fout

krijgen

...
maar niet bij

JavaScript!

Het is belangrijk dat je ziet wat JS doet met de variabele

Opdracht # 3

Om aan te geven hoe vreemd JS is...

1. Kopieer de code 
2. sla het op als:
   index2_3.htm
3. open het bestand 
   met je browser
4. wat zie je?

Welke functie van de code uit de vorige slide wordt gebruikt voor debuggen?

1. textContent
2. Console.log
3. Prompt

Beschrijf wat de
functie rechts
"doet"

Leerdoelen:

Nu kun je (voor JS):

1. uitleggen wat code conventions zijn
2. vertellen wat uitwisselbaarheid van code is
3. in je eigen woorden herbruikbaarheid van code uitleggen
4. cAmElCaSe uitleggen
5. goed commentaar toevoegen aan je JS code

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.

Over welk onderwerp
van deze les wil je
meer info?

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6

En nu?

Uitdagingen:

pas de code rechts aan

zodat de functie darkmodus

de achtergrond zwart en de

letters wit maakt

en andersom met de druk

op de knop