<?php
// Includes:
require_once 'php/bookpage.php';
// Page:
// H9
$page = new bookpage(9);
$page->addContent('<p>Objecten maken het mogelijk makkelijk leesbare en efficiënte code te schrijven. Zonder objecten is de kans groot dat je code een grote warboel wordt.</p>');
// H9.1
$page->nextSubChapter();
$page->addContent('<p>Bij objecten denk je al snel aan dingen, zoals een stoel of een lamp. Zo\'n stoel of lamp bestaat dan weer uit kleinere onderdelen, bijvoorbeeld een lampekap, een poot om op te staan en een aan/uit-knop voor de lamp. Dat is bij een object in JavaScript precies zo: het stelt iets voor, en bestaat uit een aantal onderdelen.</p>');
$page->addContent('<p>Je hebt al een aantal objecten gebruikt in JavaScript, bijvoorbeeld een string ('.$page->generateLinkToH(4, 5).') of een array ('.$page->generateLinkToH(8).'). Een object bevat vaak een aantal variabelen, ofwel <i>eigenschappen</i> (zie '.$page->generateLinkToH(9, 3).') zoals je bij een array de lengte van die array kon opvragen met de eigenschap <i>length</i>. Verder bevat een object vaak een aantal <i>methodes</i> (zie '.$page->generateLinkToH(9, 4).'), dit zijn de functies die in het object zitten. Zo had je bij de array de methode <i>push()</i>.</p>');
// H9.2
$page->nextSubChapter();
$page->addContent('<p>Een normale variabele kan maar één waarde bevatten, een object bevat er vaak meer. Verder bevat een normale variabele geen methodes. Een array is dus een object, want die bevat een heleboel waardes en bevat methodes. Maar toch schrijf je:</p>');
$page->addJS('var mijnArray = [];');
$page->addContent('<p>Hierdoor zou je denken dat een array ook gewoon een variabele is (terwijl het een object is), maar dat is het niet. Je maakt wel een variabele aan, genaamd <i>mijnArray</i>, maar dat is niet de werkelijke array. Die variabele is eigenlijk enkel een verwijzing naar de werkelijke array. Dat is te zien wanneer je een tweede variabele maakt, en de verwijzing die in <i>mijnArray</i> zit kopieert naar de nieuwe variabele. Als je dan namelijk iets wijzigt via die nieuwe variabele, zal die de wijziging doorverwijzen naar de werkelijke array en zal de wijziging dus ook bij <i>mijnArray</i> plaatsvinden gezien die naar dezelfde array verwijst.</p>');
$page->addJS('var mijnArray = []; // Maak een nieuwe array, de lengte van deze array is dus 0
var tweedeVariabele = mijnArray; // Kopieert de verwijzing naar de array, niet de array zelf!
tweedeVariabele.push(42); // Voeg een element toe aan de array
alert(mijnArray.length); // Zonder iets met mijnArray zelf gedaan te hebben is toch de lengte naar 1 veranderd!');
$page->addContent('<p>Hoewel een string strict genomen ook een object is, is het meer een soort kruising tussen een variabele en een object. Want als je een string maakt is die variabele geen verwijzing naar de string maar dan is die variabele ook werkelijk de string. Een string is dus eigenlijk een variabele die ook methodes bevat.</p>');
$page->addJS('var mijnString = "Hello world"; // Maak een nieuwe string
var tweedeVariabele = mijnString; // Kopieert de string, niet een verwijzing!
tweedeVariabele += \'!\'; // Voeg een uitroepteken toe aan de kopie van de string
alert(mijnString); // In tegenstelling tot een normaal object is mijnString nu niet gewijzigd, omdat mijnString ook werkelijk de string is en geen verwijzing');
// H9.3
$page->nextSubChapter();
$page->addContent('<p>Een object kan eigenschappen bevatten. Dat zijn de variabelen die in dat object zitten. Je hebt er al eens een gezien, namelijk <i>eenArray.length</i> (waarbij <i>eenArray</i> natuurlijk een array is). Eigenschappen kunnen dus benaderd worden door eerst de naam van de variabele die naar het object verwijst te typen, dan een punt en dan de naam van de eigenschap. Dus schematisch: '.$page->inlineJS('verwijzendeVariabele.eigenschap').'</p>');
$page->addContent('<p>De eigenschappen zijn gewone variabelen en kunnen dus ook weer een verwijzing naar een object zijn met zijn eigen eigenschappen en methodes. Daardoor is de volgende code mogelijk:</p>');
$page->addJS('window.document.getElementById("een_id"); // Vraag van het window-object de eigenschap document op (ook een object), en gebruik dan van document de methode getElementById()');
// H9.4
$page->nextSubChapter();
$page->addContent('<p>Methodes lijken veel op eigenschappen, het enige verschil is dat methodes functies zijn die in een object zitten en geen variabelen die in een object zitten. Methodes kunnen vaak de eigenschappen van een object aanpassen, denk bijvoorbeeld aan een array. Als je de methode <i>push()</i> aanroept zal er een element in die array bijkomen en dus wordt de eigenschap <i>length</i> ook aangepast.</p>');
$page->addContent('<p>Een methode gebruik je op dezelfde manier als een eigenschap: '.$page->inlineJS('verwijzendeVariabele.methode(eventuele, argumenten)').'. Nu zie je dus dat bijvoorbeeld <i>document.write()</i> een methode is, <i>write()</i> is een methode (ingebouwde functie) van <i>document</i>, <i>document</i> is een van de objecten die altijd bestaat in JavaScript (die je dus niet zelf hoeft te maken en die je niet zelf kan maken), zie '.$page->generateLinkToH(10, 3).'.</p>');
$page->addContent('<p>Een methode is dus eigenlijk een functie die een speciale actie voor het object waar hij deel van is uitvoert. Zo voegt bijvoorbeeld <i>push()</i> alleen een element toe aan de array waar hij op uitgevoerd wordt.</p>');
$page->addJS('var a1 = []; // Nieuwe lege array
var a2 = []; // Tweede nieuwe lege array
a1.push(42); // Nu wordt push() dus uitgevoerd op de array waar a1 naar verwijst
alert(a2.length); // Daardoor zal de array waar a2 naar verwijst nog leeg zijn');
// H9.5
$page->nextSubChapter();
$page->addContent('<p>Elk object heeft zo zijn eigen eigenschappen en methodes. Zo heeft een string ook weer allerlei methodes, en een array heeft ook veel meer methodes dan alleen <i>push()</i>. In '.$page->generateLinkToH(10).' wordt van een aantal objecten een aantal eigenschappen en methodes genoemd die handig zullen zijn. Verder dient deze site niet als naslagwerk, maar als leersite. Naslagwerken die uitleg over alle methodes en eigenschappen bevatten kunnen makkelijk gevonden worden op het internet. Een daarvan is zeer aan te raden, alleen is deze wel Engelstalig: <a href="http://w3schools.com/jsref/">het naslagwerk van W3Schools over JavaScript</a></p>');
// H9.6 (opdrachten)
$page->nextSubChapter();
$page->addAssignments(9);
$page->printAll();
?>