HOOFDSTUK 1 LANG LEVE JAVASCRIPT

3 JAVASCRIPT & AJAX

Inhoudstabel HOOFDSTUK 1 1.1 1.2 1.3 1.4 1.5

EINDELIJK ECHTE INTERACTIE .................................................................................................. 4 WAT IS JAVASCRIPT?................................................................................................................ 5 KORTE GESCHIEDENIS .............................................................................................................. 5 VERSIE 4.1................................................................................................................................ 6 WERKWIJZE .............................................................................................................................. 7

HOOFDSTUK 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

JAVASCRIPT BASIS.......................................................................................... 8

JAVASCRIPT INVOEGEN IN HTML ............................................................................................ 8 VENSTERCOMMUNICATIE ....................................................................................................... 10 VARIABELEN .......................................................................................................................... 11 BEREKENINGEN EN AUTOMATISCHE TYPECONVERSIE ............................................................ 12 PARSEINT() & PARSEFLOAT() ................................................................................................ 13 IF - STRUCTUUR ...................................................................................................................... 13 IN HET HUIDIGE DOCUMENT SCHRIJVEN ................................................................................. 15 SAMENVATTING ..................................................................................................................... 15

HOOFDSTUK 3 3.1 3.2 3.3 3.4 3.5 3.6

LANG LEVE JAVASCRIPT.............................................................................. 4

EVENTS & FUNCTIES .................................................................................... 17

EVENTS OPZOEKEN ................................................................................................................. 17 EVENT-HANDLERS DEFINIËREN .............................................................................................. 18 FUNCTIES DEFINIËREN ............................................................................................................ 19 PARAMETERS.......................................................................................................................... 20 RETURNWAARDEN.................................................................................................................. 21 SAMENVATTING ..................................................................................................................... 22

HOOFDSTUK 4

HET IMAGE OBJECT ..................................................................................... 23

4.1 INLEIDING............................................................................................................................... 23 4.2 RELEVANTE EVENTS .............................................................................................................. 24 4.3 VERWIJZEN NAAR EEN IMAGE IN HET DOCUMENT .................................................................. 24 4.3.1 this ! de huidige figuur.................................................................................................... 25 4.3.2 document.images[n].......................................................................................................... 25 4.3.3 document.imagenaam........................................................................................................ 25 4.4 WERKEN MET EIGENSCHAPPEN .............................................................................................. 25 4.4.1 De bron van de image – src .............................................................................................. 25 4.4.2 De breedte en hoogte van een image – width en height.................................................... 25 4.4.3 De Tooltip van een image – title ....................................................................................... 26 4.5 WILLEKEUR ............................................................................................................................ 26 4.6 SAMENGEVAT ......................................................................................................................... 27 HOOFDSTUK 5 5.1 5.2 5.3 5.4 5.5 5.6

FORMULIEROBJECTEN ............................................................................................................ 28 FORMULIEREN TELLEN ........................................................................................................... 30 FORMULIEREN BENOEMEN ..................................................................................................... 30 STRINGS, - METHODES EN -EIGENSCHAPPEN........................................................................... 31 DE DATUM .............................................................................................................................. 33 SAMENVATTING ..................................................................................................................... 33

HOOFDSTUK 6 6.1 6.2 6.3 6.4 6.5 6.6

FORMS & STRINGS ........................................................................................ 28

FORMULIER-VALIDATIE............................................................................. 34

DOELSTELLINGEN................................................................................................................... 34 FORMULIERVERZENDING TEGENHOUDEN ............................................................................... 35 EEN MOGELIJK STRAMIEN....................................................................................................... 35 TOEPASSINGEN ....................................................................................................................... 37 FORMULIERVALIDATIE GRAFISCH VERDUIDELIJKEN ............................................................. 37 SAMENGEVAT ......................................................................................................................... 37

HOOFDSTUK 7 7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.8

DHTML : CSS + JS .......................................................................................... 38

INLEIDING............................................................................................................................... 38 GETELEMENTBYID() .............................................................................................................. 39 HTMLELEMENT – INNERHTML............................................................................................ 39 DE EIGENSCHAP “STYLE” ....................................................................................................... 40 DE EIGENSCHAP CLASSNAME ................................................................................................. 42 HET EVENT-OBJECT ................................................................................................................ 42 OEFENINGEN .......................................................................................................................... 43 TIMERS ................................................................................................................................... 43

HOOFDSTUK 8

DHTML : TABLES & FORMS........................................................................ 45

8.1 INLEIDING............................................................................................................................... 45 8.2 TABELLEN .............................................................................................................................. 46 8.3 FORMULIEREN UITBREIDEN .................................................................................................... 47 8.4 ARRAYS EN DE FOR-IN (FOR EACH)......................................................................................... 48 8.4.1 Genummerde Arrays ......................................................................................................... 48 8.4.2 Associatieve Arrays ........................................................................................................... 49 8.5 SELECT AANPASSEN MET EEN ASSOCIATIEVE ARRAY ............................................................. 49 HOOFDSTUK 9

BASIS AJAX ...................................................................................................... 51

9.1 EEN BEETJE RIA..................................................................................................................... 51 9.2 HET CONCEPT VAN AJAX ........................................................................................................ 52 9.2.1 Asynchroon / Achtergrond ................................................................................................ 52 9.2.2 Het XMLHTTPRequest-object op de achtergrond ............................................................ 53 9.2.3 Een Call-back functie ........................................................................................................ 53 9.2.4 Vijf readyStates ................................................................................................................. 54 9.2.5 De Response opvragen ...................................................................................................... 54 9.2.6 Samenvatting ..................................................................................................................... 54 9.3 EEN BROWSERONAFHANKELIJK HTTP-OBJECT ...................................................................... 55 9.4 ONREADYSTATECHANGE CALL BACK .................................................................................... 55 9.5 GET- OF POST-REQUEST ....................................................................................................... 56 9.5.1 GET ................................................................................................................................... 56 9.5.2 POST ................................................................................................................................. 56 9.6 EEN KWIS MET GET ............................................................................................................... 57 9.6.1 HTML ................................................................................................................................ 57 9.6.2 Javascript .......................................................................................................................... 57 9.6.3 PHP ................................................................................................................................... 58 9.7 EEN SHOUTBOX MET POST .................................................................................................... 59 9.7.1 Database ........................................................................................................................... 59 9.7.2 HTML ................................................................................................................................ 59 9.7.3 Javascript .......................................................................................................................... 60 postBericht()................................................................................................................................................60 volgende()....................................................................................................................................................60

9.7.4

PHP ................................................................................................................................... 62

postBericht.php ........................................................................................................................................... 62 getBericht.php .............................................................................................................................................62

HOOFDSTUK 10

PROTOTYPE..................................................................................................... 64

10.1 EEN HANDIGE BIBLIOTHEEK ................................................................................................... 64 10.2 SHORTHAND FUNCTIES $() EN $F()......................................................................................... 65 10.3 AJAX-HELPERS ....................................................................................................................... 65 10.3.1 Ajax.Request ................................................................................................................. 65 10.3.2 Ajax.Updater................................................................................................................. 65 10.3.3 Ajax.PeriodicalUpdater ................................................................................................ 65 HOOFDSTUK 11 11.1

SCRIPT.ACULO.US ......................................................................................... 66

EEN BIBLIOTHEEK VOL EFFECTJES .......................................................................................... 66

Hoofdstuk 1

Lang leve Javascript 1.1 Eindelijk echte interactie xHTML gecombineerd met CSS, zoals we ondertussen (hopelijk) al redelijk goed kennen is een krachtige opmaaktaal voor webpagina’s. Het grootste nadeel van puur HTML is dat het louter statisch is: eenmaal getoond, verandert de webpagina niet meer: geen nieuwe prentjes, geen bewegende dingen, geen interactie met de webbezoeker, niks. Met CSS kunnen we al een redelijk aantal dynamische effecten bekomen maar in essentie beperkt dit zich tot hovers en roll-overs. Javascript verhelpt dit. Met Javascript kunnen we (eindelijk) dynamische en interactieve webpagina’s bouwen die reageren op allerhande impulsen, meestal van de webbezoeker, maar ook op willekeurige momenten of met vaste intervals.

