Info-books. Toegepaste Informatica. Inform 5-6. Deel 12: JavaScript. Jos Gils Erik Goossens

Transcriptie

1 Info-books Inform 5-6 Toegepaste Informatica Deel 12: JavaScript Jos Gils Erik Goossens

2

3 Woord vooraf Inform 5-6 omvat een reeks handboeken die vooral bestemd zijn voor de richtingen van het secundair onderwijs waarin het vak informatica aan bod komt. In 1999 werden een aantal handboeken opgesteld voor het vak Toegepaste Informatica van de derde graad TSO voor de richtingen Boekhouden-informatica, Informaticabeheer, Handel en Secretariaat-talen. Maar er kwamen ook vragen uit andere richtingen, onder andere het Hoger Onderwijs. Er is blijkbaar nood aan leerboeken met onmiddellijk praktisch nut. Vandaar dat er boeken over PowerPoint, FrontPage, Outlook, uitgewerkt werden. Die zijn in feite overal bruikbaar. Specifiek voor Boekhouden-informatica en Informaticabeheer blijven de boekdelen waarin effectief geprogrammeerd wordt. In Inform worden de doelstellingen van de leerplannen niet alleen inhoudelijk verwerkt, maar wordt ook geprobeerd om systematisch te vertrekken van een probleemstelling. Pas daarna wordt het materiaal aangereikt om dat probleem op te lossen. Informatica is een middel om problemen op te lossen. Het is niet louter een opsomming van hardwarecomponenten en programmeringstechnieken. Een ander punt waar Inform veel belang aan hecht is integratie. Leerplanonderdelen zijn geen eilandjes. Het is dan ook logisch dat door heel Inform een rode draad loopt. Een klein bedrijf wordt voortdurend met nieuwe probleemstellingen geconfronteerd en lost die met behulp van de computer op. Het gaat hier om concrete problemen zoals een facturatie die tot in het detail uitgewerkt wordt. Als het nodig is worden rekenblad, databaseprogramma en tekstverwerking samengebracht om tot een oplossing te komen. Integreren doe je niet om het integreren zelf maar om een probleem op te lossen. Niettemin is elk boekdeel zelfstandig bruikbaar. Je hoeft je dus bijvoorbeeld geen zorgen te maken dat voorkennis van Word noodzakelijk is om PowerPoint of FrontPage te kunnen gebruiken Wat de opbouw betreft wordt de lijn van Inform 3-4 doorgetrokken, met dien verstande dat informatica in de derde graad en in het Hoger Onderwijs geen algemeen vak meer is. Het is 'toegepaste' informatica. Er zijn dus geen basisboeken meer maar er wordt op een praktische manier in één omgeving, Microsoft Office, gewerkt. De opdrachten zijn gedeeltelijk in de hoofdstukken opgenomen, gedeeltelijk gegroepeerd op het einde ervan. Na elk hoofdstuk volgen een besluit en de doelstellingen ('Wat je moet kennen en kunnen:'). Het is niet de bedoeling dat alle opdrachten in de klas gemaakt worden. Dat hangt van de beschikbare tijd af. Bepaalde opdrachten kunnen dienen als toets of als onderdeel van een Geïntegreerde Proef. De auteurs

