JavaScript 99 - verdieping: ternary statements en sorteer-algoritmen

                      JavaScript
1 / 26
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4,5

Cette leçon contient 26 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

                      JavaScript

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Fundament
Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

                        verdieping: 
                   Ternary statements
                       en algoritmen

Slide 2 - Diapositive

Content credentials
Generated with AI ∙ March 31, 2024 at 8:17 PM
Leerdoelen:
Je kunt na deze les (in JS):
  • uitleggen wat een ternary statement is
  • enkele voordelen van een ternary statement weergeven
  • een nadeel van een ternary statement uitleggen
  • een eenvoudige ternary statement maken
  • uitleggen wat een algoritme is
  • drie sorteer-algoritmen benoemen

Slide 3 - Diapositive

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.
Ternary statement 1/4
Een handig concept in de informatica is de 
ternary statement

Dit concept valt in de categorie voorwaardelijke expressies/uitdrukkingen (conditional expressions), net als de if-statement, for-loops en while-loops

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Ternary statement 2/4
Dit concept bestaat in meerdere programmeertalen, zoals JavaScript, Python, C, C++, Java, en meer...

Het principe van de syntax is dat alles op 1 regel staat, maar de exacte syntax verschilt per programmeertaal:
voorwaarde ? als True : als False      // JS
als True if voorwaarde else als False # Python

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Ternary statement 3/4
voorwaarde ? als True : als False        // JS



als True if voorwaarde else als False  # Python

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Ternary statement 4/4
Ternary statement zijn efficiënt en leesbaar, omdat het geheel kort en krachtig wordt weergegeven

Nadeel is natuurlijk dat de code voor waar en onwaar relatief beperkt is
Maar de uit te voeren code bij "als True" en "als False" kan natuurlijk ook een andere functie aanroepen

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Opdracht
timer
3:00

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Opdracht: sleep elk vak naar de juiste plek voor JS
(het vak "voorwaarde" is breder dan het doelvak)
timer
1:00
voorwaarde
als True
als False
?
:

Slide 9 - Question de remorquage

Cet élément n'a pas d'instructions

Schrijf nu een ternary statement die
"volwassen" logt als leeftijd groter of gelijk aan 18 is, en anders "minderjarig" (geheel zonder spaties!)

Slide 10 - Question ouverte

Cet élément n'a pas d'instructions

Algoritme: Sorteren
Een algoritme is een stappenplan, een soort recept waarmee iets gedaan wordt 

Een voorbeeld van een algoritme is sorteren 
Sorteren is natuurlijk het op volgorde zetten van iets (zoals een lijst)
Simpel..... toch?

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Schrijf je algoritme in pseudocode om deze ongesorteerde lijst oplopend te sorteren:
let lijst = [5,3,8,9]
timer
2:00

Slide 12 - Question ouverte

Cet élément n'a pas d'instructions

Sorteren 1/3
Nou, nee, niet altijd even simpel
Als je het algoritme probeert uit te schrijven, dan kom je er al snel achter dat sorteren nog niet zo eenvoudig is... denk aan het maken van een pindakaas met jam broodje!

De computer heeft namelijk precieze instructies nodig, en dus zijn er meerdere sorteer-algoritmes

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Sorteren 2/3
Welk algoritme (Engels: algorithm) het beste is, is afhankelijk van de data die je wil sorteren...

Voorbeelden zijn:
  • Bubble sort
  • Insertion sort
  • Selection sort
  • Merge sort

  • Quick sort
  • Heap sort
  • Shell sort
  • Stupid sort

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Sorteren 3/3
Je hoeft ze (natuurlijk) niet allemaal te kennen, maar de volgende drie algoritmen zijn wel van belang:
  • Bubble sort
  • Merge sort
  • Selection sort

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: selection sort
selection sort 
  1. maak een nieuwe dataset
  2. itereer over elk element van de oude set en zoek de laagste waarde
  3. zet dat element op de juiste plek in de nieuwe set
  4. herhaal het proces totdat we klaar zijn

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: selection sort

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: bubble sort 1/3
bubble sort 
  1. vergelijk twee elementen die naast elkaar staan 
  2. wissel ze om als ze niet in de juiste volgorde staan
  3. herhaal het proces totdat alles is gesorteerd

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: bubble sort 2/3

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: bubble sort 3/3
beter:

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: merge sort 1/3
merge sort 
  1. splits de dataset in twee delen op
  2. herhaal stap 1 tot de delen 1 element lang zijn
  3. sorteer elk deel apart
  4. voeg de delen samen door de waarde van elk element van elk deel met elkaar te vergelijken

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: merge sort 2/3

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

Sorteren: merge sort 3/3

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Sorteren
Deze website maakt het allemaal heel mooi visueel:
https://www.toptal.com/developers/sorting-algorithms

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Leerdoelen:
Je kunt nu (in JS):
  • uitleggen wat een ternary statement is
  • enkele voordelen van een ternary statement weergeven
  • een nadeel van een ternary statement uitleggen
  • een eenvoudige ternary statement maken
  • uitleggen wat een algoritme is
  • drie sorteer-algoritmen benoemen

Slide 25 - Diapositive

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.

Slide 26 - Diapositive

Cet élément n'a pas d'instructions