1.2 Wat is Javascript? Javascript – officieel ECMAscript, maar dat bekt minder goed – is een client-side script taal. Met client-side bedoelen we dat de taal aan de kant van de bezoeker draait. Hierdoor kan de taal reageren op de events die de gebruiker veroorzaakt, vooral alle acties met de muis (bewegen, klikken, slepen, …, maar ook toetsenbord-acties, timers, het – al dan niet succesvol – inladen van figuren, pagina’s, … of het sluiten van het venster. In essentie is Javascript een extensie van HTML. Dat betekent dat we eerst een HTML-pagina nodig hebben waarin we dan Javascript kunnen plaatsen. Omdat de scripts lokaal uitgevoerd worden ( = op de PC van de website-bezoeker) blijft de Javascript-code zichtbaar. Het volstaat om naar de bron van het document te kijken om de code te vinden. Dat betekent dat andere mensen op het internet je code gemakkelijk kunnen overnemen, en dat je hard werk en labeur zomaar te grabbel ligt. Er is nog een groter nadeel. Vermits Javascript een extensie is, zijn er (nog steeds) een (klein) aantal HTML-browsers die Javascript niet ondersteunen. Ook op PDA’s of GSM’s heb je browsers die geen Javascript aanbieden. Bovendien kan je in de meeste browsers Javascript uitschakelen. Dat betekent dat sommige bezoekers van je site de dynamische effecten zullen missen. In principe moet je daar rekening mee houden, maar gelukkig gaat het hier over slechts een zeer kleine groep gebruikers, en houden we daar eigenlijk niet zo veel rekening mee.

1.3 Korte Geschiedenis In de eerste blok hebben we reeds een korte geschiedenis van het internet gegeven. Het is het deel rond de browseroorlog dat hier van belang is. Nadat in de beginjaren Mosaic en later zijn directe opvolger Netscape de browsermarkt beheersten, brengt Microsoft in augustus 1995, samen met Windows 95, de eerste versie van Internet Explorer uit. Deze versie is (zoals de meeste eerste versies van Microsoft) geen groot succes: zowat de hele markt verkiest het origineel, nl. Netscape 1.2 Maar dat Microsoft dit niet zomaar laat gebeuren spreekt voor zich: in een ijltempo volgen nieuwe versies elkaar op, zowel van Internet Explorer als op zijn beurt van Netscape. Kortom de browseroorlog breekt uit. In augustus 1996 zitten we enerzijds met Netscape Navigator 3 en anderzijds Internet Explorer 3. Deze browseroorlog, die in 1995 begon tussen Netscape (Navigator) en Microsoft (Internet Explorer) verliep volgens het simpele principe van ‘mijn papa kan meer dan de jouwe”: door in elke versie nieuwe elementen te steken die niet werken op de andere browser hoopte men het meeste site-ontwerpers en gebruikers te lokken. Netscape begreep snel dat verhoogde interactiviteit een duidelijke meerwaarde voor een website kan betekenen. En vermits HTML dat niet zelf ondersteunt, zat er niks anders op dan zelf een scripttaal te ontwikkelen. Als codenaam werd eerst Mocha gebruikt terwijl Livescript voorzien was als officiële naam. In dezelfde periode ontstond ook de programmeertaal Java, waar bovendien een zeer sterke hype rond ontstond. Om daar op in te spelen werd uiteindelijk, louter om marketingredenen, gekozen voor de naam Javascript i.p.v. het oorspronkelijke Livescript. Microsoft heeft nadien nog een poging gedaan om dat initiatief naar zich toe te trekken door VBScript uit te brengen en later JScript, een dialect van Javascript, maar in feite volgen de meeste browsers nu de standaard zoals ze is vastgelegd in ECMA-script. p. 5/66

Hoofdstuk 1 : Wat is Javascript? Auteur: Kris Aerts – Lesgever: Maarten Reynders

Bij c-md besteden we al sinds 2000 grote aandacht aan Javascript – met wisselend succes –. In de beginjaren apprecieerden studenten de interactieve mogelijkheden, maar na een paar jaar werd Flash en Actionscript populairder omdat daarin bepaalde grafische effecten gemakkelijk te maken zijn. De jongste tijd is Javascript echter aan een sterke revival bezig, en dit dankzij relatief recente technologieën zoals Ajax en bijzonder gebruiksvriendelijke bibliotheken zoals Prototype en scriptaculous. Deze revival kunnen we mooi aflezen aan de boekenverkoop zoals opgetekend door O’Reilly (http://radar.oreilly.com/archives/2006/08/programming_language_trends_1.html).

1.4 Versie 4.1 We vertelden hierboven al dat Javascript steeds een grote rol gespeeld heeft binnen de opleiding c-md, maar deze rol is wel voortdurend aangepast. Op een gegeven moment zijn we zelfs met Javascript mini-games aan het maken geweest – iets wat zeer goed gaat, maar best aan de moeilijke kant is –. Later hebben we die games in Actionscript geprogrammeerd en was Javascript een ietsiepietsie naar de achtergrond aan het verschuiven, maar dankzij DHTML en kort daarna Ajax, is Javascript terug helemaal op de voorgrond gekomen om nu het tweede semester te domineren. Na de grote aanpassingen in 2005-’06 en opnieuw in 2006-’07 is nu de periode van consolidatie aangebroken. In essentie verandert er niet veel, maar achteraan wordt het stuk van Ajax wel iets beter en dieper uitgelegd en besteden we meer aandacht aan de POSTmethode. Nadat we vorig jaar de cursus al redelijk wat aangepast hebben en enerzijds een stuk rond speltechnieken eruit gegooid hebben en anderzijds een stuk rond DHTML toegevoegd hebben, is er dit jaar opnieuw een grote aanpassing. Ajax komt er bij, samen met de bibliotheken Prototype en scriptaculous die verder bouwen op Ajax. Maar voor we daar over kunnen praten, komt eerst de essentie. In het begin gaan we vooral richting formuliervalidatie waarbij je er voor zorgt dat een formulier niet verzonden kan p. 6/66


worden zolang niet alle verplichte vakken correct ingevuld zijn. Daarna gaan we een klein beetje prutsen met eigenschappen van Images en bekijken we het DOM (Domain Object Model) en DHTML waarmee we de vormgeving (uitzicht en positionering) van zowat alle HTML-elementen dynamisch kunnen aanpassen. We behandelen zowel typische Javascript-toepassingen zoals een beeld in een nieuw venster openen, maar ook minder voor de hand liggende dingen. We willen je immers als c-mder aanmoedigen om ook te durven experimenteren met nieuwe, ongekende effecten om zo de grenzen van het medium te verleggen. Daarna komt een deel waarbij onze kennis PHP terug van pas komt en dan vooral het werken met databases. Bij een traditionele PHP-toepassing ga je na elk verzoek om informatie een volledig nieuwe pagina inladen. Dat betekent dat er eerst een wit blad getoond wordt en dat daarna de pagina ingeladen en getoond wordt. Dat geeft een lichtjes storend effect: het zou zijn alsof we bij het saven in Word eerst een leeg blad krijgen en dat dan alle letters terug ingeladen en getoond moeten worden. Met Ajax – een afkorting voor Asynchroon Javascript And XML – ga je in de achtergrond een PHP-script laten uitvoeren en wanneer dat klaar is, daarop reageren, bv. via een simpel popup-venster waarin je een boodschap geeft, of door bepaalde delen van de webpagina aan te passen of anders vorm te geven (met de DHTMLtechnieken die we hierboven al aanhaalden). In deze cursus bespreken we hoe Ajax in zijn werk gaat en oefenen we dat in met een paar relatief basic toepassingen. Daarna gaan we snel over naar de bibliotheken Prototype en scriptaculous die alles heel wat gemakkelijker (Prototype) en attractiever (scriptaculous) maken. In principe zouden we zelfs direct de twee bibliotheken kunnen gebruiken, maar we vinden het zeer belangrijk in een academische opleiding dat je het basismechanisme van Ajax goed begrijpt vooral we de toegankelijke bibliotheken aanspreken. Omgekeerd zou het precies hetzelfde zijn als een auto-expert die alleen met een automatische versnellingsbak kan rijden en niet weet waarom er überhaupt geschakeld moet worden tijdens het rijden met een auto.

1.5 Werkwijze Je hebt het al kunnen merken bij PHP. Programmeren is een doe-taak. Je kan enkel leren programmeren wanneer je voldoende oefeningen maakt. Daarom zullen er in deze cursus een hele serie oefeningen staan en zullen we op het examen in de eerste plaats oefeningen vragen. Je wordt daarom ten zeerste uitgenodigd om elk fragment Javascript dat je in deze cursus tegenkomt effectief uit te testen. Los bovendien elke oefening op, of probeer het op zijn minst. Durf ook gerust hulp vragen aan de docent, rechtstreeks in de les of anders via email. Voeg in dat geval ook steeds je bronbestand bij. Javascript ontwikkel je in een HTML-editor waar je de HTML-code naakt kan zien. Werk dus niet in grafische modus, maar wel in tekst-modus. In dit vak maken we gebruik van tsWebEditor of HomeSite/Dreamweaver, maar dat is niet noodzakelijk. Elke tekst-editor, zoals bv. Kladblok of PFE, is evenzeer bruikbaar. Voordeel van gespecialiseerde editoren is wel dat de Javascript-code apart wordt ingekleurd. Soms kan je alles zelfs rechtstreeks in de editor testen. Het is ook zeer interessant om een (aantal) Firefox-externsie(s) te installeren die je helpen bij de ontwikkeling en het testen van je Javascript-code. Een waardevol overzicht vind je op http://wiki.script.aculo.us/scriptaculous/show/JavaScriptDevelopmentTools . Het belangrijkste waar je op moet letten is dat de extensie op zijn minst de “Generated Code” kan laten zien. Dit is de code zoals ze er uit ziet na de bewerkingen van Javascript.

p. 7/66


Hoofdstuk 2

Javascript basis 2.1 Javascript invoegen in HTML Zoals we reeds in hoofdstuk 1 vermeldden, is Javascript een HTML-extensie. Dat betekent dat we een HTML-document nodig hebben om daar Javascript aan toe te kunnen voegen, en zoals het de gewoonte is in HTML, kan dit met de juiste tags. <script language=”javascript” type=”text/javascript” > // hier komt Javascript-code Deze tags mogen eender waar in het HTML-document voorkomen en omsluiten Javascriptcode die onmiddellijk uitgerekend moet worden. Merk op dat je ook moet vermelden in welke taal het script geschreven is. In het oude HTML doe je dit met language=”javascript”; in XHTML met type=”text/javascript”. Meestal gebruiken we beide attributen. De script-tags kunnen ook voor andere talen gebruikt worden zoals vbscript, maar Javascript is de enige taal die op zo goed als alle browsers ondersteund wordt.

Wanneer je dit stukje code uitprobeert, zie je dat er niks gebeurt. Dat is normaal. De enige opdrachtregel die we gezet hebben // hier komt Javascript-code is immers commentaar en dat betekent dat we tekst kunnen plaatsen die wel zichtbaar is voor het menselijk oog, maar niet voor de browser die de Javascript-code moet uitvoeren. Terwijl er voor het menselijk oog dus één opdrachtregel staat, staan er voor de browser géén en gebeurt er dus niets. De commentaar-opdracht ziet er misschien wel overbodig uit, maar is het zeker niet. Met deze commentaar kunnen we in ons Javascript-programma het doel van het scriptje vermelden, moeilijke code uitleggen (aan onszelf voor later gebruik of aan anderen) of vertellen wie de auteur van het script is, kortom alles wat we willen vertellen aan de menselijke lezer van het script maar dat niet relevant is voor de browser. Een gouden regel is “beter te veel commentaar dan te weinig of geen commentaar”. Je gaat immers dikwijls in teams werken en code die jij dan vanzelfsprekend vindt, kan voor een andere ontwikkelaar behoorlijk moeilijk of gek zijn omdat hij/zij een andere piste in gedachten had. En zelfs wanneer je alleen werkt, is commentaar zeer zinvol want binnen een paar maanden is de kans zeer groot dat je niet meer weet wat precies de bedoeling van die code was. Een tweede mogelijkheid om Javascript in je HTML ta plaatsen, is als eventhandler bij een of ander HTML-object, bv. bij het document-object. Deze code wordt uitgevoerd op het moment dat het desbetreffende event optreedt. In onderstaand voorbeeld wordt de Javascriptcommentaar ‘uitgevoerd’ wanneer het document helemaal ingeladen is, nl. wanneer het Loadevent plaats vindt. Andere events zijn click, mouseMove, mouseEnter, … We komen hier later uitgebreid op terug. Onze eerste Javascript Blablabla En, ten slotte, als derde mogelijkheid kunnen we als link ook een portie Javascript-code opgeven door als ‘protocol’ binnen de URL voor javascript: te kiezen, bv.

p. 9/66

Hoofdstuk 2 : Javascript-basis Auteur: Kris Aerts – Lesgever: Maarten Reynders

2.2 Venstercommunicatie Traditiegetrouw1 starten we het echte werk met een groet aan de wereld. Wanneer we deze groet goed opvallend willen doen, plaatsen we hem niet zomaar ergens in onze webpagina, maar geven we hem een goed opvallende plaats: een apart begroetingsvenster. <script language=”javascript”> alert(”Een welgemeende groet aan de wereld”); Dit soort vensters houdt een zeer ingrijpende communicatie in: de bezoeker van de website kan niet anders dan het venster bekijken – op zijn minst om het dicht te doen. Het gebruik ervan wordt dan ook best voorbehouden voor écht belangrijke boodschappen, zoals bv. in gevaarlijke situaties, wanneer een formulier onvolledig is ingevuld, wanneer een bestelling in een e-shop afgerond is, …

Oefeningen 1. Toon in een alert-venster je naam en nick. 2. Zet een alert onmiddellijk na de body-opentag, dan een serie html bv. een aantal h1’s en li’s, en net voor de body-sluittag een tweede alert. Stel vast dat je eerst een alert krijgt, dan pagina-opbouw en dan terug een alert. Besef en onthoud dat de plaats van je javascript-code verschil maakt.

De alert beperkt zich tot éénrichtingscommunicatie. Wanneer we invoer van de bezoeker verwachten, kunnen we daarvoor de prompt() gebruiken. In zijn meest eenvoudige vorm geef je daarbij een boodschap op die de bezoeker duidelijk maakt wat hij/zij moet ingeven: prompt(”Geef uw welgemeende groet aan de wereld”);

In dit venster zien we dat er standaard “undefined” wordt ingevuld in het invulvak. Dat is natuurlijk nogal gebruiksonvriendelijk en daarom verkiezen we best de tweede versie van de prompt()-opdracht waarbij we als tweede parameter kunnen vermelden wat de browser in het vulveld moet plaatsen, bv. prompt(”Geef uw welgemeende groet aan de wereld”, ” ”); prompt(”Geef uw favoriete vak ”, ”ICT”);

Oefening 3. Vraag de bezoeker naar zijn favoriete groente.

Als derde vorm van venstercommunicatie hebben we de confirm(). Hiermee vragen we om bevestiging van de gebruiker, bv. wanneer we een formulier leeg zouden maken, persoonlijke gegevens willen verzamelen of een venster afsluiten. 1

De meeste programmeercurssen beginnen met een “Hello World”-voorbeeld.

p. 10/66


confirm(”Mogen we uw computer doen ontploffen? ”);

Oefeningen 4. Zet in de event-handler onunload van de body (zie het voorbeeld hogerop met de onload) een prompt die vraagt of het OK is om in de pagina te sluiten.

2.3 Variabelen In de vorige paragraaf hebben we twee opdrachten gezien waarmee we de bezoeker om invoer vragen, nl. de prompt en de confirm, maar we hebben niks met de antwoorden gedaan. Hiervoor moeten we eerst kunnen onthouden wat er ingegeven is, en daarvoor hebben we variabelen nodig. Net zoals bij PHP is een variabele een verwijzing naar een stuk geheugen waarin we dingen kunnen bewaren. Omdat we in de loop van een programma vele verschillende dingen zullen bijhouden, moeten we elk van de variabelen een verschillende naam geven. In Javascript is dat heel eenvoudig: we kunnen eender welke naam kiezen die begint met een letter of een underscore (het teken _ ). Wel moeten we elke variabele op voorhand definiëren voordat we die gebruiken.2 We doen met de opdracht var, waarmee we een variabele declareren, bv. var mijnNaam; var budget; var invoer; Het is hierbij belangrijk te weten dat deze variabelenamen hoofdlettergevoelig zijn. Er is dus een groot verschil tussen mijnNaam en mijnnaam . Om de leesbaarheid te vergroten, spreken we af dat we steeds zinvolle namen gebruiken (dus géén variabelen x, y, z, u, v, w of q1, q2, q3, …) en nieuwe woorden laten beginnen met een hoofdletter (zoals in mijnNaam). Eenmaal de variabele gedeclareerd is, kunnen we ze gebruiken. Om de inhoud op te vragen gebruiken we gewoon de naam van de variabele; om de inhoud te veranderen gebruiken we de toekenning. Zo’n toekenning noteer je als een ‘vergelijking’ variabele = nieuweInhoud waarbij je van rechts naar links moet lezen:

2

Officieel is dat niet verplicht, maar enkel (sterk) aangeraden. We doen dat dan ook in deze cursus op deze manier, ook omdat het in de meeste echte programmeertalen wél verplicht is.

p. 11/66


• •

Eerst bereken je de waarde rechts van het toekenningsteken = Daarna plaats je die waarde in de variabele links van het toekenningsteken.

mijnNaam = ”Kris Aerts”; geboortedag = 3; euro = dollar / koersEuro; naam = prompt(“Geef je naam in”); In dit laatste voorbeeld zien we direct hoe we het resultaat van een prompt() kunnen bewaren: we steken het antwoord van de bezoeker in de variabele naam.

Oefeningen 5. Vraag de bezoeker naar zijn naam en toon die naam in een tweede venster. 6. Vraag de bezoeker naar zijn leeftijd. Vraag hem dan naar zijn geschatte sterfleeftijd waarbij je zijn huidige leeftijd in het invulveld plaatst. 7. Hetzelfde, maar plaats nu het dubbel van zijn huidige leeftijd in dat invulveld. 8. Opnieuw hetzelfde, maar plaats deze keer de huidige leeftijd +2 in dat invulveld. De verklaring voor het onverwachte gedrag volgt in paragraaf 2.4.

2.4 Berekeningen en automatische typeconversie Uit oefening 7 hebben we geleerd dat je (vanzelfsprekend) berekeningen met variabelen kan doen, zoals de vermenigvuldiging (*), deling (/), optellen en aftrekken (+ en -) en nog een serie andere bewerkingen die je o.a. in het object Math kan terugvinden (daarover later meer). Toch hebben we in oefening 8 ook al gezien dat dit niet altijd van een leien dakje loopt: bij de optelling krijgen we soms geen echte optelling, maar worden de getallen achter elkaar geplaatst. De verklaring hiervoor is technisch: • enerzijds zijn de dingen die we ingeven in een prompt() in de eerste plaats van het type tekst 3. • anderzijds bestaan er in Javascript twee soorten optelling: o de gewone wiskundige voor getallen, o de optelling van teksten wat overeenkomt met het achter elkaar plakken van teksten. “Kris” + “ Aerts” is dan gelijk aan “Kris Aerts” Wanneer we nu volgende code uitvoeren var n; // n is een goede naam voor een onbelangrijk natuurlijk getal n = prompt(”Geef een getal”, 0); alert( n + 10);

zal na regel 2 de variabele n in tekstvorm het ‘getal’ bevatten dat de bezoeker ingaf. In regel 3 tellen we die n op met 10. Vermits n in tekstvorm staat, en de optelling bestaat voor teksten, zal Javascript de optelling voor teksten gebruiken en dus het ‘woord’ 10 achter het ‘getal’ n plaatsen, i.p.v. de beide getallen echt als getallen op te tellen. Merk op dat Javascript het getal automatisch omzet naar zijn tekstvorm: 10 wordt “10”. Dit principe noemen we automatische typeconversie en wordt zeer frequent toegepast. Het kan ook in de andere richting toegepast worden. Een voorbeeld hiervan zagen we reeds in oefening 7: wanneer we toen het woord dat de bezoeker in de prompt ingaf,

3

Het type tekst noemen echte informatici een string. Vanaf nu doen wij dit dus ook.

p. 12/66


vermenigvuldigden met 2, werd het woord automatisch omgezet naar een getal, omdat de vermenigvuldiging met woorden niet gedefinieerd is, en die met getallen wel.

2.5 parseInt() & parseFloat() Meestal is die automatische typeconversie verstandig genoeg om uit de context correct af te leiden welk type gebruikt moet worden, maar soms, zoals in het voorbeeld van de optelling, is dat niet het geval. Het kan dan handig zijn om een handje te helpen en expliciet aan te geven welke typeconversie uitgevoerd moet worden. Dit kan met de functies parseInt() en parseFloat(), die tekst omzetten in getallen. •

parseInt() zet tekst om in een geheel getal (integer), bv. o parseInt(”17”) geeft 17 o parseInt(”17.34”) geeft 17 o parseInt(”jos”) geeft NaN (Not A Number)

•

parseFloat()zet tekst om in een niet-geheel getal (kommagetallen of floating point) , bv. o parseFloat(”17”) geeft 17 o parseFloat(”17.34”) geeft 17.34 o parseFloat(”jos”) geeft NaN (Not A Number)

Aangezien het duidelijk is dat er problemen kunnen optreden wanneer we afhangen van de automatische typeconversie, is het veel beter om systematisch zélf de conversie aan te geven met deze functies parseInt() en parseFloat(). Op die manier leggen we de verantwoordelijkheid bij onszelf en hangen we niet af van externe, moeilijk voorspelbare factoren. Bemerk ook dat Javascript een speciale waarde heeft voor geparste tekst die géén getal is. Deze waarde is NaN en is de afkorting van Not A Number. Om na te kunnen gaan of iets NaN is, kunnen we de functie isNaN() gebruiken. Deze geeft true wanneer zijn parameter NaN is, en geeft false wanneer het wél een getal is.

Oefeningen 9. Pas de oplossingen van de vorige oefeningen aan zodat ze, wanneer nodig parseInt() en parseFloat() gebruiken. Test deze functies uitvoerig: ga verschillende ‘speciale’ gevallen na: enkel cijfers, getallen met leestekens, getallen onmiddellijk gevolgd door letters, … 10. Vermits we nu gezien hebben hoe we teksten kunnen samenvoegen (nl. met de +), kunnen we onze boodschappen in de communicatievensters duidelijker maken. We kunnen nu tekst en dingen die de bezoeker ingaf samenvoegen in mooie volzinnen. Vraag de bezoeker naar zijn naam en toon dan die naam in een apart venster, samen met de begroeting “Goeiedag, . Welkom op mijn website”. 11. Vraag de bezoeker naar 2 getallen, en toon de som (bv. 3 + 4 = 7). 12. Vraag de bezoeker hoe laat het is (uren en minuten apart in te geven) en vertel dan hoeveel seconden de dag al bezig is.

2.6 If - structuur Onze eerste (kleine) programmaatjes waren zeer rechtlijnig en voorspelbaar. Er waren geen keuzes of variaties mogelijk. Elke regel werd achter de vorige uitgevoerd. p. 13/66


Natuurlijk hebben we ook in Javascript behoefte aan keuze, bv. bij het confirm-venster waar we andere code willen uitvoeren wanneer de bezoeker op OK klikt dan wanneer hij op Annuleren klikt. Dit doen we met de if. if (voorwaardeX){ codeX getal”) }

if (isNan(”jos”)){ alert(”jos is

geen

}

Het is belangrijk dat de voorwaarde steeds tussen haakjes staat. Als variant hierop hebben we de als-dan-anders: als aan voorwaardeX voldaan is, doe dan codeX en doe anders codeY. Dit is de if-then-else: if (voorwaardeX){ codeX getal”) } else { codeY getal”) }