4 Inform 5-6 werd samengesteld in een Windows 98 en Internet Explorer 5.0 omgeving. Er werd gebruik gemaakt van Office 97 en Office Van zodra een recentere versie in de omgeving of in het Office pakket de belangrijkste op de markt wordt, zal Inform 5-6 aangepast worden. De reeks Inform 5-6 voor het secundair onderwijs (Toegepaste Informatica) bestaat uit de volgende boeken: Boekhouden-informatica, Informaticabeheer: Deel 1: Systeemsoftware, Netwerken, Internet en Hardware (*) (* Deel 1 + : voor IB bevat dit deel ook Administratie en logistiek) Deel 2: Het rekenblad Excel Deel 3: Gegevensbeheer in Access Deel 4: Programmeren in Visual Basic for Applications Deel 5: Programmeren voor een bedrijfseconomische toepassing: de facturatie Handel, Secretariaat-talen: Deel A: Systeembeheer, Netwerken en Internet Deel B: Het rekenblad Excel Deel C: Gegevensbeheer in Access Boeken die in alle richtingen gebruikt kunnen worden: Deel 6: Tekstverwerking met Word Deel 7: Elektronisch presenteren met PowerPoint Deel 8: Elektronisch publiceren: HTML (korte versie) en FrontPage 2000 Deel 9: Elektronisch publiceren: FrontPage 2000 Deel 10: Elektronisch publiceren: HTML (uitgebreide versie) Deel 11: Communicatie via Outlook 2000 Deel 12: JavaScript Deel 13: VBScript Inlichtingen kunt u ook bekomen bij: Jos Gils Boskant 26, 2970 Schilde Telefoon: (03) jos.gils@pandora.be Erik Goossens Eekstraat 67, 9240 Zele Telefoon: (052) erik.goossens@pandora.be Aan wie uit dit boek wil kopiëren: U vindt dit boek erg goed en wenst er kopieën van te maken. Bedenk dan toch: dat de auteurs met de opbrengst ervan hun kosten moeten dekken; dat kopiëren zonder toestemming niet alleen getuigt van weinig respect, maar ook onwettig (en strafbaar) is. 2000, Kapellen Schilde Zele Niets uit deze uitgave mag verveelvoudigd en/of openbaar gemaakt worden door middel van druk, fotokopie, digitale media, microfilm of welke andere wijze ook, zonder voorafgaandelijke schriftelijke toestemming van de auteurs.

5 Hoofdstuk 2 Invulformulieren en functies 2.1 Probleemstelling HTML-pagina's op zich zijn statisch: ze worden op basis van codes door de browser op een bepaalde manier getoond zonder dat de bezoeker van de website impact heeft op wat er getoond wordt en op welke manier dat dit gebeurt. Een programmeertaal geeft dynamische mogelijkheden aan een website: je kunt eigen programmacode schrijven en je kunt interactie met de gebruiker voorzien. Functies zijn stukjes programmacode die samenhoren. Aan een functie kunnen waarden doorgegeven worden. In de functie worden deze waarden bewerkt en tenslotte geeft de functie het resultaat van de bewerking terug. 2.2 Functies In het volgende voorbeeld (JAVA_VERMENIGVULDIG.HTM) wordt gedemonstreerd hoe je een eigen functie kunt definiëren en die verder kunt oproepen. <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> <!-- Begin script function Vermenigvuldig(dblGetal1,dblGetal2) { return dblgetal1*dblgetal2; } // Einde script --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-- Begin script document.write("1024 x 1024 = ", Vermenigvuldig(1024,1024)); // Einde script --> </SCRIPT> </BODY> </HTML> De volledige functiedefinitie zou ook op één regel geschreven mogen worden: function Vermenigvuldig(dblGetal1,dblGetal2) {return dblgetal1*dblgetal2;} Een functiedefinitie bestaat uit een header en een body en gebeurt hier in het head-gedeelte van het HTML-document: De header begint met het sleutelwoord FUNCTION. Daarnaast komt de naam van de functie, gevolgd door ronde haakjes. Tussen die haakjes kunnen door komma's ge-

6 scheiden argumenten voorkomen. Zij vormen de parameterlijst van de functie. Hier zijn er 2 argumenten of parameters: dblgetal1 en dblgetal2. De body staat tussen accolades en bevat de instructies van de functie. Hier is dat maar één instructie, namelijk RETURN dblgetal1*dblgetal2; Merk op dat instructies in JavaScript met een puntkomma afgesloten worden. (Sommige browsers accepteren instructies die niet met een puntkomma afgesloten worden, maar het is een goede gewoonte dat toch altijd te doen: dan is je code meer universeel.) Het resultaat van de functie wordt via RETURN teruggestuurd, in dit geval: RETURN dblgetal1*dblgetal2; De functie VERMENIGVULDIG zal wanneer ze opgeroepen wordt het product van dblgetal1 en dblgetal2 terugsturen. In het body-gedeelte van het HTML-document wordt de functie opgeroepen. De oproep gebeurt in het tweede argument van de methode WRITE: document.write("1024 x 1024 = ", Vermenigvuldig(1024,1024)); Bij de oproep van VERMENIGVULDIG worden twee argumenten meegegeven, namelijk twee keer het getal De eerste 1024 wordt in de variabele dblgetal1 geplaatst, de tweede in de variabele dblgetal2. De functie geeft aan de methode WRITE als resultaat terug. De browser zal ook in dit geval het volgende resultaat tonen: Opdrachten 1. Maak een HTML-document JAVA_REK_GEM.HTM met in de head twee functiedefinities: de eerste functie, REKENK_GEM, berekent het rekenkundig gemiddelde van de getallen 9 en 4. De tweede functie, QUOTIENT, berekent 9 gedeeld door 4. Roep de functies in de body op. : Gebruik geen trema in de naam van een functie: sommige browsers geven dan een foutmelding. Schrijf dus QUOTIENT en niet QUOTIËNT. De afdruk van de bovenstaande opgave ziet er zo uit: 2. Maak een HTML-document JAVA_ZET_AANEEN.HTM met in de head een functie ZET_AANEEN die twee doorgegeven teksten ("Ma" en "donna") aaneenschakelt en een

