Inhoud leereenheid 7c. JavaScript: Objecten en functies. Introductie 59. Leerkern 60. Samenvatting 82. Opdrachten 83. Zelftoets 89.

Transcriptie

1 Inhoud leereenheid 7c JavaScript: Objecten en functies Introductie 59 Leerkern 60 1 Functies Syntax - samenvatting Functies definiëren Functie als parameter (facultatief) Functie als returnwaarde (facultatief) 66 2 Objecten Wat is een object? Een object creëren Globale objecten en namen van typen Prototype 74 3 Verschillen met Java Typering Klassen en objecten (facultatief) Functioneel programmeren 82 Samenvatting 82 Opdrachten 83 Zelftoets 89 Terugkoppeling 90 1 Uitwerking van de opgaven 90 2 Uitwerking van de opdrachten 91 3 Uitwerking van de zelftoets 94 58

2 Leereenheid 7c JavaScript: Objecten en functies I N T R O D U C T I E In de vorige leereenheden heeft u al functies gebruikt en gedefinieerd. In deze leereenheid vatten we dat nog eens samen, en gaan we dieper op het onderwerp in. Functies zijn in JavaScript waarden als alle andere waarden: een variabele kan als waarde een functie krijgen, functies kunnen als parameter worden meegegeven bij de aanroep van een functie, en functies kunnen zelfs worden teruggegeven. Een gedeelte van de stof over functies is facultatief: functies als parameter en functies als terugkeerwaarde vormen geen onderdeel van de verplichte leerstof. Omdat JavaScript met deze mogelijkheden zo anders is dan bijvoorbeeld Java stellen we u wel in de gelegenheid om er kennis van te nemen. JavaScript is een objectgeoriënteerde taal, in de zin dat afgezien van de waarden van de primitieve typen Boolean, Number en String alles in JavaScript een object is. De syntax van JavaScript lijkt weliswaar op die van Java, maar de manier van werken met objecten is wezenlijk anders: JavaScript kent bijvoorbeeld het begrip prototype. Als u in de leereenheid hierna leert werken met de DOM, het geheel van objecten dat de representatie is van de webpagina zoals de browser u die aanbiedt, is het handig om iets meer te weten over objecten in JavaScript. In deze leereenheid gaan we daarom ook dieper in op objecten. Tot slot zetten we een aantal verschillen tussen JavaScript en talen als Java en C# op een rijtje: programmeren met JavaScript verschilt in een aantal opzichten wezenlijk van dergelijke objectgeoriënteerde talen. Een gedeelte van de betreffende stof is facultatief. LEERDOELEN Na het bestuderen van deze leereenheid wordt verwacht dat u twee manieren kunt gebruiken om een functie te definiëren een functie met optionele parameters kunt schrijven een constructor kunt schrijven en gebruiken twee manieren kunt gebruiken om een object te creëren een methode kunt toevoegen aan het prototype van een object de betekenis van de volgende begrippen kent: first-class elementen, anonieme functie, de ()-operator, dot-operator, []-notatie, object literal, property, methode, constructor, primitieve waarde, prototype, statische typering, dynamische typering. Studeeraanwijzingen Deze leereenheid staat los van het tekstboek. De paragrafen 1.3, 1.4 en 3.2 behoren niet tot de verplichte leerstof: ze zijn facultatief. We verwachten dat u voor het bestuderen van deze leereenheid ongeveer 9 uur zult nodig hebben. OU 59