if (x<0){ alert(”Een

negatief

}

else { alert(”Een

positief

}

Merk op dat de voorwaarde een expressie moet zijn die ofwel een true of een false geeft. Je kan hiervoor wiskundige ongelijkheidstesten gebruiken zoals <, >, <=, >= of ook de gelijkheidstest = = (met dubbel gelijkheidsteken!)4. Een andere mogelijkheid is dat je (ingebouwde) functies gebruikt die als resultaat een true of een false geven. isNaN() is hiervan een voorbeeld, maar ook confirm(). Wanneer we bij het confirm-venster op OK klikken, geeft deze functie een true, en anders een false. Wanneer je de negatie van een test wil, bv. wanneer je iets speciaal wil doen wanneer de bezoeker op de Annuleren-knop geklikt heeft en je dus “niet confirm()” wil, dien je het uitroepteken ( ! ) te gebruiken, bv. if (!(confirm(”OK? ”)) { … } Wil je een aantal testen combineren, bv. A én B, C of D, E én (F of G), gebruik dan && voor de logische en, || voor de logische of, en haakjes om die dingen samen te plaatsen, bv (A && B), (C || D), (E && (F || G))

Oefeningen

13. Vervolledig oefening 4 (die waarin je vraagt of het OK is om de pagina te sluiten). Wanneer de bezoeker op “OK” klikt, zeg je “Prima. Dat zal ik doen”. Klikt hij/zij op “Annuleren”, zeg dan “Ik doe het toch!”. 14. Vraag de bezoeker naar een getal. Wanneer datgene dat de bezoeker ingaf geen getal was, vraag dan – vriendelijk – opnieuw voor een getal. Wanneer

4

Ik herhaal het nog even in de voetnoot om het extra te beklemtonen: de gelijkheidstest heeft twee (2) gelijkheidstekens! Dus == en niét =, wat het toekenningsteken is dat we gebruiken om een nieuwe inhoud toe te kennen aan een variabele. Pas hier mee op. Het is een van de meest voorkomende beginnersfouten om = te gebruiken in plaats van ==. Je krijgt geen foutmelding van Javascript, maar je krijgt heel onverwachte (en dus foute) resultaten.

p. 14/66


dat nog steeds geen getal was, vraag dan een laatste keer (eventueel iets minder vriendelijk) voor een nieuw getal.

2.7 In het huidige document schrijven Dit hoofdstuk concentreerde voor een belangrijk deel op venstercommunicatie. Dit is een zeer efficiënte vorm van communicatie, maar tegelijk ook een heel opdringerige vorm: de bezoeker moet eerst het venster lezen en sluiten en kan niks anders doen. We zullen niet altijd op zo’n opdringerige wijze communiceren. Soms willen we dingen ook gewoon in het normale HTML-document schrijven. Dat kan natuurlijk ook en wel met de opdracht document.writeln(tekst); Deze document.writeln() genereert tekst die rechtstreeks in het HTML-document verschijnt. Het spreekt dan ook voor zich dat we in deze tekst HTML-tags kunnen plaatsen die dan door de webbrowser geïnterpreteerd zullen worden. Zo zal de volgende opdracht “tekst in het vet” in het vet tonen. document.writeln(”tekst in het vet”); We hebben eerder al gezien dat we met \n een nieuwe regel tekst kunnen laten beginnen, maar zoals we weten is die nieuwe regel zonder betekenis in HTML. Wanneer we willen dat de tekst visueel op een volgende regel begint, moeten we daarvoor de HTML-tag
gebruiken. Wanneer je bij de writeln een “ wil afdrukken, moet je die laten voorafgaan door een \ (backslash). Doe je dat niet, dan denkt Javascript dat de “ die je wil afdrukken het einde van de af te drukken tekst aangeeft, i.p.v. een af te drukken letter. document.writeln(”
”);

id=\”belangrijk\”>een

paragraaf

met

Oefeningen 15. Maak een pagina waarin je de bezoeker eerst naar zijn naam vraagt en dan de bezoeker persoonlijk verwelkomt in een h1, bv. “Welkom Kris”. 16. Vraag de gebruiker naar een kleur in hexadecimale code (bv. FF0000) en zorg er dan voor dat de achtergrondkleur van je document in die kleur is. Tip: druk hiervoor de css-eigenschap background-color. 17. Maak een pagina waarbij de bezoeker een geheime code moet ingeven om de pagina te kunnen zien. Een mogelijke oplossing is dat je met javascript bovenaan een wanneer de ingegeven code fout was. Op die manier zet je alles in html-commentaar.

2.8 Samenvatting Na studie van dit hoofdstuk kan je p. 15/66


! ! ! ! ! ! ! !

p. 16/66

Javascript in een HTML-document plaatsen communiceren met de sitebezoeker via vensters of ingebed in het HTML-document vragen stellen aan de bezoeker van je site dingen in variabelen bewaren berekeningen doen automatische en handmatige typeconversies toepassen keuzemogelijkheden implementeren testen op gelijkheden en ongelijkheden


Hoofdstuk 3

Events & Functies 3.1 Events opzoeken Alhoewel we in het begin van het vorige hoofdstuk verschillende manieren getoond hebben om Javascript op te roepen, beperkten we ons in de eerste plaats tot de script-tag. Dat betekent dat de code steeds uitgevoerd wordt op een zeer voorspelbaar moment, nl. precies op de plaats waar de script-tag staat. Echte programma’s zijn echter niet zo voorspelbaar: de gebruiker kan hierbij beslissen wanneer er iets moet gebeuren, bv. wanneer hij op een toets drukt, met het gamepad speelt of met de muis een knop indrukt. Dat soort gedrag kunnen we ook in Javascript bekomen en daarvoor moeten we zorgen dat onze code reageert op events, de verzamelnaam voor alle gebeurtenissen die externe ‘gebruikers’ kunnen veroorzaken, zoals bv. het klikken met de muis, het invullen van een gegevens in een invoervak, het verzenden van gegevens, het ingeladen zijn van een figuur, ….

Nu is het zo dat events steeds onherroepelijk verbonden zijn met een object: zo kan bv. een wekker wel aflopen, maar melk niet. Melk kan dan weer aanbranden, terwijl een wekker dat niet kan. Dat is ook zo in Javascript: de event Change bestaat bij een invoerveld (input), maar niet bij een figuur (image). De event Load bestaat omgekeerd wel voor een figuur, maar niet voor een invoerveld, enzoverder. Het spreekt voor zich dat we niet verwachten dat jullie alle events van alle objecten van buiten kennen, maar we verwachten dan wel dat jullie alle events kunnen opzoeken. Het is hier dat het boekje “Javascript, Kort en Krachtig” enorm handig kan zijn5. Hierin vind je een alfabetisch overzicht van alle Javascript-objecten en een beschrijving van alles wat je met die objecten kan doen en de events waarop die objecten (kunnen) reageren. Soortgelijke informatie kan je ook vinden via • http://www.javascriptkit.com/jsref/ • http://www.devguru.com/technologies/ecmascript/QuickRef/javascript_index.html • http://www.w3schools.com/jsref/default.asp Het verhaal begint met het object HTMLElement. Men noemt dit de superklasse van alle objecten: als het ware de moeder van eender welk object. Via het principe van overerving hebben alle objecten alles wat de moeder heeft en nog meer, nl. die dingen specifiek voor dat object zelf. Wanneer we dus (op p.54 en 55 van Javascript Kort en Krachtig) een overzicht zien van de events voor het object HTMLElement gelden deze events voor álle objecten. Dit betekent dat de events click, dblclick, … gedefinieerd zijn voor alle objecten. Wanneer je nu wil weten welke events er bestaan voor een bepaald object, begin je in de praktijk niet bij HTMLElement, maar rechtstreeks bij het object zelf. Stel dat we bijvoorbeeld alle events van een image willen kennen, zoeken we naar Image en vinden vanaf p.55 alles van Image. Op p.56 wordt dan bij de event-handlers verwezen naar de event-handlers van HTMLElement en vind je een overzicht van de event-handlers specifiek voor Image. Je dient dan in je zoektocht zowel hier als bij HTMLElement te kijken.

3.2 Event-handlers definiëren Nadat we opgezocht hebben welke events er bestaan, moeten we nog aanduiden wat er moet gebeuren wanneer die event optreedt. Dit doen we daar een extra attribuut bij de HTML-tag te vermelden die de event-handler bepaalt. Deze optie begint steeds met het woord on gevolgd door de naam van de event, bv. onload, onclick, onmouseover, … Hierna vermelden we de Javascript-code die uitgevoerd moet worden wanneer de event optreedt en klaar is kees. Deze event-handler, gedefinieerd bij de figuur mooiPrentje.jpg zal een venster te voorschijn toveren met daarin hallo. Bemerk dat we bij de alert(‘hallo’); enkele aanhalingstekens gebruikt hebben. Dat is nodig omdat dubbele aanhalingstekens voor verwarring zouden zorgen. Javascript zou denken dat de event-handler van onClick (die begint bij het dubbele aanhalingsteken na het toekenningsteken) beëindigd wordt, en dat is niet het geval. Op de server vinden we in events0.html en events.html een extra voorbeeld.

5

Dit boekje is niet (meer) verplicht, maar wel bijzonder handig.

p. 18/66

Hoofdstuk 3 : Events en Functies Auteur: Kris Aerts – Lesgever: Maarten Reynders

Oefeningen 18. Maak een webpagina waarin je een tekstvak met het woord “Verrassing” plaatst en die BOEM zegt wanneer de bezoeker - er op klikt, - er met zijn muis over gaat, - met zijn muis de knop verlaat, - de waarde van het tekstvak verandert, - er op dubbelklikt. 19. Een pagina om kleuren te leren: Maak een tabel met daarin gekleurde achtergronden. Hang aan elke achtergrondkleur een event-handler die de kleur van de prent afdrukt. 20. Breid nu deze oefening uit zodat je eerst vraagt welke kleur de bezoeker denkt dat het is. Daarna vertel je dan of het correct was en vermeld je eventueel de juiste kleur.

3.3 Functies definiëren Wanneer we oefeningen 19 en 20 opgelost hebben, kunnen we twee dingen vaststellen • •

De code in de event-handler kan behoorlijk lang worden. De verschillende event-handlers gelijken zeer sterk op elkaar. Het enige dat verandert is de juiste kleur van de figuur.

Aan deze twee vaststellingen zijn twee problemen verbonden • Wanneer we de code allemaal achter elkaar zetten, wordt dit alles heel snel onleesbaar en moeilijk begrijpbaar. • Wanneer we iets willen wijzigen aan die event-handler (bv. een taalfout wegwerken of vertalen naar het Engels), moeten we identieke wijzigingen op verschillende plaatsen doorvoeren. Dit is tijdverlies én foutgevoelig: de kans is groot dat we een aanpassing vergeten of slordig en dus foutief uitvoeren. Beide problemen (slechte leesbaarheid en beperkte herbruikbaarheid) worden opgelost wanneer we zelf functies gaan definiëren. Hiermee breiden we de taal Javascript als het ware uit met nieuwe opdrachten. In zijn eenvoudigste versie heeft de functiedefinitie volgend formaat: function () { <Javascript-opdrachten> } De functienaam kunnen we vanzelfsprekend zelf kiezen. De opdrachten die we tussen de accolades vermelden worden uitgevoerd wanneer de functie wordt opgeroepen. We noemen dat gedeelte het lichaam van de functiedefinitie. function telTotDrie () { alert(”1”); alert(”2”); alert(”3”); }

p. 19/66


Deze eerste functie telTotDrie () toont drie alerts met daarin 1, 2, 3. Overal waar we nu de opdracht telTotDrie () plaatsen, zullen de drie alerts verschijnen. Per conventie zetten we al onze functiedefinities in de hoofding ( … ) van een HTML-document. Op die manier zijn ze gedefinieerd in het begin van het document en overal bruikbaar in de body.

Oefeningen 21. Gebruik de functie telTotDrie() in een eventhandler in een HTMLdocument. 22. Hermaak oefening 20 zodat je een functie gebruikt en niet meer alle code rechtstreeks bij de event-handler zet.

3.4 Parameters We stelden eerder dat we de code die de juiste kleur van een aangeklikt prentje toont, willen hergebruiken. Dat probleem hebben we nog niet opgelost: de code is immers niet 100% identiek aan elkaar. Toch is de gelijkenis opvallend:

Het probleem kunnen we nu oplossen door een parameter te gebruiken. De parameter bevat dan de informatie die varieert van oproep tot oproep, of anders gezegd, de parameter bevat die informatie die we nodig hebben om de functie correct uit te kunnen voeren. Zo is de opdracht koop() in het Nederlands onduidelijk zolang we niet zeggen wat we moeten kopen. Het te kopen voorwerp is dan de parameter van de opdracht koop(). function toonKleur(kleur) { alert(”Dit vakje is ” + kleur + ” gekleurd. ”); }
onClick=” toonKleur(’groen’); ”> onClick=” toonKleur(’rood’); ”> onClick=” toonKleur(’geel’); ” >

Wanneer zo’n functie met parameters opgeroepen wordt, worden eerst de parameters ‘ingevuld’: de eerste waarde tussen de haakjes wordt geplaatst in de eerste parameter van de functiedefinitie, de tweede waarde in de tweede parameter, enzoverder. Daarna wordt het lichaam van de functie uitgevoerd.

Oefeningen 23. Pas oefening 22 aan zodat ze werkt met een functie met parameters. 24. Maak een (kwis)pagina met knoppen “rood”, “groen” en “blauw”. Wanneer de bezoeker op de knop klikt, moet je vragen naar de hexadecimale code van deze kleur, en zeggen of het antwoord juist was.

p. 20/66


3.5 Returnwaarden In de wiskunde hebben functies een heel specifieke betekenis: het is een wiskundige berekening die, gegeven een aantal invoerwaarden, een resultaat berekent (terug geeft). Zo is bijvoorbeeld een functie f die gegeven een invoer x als resultaat x+3 teruggeeft. Het facet invoerwaarden hebben we reeds behandeld: het zijn de parameters van een functie. Voor het begrip een resultaat terug geven hebben we een nieuwe Javascript-opdracht nodig: return. Hiermee zeggen we dat we een resultaat berekend hebben. Omdat we daarenboven ook moeten zeggen welk resultaat we hebben, moet er nog een waarde achter de returnopdracht komen, bv. return 17; return x + y; return f(x) * 2; Het voordeel van het terug geven van zo’n returnwaarde komt reeds naar voren in het laatste voorbeeld. We gebruiken het resultaat van de functieoproep f(x) in de nieuwe expressie f(x) * 2: de return in het lichaam van functie f() geeft de return-waarde door aan f(x) en die waarde wordt dan vermenigvuldigd met 2. Of anders gezegd: wanneer er ergens een functieoproep staat, springt de Javascript-vertolker naar die functiedefinitie. Zodra er daarin een return staat, wordt die waarde teruggegeven aan de oproepende expressie en gaat het programma vanaf daar verder. Een functieoproep met een return-waarde mag je dus overal gebruiken waar je anders ook een waarde mag zetten. Enkele voorbeelden: groot = grootste(30, 40); groot = grootste(prompt(”Geef een positief getal”),0); alert(f(x)); if (not (positief(x))) { … } Een groot voordeel van dergelijke functies is dat we moeilijke berekeningen op kunnen splitsen in kleinere berekeningen waarvoor we dan aparte, relatief eenvoudige functies ontwikkelen. De moeilijke berekening kunnen we dan herschrijven in een gemakkelijkere vorm door gebruik te maken van de net ontwikkelde functies. Een goed (maar wiskundig) voorbeeld hiervan vind je in de berekening van de nulpunten van een vierkantsvergelijking . De nulpunten hiervan zijn gegeven door , maar deze ietwat ingewikkelde formule wordt duidelijk eenvoudiger wanneer we gebruik maken van de discriminant (symbool formule zeggen dat

). Wanneer we in een aparte

, worden de nulpunten gegeven door

en deze

formule is duidelijk korter. We kunnen dit principe niet alleen toepassen op wiskundige problemen, maar ook op eender welke stuk programma: wanneer een fragment te moeilijk is om in één keer op te lossen, splits het dan op in kleinere eenheden die gemakkelijker te maken zijn; schrijf daarvoor aparte functies en breng die samen om het grotere probleem op te lossen. Dit principe noemt men stapsgewijze verfijning en wordt zeer veel gebruikt in (informeel) programma-ontwerp. p. 21/66


Zoals we reeds eerder vermeldden, blijft hergebruik een andere belangrijke reden om functies te ontwikkelen: eenmaal een functie gedefinieerd is, kan je ze gebruiken zo dikwijls je maar wil: je hoeft dus geen code opnieuw te schrijven. Wanneer je bovendien goede functienamen kiest die duidelijk de betekenis van de functie aangeven, vergroot de leesbaarheid sterk. De lezer van je scriptjes kan dan dikwijls louter uit de functienaam afleiden wat de bedoeling van de code is. We stellen bovendien dat het een múst is om functies te gebruiken wanneer je werkt met event-handlers! We doen dit omdat de plaats bij event-handlers in de praktijk beperkt is, en je door gebruik te maken van functies de code leesbaar kan houden en anders niet.

Oefeningen

25. Schrijf een functie die er voor zorgt dat, gegeven een getal6, de uitvoer tussen 0 en 10 ligt. Wanneer de invoer kleiner was dan 0 of groter dan 10, rond je af naar 0, resp. 10. Geef anders gewoon het getal terug. 26. Vraag dan (bv. in een event-handler) de bezoeker naar een beoordeling van je website tussen 0 en 10. Gebruik de vorige functie om er voor te zorgen dat de beoordeling herleid wordt naar het juiste bereik, nl. tussen 0 en 10. 27. Hermaak oefening 23 (op een kleur laten klikken en nagaan of de bezoeker de naam van de kleur kan intypen), zodat de functie true geeft wanneer de bezoeker juist raadt en geef anders false terug. 28. Schrijf een functie die de bezoeker naar een getal vraagt. De functie moet blijven vragen naar nieuwe invoer, zolang de gebruiker geen echt getal ingeeft. Je moet hier geen herhaling in de vorm van while of de for gebruiken, maar je kan wel gebruik maken van de functie zelf. Een preciezere tip vind je in voetnoot 7 (pas lezen wanneer je echt niet verder kan).

3.6 Samenvatting Na studie van dit hoofdstuk kan je ! ! ! ! !

event-handlers definiëren de events opzoeken die passen bij een HTML-object functies definiëren in de van het HTML-document de bijhorende parameters en returnwaarde van een functie bepalen bij elke event-handler een functie-oproep gebruiken

6

Tip: wanneer er sprake is van gegeven, moet direct het belletje van parameter gaan rinkelen. Het principe is eenvoudig: noem je functie bv. vraagGetal(). Gebruik prompt() om naar invoer te vragen en steek die in een variabele. Wanneer de invoer een getal is, geef dan die invoer terug en geef anders als resultaat een nieuwe oproep van vraagGetal() terug.

7

p. 22/66


Hoofdstuk 4

Het Image object 4.1 Inleiding Deze cursus heeft als ondertitel “Client side scripting in al zijn glorie”. Het wordt dan ook hoog tijd dat we iets van die glorie laten zien en beginnen met leuke effecten. Hiervoor gebruiken we prentjes of figuren, onmisbare dingen op een webpagina waar je direct veel toffe dingen mee kan doen in Javascript. We gebruiken hiervoor het Image-object dat in HTML via de wordt aangemaakt. In dit hoofdstuk bestuderen we eerst de belangrijke events die met een Image kunnen gebeuren en daarna gaan we over naar de eigenschappen van het Image-object. Het leuke hieraan is dat we deze eigenschappen niet alleen kunnen opvragen, maar ook kunnen aanpassen. Dit betekent dat we heel veel dynamiek kunnen introduceren.

p. 23/66

Hoofdstuk 4 : Het Image object Auteur: Kris Aerts – Lesgever: Maarten Reynders

4.2 Relevante Events Op het eerste zicht ziet het Image-object er niet bijzonder interactief uit. Toch zijn er een heleboel events gedefinieerd voor Image. We bespreken de belangrijkste: •

onclick: bezoekers kunnen duidelijk op figuren klikken. Dit event wordt traditioneel veel gebruikt om een uitvergroting van een foto te bekomen, of om naar een tweede pagina te springen.

•

onmouseover: komt voor wanneer de muis over de figuur komt. Dit wordt meestal gebruikt om van figuur te veranderen zoals in een RollOver, maar hiermee zou je ook tips kunnen weergeven of de bezoeker geheime delen van de site laten verkennen.

•

onmouseout: komt voor wanneer de muis de figuur verlaat. Dient meestal voor het beëindingen van de RollOver.

Naast deze drie events die echt afhangen van doelbewuste acties van de webbezoeker, zijn er ook nog drie events die plaats vinden afhankelijk van het al dan niet succesvol inladen van de figuur. •

•

onload: wanneer de figuur helemaal ingeladen is. Dit wordt dikwijls gebruikt om alle figuren pas te tonen wanneer ze ingeladen zijn, maar we kunnen dit ook toepassen om een quiz pas te starten wanneer de figuur helemaal klaar is, of om een animatie te starten. onabort/onerror: wanneer het inladen van de figuur enerzijds onderbroken wordt door de webbezoeker of anderzijds door een andere fout, bv. netwerkconnectie of onbestaande figuur. Dit kunnen we gebruiken om de bezoeker te vertellen dat het over een echt belangrijke figuur gaat of om een andere, kleinere versie in te laden die misschien wel gemakkelijker over het netwerk gaat.

Oefeningen 29. Experimenteer met deze events. Maak een HTML-bestand met één figuur en gebruik de eventhandler alert(”onXXX”); afwisselend voor onClick, onMouseOver, onMouseOut, onLoad en onError (gebruik in dat laatste geval een niet-bestaande figuur), waarbij XXX telkens Click, MouseOver, … moet worden. 30. Maak een HTML-bestand met daarin drie figuren en een formulier met tekstvak. Toon in dat tekstvak een beschrijving van de foto wanneer de muis over die foto beweegt. 31. Maak een mini-kwis. Stel een vraag en toon 3 figuren die als antwoord kunnen dienen. De bezoeker klikt als antwoord op een van de prenten. Vertel of het antwoord juist of fout is.

4.3 Verwijzen naar een Image in het document Je hebt ongetwijfeld al webpagina’s gezien met Rollovers. Veel webbouwers gebruiken hiervoor blindelings de code die hun editor aanlevert, zonder deze te begrijpen. Het spreekt p. 24/66


voor zich dat wij die code zélf schrijven. Hiervoor moet je kunnen verwijzen naar de prent (Image) die moet veranderen. Je hebt hiervoor 3 mogelijkheden:

4.3.1

THIS " DE HUIDIGE FIGUUR

Wanneer je rechtstreeks de figuur wil aanpassen waarop het event is opgetreden, kan je best this gebruiken. Dit sleutelwoord van Javascript verwijst naar het huidige object. Dit kan dus ook een formulier, een invoerveld, een tabelvakje, … zijn. Punt is dat je verwijst naar het het object waarop de event plaats vindt. In het voorbeeld hieronder ga je de breedte van de figuur aanpassen wanneer je er op klikt.

4.3.2

onClick=” this.width = 200; ”

DOCUMENT.IMAGES[N]

Wanneer je naar een andere figuur wil verwijzen, kan je gebruik maken van de array document.images[]. Hierin plaatst Javascript automatisch alle figuren die in het document voorkomen, en in dit in de volgorde zoals ze in de HTML-broncode staan. Hierbij moet je wel weten dat men vanaf 0 begint te tellen. document.images[n] verwijst dus naar de (n+1)e figuur.

4.3.3

DOCUMENT.IMAGENAAM

Nadeel van bovenstaande methode is dat je ook zelf moet beginnen tellen én dat je Javascriptcode afhankelijk wordt van de volgorde waarin de figuren in de HTML-code staan. Daarom is het véél beter om elke figuur ook een attribuut name mee te geven, bv.

=

4.4 Werken met Eigenschappen We hebben hierboven al snel kennis gemaakt met de eigenschap width van een figuur. Er bestaan er natuurlijk nog andere, maar voor we daar op in gaan, willen we even beklemtonen dat het typisch is dat je eigenschappen zowel kan opvragen (“wat is de huidige waarde”) als veranderen (“de nieuwe waarde wordt …”). Je kan ook beide combineren en de oude waarde gebruiken om de nieuwe waarde te bepalen (bv. oude width + 10%).

4.4.1 DE BRON VAN DE IMAGE – SRC Dit is vermoedelijk de interessantste eigenschap, niet zozeer omdat we bv. met document.images[0].src de bestandsnaam van de eerste prent op kunnen vragen, maar vooral omdat we die source ook kunnen veranderen. Wanneer we dat doen zal de browser die nieuwe prent opvragen via het internet en de figuur inladen en tonen in het HTML-document. Het spreekt voor zich dat we hiermee aangename effecten kunnen bereiken.

4.4.2 DE BREEDTE EN HOOGTE VAN EEN IMAGE – WIDTH EN HEIGHT p. 25/66


Hiermee kunnen we enerzijds de afmetingen van een image opvragen, bv. om na te gaan of die op het scherm van de bezoeker passen of om te zien hoeveel we er op één rij kunnen krijgen, maar daarnaast kunnen we de afgebeelde breedte en hoogte ook aanpassen. Hiermee kunnen we de prent dan verkleinen of vergroten, bv. om die zodanig aan te passen dat de afbeelding precies in het venster van de webbrowser past.

4.4.3 DE TOOLTIP VAN EEN IMAGE – TITLE Alhoewel velen het alt-attribuut gebruiken als tooltip, is dit niet correct. Het moet het title-attribuut zijn. De inhoud hiervan wordt zichtbaar in een venstertje dat vast hangt aan de muiswijzer wanneer we even over de prent blijven hangen.8 Hiermee kunnen we bijvoorbeeld steeds nieuwe tips geven over de gevraagde oplossing naarmate de bezoeker op de prent klikt.

Oefeningen

32. Maak een HTML-bestand met daarin het negatief van een figuur. Toon het origineel van de figuur wanneer men op de prent klikt. 33. Verdubbel de grootte van het beeld wanneer er op geklikt wordt. 34. Maak een HTML-bestand met een figuur en twee invoervakken voor breedte en hoogte. Pas de breedte en hoogte van de afgebeelde figuur aan volgens datgene wat de bezoeker invulde. 35. Maak een HTML-bestand met daarin twee figuren. Wissel beide figuren om wanneer de muis over een van de figuren beweegt. 36. Maak een HTML-bestand met een figuur. Plaats in de title-tekst 0 als startwaarde en verhoog dat getal telkens de bezoeker op de prent klikt. Verlaag het getal wanneer de muis de figuur verlaat.

4.5 Willekeur We sluiten dit hoofdstuk af met een korte sectie over hoe je een willekeurig getal kan genereren. Dit is nodig wanneer je een afwisselende (willekeurige) figuur of reclamebanner op je site wil tonen, citaten van gebruikers of weetjes over de site wil laten zien. Het is dan belangrijk dat de bezoeker niet altijd hetzelfde te zien krijgt, maar wel een willekeurige foto, citaat of weetje tonen. Om dat te bereiken laten we de computer willekeurige getallen genereren. In Javascript kan dit heel eenvoudig wanneer we de methodes van de klasse Math opzoeken. We kunnen dan zien dat de methode Math.Random() een willekeurig, niet-geheel getal geeft tussen 0 en 1. Wanneer we hiervan een willekeurig getal tussen 1 en n willen maken, zetten we volgende stappen: 1. vermenigvuldig het basis-random-getal met n. Dit geeft dan een getal tussen 0 en n (n niet inbegrepen). 2. Tel hierbij 1 op. Dit geeft dan een getal tussen 1 en n+1 (n+1 niet inbegrepen). 3. Laat het deel na de komma vallen. Dit kan met een eenvoudige methode in het object ‘Math’. Zoek dit even op.

Oefeningen

8

Zoals we gezien hebben in onze cursus xHTML, is dit title-attribuut bruikbaar bij alle HTMLelementen en dus niet alleen bij image, alhoewel het daar wel het populairste is.

p. 26/66


37. Maak een array met daarin 10 prenten. Toon hiervan één willekeurige prent. Voorzie daarnaast in je HTML-document een knop waarmee de bezoeker een andere willekeurige prent kan bekijken. 38. Genereer een willekeurig getal tussen 1 en 10. Laat de speler naar dit getal raden. Tel het aantal pogingen.

4.6 Samengevat Na studie van dit hoofdstuk kan je ! spelen met Images op alle mogelijke manieren, ! via images op nieuwe manieren communiceren ! een willekeurig getal genereren.

p. 27/66


Hoofdstuk 5

Forms & Strings 5.1 Formulierobjecten

Wanneer we kijken naar een minimaal formulier zoals hierboven, zien we drie dingen: • een
-openen sluit-tag, die aangeeft welke elementen in dit formulier zitten. Dat is nodig aangezien er ten eerste verschillende velden in één formulier mogen zijn, en er ten tweede verschillende formulieren op één webpagina mogen staan. • verschillende elementen waar men gegevens kan invullen, • een -knop die de bezoeker aanklikt wanneer hij/zij z’n gegevens wil doorsturen. Een formulier bestaat dus enerzijds uit het formulier als een geheel en anderzijds uit de ‘losse’ invoerelementen in het formulier. Ze hebben elk hun eigen specifieke events en eventhandlers

•

•

Form: onsubmit Deze zeer belangrijke event-handler wordt opgeroepen wanneer de bezoeker op de verzendknop (‘Submit’) klikt. Deze event hoort niet bij de verzendknop zelf, maar wel bij het formulier: het is immers de volledige formulierinhoud die verzonden moet worden en het is dus niet iets wat enkel de verzendknop zelf aanbelangt.9 Input: onchange, onblur, onclick, Een Input-object heeft heel veel verschillende events, maar we beperken ons in de praktijk vooral tot het onchange-event. Dit event vindt plaats wanneer de invoer in het invoerelement verandert, en is dus het event bij uitstek dat we gebruiken wanneer we willen reageren op invoer van de webbezoeker. In bepaalde gevallen kan onblur handiger zijn: die reageert élke keer wanneer je het veld verlaat, terwijl onchange alleen reageert wanneer de inhoud veranderd is. Het is vooral een persoonlijke voorkeur die hier speelt.

Oefening 39. Maak een eenvoudig formulier (met één invoervak en een knop) en zet bij het invoervak een eventhandler voor onChange, en bij het formulier zelf een eventhandler voor onSubmit. Gebruik telkens een eenvoudige, maar verschillende alert() en ga na wanneer welk event plaatsvindt.

Naast het kunnen reageren wanneer de bezoeker iets invult, willen we natuurlijk ook te weten komen wat de bezoeker ingevuld heeft. Wanneer we dit zelf opzoeken, moeten we hiervoor zoeken bij de eigenschappen (properties) van een Input-object: we vinden snel dat we de value-eigenschap nodig hebben. Om die eigenschap op te vragen, moeten we eerst het inputobject vermelden, gevolgd door een punt en dan het woord value. Stel dat we het input-object kunnen aanspreken met document.forms[0].elements[0]10, dan kunnen we de ingevulde waarde opvragen met document.forms[0].elements[0].value. Nu kunnen we die waarde bv. in een alert tonen (alert(document.forms[0].elements[0].value);), maar we kunnen de inhoud van het invoerveld eveneens veranderen wanneer we die uitdrukking aan de linkerkant zetten in een toekenning: document.forms[0].elements[0].value = "iets anders";

Oefening 40. Test dit uit door in het formulier van hierboven twee knoppen te zetten (type=button). De eerste knop toont de inhoud van het tekstvak; de tweede knop verandert de inhoud van het tekstvak.

Naast de eigenschappen van een object, bestaat er ook nog zoiets als de methodes van een object. Terwijl de eigenschappen gewoon waarden zijn die je kan opvragen of veranderen, zijn methodes echt dingen die je met een object kan doen, bv.voor een Input-element de focus eraan geven of wegnemen (focus() resp. blur()), of de inhoud selecteren (select()), …

9

De verzendknop zelf heeft daarvoor eigen event-handlers, zoals bv. onClick, maar in het algemeen gebruiken we die zeer weinig en meestal raden we dat gebruik zelfs af. 10 In de volgende sectie verklaren we hoe we hieraan komen.

p. 29/66

Hoofdstuk 5 : Formulieren en Strings Auteur: Kris Aerts – Lesgever: Maarten Reynders

Later zullen we ook hierop enkele oefeningen maken, maar eventueel mag je hiermee nu al experimenteren.

5.2 Formulieren tellen De grote vraag is nu hoe we aan een individueel invoerelement van een formulier geraken. Het antwoord hierop houdt een eerste kennismaking met het hiërarchische Domain-ObjectModel (DOM) in. Essentieel hieraan is dat dingen steeds ergens in zitten: zo zit een formulier in een HTML-document, zit een input-element in een formulier, zit een frame in een venster, een document in een frame, … Wanneer we HTML-objecten willen benoemen, moeten we volgens DOM beginnen op het hoogste niveau. Wanneer we braafjes in het actieve venster blijven, is dat het document. Binnen het document gaan we dan naar de volgende entiteit: het formulier. Omdat er, zoals we reeds eerder zeiden, verschillende formulieren binnen één document zitten, nummert Javascript automatisch de opeenvolgende formulieren. Omdat men in de informatica altijd vanaf 0 begint te tellen, krijgt het eerste formulier nummer 0. In het Engels wordt dit dan forms[0], het tweede formulier is dan forms[1] enzoverder. Samen geeft dit voor het eerste formulier document.forms[0]. De verschillende invoervelden binnen een formulier noemt men elements en net zoals bij de formulieren nummert Javascript die te beginnen vanaf 0. Het eerste element van het eerste formulier is dan document.forms[0].elements[0]. Eenmaal dit element geselecteerd kunnen we dan met de eigenschap value, en samengevat de expressie document.forms[0].elements[0].value de waarde van dat invoerveld te weten komen en/of veranderen.

Oefeningen 41. Maak een event-handler die in een alert toont wat de bezoeker net ingegeven had, en die dan het invoerveld leegmaakt. 42. Plaats in het invoerveld twee keer datgene wat de bezoeker ingevuld had. “Jan” wordt dan “Jan Jan” en “haha” wordt “haha haha”. 43. Maak een optelsom: voorzie in je formulier twee vakjes waarin de bezoeker getallen in kan geven. Wanneer de bezoeker het formulier verzendt door op de knop met als titel “tel op” te klikken, moet je in een derde tekstvak de som van beide getallen plaatsen. Vergeet hierbij parseInt() of parseFloat() niet! 44. Moeilijker! : plaats twee invoervelden in je formulier en wissel de inhoud van beide velden om wanneer de bezoeker iets invult. 45. Oefening met methode blur(): zet de focus van het invulveld af wanneer de bezoeker op een invulveld klikt.

5.3 Formulieren benoemen De vorige manier van werken werkt wel, maar is niet onderhoudsvriendelijk. Wanneer ik mijn formulier herschik en invoervelden van plaats verwissel of een nieuw formulier vooraan toevoeg, kloppen mijn verwijzingen met nummertjes niet meer: het eerste veld in het tweede formulier is nu misschien het derde veld in het vierde formulier geworden. Al mijn scriptjes gaan dan foutmeldingen geven of heel onverwacht resultaten geven aangezien de verkeerde (of niet-bestaande) elementen in de verkeerde formulieren gebruikt worden. p. 30/66


Het is dan ook veel beter en onderhoudvriendelijker om met namen te werken, zowel in de formulieren, als in de Javascript-code. Daartoe moeten we bij elk formulier en bij elk inputelement het attribuut name="..." gebruiken. Vanaf dan kunnen we in onze Javascriptcode verwijzen naar objecten door die namen te gebruiken: document.forms[0].elements[0] uit ons eerste voorbeeld wordt dan document.formulier.voornaam: ga binnen het document naar het object (form) met naam formulier en ga dan naar het object (input) met als naam voornaam. Nu mogen we de formulieren en elementen zo veel van plaats verwisselen als we willen, zolang we dezelfde namen blijven gebruiken, blijft onze Javascript-code feilloos werken.

Oefeningen 46. Pas de oefeningen uit de vorige reeks aan zodat je namen gebruikt i.p.v. genummerde verwijzingen. Ga de correctheid na door een nieuw formulier vooraan je webpagina toe te voegen. 47. Schrijf een muntconversie: voorzie vakjes waarin je een waarde in Bef of Euro kan invullen en toon de omgerekende koers in het andere vakje. Ter herinnering : !1 = 40.3399 BEF. 48. Maak een formulier met voornaam, naam, adres en leeftijd. Vat de ingevoerde inhoud samen en toon die in een confirm wanneer de bezoeker het formulier wil verzenden.

5.4 Strings, - methodes en -eigenschappen In deze sectie zoomen we in op een zeer belangrijk object, nl. het String-object, wat het type is van alles wat in tekst staat. We hebben reeds in het begin van deze cursus verteld dat alles wat je ingeeft in een prompt van het type String is, maar daarnaast zijn alle gegevens die uit invoervelden komen ook van het type String. Omdat dit type dus zoveel voorkomt, is het enorm belangrijk. Javascript biedt dan ook een zeer ruime ondersteuning aan voor dit object. In het boekje “Javascript Kort en Krachtig” vinden we twee volle bladzijden met methodes voor het object String. Ook andere boeken of tutorials besteden normaal behoorlijk wat aandacht aan Strings. Je kan al deze methodes zelfstandig uitproberen of surfen naar de cmdstud-server en daar het bestand strings.html bekijken met een geklasseerd overzicht en voorbeeldtoepassingen van al deze methodes. We overlopen hieronder de belangrijkste. Onthoud dat je die telkens oproept of opvraagt door eerst de string te vermelden, dan een punt en dan de eigenschap of methodes, dus bv. letter8 = tekst.charAt(7). •

length geeft de lengte van de string

•

charAt(x) Geeft de letter op positie x (begin te tellen vanaf 0!)

•

indexOf(naald) Geeft de positie van de naald in de zoekstring, bv. 7 als naald op positie 7 begint. Geeft -1 wanneer de naald niet voorkomt in de zoekstring.

•

indexOf(naald, start) Zoals hierboven, maar begint pas te zoeken vanaf positie start.

p. 31/66


•

lastIndexOf(naald), lastIndexOf(naald, start) Zoals hierboven, maar begint achteraan te zoeken.

•

substring(van, [tot]) Geeft een deel van de string terug vanaf positie van tot positie tot (niet inbegrepen). tot is niet verplicht. Wanneer niet ingevuld is het tot het einde van de string.

•

substr(van, [aantal]) Geeft aantal letters van de string terug vanaf positie van. aantal is niet verplicht. Wanneer niet ingevuld is het tot het einde van de string.

•

split(delimiter) splitst de string op telkens er een delimiter voorkomt. Geeft dus een array van strings terug en is dus iets gevorderder.

Vergeet ten slotte niet dat je met + strings kan optellen en dus achter elkaar kan plaatsen. Merk ook op dat alle eigenschappen en methods steeds met een kleine letter beginnen maar dat elk ‘nieuw’ woord met een hoofdletter begint. We zullen deze stijl ook zelf toepassen voor onze eigen variabelen en functies.

Oefeningen 49. Maak een formulier met daarin twee vakjes. Wanneer de gebruiker op de bijhorende knop klikt, moet je het vakje tonen waar de letter ‘a’ op de vroegste positie voorkomt. Als de bezoeker bijvoorbeeld “ananas” en “banaan” ingaf, moet je “ananas” tonen omdat in dat woord op de eerste positie een a voorkomt en in “banaan” pas op de tweede plaats. 50. Maak een formulier waarin de gebruiker een voor- en achternaam, en een telefoonnummer kan invullen. Maak ook een vakje voor een login en vul daarin de de eerste 3 letters van de voornaam, de 3 laatste van de achternaam en het laatste cijfer van het telefoonnummer in. 51. Splits het ingevulde woord in 2 en plaats het terug in het invoervakje maar wissel de volgorde van de twee delen om: “banaan” wordt dan “aanban”. 52. Zoek de positie van het voorlaatste voorkomen van een letter in een woord (zowel de letter als het woord worden in een tekstvak ingegeven). Vb. in “appelsien” staat het voorlaatste voorkomen van e op positie 3.

p. 32/66


5.5 De datum Een speciale string is de huidige datum. Deze vraag je op met de opdracht var tijd = new Date(); Hiermee steek je de huidige tijd in de variabele tijd. Alhoewel je die tijd nu kan gebruiken als een gewone string (bv. om af te drukken met println of als value van een formulierveld), is dit echt wel een speciaal soort object. Je hebt namelijk methodes waarmee je specifiek delen van een datum op kan vragen: getDay(), getMonth(), getFullYear(), getMinutes() en getSeconds() met voor de hand liggende betekenissen. Ook interessant is de methode toLocaleString() die de datum formateert volgens de instellingen van de lokale computer of browser. Je kan nu de beleving van de site (nog) intenser maken, bv. via een eenvoudige aanspreking goeiemorgen of goeieavond, of via een vormgeving die het tijdstip van de dag weerspiegelt, bv. een opgaande of ondergaande zon, of een maan met sterren.

Oefeningen 53. Maak een formulier met een vak waarin je de huidige tijd en datum als standaard-waarde invult. Gebruik hiervoor het object Date. 54. Spreek de bezoeker van je site aan met goeiemorgen, goeiemiddag, goeieavond of goeienacht afhankelijk van het huidige uur.

5.6 Samenvatting Na studie van dit hoofdstuk kan je ! de basisfilosofie van het DOM uitleggen aan anderen ! de gepaste event-handlers definiëren bij formulieren en hun invoerelementen ! formulierobjecten benoemen, zowel via de ingebouwde nummering als via zelfgekozen namen ! werken met Strings ! werken met de huidige tijd en datum

p. 33/66


Hoofdstuk 6

Formuliervalidatie 6.1 Doelstellingen Wanneer we een formulier op een website plaatsen, hebben we dikwijls bepaalde verwachtingen over wat er ingevuld moet worden. Zo zullen we bv. een emailadres willen wanneer de bezoeker zich op een mailinglist in kan schrijven, getallen tussen 1 en 42 wanneer we op de lotto spelen, een adres wanneer we iets moeten leveren, … Nu zouden we kunnen veronderstellen dat elke webbezoeker zich braaf aan dat verwachtingspatroon houdt, maar dat is nogal naïef en mogen we dus niet doen. Wat we soms zien in (slechte) websites is dat je het formulier altijd kan verzenden, maar dat op de volgende pagina – de pagina die het formulier verwerkt – te horen krijgen dat het formulier niet goed ingevuld was en dat we opnieuw moeten beginnen. Dat is allesbehalve gebruiksvriendelijk en dus sterk af te raden. Het is veel beter om zo snel mogelijk te reageren: onmiddellijk nadat de bezoeker zijn emailadres ingevuld heeft, moeten we controleren of het een geldig emailadres is en indien niet, de bezoeker hierop wijzen. We mogen hier niet mee wachten tot de bezoeker nog 10 andere velden ingevuld heeft: onmiddellijke feedback is veel aangenamer.

Daarnaast mogen we niet nalaten om alle velden opnieuw te controleren wanneer de bezoeker op de verzend-knop klikt: het kan perfect zijn dat de bezoeker (al dan niet bewust) de waarschuwingen na het verkeerd invullen van een veld niet gezien heeft of in de wind geslagen heeft. We gaan zelfs nog een stapje verder: we verzenden de formulierinhoud niet zolang het formulier niet correct ingevuld is. Op die manier kan de bezoeker niet anders dan het correct invullen, en dat is precies wat we willen.

6.2 Formulierverzending tegenhouden Er is nog één probleem: het tegenhouden van de formulierverzending. Gelukkig is dit probleem snel opgelost. Wanneer de resultaatwaarde van de onsubmit-handler false is, wordt het formulier niet verzonden, anders wel. In het volgende formulier is die return-waarde altijd false en zal de formulierinhoud dus nooit verzonden worden. …
In de praktijk zullen we i.p.v. false een functie gebruiken die nagaat of het formulier correct ingevuld is en die true geeft wanneer dat het geval is, en false anders. Het schema wordt dan
…
In deze functie testAlles() moeten we alle velden overlopen. Zodra één veld niet correct ingevuld is, moet de functie een false terug geven.

6.3 Een mogelijk stramien Uit het bovengaande moeten we vooral onthouden dat een goede formuliervalidatie minstens het volgende omvat: • een controle voor elk veld apart met een onmiddellijke waarschuwing wanneer de gebruiker iets fout doet • een controle voor alle velden samen waarbij het formulier niet verzonden wordt zolang niet alle velden correct ingevuld zijn. Elk van deze afzonderlijke elementen kunnen we al probleemloos toepassen, want we weten hoe je de inhoud van een formulier kan opvragen, we kennen de event-handler die reageert wanneer een tekstvak ingevuld of veranderd is, we kunnen alerts te voor schijn toveren en we weten hoe we formulierverzending kunnen tegenhouden. Toch is het nuttig om een vast11 stramien aan te reiken. Een belangrijke bekommernis hierbij is dat we zo weinig mogelijk werk willen hebben. Anders gezegd: wanneer we alle velden doorlopen bij de onsubmit-eventhandler, willen we zo veel mogelijk van de afzonderlijke controle hergebruiken.

11

Er zijn hierop natuurlijk tientallen varianten mogelijk. Bovendien ga in je verschillende situaties van dit strikte schema moeten afwijken.

p. 35/66

Hoofdstuk 6 : Formuliervalidatie Auteur: Kris Aerts – Lesgever: Maarten Reynders

Het probleem hierbij is dat de controle per veld apart direct een alert moet geven, terwijl we bij de controle van alle velden samen slechts één samenvattende alert willen tonen. Stel dus dat we een functie testNaam() schrijven die een alert geeft wanneer er geen naam is ingevuld, dan mogen we deze functie testNaam() niet blindelings gebruiken in onze controle bij onsubmit. Wanneer we dat wel zouden doen, zouden we immers voor elk veld een aparte alert krijgen, en dat is zeer storend voor de gebruiker. Toch is het belangrijk dat we de test van een afzonderlijk veld kunnen hergebruiken in de overkoepelende functie testAlles().De sleutel tot de oplossing is dat de functies zoals testAlles() niet direct een alert geven, maar in de eerste plaats alléén een test doen of het veld goed ingevuld is. Voor een veld afzonderlijk gaan we een extra functie gebruiken die een alert toont wanneer de test aangeeft dat er iets mis was; in de functie testAlles() gaan we de verschillende resultaten van de verschillende test-functies combineren tot een resultaat en daarna een samenvattende alert tonen. Samengevat geeft dit volgend stramien: • voor elk (verplicht) veld definiëren we een functie die test of het veld goed is ingevuld • in de onchange-handler gebruiken we die functie om te controleren, en wanneer er een fout is, tonen we een alert • in de onsubmit-handler combineren we de alle test-functies en tonen een gecombineerde alert In principe moet de testfunctie van een veld gewoon false of true terug geven. Daaraan kunnen we al zien of het veld correct ingevuld was, maar het probleem is dat we dan geen specifieke foutmelding kunnen geven. Het kan bv. zijn dat het veld helemaal niet ingevuld was, of dat het paswoord te kort was, of dat het gebaseerd was op een woord uit een woordenboek, … Dit komt allemaal overeen met een false, maar de nuance is totaal anders. Daarom gaan we de testfuncties een String laten teruggeven: wanneer deze leeg is, is het veld correct ingevuld, en anders is het veld fout ingevuld. In dat geval kunnen we de string als foutboodschap laten zien. Het gedrag in de onchange-handler kunnen we nu in een functie steken: function toonFout(boodschap) { if (boodschap != ””) alert(boodschap); } Het stramien neemt direct vastere vorm aan. • voor elk veld definiëren we een functie testXXX() die test of het veld goed is ingevuld en die “” terug geeft als het goed is, anders een concrete foutboodschap • in de onchange-handler zetten we toonFout(testXXX()) (XXX vanzelfsprekend aan te passen aan de testfunctie voor het veld) • in de onsubmit-handler tellen we alle testXXX()-en op. Wanneer die “som” nog altid gelijk is aan “” zijn alle velden ok, en return we true. Anders geven we een alert en returnen false. Bemerk dat je het tegenhouden van formulierverzending ook analoog kan toepassen bij href’s. Wanneer je daar een onClick-handler bij zet die false terug geeft wordt de href-link niet gevolgd. Dat kan handig zijn om voorwaarden op te leggen bij het gebruik van links, bv. dat bepaalde gegevens ingevuld moeten zijn, of dat je eerst een confirm-venster toont waarbij de bezoeker op OK moet klikken (“Pas op! Dit is een externe link en je staat dus op het punt om deze extreem boeiende site te verlaten. Wil je toch doorgaan?” of zo), … p. 36/66


Op cmdstud vind je in het bestand validatie.html een eenvoudig voorbeeld van formuliervalidatie waarbij in onderstaand formulier verplicht een naam ingegeven moet worden.

6.4 Toepassingen Omdat formuliervalidatie een belangrijke en een van de zinvolste en meest gebruikte toepassingen van Javascript is, benadrukken we het belang van het praktisch inoefenen door in dit hoofdstuk de titel oefeningen te vervangen door toepassingen.

Oefeningen 55. Maak een formulier met daarin twee vakjes. Zorg er voor dat minstens één van beide vakjes ingevuld wordt. 56. Valideer het formulier in het bestand valideer-oef2.html. 57. Valideer het formulier in het bestand valideer-oef3.html.

6.5 Formuliervalidatie Grafisch Verduidelijken In het vorige hoofdstuk hebben we gezien hoe we de invoer van een formulier kunnen valideren. We hebben bovendien beklemtoond dat het belangrijk is om zo snel mogelijk feedback te geven over het al dan niet correct invullen van individuele velden. We gaan dus niet afwachten tot de bezoeker alle velden van het formulier invult en pas na het klikken van verzendknop vertellen dat het eerste veld fout ingevuld was. Tot hiertoe gaven we enkel negatieve feedback: wanneer het fout was, toonden we een alert met de vraag het veld correct in te vullen. Positieve feedback gaven we niet, terwijl dat toch een heel belangrijk iets is. Het spreekt voor zich dat we dit niet met een alert doen, omdat dit de bezoeker meer ergert dan aanmoedigt. Met het Image-object ligt er een kans klaar voor het oprapen: zet bij elk invoerveld een transparant prentje dat je groen kleurt wanneer het veld correct ingevuld is en rood wordt wanneer het fout ingevuld is.

Oefeningen 58. Pas dit formuliervalidatie-principe toe op de oefeningen van hierboven.

6.6 Samengevat Na studie van dit hoofdstuk kan je ! formulieren valideren12.

12

Als deze eindterm je verrast, is het hoog tijd dat je leert om altijd de titels van een hoofdstuk te lezen.

p. 37/66


Hoofdstuk 7

DHTML : CSS + JS 7.1 Inleiding Door CSS en Javascript te combineren kunnen we allerlei interessante dingen uithalen die te maken hebben met het dynamisch veranderen van inhoud en stijlelementen in een HTMLdocument. Het statische HTML wordt dan dynamisch, afgekort tot DHTML. Met dit DHTML kunnen we bijvoorbeeld de inhoud van een tabel veranderen of inkleuren wanneer de bezoeker van de website er op klikt, en kunnen we formulierelementen toevoegen, verwijderen of het aantal opties van een select-menu aanpassen. Merk op dat de formuliervalidatie uit het vorige hoofdstuk traditioneel niet tot DHTML wordt gerekend. Het is wel dynamisch in de zin dat er vanalles gebeurt (nl. een alert wanneer het formulier niet goed ingevuld is), maar niet in de betekenis van DHTML dat het oorspronkelijke document verandert. In dit en de volgende hoofstukken gaan we dus niet zomaar wat alerts tonen maar echt ingrijpen in het getoonde HTML-document.

7.2 getElementById() Wanneer we het HTML-document dynamisch aan willen passen, willen we dat meestal selectief doen, en bijvoorbeeld enkel die paragraaf of dat tabel-element aanpassen waar de bezoeker op klikt. We moeten dus een aparte entiteit uit het HTML-document kunnen selecteren. In het vorige hoofdstuk hebben we dat gedaan door het formulier en elk van de inputelementen een name-attribuut mee te geven. Daarna kunnen we een input-element selecteren via document.formulierNaam.elementNaam. Die techniek werkt spijtig genoeg enkel bij formulierelementen, images en frames13. Voor een willekeurig element zoals een , een
of een
gaat het alleen op een andere manier. We moeten dan het HTML-element een attribuut id meegeven14. Zodra we dat gedaan hebben, kunnen we met de methode getElementById() een HTML-element opvragen door de methode als parameter het ID van het gewenste element mee te geven, bv.
<script language=”javascript”> function veranderParagraaf() { var paragraaf = document.getElementById(”par”); paragraaf.innerHTML = ”Dit is de nieuwe inhoud van de paragraaf”; }

7.3 HTMLElement – innerHTML In het voorbeeld van hierboven hebben we gezien dat we de tekst van een paragraaf kunnen veranderen. Daarvoor hebben we de eigenschap innerHTML gebruikt. Natuurlijk kan je ook nog vele andere dingen doen met een element dat je selecteert via getElementById(). Om te weten wat, moet je eerst en vooral weten dat je in eerste instantie iets terug krijgt van het type HTMLElement. In je referentiegidsen (bv. het boekje Javascript, Kort en krachtig) zoek je dan ook best het object HTMLElement op, want daar vind je een vrij volledig overzicht van alles wat je kan doen met zo’n HTML-element. De belangrijkste eigenschappen zijn zeker innerText en innerHTML. Beide veranderen datgene wat in het element getoond wordt: de tekst van de header, paragraaf, table-data, textarea, … Alleen houdt innerText geen rekening met eventuele HTML-codes in de opgegeven tekst en doet innerHTML dat wel. paragraaf.innerText = “Dit is vet”; geeft dus een onverwacht en ongewenst effect. Daarom ondersteunt o.a. FireFox innerText niet en geniet innerHTML zonder enige twijfel de voorkeur. Ook relatief belangrijk is outerHTML, maar dit is veel meer ingrijpend en zelfs bijna brutaal: je kan dan niet alleen de inhoud veranderen, maar effectief het hele element: je kan dan een element dat een H1 was veranderen in een formulier, een image of iets heel onverwachts. Omdat dit meestal een te bruusk effect geeft, springen we er zeer spaarzaam mee om. 13

Hoe we dat doen bij frames bespreken we niet in deze cursus omdat frames minder en minder gebruikt worden, maar het kan dus wel. 14 Voor formulierelementen zullen we dan ook zowel een name als een id voorzien. Veel HTMLeditoren zorgen er automatisch voor dat id en name dezelfde waarde hebben.

p. 39/66

Hoofdstuk 7 : DHTML: CSS + Javascript Auteur: Kris Aerts – Lesgever: Maarten Reynders

7.4 De eigenschap “style” Wanneer je zorgvuldig alle eigenschappen en methoden bestudeert, vind je ook de eigenschap style terug. Nadeel van de meeste boeken rond Javascript, zoals de Basiscursus Javascript en boekje Javascript, Kort en Krachtig is dat het deze eigenschap extreem kort besproken wordt terwijl dit toch een heel belangrijke eigenschap is: je kan er namelijk de stijl van het element mee aanpassen, en bijvoorbeeld een bepaalde stijl uit je CSS op toepassen. Deze eigenschap style is dus de directe link tussen CSS en Javascript. In feite is style niet zomaar een eigenschap, maar een echt object. Het heeft zelf verschillende eigenschappen die je stuk voor stuk kan veranderen. Zo zal volgende code de achtergrondkleur van de paragraaf veranderen wanneer je er op klikt.
<script language=”javascript”> function veranderParagraaf() { var paragraaf = document.getElementById(”par”); paragraaf.style.backgroundColor = ”red”; }

http://docs.sun.com/source/816-6408-10/style.htm geeft ons volgend overzicht van een aantal interessante eigenschappen van het object style: Property

Description

align

Specifies the alignment of an HTML element within its parent.

backgroundColor

Specifies a solid background color for an element.

backgroundImage

Specifies a background image for an HTML element.

borderBottomWidth Specifies the width of the bottom border of an HTML element. borderColor

Specifies the color of the border of an HTML element.

borderLeftWidth

Specifies the width of the left border of an HTML element.

borderRightWidth

Specifies the width of the right border of an HTML element.

borderStyle

Specifies the style of border, such as solid or double, around a block-level HTML element.

borderTopWidth

Specifies the width of the top border of an HTML element.

clear

Specifies the sides of an HTML element that allow floating elements.

color

Specifies the color of the text in an HTML element.

display

Overrides the usual display of an element and specifies whether the element appears in line, as a block-level element, or as a block-level list item.

fontFamily

Specifies the font family, such as Helvetica or Arial, for an HTML text element.

fontSize

Specifies the font size for an HTML text element.

p. 40/66


fontStyle

Specifies the style of the font of an HTML element.

fontWeight

Specifies the weight of the font of an HTML element.

lineHeight

Specifies the distance between the baselines of two adjacent lines of block-level type.

listStyleType

Specifies the style of bullet displayed for list items.

marginBottom

Specifies the minimal distance between the bottom of an HTML element and the top of an adjacent element.

marginLeft

Specifies the minimal distance between the left side of an HTML element and the right side of an adjacent element.

marginRight

Specifies the minimal distance between the right side of an HTML element and the left side of an adjacent element.

marginTop

Specifies the minimal distance between the top of an HTML element and the bottom of an adjacent element.

paddingBottom

Specifies how much space to insert between the bottom of an element and its content, such as text or an image.

paddingLeft

Specifies how much space to insert between the left side of an element and its content, such as text or an image.

paddingRight

Specifies how much space to insert between the right side of an element and its content, such as text or an image.

paddingTop

Specifies how much space to insert between the top of an element and its content, such as text or an image.

textAlign

Specifies the alignment of an HTML block-level text element.

textDecoration

Specifies special effects, such as blinking, strike-outs, and underlines, added to an HTML text element.

textIndent

Specifies the length of indentation appearing before the first formatted line of a block-level HTML text element.

textTransform

Specifies the case of an HTML text element.

whiteSpace

Specifies whether or not white space within an HTML element should be collapsed.

width

Specifies the width of a block-level HTML element.

Een nog groter overzicht vind je op http://www.w3schools.com/htmldom/dom_obj_style.asp Bij het veranderen van de eigenschappen kan je natuurlijk de oude waarde hergebruiken om zo bijvoorbeeld het lettertype te vergroten:
<script language=”javascript”> function veranderParagraaf() { var paragraaf = document.getElementById(”par”); paragraaf.fontSize = (parseInt(paragraaf.fontSize) + 3) + ”px”; }

p. 41/66


7.5 De eigenschap className Wanneer je met css je stijlen in classen hebt ingedeeld mag je natuurlijk ook rechtstreeks de eigenschap className van het HTMLElement gebruiken. Dan kan je in één keer een heel nieuwe stijl toekennen aan een specifiek HTMLElement, bv. paragraaf.className = “red”;

7.6 Het event-object We hebben ondertussen al heel wat geëxperimenteerd met allerlei event-handlers zoals onclick, onmouseover, … Hierbij hebben we al wel gekeken naar het type event want dat zit ingebakken in de keuze voor de een of de andere event-handler, maar het event zélf heeft ook een aantal eigenschappen die interessant kunnen zijn. Zo bevatten muis-gerichte events bv. de coördinaten van waar er geklikt is en kan je bij key-events nagaan welke toets ingedrukt is en of de shift-toets ingedrukt was. http://www.w3schools.com/htmldom/dom_obj_event.asp bevat hiervan een handig overzicht dat ook weergeeft welke browser welk event ondersteunt. Dat is nodig want de browserondersteuning durft nogal verschillend zijn. Om het event-object te kunnen gebruiken, moet je een extra parameter meegeven aan de functie die je oproept bij de event-handler, bv. onMouseMove="toonCoordinaten(event)";

Met hierbij volgende definitie van de functie toonCoordinaten(): function toonCoordinaten(event) { if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft; posy = e.clientY + document.body.scrollTop; } alert("(" + posx + "," + posy + ")"); }

In deze functie, die de coördinaten toont van de positie in het venster waar geklikt is, hebben we direct een typische browser-incompatibiliteit omzeild.

p. 42/66


7.7 Oefeningen Hieronder vind je slechts een beperkt aantal oefeningen met DHTML, maar het spreekt opnieuw voor zich dat je véél meer kan dan wat hieronder staat. Het is aan de creatieve webontwikkelaar om zijn kunsten bot te vieren… 59. Maak een webpagina (met CSS en Javascript) die de bezoeker toelaat om de grootte van het lettertype te vergroten en verkleinen door op de bijhorende knoppen “vergroot” en “verklein” te klikken. 60. Maak een webpagina waarin een aantal div’s verborgen zijn (display: none) en voorzie een aantal links of knoppen die de div’s zichtbaar maken. 61. Geef een serie div’s verschillende waarden voor de z-index en verander de waarde ervan (en dus de volgorde waarin ze op het scherm getoond worden) wanneer de bezoeker op een van die div’s klikt. 62. Maak een pagina waarbij aan de muis steeds een blok tekst hangt die de HTML-code toont van de div waar de muis op dat moment over gaat. Tip: gebruik een div wiens inhoud je kan wijzigen en die je voortdurend de coordinaten geeft van de muispointer. De inhoud van de div wijzig je via een onMouseOver bij de desbetreffende divs. 63. Maak een webpagina met een tabel met de getallen 1 t.e.m. 10 en kies een geheim getal (bv. 7). Vraag de bezoeker van de webpagina om het geheime getal aan te klikken. Wanneer de bezoeker het getal gevonden heeft, zet dan de achtergrondkleur van dat tabelelement in het geel en toont in een alert het aantal keren dat de bezoeker heeft moeten proberen. 64. Maak een webpagina met een ‘geheim’ woord en een tabel met evenveel ‘lege’ vakjes als er letters zijn in het woord. Wanneer de bezoeker op een vakje klikt, moet de letter van het woord verschijnen. Gebruik hiervoor een functie met twee parameters.

7.8 Timers Om dit hoofdstuk af te sluiten, bekijken we nog even een techniek die traditioneel niet echt tot DHTML gerekend wordt, maar waarmee je toch heel dynamische, tijdsgebonden effecten kan bekomen. Zo kan het leuk zijn om elke 30 seconden een andere slogan te tonen, elke seconde de tijd aan te passen of een bezoeker maximum 3 minuten een wedstrijd te laten spelen. Al deze effecten kunnen we bekomen met de methodes setTimeout(code, uitstel) – om de uitvoering van code uitstel milliseconden uit te stellen – en setInterval(code, interval) – om elke interval milliseconden de code te herhalen. Hierin moet code een string zijn en dus omsloten door ofwel “ “ of ‘ ‘. setTimeout( alert( Boeh ); ,5000);zegt na 5 sec. “Boeh”. setInterval( alert( Boeh ); ,1000);zegt élke 1 sec. “Boeh”.

Om het interval terug af te kunnen zetten, geeft de methode setInterval () een returnwaarde terug. Die returnwaarde hebben we nodig om het interval terug af te kunnen zetten. We doen dit met de opdracht clearInterval(intervalcode). Zo zal volgend codefragment gedurende 10 seconden “boeh” zeggen. p. 43/66


boeh10keer=setInterval( alert( Boeh ); ,1000); setTimeOut(“clearInterval(“ + boeh10keer + “)”,10000); 15

Oefeningen 65. Plaats in een array een aantal levenswijsheden en zet in de statusbalk16 van het browservenster een eerste levenswijsheid. Plaats daarna elke 10 seconden een nieuwe levenswijsheid in de statusbalk. 66. Vertel een (stomme) mop. Toon in een eerste venster “Wat is wit en ontploft?” en toon na 10 seconden in een ander venster “boemkool”. 67. Knip een figuur in een aantal stukken en toon de figuur door elke halve seconde een nieuw stuk van de figuur te laten zien.

15

In dit voorbeeld moeten we onze code samenstellen m.b.v. de +-operator om de waarde van boeh10keer in de code te krijgen en niet gewoon het woord boeh10keer. 16 Hiervoor moet je kijken bij het object Window.

p. 44/66


Hoofdstuk 8

DHTML : Tables & Forms 8.1 Inleiding In het vorige hoofdstuk hebben we gezien hoe we met DHTML de vormgeving van HTMLelementen kunnen veranderen. In dit hoofdstuk besteden we extra aandacht aan tabellen en formulieren omdat je daar niet alleen de vormgeving kan veranderen, maar bovendien ook dynamisch elementen kan toevoegen aan zowel tabellen als formulieren. Bij formulieren kan je bovendien de elementen in het keuzemenu van de select veranderen, zoals bv. bij het boeken van vliegtuigreizen waar de mogelijke bestemmingen afhankelijk zijn van de gekozen vertrekluchthaven. Om dat laatste op een elegante manier op te kunnen lossen, moeten we ook arrays en lussen behandelen.

8.2 Tabellen Een tabel is een zeer populair HTML-element omdat je op die manier voor een goede layout kan zorgen. Nu gebeurt het gebeurt nogal eens dat je elementen aan zo’n tabel zou willen toevoegen, bv. wanneer die het overzicht bevat van alle gekochte artikelen en de bezoeker een nieuw artikel toevoegt aan zijn winkelkarretje. Je kan dat natuurlijk doen door een nieuwe versie van de pagina in te laden, maar je kan ook met Javascript rijen toevoegen aan een bestaande tabel. Met de technieken van het vorige hoofdstuk kan dat in principe al een beetje: je zou een aantal extra rijen kunnen toevoegen aan de tabel met lege td’s, bv.

hier staat al iets

Wanneer je nu via Javascript de innerHTML van het element nogNiks verandert, ziet het er uit alsof je effectief een rij toevoegt: de oude rij was immers onzichtbaar en wordt pas nu getoond wanneer er effectief een inhoud te tonen valt. Dit is een correcte techniek, maar tegelijk een heel beperkte techniek: niet alleen moet je lege rijen toevoegen, maar bovendien ben je beperkt: je kan maar zoveel rijen ‘toevoegen’ als er lege rijen in de tabel zitten. Daarom bestaat er ook nog een tweede mogelijkheid (in moderne browsers): via insertRow() en insertCell() kan je eerst een rij toevoegen en dan aan de rij verschillende cellen toevoegen, bv. var rij = document.getElementById('myTable').insertRow(1); var cel; cel = rij.insertCell(0); cel.innerHTML = "cel 0"; cel = rij.insertCell(1); cel.innerHTML = "cel 1";

Uit dit voorbeeld kan je afleiden dat de methode insertRow() als parameter een rijnummer nodig heeft. De nieuwe rij komt op die positie in de tabel. In het voorbeeld wordt de rij als tweede rij toegevoegd omdat we in informatica altijd vanaf 0 beginnen te tellen. Soortgelijk heeft de methode insertCel() als parameter het celnummer nodig. Naast het toevoegen van rijen en cellen kan je als tegengestelde operatie ook rijen en cellen verwijderen: dat doe je via de methodes deleteRow() en deleteCell(). Ook deze methodes nemen een rijnummer en celnummer. Wanneer we nu op willekeurige plaatsen rijen en elementen in een tabel kunnen toevoegen en verwijderen, kunnen we niet voorspellen hoeveel rijen en cellen een tabel op een gegeven moment zal bevatten. Toch kan het zijn dat we dat willen weten: bv. om er voor te zorgen dat een tabel nooit meer dan 10 elementen bevat, of om de grootte van het lettertype in de tabel te veranderen wanneer er te veel rijen in zitten. Het spreekt voor zich dat dit kan (want anders hadden we deze inleiding niet gegeven): stel dat je, bv. getElementById() een variabele myTable hebt waarin een tabel zit. Dan kan je met volgende code

p. 46/66

Hoofdstuk 8 : DHTML: Tables & Forms Auteur: Kris Aerts – Lesgever: Maarten Reynders

•

het aantal rijen opvragen myTable.rows.length

•

de n-de rij opvragen myTable.rows[n]

•

opvragen hoeveel cellen de n-de rij bevat myTable.rows[n].cells.length

•

de m-de cel van de n-de rij opvragen myTable.rows[n].cells[m]

•

de inhoud van de m-de cel van de n-de rij veranderen myTable.rows[n].cells[m].innerHTML = “rij “ + n + “ cel “ + n;

Met deze kennis en met de kennis van de for-lus die we later in de hoofdstuk (kort) behandelen ben je in principe in staat om allerlei geavanceerde dingen doen, zoals bijvoorbeeld het sorteren van de elementen in een tabel, of berekenen hoeveel plaats een tabel in beslag neemt. In de praktijk is dit (natuurlijk) nog te hoog gegrepen voor de gemiddelde student, maar houd voor de ogen dat je dit soort effecten kan bereiken met Javascript. Durf hier dan ook naar terug grijpen wanneer je meer ervaren wordt in het programmeren!

Oefeningen 68. Maak een tabel met de getallen van 1 tot 10. Wanneer de gebruiker op een getal klikt moet je het getal uit de tabel verwijderen. 69. Maak een tabel en een formulier waarin de gebruiker een tekst in kan vullen. Voeg die tekst telkens toe aan de tabel. Wanneer de bezoeker een elfde rij toevoegt, verwijder dan de bovenste rij uit de tabel zodat de tabel altijd ten hoogste 10 regels kan bevatten. 70. Een moeilijke: maak een tabel met als elementen “kan” “Goed” “Javascript” “ik” “in” “programmeren”. Zorg er voor dat je op die elementen kan klikken. Bij de eerste klik moet je alleen het woord een gele achtergrond geven. Bij de tweede klik moet je de gele achtergrond weg doen en de twee woorden waarop geklikt was van plaats veranderen. Op die manier kan de bezoeker van je site zelf een zin vormen met de woorden in de tabel.

8.3 Formulieren uitbreiden Dankzij vorige paragraaf wordt het nu heel gemakkelijk om een aantal elementen toe te voegen aan een formulier. Het volstaat om binnen de tags
en
een tabel te plaatsen. Door nu aan die (interne) tabel rijen toe te voegen en als innerHTML de code voor een formulierelement te zetten, zal je elementen toevoegen aan het formulier. Dit kan je bekijken in het bestand formuliervoorbeeld.html op cmdstud.

Oefeningen 71. Maak een formulier met vinkjes (checkboxen) voor GSM en MSN, maar initieel geen velden voor het GSM-nummer en MSN-nick. Pas wanneer de bezoeker de checkbox aanvinkt, moet je het bijhorende invoerelement tonen. 72. Maar een nepformulier: wanneer de bezoeker op het veld klikt om het in te vullen, moet je het formulierelement laten verdwijnen.

p. 47/66


8.4 Arrays en de for-in (for each) In de volgende sectie willen we een select-menu dynamisch aanpassen. Omdat zo’n selectmenu in essentie een array van Options is, bekijken we in deze sectie eerst arrays en de for-in lus waarmee we heel gemakkelijk doorheen een array kunnen lopen. Alhoewel we pas nu officieel arrays invoeren, zijn we die al eerder tegengekomen in Javascript, nl. tijdens het werken met formulieren of ook een paar bladzijden eerder bij het opvragen van een rij of een cel van een tabel. Met document.forms[0] verwezen we naar het eerste formulier, met document.forms[1] naar het tweede, enzoverder … Hierin is de expressie document.forms een array van formulieren en myTable.rows een array van rijen. Merk wel op dat we arrays heel summier bespreken: er zijn veel meer mogelijkheden en je wordt dan ook sterk aangemoedigd om die uitgebreider te verkennen tijdens je verdere studie.

8.4.1 GENUMMERDE ARRAYS De oudste variant werkt met genummerde vakjes. Je kan dan een individueel element opvragen en veranderen door het volgnummer van het element tussen vierkante haken te zetten. Zo geeft document.forms[0] het eerste formulier terug. Wil je weten hoe lang een array is (=hoeveel elementen er in zitten), dan gebruik je de eigenschap length. Vermits men vanaf 0 begint te tellen, heeft het laatste element dus rangnummer length-1. Document.forms en myTable.rows zijn arrays die Javascript automatisch aanmaakt. Wil je zelf zo’n array aanmaken, dan kan dit op twee manieren: 1)

Alles in één keer, bv. var namen = new Array(”Jan”, ”Piet”, ”Joris”, ”Corneel”);

2)

