Programmeren 5
Les 11

22 november 2017

JavaScript - OOP? in JavaScript

Doelstelling

1. JavaScript is geen object-georiënteerde programmeertaal zoals C# of Java dat is. Maar omdat Java en C# zo alomtegenwoordig zijn is de druk toegenomen om ook de object-georiënteerde manier van werken in Java en C# in JavaScript na te bootsen. Tot nu toe hebben we de term object al veel gebruik. We hebben gezien dat array's en functies objecten zijn. We hebben ook gezien wat object-notatie is. Maar het woord object in deze context komt niet overeen met wat een object betekent in Java en C# OOP parlance. Je moet dus steeds voor je zelf duidelijk maken over welk object het gaat in JavaScript: is het een native JavaScript object of is het een object zoals het bestaat in Java of C#? Na deze les ben je in staat dit onderscheid te maken.
2. In JavaScript spreekt met van prototype-based programmeren. Prototype-gebaseerd programmeren is een OOP model dat geen klassen gebruikt. Je maakt eerst een een prototype van een klasse, m.a.w. programmeert een object die het gedrag van een klasse na kan bootsen. Dat prototype kan je later hergebruiken en eventueel uitbreiden met nieuwe methoden en eigenschappen (gelijkt op overerving in klasse-gebaseerde talen zoals C#, PHP, Java). Dit wordt ook wel eens classless, prototype-oriented, of instance-based programmeren genoemd).
3. Sinds ECMAScript 6 beschikt JavaScript over een heuse class-syntaxis. Maar deze class-syntaxis is geen object-oriented inheritance model in JavaScript. JavaScript classes brengen wel een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten maar in wezen zijn het nog altijd constructor functies. JavaScript is een prototype-gebaseerde taal (zoals Java en C# talen zijn die op klassen zijn gebaseerdl). ES6 heeft JavaScript-klassen geïntroduceerd maar die zijn slechts een verpakking voor prototype-gebaseerde overevering en geen dus geen op klassen gebaseerde overervingsmodel. Het woord klasse leidt tot misvervesranden als je denkt dat klassen in JavaScript hetzelfde zijn als klassen in Java of C#. Dus class-syntaxis in JaveAcript gebruiken stelt je niet vrij van een goed begrip te hebben prototype-object georiënteerd programmeren.

Na deze les:

• Kan je meerdere exemplaren of instanties maken van één en hetzelfde object op de tradionele manier met een constructor functie.
• Kan je instanties maken op de moderne manier met class-syntaxis.

Stappenplan

1. Wat zijn objecten nu eigenlijk in JavaScript?
   1. JS - Objecten - Beschrijving
   2. Filmpje: Wat zijn objecten nu eigenlijk in JavaScript?
2. Werken met JavaScript objecten
   1. JS - Objecten - Maken
   2. Filmpje: Objecten maken in JavaScript
   3. JS - Objecteigenschappen
3. Meerdere exemplaren van één object of waar objecten in JavaScript een beetje beginnen te gelijken op objecten uit talen als Java, C# en PHP?
   1. JS - Object Constructor
   2. Filmpje: Meerdere exemplaren van een object maken in JavaScript
   3. JS - Objecten - Prototype
4. Oefening: JS - Geordende tabellen
5. JS - class-syntaxis

Opdracht

1. Werk de TableSort klasse af (je mag de prototype based manier gebruiken of de nieuwe class-syntaxis of beiden):
   1. bij het opstarten staan de wijzen de pijltjes in de kolommen naar boven;
   2. als de gebruiker op een kolomkop klikt:
      1. worden de rijen geordend in de volgorde die door het pijltje wordt aangegeven
      2. verandert het pijltje van richting
2. Je kan de oplossing maken in Cloud9 of Visual Studio maar zorg ervoor dat beiden na het maken van de opdracht gesynchroniseerd zijn via BitbucketZet in de melding van de commit: "TableSort Opdracht Final".
3. Stuur een tekstbestand door via onderstaande link met een link naar Cloud9 en Bitbucket.
4. Deadline 29 november 2017