7 functie SOM_3 die drie getallen sommeert en het resultaat aan de oproepende omgeving teruggeeft. De afdruk: : Teksten schakel je in JavaScript aaneen met de plusoperator (+). Hoe zou je het volgende resultaat bekomen: Som van 16, 9 en 4 is 1694? Bewaar deze wijziging als JAVA_ZET_AANEEN2.HTM 3. Maak een HTML-document JAVA_ALERT.HTM waardoor een waarschuwing in een venstertje verschijnt met de tekst "Je bent nog altijd met het Internet verbonden!" 2.3 JavaScript en formulieren In het vorige punt waren de argumenten van opgeroepen functies vast. De gebruiker had niet de mogelijkheid om waarden in te brengen terwijl het programma liep. Daarom proberen wij in het volgende voorbeeld (JAVA_RECHTHOEK.HTM) een functie vanuit een invulformulier op te roepen. <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> <!-- Begin script function Omtrek(frmRechthoek) { frmrechthoek.txtresultaat1.value= (2*frmRechthoek.txtLengte.value+2*frmRechthoek.txtBreedte.value); } function Oppervlakte(frmRechthoek) { frmrechthoek.txtresultaat2.value= frmrechthoek.txtlengte.value*frmrechthoek.txtbreedte.value; } // Einde script --> </SCRIPT> </HEAD> <BODY> <H1>Omtrek en oppervlakte van een rechthoek</h1> <H2>Vul de lengte en de breedte in en klik op de Bereken-knoppen:</H2> <FORM> <TABLE BORDER> <TR> <TD>Lengte = </TD> <TD><INPUT TYPE="TEXT" NAME="txtLengte"></TD> </TR> <TR> <TD>Breedte = </TD> <TD><INPUT TYPE="TEXT" NAME="txtBreedte"></TD> </TR> <TR> <TD><INPUT TYPE="BUTTON" VALUE="Bereken_omtr" ONCLICK="Omtrek(this.form)"></TD>

8 <TD><INPUT TYPE="TEXT" NAME="txtResultaat1"></TD> </TR> <TR> <TD><INPUT TYPE="BUTTON" VALUE="Bereken_opp" ONCLICK="Oppervlakte(this.form)"></TD> <TD><INPUT TYPE="TEXT" NAME="txtResultaat2"></TD> </TR> <TR> <TD colspan=2><input TYPE="RESET" VALUE="Maak alle velden opnieuw leeg"></td> </TR> </TABLE> </FORM> </BODY> </HTML> De pagina zal er ongeveer als volgt uitzien: Je ziet een web-pagina met een invulformulier. Het invulformulier is een object op het object webpagina. Het invulformulier zelf is ook een verzameling van objecten: het bevat onder andere drie knoppen en vier invoer- of uitvoervakken. Al deze objecten zijn van een bepaald type en hebben, indien nodig, een naam. <TD><INPUT TYPE="TEXT" NAME="txtResultaat1"></TD> Bij klikken op de knop BEREKEN_OMTR wordt de omtrek berekend via de gebeurtenis ONCLICK die functie OMTREK() oproept. <TD><INPUT TYPE="BUTTON" VALUE="Bereken_omtr" ONCLICK="Omtrek(this.form)"></TD> Indien nodig kun je ook een naam aan de knop geven, bijv. NAME = cmdberekenen. Het attribuut TYPE bepaalt het soort veld: Text of Button. Het argument van OMTREK() is THIS.FORM.