3 Webapplicaties: de clientkant L E E R K E R N 1 Functies 1.1 SYNTAX - SAMENVATTING We beginnen met een korte samenvatting van wat we tot nu toe van functies hebben gezien: FIGUUR 7c.1 Een voorbeeld van een functiedefinitie Functiedefinitie Functieaanroep Formele parameters Actuele parameters Optionele parameters Een functiedefinitie start met het keyword function, dan volgt de naam van de functie, gevolgd door de formele parameters tussen haakjes, met ten slotte de body, die tussen accolades staat. In de body kan gebruik gemaakt worden van de parameters, en er kan een waarde worden teruggegeven met behulp van het keyword return. Een functie kan worden aangeroepen met behulp van de naam, gevolgd door haakjes met eventueel daar tussen de actuele parameters. Formele parameters zijn de namen voor de parameters die gebruikt kunnen worden in de body van de functie. Actuele parameters zijn waarden die worden meegegeven bij de aanroep van de functie, en die bij de executie van de functie worden ingevuld waar in de body de namen van de formele parameters staan. Er ontstaat geen fout als een functie wordt aangeroepen met meer of minder actuele parameters dan er formele parameters zijn gespecificeerd: het teveel aan parameters wordt gewoon genegeerd, en de parameters die te kort komen krijgen de waarde undefined. Deze eigenschap van JavaScript kan gebruikt worden om met optionele parameters te werken: function som(a, b, c) { return a + b + (c 0); In dit voorbeeld is de derde parameter optioneel. Als de functie met drie actuele parameters wordt aangeroepen wordt de som van de drie parameters teruggegeven. Als de functie met maar twee parameters wordt gebruikt wordt de som van die twee parameters teruggegeven: de waarde van de derde wordt bij afwezigheid OU

4 Leereenheid 7c JavaScript: Objecten en functies OPGAVE 7c.1 function eersteletter(woord) { return woord.charat(0); var beginletter = eersteletter("open Universiteit"); Wat zijn in bovenstaande code de formele en wat de actuele parameters? 1.2 FUNCTIES DEFINIËREN Functies zijn first-class -elementen in JavaScript. Dat betekent dat een functie een waarde is met dezelfde eigenschappen als alle andere waarden. Dat heeft een aantal consequenties. Functie als waarde van variabele In de eerste plaats kunt u een variabele als waarde een functie geven. In plaats van de notatie die we tot nu toe hebben gebruikt kunt u daarom ook schrijven: var som = function(a, b, c) { return a + b + (c 0); ; Denk aan de puntkomma aan het einde: die hoort hier, net zoals bij elke andere toekenning! Anonieme functie De functie heeft in dit geval geen naam: tussen het keyword function en de parameters staat geen naam. Een functie zonder naam heet een anonieme functie. De variabele som bevat nu als waarde een referentie naar de functie. OPGAVE 7c.2 In de voorbeelden die u tot nu toe bent tegengekomen heeft u al vaak een toekenning uitgevoerd waarbij een variabele de waarde van een functie krijgt. Kunt u bedenken op welke plaatsen dat was? Functienaam is variabele Als een functie gedefinieerd is met function functienaam(parameters) { is de situatie in feite precies hetzelfde. De functienaam is ook een variabele die een referentie bevat naar een functie, zoals figuur 7c.2 laat zien. FIGUUR 7c.2 Een functie en een variabele met een functie als waarde OU 61

5 Webapplicaties: de clientkant Functienamen globaal Functienamen van functies zoals we ze tot nu toe hebben gedefinieerd zijn dan ook globale variabelen. Een functie die gedefinieerd is als waarde van een variabele wordt op precies dezelfde manier aangeroepen als wanneer hij op de traditionele manier is gedefinieerd: var som = function(a, b, c) { return a + b + (c 0); ; // som(1, 2, 3) geeft als waarde 6 De waarde kan ook aan een tweede variabele worden toegekend: var som = function(a, b, c) { return a + b + (c 0); ; var tweedesom = som; // tweedesom(1, 2, 3) geeft als waarde 6 De variabelen som en tweedesom verwijzen naar dezelfde functie. Er is een belangrijk verschil tussen: var x = som; en: var x = som(); ( )-operator In het eerste geval krijgt de variabele x als waarde de functie met naam som. In het tweede geval krijgt de variabele x de terugkeerwaarde van de functie som als waarde. De haakjes hebben dus de betekenis voer deze functie uit : de ( )-operator. Een heel simpel voorbeeld is het volgende: function twee() { return 2; var getal1 = twee; var getal2 = twee(); De waarde van getal1 is nu een functie met als body {return 2;. De waarde van getal2 is nu 2. Dat het handig kan zijn om een functie als waarde toe te kennen aan een variabele laten we zien in het volgende voorbeeld. Een datum wordt in het Nederlands anders geformatteerd (dag maand jaar) dan in het Engels (maand dag jaar). Het is mogelijk om een functie formatteerdatum te schrijven waarin dat onderscheid wordt gemaakt: 62 OU

6 Leereenheid 7c JavaScript: Objecten en functies function formatteerdatum(dag, maand, jaar) { var datum = ""; var taal = <functieaanroep om de taal op te vragen> switch (taal) { case "en": var maandarray = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]; datum = maandarray[maand] + " " + dag.getdate() + ", " + jaar; break; case "nl": var maandarray = ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"]; datum = dag.getdate() + " " + maandarray[maand] + " " + jaar; return datum; Als die functie vaak gebruikt wordt op een pagina wordt elke keer weer opnieuw opgezocht wat de taal is. De pagina zal daarom sneller functioneren als u in zo n geval een variabele declareert, en die eenmalig, afhankelijk van de taal, een verschillende functie als waarde geeft: var formatteerdatum; var taal = <functieaanroep om de taal op te vragen> switch (taal) { case "en": formatteerdatum = function(dag, maand, jaar) { var maandarray = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]; datum = maandarray[maand] + " " + dag.getdate() + ", " + jaar; return datum; ; break; case "nl": formatteerdatum = function(dag, maand, jaar) { var maandarray = ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"]; datum = dag.getdate() + " " + maandarray[maand] + " " + jaar; return datum; ; OU 63

7 Webapplicaties: de clientkant Nu kunt u overal in de pagina een datum formatteren volgens de taal van de gebruiker met als aanroep: var datum = formatteerdatum(dag, maand, jaar); Er hoeft dan niet, bij aanroep van de functie, opgezocht te worden wat de taal van de browser van de gebruiker is. Het op de juiste manier formatteren van de datum zal daardoor sneller gaan. OPGAVE 7c.3 Waarom zou er in het voorgaande voorbeeld een switch gebruikt zijn en niet een if-else-constructie? Samenvatting Een functie kan op twee manieren worden gedefinieerd: function functienaam(parameters) { var functienaam = function(parameters) { ; Namen van functies zijn globale variabelen. De ( )-operator heeft als betekenis dat de functie waar hij achter staat wordt uitgevoerd. De rest van deze paragraaf is facultatief. Er is nog een derde manier, waarbij u een functienaam gebruikt en tegelijkertijd een variabele de waarde van de functie geeft: var variabele = function naam(parameters){body; Meestal zult u de eerste manier gebruiken. Het voorbeeld heeft laten zien dat u de tweede manier kunt gebruiken om eenmalig te kiezen voor de implementatie van een functie op een pagina. De derde manier heeft u nodig als u de tweede manier wilt gebruiken bij recursieve functies, maar daar zullen we in deze cursus niet verder op in gaan. Paragraaf 1.3 is facultatief. 1.3 FUNCTIE ALS PARAMETER Een andere consequentie van het feit dat een functie een first-class element is, is dat functies als actuele parameter kunnen worden meegegeven in de aanroep van een functie. Het volgende voorbeeld maakt duidelijk waarom dat handig kan zijn. Het komt vaak voor dat we een array moeten aflopen en op elk element van de array een functie moeten toepassen. Om niet elke keer de for-lus te hoeven uitschrijven kunnen we een functie schrijven die dat eenmalig voor ons doet. De functie loopt de lijst af, bewerkt elk element met de meegegeven functie en geeft een lijst terug met de bewerkte elementen. Daarbij maken we gebruik van het feit dat een functie als parameter kan fungeren: function toepassen(lijst, functie) { var resultaat = []; for (var i = 0; i < lijst.length; i++) { resultaat.push(functie(lijst[i])); return resultaat; 64 OU

8 Leereenheid 7c JavaScript: Objecten en functies Deze functie wordt aangeroepen met een array en een functie als parameters, en geeft een array terug die bestaat uit de elementen van de meegegeven array waarop stuk voor stuk de meegegeven functie is toegepast. Als we de functie aanroepen moeten we erop letten dat de actuele parameter voor lijst een array is, en de actuele parameter voor functie de naam van een functie is, of een variabele die naar een functie wijst: function plus(getal) { return ++getal; var getallijst = [1, 2, 3]; // toepassen(getallijst, plus) geeft nu [2, 3, 4] Het is duidelijk dat het fout gaat als de actuele parameters van de functie toepassen geen array en functie zijn. Er is geen compiler die de typen controleert voordat we de code kunnen gebruiken in een webpagina. We zullen dus zelf moeten opletten of de typen van de argumenten kloppen met wat de functie verwacht. Sort met functie als parameter In leereenheid 7b, paragraaf 7.4.2, heeft u de methode sort voor type Array gezien. Die methode sorteert de elementen in alfabetische volgorde. De methode werd, zoals we hem zagen, aangeroepen zonder argument, maar het is ook mogelijk om de methode sort aan te roepen met een functie als parameter. Die functie moet een negatieve waarde teruggeven als de eerste parameter voor de tweede moet komen, een positieve waarde als de eerste parameter na de tweede moet komen, en nul als de volgorde kan blijven zoals hij is. Om getallen op volgorde van groot naar klein te krijgen is het dus mogelijk om als functie te gebruiken: function() {return y-x; Bij het vergelijken van twee elementen komt de eerste na de tweede terecht als hij kleiner is, met andere woorden: de grootste waarde komt vooraan te staan. var lijst = [2, 5, 3, 9]; lijst = lijst.sort(); // lijst is nu: [2, 3, 5, 9] lijst = lijst.sort(function(x, y) {return y - x;); // lijst is nu: [9, 5, 3, 2] Een handige manier om de elementen van een array willekeurig te verplaatsen is daarom: lijst.sort(function() { return Math.random(); ); De uitkomst van Math.random()is immers afhankelijk van het toeval groter of kleiner dan nul. OU 65

9 Webapplicaties: de clientkant Paragraaf 1.4 is facultatief. 1.4 FUNCTIE ALS RETURNWAARDE Zoals een functie als actuele parameter kan worden meegegeven bij een functieaanroep, zo kan een functie ook als returnwaarde worden teruggegeven. Het volgende voorbeeld maakt dat duidelijk. Het zal vaak voorkomen dat u in JavaScript een string tussen twee HTML-tags moet zetten: zo kan het voorkomen dat een door de gebruiker ingetypt stuk tekst tussen een begin- en eind p-tag moet komen te staan, of tussen een begin- en eind li-tag. Daartoe kunt u natuurlijk simpelweg een functie schrijven als: function tagdit(tag, tekst) { return "<" + tag + ">" + tekst + "</" + tag + ">"; De functie aanroepen gaat dan met tagdit("li", "En dit is een link-item"); // Geeft terug: "<li>en dit is een link-item</li>" Als we meerdere li-elementen op die manier moeten vullen wordt dat omslachtig: het zou mooi zijn als we over een functie zouden beschikken die we kunnen aanroepen als li(tekst); Zo n functie is simpel te schrijven, maar het mooie van JavaScript is dat u een functie kunt schrijven waarmee u in één keer beschikt over speciale functies voor alle mogelijke tags. Dat gaat op de volgende manier: function tagdit(tag) { var begintag = "<" + tag + ">"; var eindtag = "</" + tag + ">"; return function(tekst) { return begintag + tekst + eindtag; ; var li = tagdit("li"); var lielement = li("en dit is een li"); // levert op: "<li>en dit is een li</li>" Wat hier gebeurt is het volgende: de variabele li krijgt als waarde de terugkeerwaarde van de functie tagdit, aangeroepen met de actuele parameter "li". Die terugkeerwaarde is een anonieme functie, met een formele parameter tekst. In de body van die functie hebben begintag en eindtag de waarde "<li>" en "</li>" gekregen. De body van de functie die de variabele li als waarde gekregen heeft luidt dus: return "<li>" + tekst + "</li>";. Het handige hiervan is dat we nu functies hebben voor alle mogelijke tags: var strong = tagdit("strong"); var strongelement = strong("dit moet vet"); // levert op: "<strong> Dit moet vet </strong>" var p = tagdit("p"); var element = p("dit is een alinea"); // levert op: "<p> Dit is een alinea</p>" 66 OU

10 Leereenheid 7c JavaScript: Objecten en functies 2 Objecten 2.1 WAT IS EEN OBJECT? Property Een object in JavaScript is een verzameling gebundelde properties. Een property (attribuut, eigenschap) bestaat uit een naam en een waarde. Een simpel voorbeeld van een object is: var adres = { straat: "Valkenburgerweg", nummer: 177, postcode: "6419AT", plaats: "Heerlen" ; De accolades geven aan dat de waarde van de variabele adres een referentie naar een object is. Een variabele die als waarde een object heeft, is in werkelijkheid altijd een referentie naar een object, zoals u in leereenheid 7a heeft gezien: FIGUUR 7c.3 De variabele adres is een referentie naar een object Tussen de accolades staan de properties. De properties worden gescheiden door komma s; achter de laatste property staat geen komma. Een property wordt gedefinieerd door een naam te laten volgen door een dubbele punt en een waarde: propertynaam: propertywaarde, In het geval van het object adres heeft de property nummer een waarde van type Number, en de andere properties hebben waarden van type String. Dot-operator Om aan de waarde van een property van een object te komen gebruikt u de dot-operator: var ouplaats = adres.plaats; De betekenis van de dot-operator is dus: object, geef me de waarde van je property met deze naam. Om de waarde van een property te veranderen gebruikt u ook de dotoperator: adres.plaats = "Groningen"; De betekenis van de dot-operator is hier: object, geef me toegang tot de waarde van je property met deze naam. OU 67

11 Webapplicaties: de clientkant OPGAVE 7c.4 Waar bent u de dot-operator al tegengekomen? Property toevoegen Het is in JavaScript heel gemakkelijk om properties toe te voegen aan een bestaand object. Dat gebeurt ook met de dot-operator. adres.land = "Nederland"; FIGUUR 7c.4 Een property toevoegen aan een object []-notatie Er is een tweede manier om aan de waarde van een property te komen. De notatie lijkt op de manier waarop je een element van een array bereikt, maar gebruikt een string (de naam van de property) in plaats van een index: var ouplaats = adres["plaats"]; De notatie met de dot-operator is gemakkelijker te lezen; de notatie met [ ] heeft als voordeel dat je binnen de haken een variabele kunt gebruiken: var adresdeel = "plaats"; adres[adresdeel] = "Maastricht"; Programmeeraanwijzing Gebruik de dot-operator om aan de waarde van een property te komen of om een property toe te voegen, tenzij u gebruik wilt maken van het feit dat u met de [ ]-notatie een variabele tussen de haken kunt gebruiken. Property is geen globale variabele Methode Een property is geen globale variabele. Als de naam van een property gebruikt wordt zonder een object ervoor (preciezer gezegd: zonder de naam van een variabele ervoor die als waarde een referentie naar een object heeft), zal de waarde ervan undefined zijn. Een property met dezelfde naam als een globale variabele zal deze globale variabele dus niet overschrijven, en andersom is dat ook niet het geval. De waarde van een property kan van elk type zijn dat beschikbaar is in JavaScript: Number, Boolean, String, Array, Object, function of null. En net zoals bij variabelen krijgt een property die niet is gedefinieerd de waarde undefined. Als het type van een property function is, heet de property een methode van het object. Een methode is een functie die hoort bij een object, en die kan worden aangeroepen met de dot-operator of met de [ ]-notatie. 68 OU

12 Leereenheid 7c JavaScript: Objecten en functies Een voorbeeld van een methode is: var adres = { straat: "Valkenburgerweg", nummer: 177, postcode: "6419AT", plaats: "Heerlen", formatteer: function() { return this.straat + " " + this.nummer + "<br>" + this.postcode + " "+ this.plaats; ; NB: In feite omvat de term property dus ook methoden. Een methode is tenslotte een property met als waarde een functie. In de praktijk wordt er meestal gesproken over properties en methoden, alsof een methode iets anders is dan een property. Dat zullen we in de cursus over het algemeen ook doen. this Pas op bij methode als event handler In de methode formatteer is het keyword this te zien. Dat keyword wordt gebruikt om binnen de definitie van een methode te verwijzen naar het object waar de methode bij hoort. Als de properties zouden worden gebruikt zonder het keyword this ervoor, zou er verwezen worden naar globale variabelen straat, nummer, postcode en plaats, en dat is niet de bedoeling (die zullen in de meeste gevallen ook niet bestaan). Let dus op bij het gebruik van het keyword this in methoden: dat moet niet gebruikt worden als een methode als event handler wordt gebonden aan een event. Het keyword this wijst in dat geval naar het element waarin de event plaatsvond! Programmeeraanwijzing Gebruik liever geen methode van een object als event handler; gebruik alleen een losse functie. Binnen zo n functie kunt u natuurlijk wel methoden van objecten aanroepen. Samenvatting Een object kan als volgt worden gecreëerd: var variabelenaam = { propertynaam-1: propertywaarde1,, propertynaam-n: propertywaarden De punt heet de dot-operator. Met behulp van de dot-operator kunt u: de waarde van een property opvragen de waarde van een property veranderen een property toevoegen. Naast de dot-operator kunt u ook de [ ]-notatie gebruiken om de waarde van een property op te vragen, of te wijzigen, of een property toe te voegen. Binnen de [ ]-notatie kunt u een variabelenaam gebruiken. Als de waarde van een property een functie is, spreken we van een methode. Het keyword this verwijst naar het bijbehorende object. OU 69

13 Webapplicaties: de clientkant 2.2 EEN OBJECT CREËREN Het ligt voor de hand dat in een applicatie met een object voor een adres meerdere adressen nodig zijn. Het is natuurlijk mogelijk om voor elke variabele die nodig is met properties en waarden te knippen en te plakken, maar mooi is dat niet. Constructor In JavaScript is het mogelijk om objecten te creëren met behulp van een constructor. function Adres(straat, nummer, postcode, plaats){ this.straat = straat; this.nummer = nummer; this.postcode = postcode; this.plaats = plaats; this.formatteer = function() { return this.straat + " " + this.nummer + "<br>" + this.postcode + " " + this.plaats; ; ; Een nieuw Adres-object maken gaat nu als volgt: var ouadres = new Adres("Valkenburgerweg", 177, "6419AT", "Heerlen"); Elk Adres-object dat op deze manier wordt gecreëerd beschikt over een eigen kopie van eventuele methoden die binnen de constructor zijn gedefinieerd, zoals in dit voorbeeld de methode formatteer. Het is dus wel mogelijk om een methode te definiëren in een constructor, maar om efficiencyredenen is het niet aan te raden. Hoe dat efficiënter kan komt in paragraaf 2.4 aan bod. Programmeeraanwijzing Neem geen methoden op in een constructor, omdat elk gecreëerd object er een kopie van krijgt. Het type van ouadres na deze toekenning is dat van Adres-object. Door een constructor te definiëren creëert u dus een nieuw type. Constructor is een functie Kenmerken constructor this Een constructor is dus een functie. Er is een aantal verschillen met de functies die we tot nu toe zijn tegengekomen: De constructor wordt aangeroepen met het keyword new. Er is geen statement met het keyword return, terwijl er wel een waarde wordt teruggegeven: een object. Hier zit een addertje onder het gras: als de constructor zonder het keyword new zou worden aangeroepen, zou hij als een gewone functie fungeren, en zou er geen object worden teruggegeven. Het keyword new zorgt er dus voor dat dit gebeurt! In de functiedefinitie wordt het keyword this gebruikt. Als de constructor wordt gebruikt om een object te creëren verwijst dat keyword this naar het gecreëerde object. 70 OU

14 Leereenheid 7c JavaScript: Objecten en functies Ook hier zit een addertje onder het gras: als de constructor gebruikt wordt zonder het keyword new, zal het keyword this verwijzen naar het object waarbinnen de functie wordt uitgevoerd. Als er niet zo n object is verwijst het keyword this naar de globale omgeving. Als er globale variabelen bestaan met dezelfde naam als de properties van het object waarvoor de constructor bedoeld is, zullen die overschreven worden als de constructor per ongeluk zonder het keyword new wordt aangeroepen. Constructor begint met hoofdletter Het is dus belangrijk om een constructor nooit als gewone functie aan te roepen, maar altijd met het keyword new. Om die reden is de gewoonte ontstaan om constructors met een hoofdletter te laten beginnen. De hoofdletter is een geheugensteuntje, zodat u weet dat het niet om een gewone functie gaat, maar om een constructor. De syntax van JavaScript schrijft dat niet voor, maar het voorkomt vergissingen. Programmeeraanwijzing Begin de naam van een constructor met een hoofdletter, en gebruik een constructor nooit zonder het keyword new. Object creëren met literal Er zijn in JavaScript dus twee manieren om objecten te creëren: met een literal (letterlijke waarde), zoals in: var rechthoek = { zijde1: 4, zijde2: 3 ; Object creëren met constructor met een constructor zoals in: function Rechthoek(eneZijde, anderezijde) { this.zijde1 = enezijde; this.zijde2 = anderezijde; var eenrechthoek = new Rechthoek(4, 3); Als u voldoende heeft aan één object is de literal in het voordeel: er is minder code nodig, en de code is duidelijk. Als u meer objecten nodig heeft is een constructor handiger. Programmeeraanwijzing Gebruik alleen een constructor als u meerdere objecten nodig heeft; gebruik voor slechts één object een literal. Samenvatting Een object kan behalve als literal ook gecreëerd worden met behulp van een constructor. U roept de constructor aan met het keyword new. Een constructor is een functie zonder return-statement. Als de constructor met het keyword new wordt aangeroepen geeft hij een object terug. Het keyword this binnen een constructor verwijst naar het op te leveren object, als de constructor met het keyword new wordt aangeroepen. OU 71

15 Webapplicaties: de clientkant 2.3 GLOBALE OBJECTEN EN NAMEN VAN TYPEN Globale objecten Weblink: Global Objects Er is een aantal objecten in JavaScript die u kunt gebruiken ook al hebt u ze niet gecreëerd: ze bestaan altijd. Die objecten worden globale objecten genoemd. De weblink geeft een overzicht. Deze globale objecten kunnen methoden hebben: u bent er al een aantal tegengekomen in de leereenheden 7a en 7b. Daarin kwam bijvoorbeeld het object Math voor. De methoden uit tabel 7.14 uit het tekstboek zijn methoden van dat globale object Math. Andere voorbeelden zijn het object String, het object Array, het object Boolean en het object Date. In tabel 7.12 van het tekstboek heeft u de methode fromcharcode gezien, van het globale object String. Die methode kunt u dus niet aanroepen op een string, alleen op het globale object String. Met de termen Array, String, Boolean en dergelijke kunnen dus verschillende zaken worden aangeduid. We werken dat hier uit voor de term String: String als type var tekst = "Dit is een waarde van type String."; De variabele tekst heeft hier een waarde van type String. Die waarde is geen object. Bij een toekenning wordt er een kopie van de waarde gecreëerd. var kopietekst = tekst; De variabele kopietekst krijgt als waarde een kopie van de waarde van de variabele tekst. Bij het veranderen van de waarde van kopietekst verandert de waarde van tekst niet. Hetzelfde geldt voor Boolean en Number: waarden kunnen van type Boolean zijn, of van type Number. Dit zijn de primitieve (enkelvoudige) typen binnen JavaScript. String als String object Een waarde kan ook van type String object zijn. var tekst = new String("Dit is een waarde van type String object"); Het onderscheid tussen waarden van type String en van type String object is erg belangrijk bij toekenningen en vergelijkingen. Bekijk bijvoorbeeld de volgende code: var teksta = "Dit is een waarde van type String"; var tekstb = "Dit is een waarde van type String"; var tekstobjecta = new String("Dit is String Object"); var tekstobjectb = new String("Dit is String Object"); De expressie (teksta == tekstb) zal true opleveren, maar de expressie (tekstobjecta == tekstobjectb) levert false op: teksta en tekstb hebben een waarde van type String, en die waarde is in beide gevallen hetzelfde, maar tekstobjecta en tekstobjectb bevatten beide een referentie naar een object: naar twee verschillende objecten. 72 OU

16 Leereenheid 7c JavaScript: Objecten en functies Het is, vanwege dit gedrag, handiger om zoveel mogelijk gebruik te maken van het primitieve type String, maar u moet er op bedacht zijn dat u, als u niet alle code zelf hebt geschreven, ook waarden van type String object kunt tegenkomen. Primitieve waarde Weblink: Methode valueof Met behulp van de methode valueof kunt u van elk object de primitieve waarde van het object opvragen. Bij het vergelijken van twee objecten van type Boolean object, Number object of String object is het dus belangrijk om de waarden met elkaar te vergelijken die het toepassen van valueof oplevert. Als teksta, tekstb, tekstobjecta en tekstobjectb de waarden bevatten zoals ze hiervoor zijn gegeven geldt het volgende: teksta == tekstb // levert true tekstobjecta == tekstobjectb // levert false tekstobjecta.valueof() == tekstobjectb.valueof() // levert true Constructor String Impliciete typeconversie Het zal u zijn opgevallen dat het woord String ook de constructor String kan aangeven. In feite is de constructor String hetzelfde als het globale object String: elke functie is ook een object in JavaScript, en een object kan properties en methoden bevatten. Als u dus String.fromCharCode gebruikt, maakt u in feite gebruik van een methode van de constructor String. In leereenheid 7a en 7b heeft u methoden aangeroepen op waarden van het primitieve type String. Goed beschouwd is dat vreemd: alleen objecten kennen methoden. Nu kunt u beredeneren wat er in zo n geval gebeurt: de waarde van type String wordt door impliciete typeconversie omgezet in een waarde van een String object. Vervolgens kan de methode op dat object worden aangeroepen. De property length en de methoden die voor type String in leereenheid 7a werden besproken, zijn dus properties van een String object. Zoals er waarden van type String en van type String object bestaan, geldt dat ook voor Boolean (type Boolean en type Boolean object) en Number (type Number en type Number object). Waarden van type Array, Object en function zijn altijd objecten; type String, type Boolean en type Number zijn primitieve typen. Waarden van de overige typen zijn (specialisaties van) objecten. OPGAVE 7c.5 Wat gebeurt er precies bij het uitvoeren de volgende code? var nummer = 3; var getal = nummer.tostring(); Samenvatting De term String, kan in een aantal verschillende betekenissen worden gebruikt: een waarde van type String: var tekst = "Dit is een tekst"; OU 73

17 Webapplicaties: de clientkant het globale object String: var tekst = String.fromCharCode(65,66,67); // tekst krijgt als waarde "ABC" Dit globale object String is hetzelfde als de constructor die objecten van type String object creëert: var tekst = new String("een string"); een waarde van type String object: var tekst = new String("een string"); Met de methode valueof is de primitieve waarde te krijgen van waarden van objecten. 2.4 PROTOTYPE Drie voorbeelden van het gebruik van prototype Methode toevoegen aan type Voor we uitleggen wat het begrip prototype in JavaScript inhoudt, laten we aan de hand van drie voorbeelden zien waarom zoiets handig zou kunnen zijn. Stel, u heeft een functie geschreven met een array als parameter: function last(lijst) { if (lijst.length) { return lijst[lijst.length-1]; U kunt die in uw code uiteraard gebruiken, maar het zou mooier zijn als u er een methode van arrays van zou kunnen maken, die u op dezelfde manier zou kunnen aanroepen als andere array-methoden. De functie last zoals hij hier is gedefinieerd levert een probleem op als hij per ongeluk met een waarde wordt aangeroepen van een ander type dan Array, en dat probleem is er niet als last een array-methode zou zijn. JavaScript kent een mechanisme, prototype, waarmee dat mogelijk is: elke array in JavaScript heeft een referentie naar het prototype voor arrays, en als u een methode toevoegt aan dat prototype, beschikt elke array over die methode: Array.prototype.last = function() { if (this.length) { return this[this.length-1]; U kunt nu aan het laatste element van een array komen met: var element = lijst.last(); 74 OU

18 Leereenheid 7c JavaScript: Objecten en functies Default-waarde voor property Een tweede voorbeeld is het volgende. Stel, u heeft een constructor Adres geschreven. U voorziet dat de waarde van de property land, van objecten van type Adres object, in vrijwel alle gevallen "Nederland" zal zijn. U kunt dan aan elk object die property toevoegen, in de constructor, met die waarde. Elk object krijgt dan een eigen property land. Efficiënter is het om die property toe te voegen aan het prototype van Adres-objecten. Als u de property land opvraagt van een willekeurig Adres-object, zal dat object zelf niet over zo n property beschikken, maar het zal de waarde van de property land van z n prototype teruggeven. Adres.prototype.land = "Nederland"; var eenadres = new Adres(); // waarde van eenadres.land is "Nederland" Het voordeel hiervan is dat u, bij een uitzondering, een object zelf een property land kunt geven, met een andere waarde. Alle andere Adresobjecten zullen dan "Nederland" als waarde teruggeven van hun property land. var duitsadres = new Adres(); duitsadres.land = "Duitsland"; // waarde van duitsadres.land is "Duitsland" // waarde van eenadres.land is "Nederland" Type erft methoden van een ander type Met behulp van een prototype is het ook mogelijk om in JavaScript een vorm van overerving te gebruiken. Stel, u heeft een constructor voor Zoogdieren opgesteld, waarbij u een methode isjarig heeft toegevoegd aan het prototype: function Zoogdier(naam){ this.naam = naam; this.leeftijd = 0; Zoogdier.prototype.isJarig = function(){ this.leeftijd += 1; ; U wilt nu een constructor Kat opstellen, en daarbij wilt u dat een Kat over de methoden van Zoogdier beschikt. Dat lukt met behulp van het prototype: function Kat(naam, ras){ this.naam = naam; this.ras = ras; Kat.prototype = new Zoogdier(); Kat.prototype.constructor = Kat; Nu is het mogelijk om nieuwe Katten te creëren, die uit zichzelf al jarig kunnen zijn: var minoes = new Kat("Minoes", "lapjeskat"); minoes.isjarig(); // minoes.leeftijd heeft nu als waarde 1 OU 75

19 Webapplicaties: de clientkant Prototype Elk object in JavaScript heeft automatisch een speciale property die verwijst naar een object: het prototype. Elke array bijvoorbeeld bevat zonder dat we daar iets voor hoeven te doen een extra property: het prototype. We kunnen niet aan de property prototype van de array komen: als de variabele lijst als waarde een array heeft zal lijst.prototype als waarde undefined geven. Maar onder water bestaat de property wel, en de variabele lijst kan er gebruik van maken. Het bijzondere van het prototype van een object is dat het object niet alleen de beschikking heeft over de eigen properties en methoden, maar ook over de properties en de methoden van het prototype. Als we aan adres een property vragen die het zelf niet heeft, zal het kijken of z n prototype wel over de property beschikt. Is dat het geval, dan geeft het die property terug. Array.prototype.last = function() { if (this.length) { return this[this.length-1]; var lijst = [1, 2, 3]; var element = lijst.last(); Een array beschikt zelf niet over de methode last. Maar als we die aan het prototype van Array toevoegen, kan elke array die methode gebruiken alsof het een eigen methode is. FIGUUR 7c.5 Twee objecten met een prototype Figuur 7c.5 laat twee objecten zien die beide hetzelfde prototype hebben. Beide beschikken ze daarom als het ware over een extra property land. De waarde daarvan is niet binnen elk object opgeslagen, maar op slechts één plek: in het prototype-object. Het is voor elk object mogelijk om het object zelf een property land te geven. De objecten die zelf niet over die property beschikken zien alleen de property land van hun prototype. De objecten die wel over die property beschikken zien alleen hun eigen property. 76 OU

20 Leereenheid 7c JavaScript: Objecten en functies Prototype bereiken via constructor Het prototype van een object is dus niet direct te bereiken via dat object. We kunnen het prototype wel bereiken via de constructor van het object. Via de constructor kunnen we, via een property prototype, aan de waarde van het prototype van de te creëren en gecreëerde objecten komen. In het voorbeeld met de array heeft u dat ook gezien: we voegden de methode last toe aan de constructor van arrays: Array.prototype.last = function() { if (this.length) { return this[this.length-1]; FIGUUR 7c.6 Constructor met een prototype Bij het gebruiken van het keyword new bij het creëren van een object met behulp van een constructor krijgt het gecreëerde object een geheime property met als waarde het prototype mee, zoals Figuur 7c.6 laat zien. Property toevoegen aan prototype Een prototype is een object als alle andere objecten. We kunnen dus ook een extra property toevoegen aan zo n prototype. Het is daardoor mogelijk om constanten die voor alle objecten van een bepaald type gelden, variabelen die voor alle objecten van een bepaald type dezelfde waarde hebben, of methoden die ook voor alle objecten van een bepaald type hetzelfde zijn, te definiëren in het prototype. U voegt bijvoorbeeld een methode toe aan een prototype voor Arrayobjecten op de volgende manier: Array.prototype.last = function() {...; In een aantal gevallen is het handig om een property niet te definiëren in een constructor, maar in het prototype: OU 77

21 Webapplicaties: de clientkant Default-waarden Via een prototype kunt u default-waarden creëren. Het prototype van Adres geven we bijvoorbeeld een property land: "Nederland". In de constructor hoeft de property land dan niet te worden opgenomen. function Adres(straat, nummer, postcode, plaats){ this.straat = straat; this.nummer = nummer; this.postcode = postcode; this.plaats = plaats; ; Adres.prototype.land = "Nederland"; Alle objecten van type Adres object beschikken daardoor via hun prototype over een property land met als waarde "Nederland". Willen we bij een variabele britishouadres een ander land opgeven, dan geven we dat object een eigen property land: britishouadres.land = "United Kingdom"; Gemeenschappelijke waarden Alles wat gemeenschappelijk is voor alle objecten die met een bepaalde constructor worden gecreëerd kan het beste in het prototype worden ondergebracht: in dat geval bestaat er maar één kopie van. Een voorbeeld van wat gemeenschappelijk is, zijn methoden. Door methoden in het prototype te definiëren is het overbodig om in een constructor methoden op te nemen: het is ongewenst dat elk object over zijn eigen kopie van de methode beschikt. Het toevoegen van een methode aan het prototype van een constructor is dus iets anders als het toevoegen van methoden aan de constructor zelf! Methode toevoegen aan constructor Het verschil laten we hier zien met een constructor Auto: function Auto(merk, type) { this.merk = merk; this.type = type; var prius = new Auto("Toyota", "Prius"); Auto.pkToKw = function(pk){return pk * 0.746;; // Auto.pkToKw(70) levert op: // prius.pktokw(70) levert een fout op Methode toevoegen aan prototype Als de methode pktokw wordt toegevoegd aan het prototype van de constructor hebben objecten van type Auto object de methode wel tot hun beschikking: function Auto(merk, type) { this.merk = merk; this.type = type; var prius = new Auto("Toyota", "Prius"); Auto.prototype.pkToKw = function(pk){return pk * 0.746;; // prius.pktokw(70) levert op: OU

22 Leereenheid 7c JavaScript: Objecten en functies De eerste manier (een methode toevoegen aan de constructor) heeft de voorkeur als de methode interessant is buiten de objecten van type Auto object om; de tweede manier (een methode toevoegen aan het prototype) heeft de voorkeur als de methode alleen interessant is voor objecten van type Auto object. Programmeeraanwijzing Definieer methoden en gemeenschappelijke waarden niet in een constructor, maar in het prototype van het object dat door de constructor wordt gecreëerd. Weblink: Prototype Samenvatting Het is mogelijk om het prototype als waarde een object te geven. De weblink brengt u bij meer informatie daarover. Elk object beschikt over een prototype. Een object kan de properties en methoden van z n prototype gebruiken alsof het z n eigen properties en methoden zijn. Het prototype van objecten is te bereiken via de constructor van die objecten. Via die constructor is het mogelijk om: properties en methoden aan het prototype toe te voegen properties en methoden van het prototype te veranderen. Het is aan te bevelen om methoden niet in een constructor te definiëren, maar aan het prototype toe te voegen. Constanten kunnen als property aan het prototype worden toegevoegd. Properties van het prototype zijn handig om default-waarden voor properties vast te leggen voor objecten. 3 Verschillen met Java Objectgebaseerd of objectgeoriënteerd? JavaScript wordt soms wel en soms niet objectgeoriënteerd genoemd: dat hangt af van iemands definitie van objectoriëntatie. Wat duidelijk is, is dat JavaScript objectgebaseerd is: JavaScript kent het begrip object als een verzameling properties en methoden, en behalve de primitieve typen Boolean, Number en String is alles binnen JavaScript van het type Object, waarbij arrays en functies speciale vormen van een object zijn. De verschillen met Java zitten hem in de dynamische typering van JavaScript, in de rol van functies binnen JavaScript, en in de andere aspecten van objectoriëntatie: klassen, encapsulation, inheritance en polymorfisme. Vanwege verschillen op die laatste aspecten wordt JavaScript vaak objectgebaseerd in plaats van objectgeoriënteerd genoemd. 3.1 TYPERING JavaScript: dynamisch getypeerd Java: statisch getypeerd JavaScript is, zoals we hebben gezien, dynamisch getypeerd: het type van een variabele wordt bepaald door het type van de waarde van de variabele. Java is statisch getypeerd: het type van een variabele wordt bepaald door de manier waarop de variabele is gedeclareerd. OU 79

23 Webapplicaties: de clientkant Tijdens het compileren van Java worden allerlei fouten met de typering van variabelen geconstateerd. Met JavaScript gebeurt dat niet, ook niet op het moment dat de JavaScript interpreter een JavaScriptbestand inleest. OPGAVE 7c.6 Waarom is het declareren van een variabele voor hij een waarde krijgt wel nodig in Java maar niet in JavaScript? JavaScript: impliciete typeconversie Java: cast Paragraaf 3.2 is facultatief. JavaScript: dynamische objecten Java: statische objecten Java: encapsulation JavaScript: geen encapsulation Weblink: Module pattern Een ander verschil op het gebied van typering is dat JavaScript in veel grotere mate impliciete typeconversie kent. Dat maakt het extra lastig om fouten op het gebied van typering te ontdekken: zolang JavaScript het type van een waarde kan converteren naar het type dat wordt verwacht, ontstaat er geen fout. In Java kan de programmeur kan door middel van een expliciete cast een variabele tijdelijk een ander type geven. In JavaScript is dat niet nodig. 3.2 KLASSEN EN OBJECTEN Zowel Java als JavaScript kennen objecten: datastructuren met properties en methoden. Er is een aantal verschillen. In JavaScript zijn objecten dynamisch: tijdens de duur van het programma kan een object extra properties en methoden krijgen, properties en methoden kunnen van naam veranderen, of worden weggehaald. In Java zijn objecten statisch. De waarde van een property (attribuut in Java) kan wel veranderen, maar een object behoudt de properties en methoden die het heeft wanneer het gecreëerd wordt. De body van methoden verandert niet. In Java kan de klasse van een variabele daarom als een contract fungeren: ik ben van deze klasse, dus ik beschik over deze methoden. In JavaScript is dat uitgesloten: ook al weet je hoe het object er bij creatie uitzag, je weet nooit zeker over welke methoden het beschikt. Encapsulation, inkapseling, houdt in dat properties of methoden van een object verborgen gehouden kunnen worden voor de buitenwereld. In Java kunnen attributen en methoden door middel van het keyword private verborgen worden gehouden. De buitenwereld heeft dan geen kennis over de exacte manier waarop een object in elkaar zit: de buitenwereld heeft alleen weet van de interface van het object: attributen en methoden die als public zijn gedeclareerd. Dat heeft als voordeel dat het mogelijk is om een object anders in te richten (via de klasse). Zolang de interface maar hetzelfde blijft, heeft zo n verandering geen invloed op de rest van het programma. JavaScript kent niets dat overeenkomt met het keyword private: JavaScript kent geen encapsulation. Het is wel mogelijk om met behulp van ingewikkelde constructies met functies private properties en methoden te simuleren. Hoe dat gebeurt valt buiten het bestek van deze cursus. De manier waarop dat gebeurt wordt het module pattern genoemd. De taal zelf beschikt niet over constructies speciaal daarvoor. 80 OU

24 Leereenheid 7c JavaScript: Objecten en functies Java: klassen Prototypegebaseerd Constructor is geen klasse Klasse als template Constructor is functie In Java is elk object een instantie van een klasse. Klassen zijn georganiseerd in een klassenhiërarchie, met één klasse aan de top. JavaScript kent geen klassen: het is een prototypegebaseerde taal. Wat daarbij verwarrend kan zijn, is dat JavaScript het begrip constructor kent, dat we objecten kunnen creëren met het keyword new, en dat constructors over het algemeen met een hoofdletter worden geschreven. Een constructor is echter geen klasse! Een klasse in Java is een template voor objecten, die methoden kan bevatten en attributen. De attributen kunnen klassenvariabelen zijn (met het keyword static) of instantievariabelen. Instanties van klassen bevatten attributen, maar hebben geen eigen kopie van de methoden. Een constructor in JavaScript is een functie die een object oplevert. Het object zal alle properties bevatten die in de constructor worden geïnstantieerd, en zal ook een kopie bevatten van eventuele methoden die in de constructor zijn gedefinieerd. OPGAVE 7c.7 Is het in Java mogelijk om een object te creëren dat niet bij een bepaalde klasse hoort? Is het in JavaScript mogelijk een object te creëren zonder constructor? Met het begrip klasse hangt een aantal andere begrippen samen. Java: inheritance JavaScript: erven van prototype Java: beperkt polymorfisme JavaScript: onbeperkt polymorfisme Java: name space Weblink: Name space JavaScript: alles globaal Overerving of inheritance zorgt ervoor dat een klasse over de properties en methoden van een superklasse kan beschikken. JavaScript kent geen klassen en geen klassenhiërarchie. Inheritance zoals bij Java kent JavaScript dus niet. Objecten erven wel properties en methoden; die erven ze van hun prototype. Dat prototype is bovendien dynamisch: tijdens de duur van een programma kunnen de properties en methoden van een prototype veranderen, omdat een prototype een object is. Polymorfisme in Java houdt in dat een object, bijvoorbeeld gedeclareerd als Animal, zich kan gedragen als Dog of Cat, afhankelijk van de waarde van het object op dat moment. In Java is polymorfie beperkt: een variabele die gedeclareerd is als een bepaalde klasse kan als waarde een subklasse daarvan krijgen, en zich als die subklasse gedragen. In JavaScript is polymorfisme onbeperkt: elke variabele kan elk type als waarde krijgen, en zal zich gedragen afhankelijk van het type. In Java is het mogelijk om met behulp van packages een name space te creëren waarbinnen klassennamen uniek zijn, zodat er geen problemen optreden wanneer de code vanuit andere applicaties gebruikt wordt. In JavaScript bestaan geen packages, en elk JavaScriptbestand waaraan vanuit een HTML-bestand wordt gerefereerd woont in dezelfde name space. In principe zijn alle namen globaal. Het is daarom van groot belang om globale variabelen en globale functies zoveel mogelijk te vermijden. Vanwege met name de verschillen op het gebied van inheritance en encapsulation wordt vaak gesteld dat JavaScript niet objectgeoriënteerd is, maar alleen objectgebaseerd, of prototypegebaseerd. OU 81

25 Webapplicaties: de clientkant 3.3 FUNCTIONEEL PROGRAMMEREN Een belangrijk verschil tussen Java en JavaScript is dat functies in JavaScript first-class elementen zijn: functies kunnen gebruikt worden als parameters in functies, en kunnen teruggegeven worden bij een functieaanroep (de facultatieve paragrafen 1.3 en 1.4 laten zien hoe). Functies als first-class elementen is het centrale idee bij functionele programmeertalen. Om te leren welke krachtige constructies er mogelijk zijn dankzij dit feit, is het aan te bevelen een functionele taal te leren: binnen deze cursus is er geen plaats om daar uitgebreid aandacht aan te besteden. S A M E N V A T T I N G Een functie heeft een naam, heeft eventueel parameters, en een body. In de body kan een waarde worden teruggegeven. Een functie is een waarde als alle andere waarden. Een variabele kan dus als waarde ook een functie krijgen. De ( )-operator heeft als betekenis: voer deze functie uit. Een object is een verzameling properties. Een property met als waarde een functie heet een methode. Een object kan worden geïnstantieerd met een literal of met een constructor. De dot-operator geeft toegang tot properties (en dus ook tot methoden) van een object. Elk object beschikt over een prototype. Properties en methoden van het prototype zijn beschikbaar voor het object. Het prototype van objecten is te manipuleren via de constructor van de objecten. De term String kan betrekking hebben op: type String, type String object, het globale object String: de constructor String. Datzelfde geldt voor de termen Boolean en Number. De term Array kan betrekking hebben op: type Array object, het globale object Array: de constructor Array. Datzelfde geldt voor de termen Object en Function. 82 OU