Stuk per stuk, bv.

var namen = new Array(); //ookgoedis:varnamen=newArray(4);//4elementen namen[0] = ”Jan”; namen[1] = ”Piet”; namen[2] = ”Joris”; namen[3] = ”Corneel”; Het voordeel van de eerste techniek is het feit dat Javascript de elementen automatisch nummert. Het voordeel van de tweede techniek is dan weer dat je niet alle elementen tegelijk moet invoegen. Vermits je beide technieken mag combineren, doet men dat dikwijls omdat je zo gemakkelijk van beide voordelen kan genieten. Wil je zeker zijn dat je altijd achteraan de array toevoegt, dan kan dit met de opdracht namen[namen.length] = ”xxx”;17

17

Denk zelf na waarom dit altijd een element achteraan toevoegt ongeacht de lengte van de array.

p. 48/66


8.4.2 ASSOCIATIEVE ARRAYS Tegenwoordig werken we niet meer zo heel veel met genummerde arrays, maar gebruiken we arrays met associaties. Hiermee bedoelen we dat je een associatie (verband) legt tussen de index (datgene tussen vierkante haken) en de inhoud van het element, bv. woonplaats[”Kris”]=”Begijnendijk” en woonplaats[”Nathalie”]= ”Eversel”. Op die manier kan je de betekenis van de verschillende elementen in een array veel gemakkelijker weergeven. Concreet maak je eerst een lege array aan, bv. var namen = new Array(); en voegt daar dan stelselmatig elementen aan toe. Wanneer we dan verschillende elementen in een array opgeslagen hebben, gaan we dikwijls bepaalde dingen willen doen met elk van de elementen in de array. Omdat dit zo frequent voorkomt, heeft men daar een gemakkelijke constructie voor gemaakt. for (indexin array) { // doe iets met array[index] } Met deze lus-structuur18 overloop je alle elementen van de array, en krijgt de variabele index afwisselend de verschillende index-waarden die in de array gebruikt worden. Een concreet voorbeeld maakt dit duidelijker: stel dat we alle woonplaatsen van personen willen afdrukken, dan kan dit met volgende lus: for(persooninwoonplaats){ document.writeln(persoon+”woontin”+woonplaats[persoon]+”
”); }