9 In objectgeoriënteerde omgevingen is THIS een pointer die wijst naar het hoofdobject zelf. Hier gaat het om de pagina die voor de browser actief is. Van dat object wordt het deelobject FORM genomen. Dat is hier het actieve invulformulier. Dat actieve formulier wordt, in zijn geheel, als argument aan de OMTREK()-functie doorgegeven. Die functie kan daardoor met de objecten van THIS.FORM de nodige bewerkingen doen en de waarde van het resultaat in het juiste resultaatsveld plaatsten. Op een analoge manier wordt de oppervlakte berekend. Staan er meerdere invulformulieren op één pagina, dan kan er maar één actief zijn. De functie OMTREK() heeft als argument een variabele FRMRECHTHOEK. Men noemt dit een objectvariabele omdat ze naar een object verwijst: THIS.FORM. De objectvariabele FRMRECHTHOEK bevat daarom dezelfde deelobjecten als THIS.FORM. Uit de definitie van de functie had je dat ook al kunnen opmaken omdat FRMRECHTHOEK naar andere objecten verwijst. Via de eigenschap VALUE wordt de waarde van een tekstvak afgelezen of ingevuld. TXTLENGTE, TXTBREEDTE, TXTRESULTAAT1 en TXTRESULTAAT2 zijn de namen van de invoer- en uitvoervelden van een formulier waarin gegevens over een rechthoek ingegeven en verwerkt worden.

10 De laatste INPUT-tag maakt alle velden van het formulier opnieuw leeg: <INPUT TYPE="RESET" VALUE="Maak alle velden opnieuw leeg"> Als je in de FORM-tag aan het formulier een naam geeft, dan kun je met die naam als argument de functie OMTREK() oproepen.... function Omtrek(frmRechthoek) { frmrechthoek.txtresultaat1.value= 2*frmRechthoek.txtLengte.value+2*frmRechthoek.txtBreedte.value; } <FORM NAME="frmInvoertabel">... <TD><INPUT TYPE="BUTTON" VALUE="Bereken_omtr" ONCLICK="Omtrek(frmInvoertabel)"></TD>... Merk op dat de objectvariabele in de functie een andere naam heeft dan het formulierobject waarmee de functie opgeroepen wordt: frminvoertabel frmrechtoek. Opdrachten 4. Wijzig de code in JAVA_RECHTHOEK1.HTM zoals hierboven besproken is. Bewaar het resultaat als JAVA_RECHTHOEK2.HTM. 5. Wijzig de code van JAVA_RECHTHOEK2.HTM zodanig dat je twee verschillende formulieren onder mekaar krijgt. Bewaar het resultaat als JAVA_RECHTHOEK3.HTM. Aan de functies OMTREK() en OPPERVLAKTE() mag niets gewijzigend worden. Laat je de objectvariabele weg in de functie OMTREK(), dan mag je ook de formulierobjectnaam weglaten bij het oproepen van die functie, op voorwaarde dat de naam van het formulier als objectnaam in de functie gebruikt wordt, m.a.w. je werkt dan rechtstreeks met het formulieropbject.

11 ... function Omtrek() { frmrechthoek.txtresultaat1.value= 2*frmRechthoek.txtLengte.value+2*frmRechthoek.txtBreedte.value; }... <FORM NAME="frmRechthoek"> <TD><INPUT TYPE="BUTTON" VALUE="Bereken_omtr" ONCLICK="Omtrek()"></TD>... Opdrachten 6. Schrijf een HTML-pagina JAVA_BALK.HTM waarmee een formulier kan ingevuld worden met de volgende gegevens: basis, hoogte en diepte (van een balkvormig lichaam). De functie BEREKEN_INHOUD berekent de inhoud van de balk en zet het resultaat in een resultaatsveld. 7. Voer een tekst in via een formulier en zorg er voor dat die tekst in een waarschuwingsscherm afgedrukt wordt wanneer je op de knop GEEF_BERICHT klikt. Gebruik als functienaam WAARSCHUWING. Om de breedte van het tekstvak waarin je de zin zet te bepalen gebruik je het attribuut SIZE= van de INPUT-tag. Noem het programma JAVA_ALERT2.HTM. 2.4 Gegevenstypen en variabelen Er zijn drie soorten gegevenstypen: de string (tekst); Tekst wordt altijd tussen aanhalingstekens gezet, ook als je getallen als tekst wilt behandelen bijvoorbeeld 2000, Tom Strevers. de numerieke waarde (een getal); Positieve of negatieve getallen, getallen met cijfers na de komma. Alleen met numerieke waarden kun je rekenen. Je moet als decimaal scheidingsteken een punt gebruiken in plaats van een komma.

12 de logische waarde (true of false). Logische waarden worden gebruikt om het programma te sturen: via keuzes zul je de loop van het programma bepalen. Zet de logische waarden (true of false) nooit tussen aanhalingstekens: anders worden ze als een string behandeld! Variabelen zijn in JavaScript niet van een vast type: ze zijn equivalent met de waarde die eraan toegekend wordt. x = 3.14 x = 3 x = null x = Tom Strevers x = 3.14 x = true x is een variabele van het type float x is een variabele van het type integer x is leeg x is een variabele van het type string x is een variabele van het type boolean Als je niet wilt dat een variabele een waarde heeft, geef je de variabele een nullwaarde: bijv. strinvoer = null. Het is mogelijk om de data in een variabele van type te veranderen. Getallen worden zonder problemen als strings afgedrukt, maar strings worden niet zonder problemen als getallen behandeld. parseint( 10 ) parsefloat( 3.14 ) een string naar een geheel getal omzetten een string naar een decimaal getal omzetten In JavaScript kun je waarden in variabelen plaatsen die niet vooraf gedeclareerd hoeven te worden. De declaratie gebeurt dan bij het toekennen. Dit noemt men impliciete declaratie: bijv. x = 25. Als x de eerste keer in een programma op die manier gebruikt wordt zal de interpreter er ruimte voor reserveren en in die ruimte de waarde 25 plaatsen. Je kunt met de 'klassieke' typen van gegevens werken: gehele getallen, gebroken getallen, tekst, logische waarden (true, false). Alhoewel variabelen niet expliciet gedeclareerd moeten worden, is het een goede gewoonte om de variabelen die lokaal in een functie gebruikt worden toch te declareren. var intx, inty, strx, Het is ook mogelijk om bij de declaratie een waarde aan de variabele toe te kennen. var intx = 345 var intx = intgetal1 * 12 var strx = Tom Strevers

13 var dblx = parsefloat( 3.14 ) Bij de naamgeving van de variabelen gebruik je bij voorkeur de Leszinsky-notatie. In dat geval kun je uit de naam afleiden om welk type het gaat. Deze notatie is voornamelijk gebruikelijk in een Visual Basic-omgeving 2.5 Wiskundige operatoren JavaScript kent ook de klassieke rekenkundige operatoren (de optelling (+), de aftrekking (-), de vermenigvuldiging (*) de deling (/) en de restdeling(%)). Het onderstaande programma, JAVA_CONVERSIE.HTM, toont een eigenaardigheid in verband met de automatische herkenning van het gegevenstype. <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> <!--Begin script function Dubbel(formulier) { var dblgetal, dblresultaat; dblgetal = formulier.txtgetal.value; dblresultaat = dblgetal + dblgetal; formulier.txtoptelling.value = dblresultaat; formulier.txtproduct.value = dblgetal * dblgetal; } // Einde script --> </SCRIPT> </HEAD> <BODY> <FORM> Tik een positief getal in: <BR><BR> <INPUT TYPE = "TEXT" NAME = "txtgetal"><br><br> Klik op de knop Bereken om het resultaat van<br> het getal + het getal te zien <INPUT TYPE = "TEXT" NAME = "txtoptelling"><br><br> het getal x het getal te zien <INPUT TYPE = "TEXT" NAME = "txtproduct"><br><br> <INPUT TYPE = "BUTTON" VALUE = "Verdubbel" ONCLICK="Dubbel(this.form)"><BR> </FORM> </BODY> </HTML> De variabelen dblgetal en dblresultaat zijn alleen maar binnen de functie DUBBEL gekend. Men noemt dit lokale variabelen. Om een tekst naar een getal om te zetten kun je de functie eval() gebruiken. Het getal in het formulier staat namelijk in een tekstvak!