Oefeningen 73. Breid het voorbeeld van de personen en hun woonplaats van hierboven uit voor een vijftal van je vrienden en toon voor elke persoon de woonplaats. 74. Maak een associatieve array van kleurnamen en RGB-codes als inhoud (bv. kleurcode[“groen”] = “#00FF00”; ). Maak dan een formulier waarin de bezoeker een kleurnaam kan invullen of selecteren en toon in een alert de bijhorende kleurcode.

8.5 Select aanpassen met een associatieve array Na deze omleiding via arrays zijn we nu in staat om de opties van een select te veranderen via Javascript. De oplossing bestaat er in dat we de opties van de select als een array beschouwen en er op die manier waarden aan toekennen, bv. var menuutje = document.formpie.menu; menuutje.options[0].value = "FF0000"; menuutje.options[0].text = "rood";

Wanneer we bovendien de lengte van de array moeten veranderen wanneer we het aantal elementen in de optielijst verandert, doen we dat door de eigenschap length aan te passen, bv. 18

Naast de for in heb je in Javascript ook de gewone for en de while als lussen. Deze bespreken we wegens tijdsgebrek niet in deze cursus, maar ook omdat we ze niet direct nodig hebben. Bovendien zijn ze al aan bod gekomen in de PHP-cursus. Aan de hand van die kennis kan je dan zelfstandig je Javascript-kennis uitbreiden met de while en de gewone for.

p. 49/66


menuutje.options.length = 3;

Het korte voorbeeld hierboven toont aan dat je niet noodzakelijk een associatieve array nodig hebt, maar omdat er in zo’n associatieve array sowieso twee waarden zijn (index en inhoud) en je bij een option ook twee waarden nodig hebt (tekst en waarde) is de associatieve array wel héél handig. Zo past volgende code de opties van het select-veld aan zodat alle waarden in de array plaatsen gebruikt worden. function veranderItemsMetAssociatieveArray() { var menuutje = document.formpie.menu; menuutje.options.length=0; var plaatsen = new Array(); plaatsen["Kris"]="Begijnendijk"; plaatsen["Paul"]="Genk"; plaatsen["Steven"]="Hasselt"; plaatsen["Nathalie"]="Eversel"; plaatsen["Liesbeth"]="Leuven"; var pos; for (index in plaatsen) { menuutje.options.length++; // voeg element toe pos = menuutje.options.length-1; // positie laatste vakje menuutje.options[pos].value = plaatsen[index]; menuutje.options[pos].text = index; } }

Oefeningen 75. Maak een pagina voor een pizzawinkel die je toelaat om je eigen pizza samen te stellen: toon in een select-menu links de verschillende ingrediënten (salami, paprika, artichok, …) en rechts een (lege) textarea. Wanneer men een ingrediënt selecteert, moet je het verwijderen uit het menu en toevoegen aan de textarea. Bereken en toon ook de prijs van de pizza: de basispizza kost !3.50 en voor elk extra ingrediënt komt er !0.75 bij. Uitbreiding: geef de verschillende ingrediënten verschillende prijzen. Tip: gebruik daarvoor een associatieve array. 76. Maak een pagina voor een luchtvaartmaatschappij die de getoonde bestemmingen laat afhangen van de gekozen vertrekplaats.

p. 50/66


Hoofdstuk 9

Basis Ajax Ajax, de afkorting van Asynchronous Javascript And XML, is een redelijk hot topic bij webontwikkelaars. En dit is terecht omdat je dankzij Ajax kan afstappen van de traditionele manier van gegevens verwerken op websites (bv. met PHP), waarbij na het invullen van een formulier of het aanklikken van een link een volledige, nieuwe webpagina wordt opgebouwd op de server en doorgestuurd naar de client. Ajax is een essentiele tool om je webapplicaties “rich” te maken en is vooral sinds 2005 populair geworden dankzij Google. (In dit hoofdstuk gaan we niet héél diep in op Ajax. Dit kan wel in vele andere tutorials zoals http://www.phphulp.nl/php/tutorials/8/309/, http://developer.mozilla.org/en/docs/AJAX:Getting_Started, http://www.w3schools.com/ajax/default.asp, http://www.captain.at/howto-ajax-form-post-request.php , http://www.ajaximpact.com/index.php, en http://www.ajaxian.com/archives/ajax-tutorial-round-up).

9.1 Een beetje RIA RIA, de afkorting voor Rich Internet Application, is nog zo’n hot topic (dat ondertussen wel een beetje aan het afkoelen is als naam, maar niet als concept). Hiermee wordt verwezen naar interactieve webapplicaties die directe feedback geven zonder pagina’s expliciet in te laden. Ze gelijken dus in zekere mate op desktop-programmas (bijvoorbeeld een tekstverwerker of een agenda), waarbij ook geen pagina’s ingeladen worden, maar waarbij direct dingen gebeuren. De term Rich Internet Application is in maart 2002 door Macromedia geïntroduceerd, als een coole benaming voor Flash-applicaties die gegevens op een webserver raadplegen en opslaan (zie nu ook hun product Flex), maar de kenmerken zijn evenzeer van toepassing op vele andere technologieën waaronder Ajax.

Wikipedia beschrijft de werking en de voor- en nadelen als volgt: De webbrowser stuurt namens de gebruiker informatie op naar de webserver, ontvangt eventueel gewijzigde inhoudelijke gegevens en verwerkt deze in de getoonde webpagina, zonder dat de complete pagina opnieuw geladen hoeft te worden. De webserver legt de wijzigingen vast op de server. Voor- en nadelen Rich Internet Applications zijn ingewikkelder om te bouwen dan traditionele webapplicateis, zijn lastiger onderhoudbaar en stellen zwaardere eisen aan het systeem van de eindgebruiker (bezoeker). Daar staat tegenover dat de pagina's sneller reageren op acties van de eindgebruiker. Dit komt doordat slechts de veranderde informatie van de website gehaald moeten worden en dat niet de hele pagina opnieuw hoeft te laden. Idealitair is er minder dataverkeer tussen de gebruiker en de webserver. In de praktijk zijn RIAs "extra" interactief en wordt deze winst vaak te niet gedaan. Wikipedia beschrijft terecht dat dit soort toepassingen ingewikkelder om te bouwen is, maar het hoeft niet héél veel moeilijker te zijn. Het is eerder zo dat de opdrachtgever bijkomende functionaliteit gaat vragen eenmaal hij ziet hoe leuk zo’n RIA is. En precies die bijkomende functionaliteit maakt de applicatie ingewikkelder (en tegelijkertijd leuker) om te maken.

9.2 Het concept van Ajax Vooraleer we de techniek in de praktijk inoefenen, gaan we iets dieper in op het concept zelf achter Ajax. Hierbij bekijken we achtereenvolgens wat de A van Asynchroon betekent, welk object die asynchrone werking verzorgt en hoe we dan een actie in de webapplicatie dienen af te werken. Pas daarna gaan we dit concreet uitwerken met “echte” code.

9.2.1 ASYNCHROON / ACHTERGROND Vooraleer we de techniek in de praktijk inoefenen, gaan we iets dieper in op het concept zelf achter Ajax. Vooral de eerste A in Ajax, die van Asynchroon,is dan zeer belangrijk. Om te kunnen begrijpen wat daar zo belangrijk aan is, bekijken we eerst de (synchrone) werking van een traditionele webapplicatie. Hierbij staat het request-response-principe centraal. Elke keer wanneer een link aangeklikt wordt of een formulier verzonden wordt, verstuurt de browser een request naar de webserver, die als reactie daarop een response terug stuurt. Die response kan een nieuw HTML-document zijn waarin de gebruiker opnieuw op links kan klikken en dus nieuwe een nieuwe request kan versturen. Dit mechanisme is synchroon: elke request wordt afgewerkt in volgorde van versturen: de eerste response hoort dus bij de eerste request, de tweede response hoort bij de tweede request enzoverder… Dit is vanzelfsprekend wanneer je na elke request-response een nieuwe webpagina inlaadt en (alleen) vanuit die pagina nieuwe requests verstuurd kunnen worden. Een essentieel principe van Ajax is echter dat niet heel de pagina ververst wordt wanneer je een request verstuurt en de response afwerkt (er kan zelfs niks in de pagina veranderen). Stel dus dat je drie verzendknoppen hebt staan op je site die elk een apart deel van de webpagina vernieuwen, dan kan je die knoppen in een willekeurige volgorde aanklikken. De A van Asynchroon in Ajax verwijst naar het feit dat de responses niet in de volgorde binnenkomen van het versturen van de request (en dus van het aanklikken van de knoppen). Zo kan response 1 bv. 3 seconden op zich laten wachten, en response 2 slechts 0,5 seconden. In dit geval zal response 2 eerst afgewerkt worden en daarna response 1. p. 52/66

Hoofdstuk 9 : Basis Ajax Auteur: Kris Aerts – Lesgever: Maarten Reynders

Dit is dus een zeer groot verschil met gewone synchrone websites. Om dat verschil expliciet te maken, noemt men Ajax-sites dikwijls webapplicaties, naar analogie met desktopprogramma’s die men meestal ook applicaties noemt. In “gewone mensentaal” kan je de A van Asynchroon ook de A van Achtergrond noemen19, omdat de request op de achtergrond verwerkt wordt zonder dat de pagina vernieuwd wordt. En van dingen die op de achtergrond gebeuren, houdt men meestal de volgorde van uitvoering niet zo strikt in het oog.

9.2.2 HET XMLHTTPREQUEST-OBJECT OP DE ACHTERGROND We zeggen dan wel dat alles op de achtergrond gebeurt, maar dat betekent niet dat we geen code meer moeten schrijven. Meer nog: die code moet zelfs zeer krachtig zijn, want ze moet braaf in de achtergrond wachten tot de response binnenkomt en dan in actie schieten. Gelukkig hebben de browserfabrikanten hun huiswerk goed gedaan en bieden ze een object aan dat al het werk (op de achtergrond) doet. Dit object heet XMLHTTPRequest. Het is dan ‘alleen’ nog kwestie van zo’n object op de juiste manier aan te maken en te gebruiken. Enig nadeel is dat dit voor verschillende browsers op een verschillende manier moet gebeuren, maar gelukkig zijn de verschillen beperkt. We bespreken later hoe we dat precies doen. We zijn ondertussen al een hele stap verder. Wanneer we een Ajax-actie willen uitvoeren, moeten we eerst een XMLHTTPRequest-object aanmaken en dit object een request laten versturen. Daarna gaat het object in de achtergrond stilletjes op een response van de server wachten. Wanneer we verschillende request willen sturen, maken we verschillende XMLHTTPRequest-objecten en zullen deze elk – asynchroon – op hun eigen response wachten.

9.2.3 EEN CALL-BACK FUNCTIE De volgende vraag is dan wat er moet gebeuren wanneer zo’n XMLHTTPRequest-object een response ontvangt. Het spreekt voor zich dat de ontwikkelaar dit zelf moeten kunnen kiezen: de ene keer ga je een forumpost toevoegen, de andere keer een foto verwijderen of een andere tag of ondertitel geven. Kortom de ontwikkelaar moet hierover volledige controle hebben. Ajax gebruikt hiervoor de techniek die gebruikt wordt in de meeste programmeertalen wanneer je een user interface bouwt, nl. een call back functie. Dit is een functie die “terug telefoneert” (de “call back”): we bedoelen hiermee dat op een gegeven moment de response een trigger stuurt naar het XMLHTTPRequest-object (“terug telefoneren”) en dat het object dan bepaalde instructies moet uitvoeren, bv. een forumpost zichtbaar maken, een foto verwijderen, … In deze functie kunnen we dus eender welke Javascript-code zetten, bv. van een simpele alert over eenvoudige DHTML tot complexe Javascript-code die Flash-films inlaadt en/of genereert. Het is dus hier dat het facet Javascript (de J van Ajax) ten volle zijn rol speelt. We hebben in de voorgaande hoofdstukken gezien dat we met DHTML het uitzicht en de inhoud van een webpagina dynamisch kunnen veranderen en die kennis gaan we dan ook toepassen in onze Ajax-applicaties.

19

Toch in het Nederlands. In het Engels zou het dan immers B-jax worden en dat bekt niet zo goed.

p. 53/66


9.2.4 VIJF READYSTATES Het XMLHTTPRequest-proces loopt in de achtergrond en is dus in principe onzichtbaar. Dat is handig, maar tegelijk vervelend omdat de gebruiker een snelle response wil. Zelfs wanneer het om een ingewikkelde berekening gaat, wil de gebruiker op zijn minst weten dat het proces gestart is. Om die reden zal de call-back-functies verschillende keren opgeroepen worden telkens met een andere readyState. Deze geeft aan hoever de request al verzonden is en of de response al dan niet klaar is. Volgende tabel beschrijft de verschillende toestanden:

Status Beschrijving 0

De request is nog niet klaar.

1

De request is klaar om te versturen.

2

De request is verstuurd.

3

De request is in verwerking.

4

De request is afgerond en de response is toegekomen.

Een goede ontwikkelaar zal dus ook bij readyStates 2 en 3 wat feedback geven en niet afwachten tot readyState 4, tenzij je per definitie weet dat je in geen tijd klaar bent.

9.2.5 DE RESPONSE OPVRAGEN Wanneer de readyState 4 is geworden, wordt het tijd om het eindresultaat zichtbaar te maken. Hiervoor heb je natuurlijk de concrete response nodig. Die kan je natuurlijk ophalen uit het XMLHTTPRequest-object. Je hebt hierbij de keuze uit twee eigenschappen:

•

responseText, wanneer het serverscript gewone tekst als uitvoer geeft

•

responseXML, wanneer het serverscript zijn uitvoer formateert in XML

Er is zelfs nog een derde mogelijkheid, nl. JSON, maar deze is nog een beetje in ontwikkeling en vermelden we in deze cursus dan enkel volledigheidshalve en niet ten gronde. Ook de XML-variant bespreken we niet ten gronde alhoewel de X van Ajax aangeeft dat XML de voorkeur geniet. Dat klopt ook, maar XML is wel moeilijker op te stellen dan gewone tekst en daarom beperken we ons in deze cursus tot tekst en de eigenschap responseText.

9.2.6 SAMENVATTING Wanneer we een bewerking willen uitvoeren, moeten we aan een eventhandler (bv. onClick of onSubmit) Javascript-code hangen, die 1. een XMLHTTPRequest-object aanmaakt 2. een concrete request klaarmaakt (URL + GET of POST-info) 3. een call-back functie definieert a. die feedback geeft afhankelijk van de readyState b. responseText gebruikt om de response te verwerken in de huidige pagina 4. dan de request uitstuurt

p. 54/66


9.3 Een browseronafhankelijk HTTP-object Het eerste probleem dat we nu tegenkomen is dat Microsoft zijn eigen variant heeft van het XMLHTTPRequest. Eerlijkheidshalve moeten we wel vertellen dat Microsoft eerst was met het ActiveX-object dat het gedrag van XMLHTTPRequest aanbiedt. Nadeel hiervan was wel dat ActiveX in het algemeen heel wat veiligheidsproblemen introduceerde en dus niet zo geliefd was bij heel wat administrators. Bovendien heeft Microsoft verschillende varianten van het XMLHTTPRequest, afhankelijk van de versie en het OS van de browser, terwijl de andere browsers allemaal hetzelfde XMLHTTPRequest-object hebben. Gelukkig is het eigenlijk alleen de manier waarop we het object aanmaken dat verschilt van browser tot browser. We schrijven dus éénmaal een functie die dit probleem oplost en vanaf gebruiken we overal die functie. Hieronder vind je een mogelijke implementatie van deze functie: function createREQ() { var req = false; try { req = new XMLHttpRequest(); // firefox, safari, … } catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE } catch (err3) { req = false; alert("Deze browser ondersteunt geen Ajax. Dikke pech!"); }}} return req; }

In elke Ajax-oproep gaan we dus iets doen van het genre en op die http gaan we dan alle bewerkingen loslaten.

http = createREQ();

9.4 onreadystatechange Call Back We hebben boven reeds vermeld dát we een call-back functie moeten maken, maar we hebben nog niet verteld hoe we dat moeten doen. De syntax hiervoor ziet er vrij ingewikkeld uit, maar eigenlijk valt het best mee. In essentie moeten we de eigenschap onreadystatechange van het XMLHTTPRequest-object een nieuwe waarde geven, nl. een functie die de call back beschrijft. Stel dat we gewoon de readyState in een alert willen zetten en dat het XMLHTTPRequest de naam http gekregen heeft (zoals hierboven gesuggereerd), dan hebben we daar volgende code voor nodig: http.onreadystatechange = function() { alert(http.readyState); }

In “echte” toepassingen wordt dit natuurlijk heel wat meer code, maar het patroon ziet er hetzelfde uit. Alleen ga je de alert() dan vervangen door (heel) wat meer regels code. p. 55/66


9.5 GET- of POST-request In onze cursus PHP hebben we verteld dat je bij een formulier de keuze hebt uit de POST en de GET-methode. Toen zeiden we dat je in een formulier sowieso best de methode POST gebruikt omdat die het krachtigste is, en even gemakkelijk als de GET-methode. Bij Ajax is de GET-techniek bijna even populair als de POST-methode, vooral omdat werken met GET iets gemakkelijker is dan met POST. Toch is er een belangrijk nadeel aan de GETmethode, nl. dat GET-requests meer gecached worden dan POST-requests. Daarom bespreken we bij GET een techniek om die cache te misleiden. Een tweede nadeel is dat GET minder goed overweg kan met grote hoeveelheden gegevens in het algemeen (GET is beperkt tot 32K) en met textarea’s specifiek. Omdat je bij Ajax snelle acties en feedback wil en je dus in de meeste gevallen minder data per keer naar de server stuurt (maar wel frequenter), wordt GET veel gebruikt bij Ajax. Wanneer je iets grotere hoeveelheden gegevens wil doorsturen (bv. een formulier met viervijf tekstvakken waaronder textarea’s), gebruikt men eerder de POST-methode.

9.5.1 GET Wanneer je kiest voor de GET-methode, moet je in essentie niet meer doen dan de URL samenstellen die je request moet afhandelen, bv. setTitle.php?title=zonsondergang&id=133 of http://cmdstud.khlim.be/een/ict/JS/ajaxvoorbeeld.php?woord=appelsap. Die URL steek je dan in je XMLHTTPRequest-object en verstuur je dan met de send()-methode. Bijkomend probleem is de cache van je browser of proxyserver. Die heeft de neiging om gelijke URL’s in zijn cache te steken en niet opnieuw te verzenden terwijl we bij Ajax meestal willen dat de request dan wél opnieuw verstuurd wordt. Dit probleem gaan we omzeilen door steeds een extra variabele mee te sturen die we dan een willekeurige waarde geven zodat de cache denkt dat het om een andere URL gaat. Dit kan bijvoorbeeld op volgende wijze: var rand = parseInt(Math.random()*9999999); var url = gewoneURL + "&rand=" rand;

waarbij gewoneURL de url is die we normaal verstuurd zouden hebben. Het verzenden doe je daarna met http.open("GET", url); http.send(null);

9.5.2 POST Met de POST-techniek kan het natuurlijk ook. Belangrijkste verschil is dat je een extra header moet geven, en dat je bij het effectief versturen (de send-methode) de formulierinhoud in één string moet samensteken. Dit doe je volledig analoog aan de URL-variabelen waarbij je dus de verschillende variabelen met hun waarde opsomt en van elkaar scheidt met een ampersand, bv. 'veld1=waarde&veld2=waarde' Samengevat geeft dat volgende scenario: http.open('POST', 'verwerking.php'); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http.send('veld1=waarde&veld2=waarde');

p. 56/66


9.6 Een kwis met GET In de secties hierboven hebben we al de grote lijnen uitgezet, maar we hebben nog geen concrete, volledig uitgewerkte Ajax-actie getoond waarin zowel de oproep in de eventhandler als de essentiele call-back functie vervat zitten. Dat doen we nu. We maken een kleine quiz waarbij je het antwoord moet kiezen uit een aantal keuzemogelijkheden.

9.6.1 HTML Essentieel aan de HTML-pagina die we hieronder presenteren is dat we bij elk mogelijk antwoord éénzelfde functie willen gebruiken. Dat impliceert natuurlijk dat we een functie met parameters gaan gebruiken: • De eerste parameter geeft aan welke vraag we beantwoorden • De tweede parameter geeft aan welk antwoord we gekozen hebben We zullen straks in onze Javascript dan ook een functie antwoord(vraag, poging) maken. Merk ook op dat we elk antwoord een id meegeven zodat we dat antwoord kunnen inkleuren: groen wanneer het juist was, rood wanneer het fout was. Dit resulteert in volgende HTML. Merk op dat we hier niet echt merken dat we met Ajax bezig zijn.

9.6.2 JAVASCRIPT In onze functie antwoord() zetten we volgende stappen: 1. eerst maken we het XMLHTTPRequest-object aan, 2. daarna stomen we de URL klaar en voegen er een rand-URL-variabele aan toe om de cache te vermijden 3. Dan komt de call-back functie a. Hiervoor stellen we eerst het id samen van het antwoord, bv. antwoord1_2 omdat we dat tabelvakje rood of groen willen kleuren naargelang het antwoord fout of juist was b. In de call-back kijken we naar de responseText die het juiste antwoord bevat en als dat gelijk is aan de poging, kleuren we groen, anders rood. 4. Daarna voegen we de URL toe aan http en sturen de request uit. p. 57/66


Ga na of je alle stappen van hierboven herkent én begrijpt.

9.6.3 PHP Onze kennis PHP van het eerste semester komt hier nog steeds van pas, want Ajax verandert weliswaar de werking van de traditionele website, maar maakt in geen geval PHP (of een andere server side scripttaal) overbodig. In deze toepassing hebben we een bestand antwoord.php nodig dat het juiste antwoord geeft op de gestelde vraag. Omdat we een heel beperkte quiz hebben is dit PHP-bestand bijzonder eenvoudig, zeker omdat er responseText gebruikt wordt en we dus alleen maar gewone tekst moeten produceren. Meestal zal je met databases werken en wordt het PHP-bestand wat ingewikkelder, maar het moet zelden echt gecompliceerd worden.

p. 58/66


9.7 Een shoutbox met POST Het voorbeeld hierboven was perfect geschikt voor GET: de informatie die doorgestuurd moest worden was heel beperkt en er was geen probleem met proxies of caches. Bij een shootbox gaan we echt tekst opsturen (‘een formulier’) en dan kan je voor de POST kiezen. In de shoutbox kan je zowel een bericht posten als een bericht kijken. Bovendien heb je pijltjes waar je naar het vorige of volgende bericht gaan.

9.7.1 DATABASE Het interessante aan dit voorbeeld is dat we een database nodig hebben. We hebben onze kennis van (My)SQL dus (terug) nodig. De database beperkt zich tot één tabel. shoutbox

Om het n-de bericht op te vragen kunnen we volgende query gebruiken: SELECT shout FROM shoutbox LIMIT n, 1

9.7.2 HTML In de HTML-pagina hebben we 5 elementen: • Een div voor het huidige bericht • Een textarea om een bericht te posten • Een vorige- en volgende knop • En een status-venster om te tonen of er nog een vorig/volgend bericht is. Dit resulteert in volgend HTML-gedeelte (naast de head en andere elementen in de body).

p. 59/66


9.7.3 JAVASCRIPT In Javascript hebben we drie functies: postBericht() om een bericht te posten, volgende() en vorige() om het volgende, resp. vorige bericht op te vragen. De functie vorige() werken we niet uit omdat die analoog is aan volgende().

postBericht() We beginnen met postBericht() omdat die de POST-techniek gebruikt en het precies dat is wat we in deze sectie willen demonstreren.

Belangrijke opmerking is dat we in de test if (http.responseText.substr(0,2) == "OK") kijken of de eerste twee letters gelijk zijn aan OK, en niet of heel de responseText gelijk is aan OK. De reden dat we de tweede optie niét kiezen, is dat we op het einde van de PHP-code na de ?> gemakkelijk op enter geduwd hebben zonder er echt stil bij te staan. Het probleem is dat die enters dan effectief in de responseText verschijnen zodat de responseText niet gelijk is aan OK, maar wel gelijk aan OK plus nog wat extra witruimte. Daarom kijken we alleen naar de eerste twee letters: dat is qua code iets ingewikkelder, maar wel een pak veiliger. Merk ook op dat we de cache niet meer moeten misleiden – wat best handig is – maar we moeten wel de request-header veranderen en bij de send een serie extra parameters meegeven. Deze parameters moeten we bij de GET toevoegen aan de URL.

volgende() Bij de functies vorige() en volgende() moeten we het vorige, resp. volgende bericht ophalen. We gebruiken hiervoor een teller die bijhoudt welk bericht we de laatste keer opgehaald hebben en verlagen/verhogen elke keer die teller. De teller geven we dan door aan het PHPscript zodat die het bericht met dat nummer terug geeft. p. 60/66


Soms hebben we een probleem, nl. wanneer er geen volgend bericht meer is. In dat geval moeten we een gepaste statusboodschap laten zien. Dé vraag is echter eerst hoé we het verschil kunnen zien tussen een gelukte poging om het volgende bericht op te vragen en een mislukte poging. De PHP-code achter deze Ajax-oproep moet dus in principe twéé dingen terug kunnen geven: ofwel een status ofwel een bericht. We zouden kunnen zeggen dat we als status KO kiezen wanneer het niet lukt, en anders het bericht terug geven. Maar wat nu wanneer de gebruiker als bericht “KO” had ingegeven. We kunnen het verschil niet zien tussen een status “KO” en een bericht “KO” omdat die twee teksten identiek gelijk zijn aan elkaar. We kunnen dit wél oplossen door de tekst speciaal te formatteren. XML is hier een zeer goede optie, maar dat houden we voor een vervolgcursus. Wij kiezen híer een formattering waarbij de eerste twee letters OK of KO zijn, gevolgd door een komma-punt, en dan gevolgd door de eigenlijke boodschap uit de shoutbox. Dus zelfs wanneer de gebruiker KO of OK als tekst ingeeft, krijg je nog steeds de tekst OK;OK waaruit je dan gemakkelijk zowel de status als de boodschap kan extraheren. Deze ideeën vertaald naar Javascript geven volgende code:

p. 61/66


9.7.4 PHP In dit gedeelte vertrekken we – zoals in onze cursus PHP – van de codetemplates insertData.php en bekijkQuery.php. Hét grote verschil is echter dat de codetemplates vroeger een volledige HTML-pagina moesten terug geven met de doctype, header- en bodytags en alles er op en er aan. In de Javascript-code hierboven zien we echter dat we datgene wat PHP aanmaakt, ofwel gebruiken als status (KO of OK) of als innerHTML. PHP moet dus alleen OK of KO terug geven plus dat stuk html dat binnen een div past: dus géén doctype, head, body, … Dat betekent dat we zéér veel mogen weglaten uit onze codetemplates, en alleen de kern van het probleem moeten behouden.

postBericht.php In deze PHP moeten we enkel OK of KO terug geven zodat we kunnen zien of het posten gelukt is. Met terug geven bedoelen we géén return of zo (in tegenstelling tot functies) omdat er hier geen sprake is van een functie-oproep, maar wél van het aanmaken van een response (zie client-server-principe). Zo’n response is een tekstbestand en dat tekstbestand maken we in PHP aan via de print-functie. De essentie van onderstaand script is dan ook dat hij ofwel een OK afdrukt, ofwel een KO. In het tweede geval gaan we wel nog bijkomend een foutboodschap printen zodat je meer info hebt over wat er mis gegaan is.

getBericht.php Dit script krijgt een GET-parameter id die aangeeft welk bericht we willen hebben. Wanneer er zo’n bericht is, krijg OK; gevolgd door de tekst van het bericht. Is er geen bericht meer, dan krijg je een KO. p. 62/66


Oefeningen 77. Maak een site waarin je in een database een ondertitel voor een foto plaatst. Op een webpagina moet je dan de foto, de huidige ondertitel en een tekstvak zetten. Wanneer er iets in het tekstvak ingevuld wordt, moet die tekst de nieuwe ondertitel van de foto worden. 78. Maak een woordenketting: in de database zit een tekst, die ook op de webpagina verschijnt. Wanneer je op die webpagina een woord intypt in een tekstvak moet dit woord toegevoegd worden aan de woordenketting. 79. Maak een rating-syteem. Hierbij kan elke bezoeker op een getal van 1 tot 5 klikken (of op de bijhorende ster). Die stem moet geregistreerd worden én je moet de gemiddelde score direct aanpassen en zichtbaar maken. 80. Vervolledig de shout-box zodat je ook de functie vorige() hebt, een naam bij je bericht kan ingeven, bij het opstarten direct het eerste bericht ziet, ook vijf berichten vooruit of achteruit kan springen, …

p. 63/66


HOOFDSTUK 1 LANG LEVE JAVASCRIPT

Recommend Documents