14 Je kunt de oefening evengoed oplossen zonder variabelen te gebruiken in de functie. In de functie DUBBEL() worden drie variabelen gedeclareerd, een type wordt niet toegewezen. Het voorvoegsel dbl wijst erop dat we een decimaal type vermoeden of wensen, maar wat het vertaalprogramma daarmee doet hangt volledig van de invoer af. var dblgetal, dblresultaat, dblresultaat; De waarde van het invoervak wordt dan aan DBLGETAL toegekend. dblgetal = formulier.txtgetal.value; De inhoud van DBLGETAL kan nog altijd van het type tekst of numeriek zijn. Zoals je uit de uitkomsten kunt afleiden wijst de uitkomst van de optelling op een tekst (string), maar de uitkomst van de vermenigvuldiging wijst op het type numeriek. Met andere woorden het is in dit geval de operator (+ of * ) die uiteindelijk het type bepaalt. Wil je toch een exacte uitkomst, dan moet je een typeconversie doen: dblgetal = parsefloat(formulier.txtgetal.value); Opdrachten 8. Breng de hierboven beschreven wijziging in het programma aan en bewaar het als JAVA_CONVERSIE2.HTML. Breid de oefening verder uit zodat je in een vak het resultaat van de deling door 3 toont. Wat zal het resultaat zijn als je de functie parseint() gebruikt in plaats van parsefloat() en als je een decimaal getal invoert? 9. Als de webpagina JAVA_WELKOM.HTM geladen wordt moet er een dialoogvenster verschijnen met een invulregel om je naam in te vullen. Na klikken op de OK-knop wordt je naam in de webpagina afgedrukt. Maak gebruik van de volgende invoerregel: strinvoer = WINDOW.PROMPT( Hoe heet je?, ) De methode WINDOW.PROMPT() wordt gedetailleerd behandeld op pagina Fout! Bladwijzer niet gedefinieerd..

15 Wat is de betekenis van het tweede argument van WINDOW.PROMPT? Alle invoer via WINDOW.PROMPT wordt als een string opgevat. Als het een getal is wordt de string automatisch naar een numerieke waarde omgezet. 10. Wijzig JAVA_WELKOM.HTM zodanig dat eerst de voornaam en daarna de familienaam gevraagd wordt. Druk tenslotte de volledige naam op de webpagina af. Bewaar het document als JAVA_WELKOM2.HTM. 2.6 Bewerkingen Naast rekenkundige operatoren (de optelling (+), de aftrekking (-), de vermenigvuldiging (*) en de deling (/)) heeft JavaScript een verhogings- en een verlagingsoperator die als prefix (++a: eerst verhogen, dan pas toewijzen) en als postfix (a++: eerst toewijzen, pas daarna verhogen) gebruikt kunnen worden. a++ en ++a hebben allebei tot gevolg dat a met 1 verhoogd wordt, maar het effect kan verschillend zijn als ze in een expressie voorkomen. Als a gelijk is aan 5 dan zal na de uitvoering van b = a++; a de waarde 6 en b de waarde 5 hebben. Wat zouden de waarden van b en a geworden zijn als er b = ++a; gestaan had als a de beginwaarde 5 had? Ook de verlagingsoperator (--) kan als prefix of als postfix gebruikt worden. Naast de gewone toewijzing (=) kent JavaScript nog de operatoren + =, - =, * = en / = a de waarde van a wordt met één eenheid verhoogd voordat ze wordt toegewezen a++ de waarde van a wordt eerst toegewezen en dan wordt de waarde met één eenheid verhoogd -- --a één eenheid verlagen voor toewijzing a-- één eenheid verhogen na toewijzing a += b a = a + b vermeerder de waarde van a met b a -= b a = a b a *= b a = a * b a /= b a = a / b a %= b a = a % b geef a de waarde van de restdeling van a door b

16 Opdrachten 11. Wat zal er afgedrukt worden als de volgende code (JAVA_KLEINE_OEF.HTM) uitgevoerd wordt? Verklaar je antwoord. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <! Begin script intgetal1=8; intgetal2=5; intteller=1; intsom=intgetal1+intgetal2; document.write("lijn 1 ", intgetal1,"+",intgetal2,"=",intsom,"<br>"); intgetal1-=intgetal2; document.write("lijn 2 ",intgetal1++," ",intgetal2--,"<br>"); document.write("lijn 3 ",intgetal1," ",intgetal2,"<br>"); intgetal2++; intgetal1--; document.write("lijn 4 ",intgetal1," ",intgetal2,"<br>"); intgetal1=++intgetal2; document.write("lijn 5 ",intgetal1," ",intgetal2,"<br>"); intgetal1+=++intteller; document.write("lijn 6 ",intgetal1," ",intteller,"<br>"); // Einde script --> </SCRIPT> </BODY> </HTML> 12. Zelfde vraag (JAVA_SCORES.HTM): <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-- Begin script intscore=0; inttotaalscore=0; intscore++; intscore++; intscore++; inttotaalscore += intscore; document.write("lijn 1: ", intscore, " ", inttotaalscore,"<br>"); inttotaalscore += --intscore; document.write("lijn 2: ", intscore, " ", inttotaalscore,"<br>"); inttotaalscore += intscore--; document.write("lijn 3: ", intscore, " ", inttotaalscore,"<br>"); // Einde script --> </SCRIPT> </BODY> </HTML>

17 Besluit Je definieert functies in de HEAD van een HTML-document. De kop van een functiedefinitie bestaat uit het keyword FUNCTION, de naam van de functie en tussen ronde haken de parameter- of argumentenlijst. In die lijst worden de parameters door komma s van mekaar gescheiden. In de functiedefinitie schrijf je de instructies die zullen moeten uitgevoerd worden als de functie opgeroepen wordt tussen accolades. Het oproepen van de functie gebeurt in het BODY-gedeelte van het HTML-document. Daar worden eventueel actuele parameterwaarden naar de functie doorgespeeld. JavaScript-code kun je vanuit formulieren laten oproepen wanneer een bepaalde gebeurtenis zich voordoet. Op die manier kun je HTML-pagina s dynamischer maken. Variabelen zijn in JavaScript niet van een vast type: ze zijn equivalent met de waarde die eraan toegekend wordt. Soms wordt het type in laatste instantie zelfs door het bewerkingsteken bepaald. Standaard kent JavaScript drie types: het numeriek type, het string type en het logische type. Voor het maken van bewerkingen in JavaScript staan de gewone rekenkundige operatoren ter beschikking (+, -, * en /). Maar er zijn nog een aantal speciale: ++ en -- die als prefix en als postfix gebruikt kunnen worden en +=, -=, *=, /= en %=). Wat je moet kennen en kunnen: functies in JavaScript definiëren en vanuit een formulier oproepen; weten welke gegevenstypes er in JavaScript zijn en die types gebruiken; variabelen, bewerkingstekens en courante operatoren in JavaScript-code gebruiken. Opdrachten 13. Maak een HTML-formulier JAVA_PLUSMIN1.HTM waarin een ingetikt getal met 1 verhoogd wordt als je op de ++ -knop klikt en met 1 verlaagd als je op de -- -knop klikt. Het document ziet er als volgt uit: 14. Uitbreiding JAVA_PLUSMINGETAL.HTM Voeg een vakje Factor bij. Het getal dat je daarin intikt wordt bij het getal geteld als je op de + =-knop drukt en ervan afgetrokken als je op de -= -knop drukt. Bewaar het document als JAVA_PLUSMINGETAL2.HTM.

18 De output ziet er ongeveer als volgt uit: Wanneer je de plusoperator op teksten toepast, dan worden die teksten gewoon aaneengezet. De bewerking a + b levert 62 als resultaat op als a en b teksten zijn met de waarden 6 en 2. In plaats van de functie PARSEINT() kun je die tekst ook met de functie EVAL() naar getalvorm omzetten: bijvoorbeeld EVAL("6") + EVAL ("2") levert 8 als resultaat op. EVAL is uitgebreider dan PARSEINT: EVAL kan op een string van uitdrukkingen toegepast worden: EVAL( ) geeft als resultaat 9.5. Als de om te zetten tekst geen getalwaarde bevat dan wordt de waarde NAN (Not a Number) in het programma gebruikt.