Lab Webdesign: Javascript 10 maart 2008

Save this PDF as:
 WORD  PNG  TXT  JPG

Maat: px
Weergave met pagina beginnen:

Download "Lab Webdesign: Javascript 10 maart 2008"

Transcriptie

1 H6: STRINGS EN ARRAYS In dit hoofdstuk zullen we zien hoe we in JavaScript tekenreeksen of "strings" gebruiken voor het manipuleren van tekstuele informatie. Ook het aan strings verwante onderwerp "arrays" komt aan de orde. STRINGS In het verleden dacht men bij de term "programmeren" direct aan het uitvoeren van ingewikkelde berekeningen. Denk maar aan een vroege programmeertaal als FORTRAN: de naam is afgeleid van FORmula TRANslator, dus een taal voor het omzetten van wiskundige formules naar een computeromgeving. Tegenwoordig weten we dat computers ook heel goed gebruikt kunnen worden voor het manipuleren van tekenreeksen ofwel "strings". Strings behoren tot de ingebouwde gegevenstypen van JavaScript. Een string is een tekenreeks waar enkele of dubbele aanhalingstekens omheen staan, bijvoorbeeld: "Help!" of: 'Help!' Fout zou echter zijn: "Help!' of: 'Help!", want het type van het aanhalingsteken openen moet gelijk zijn aan dat van het aanhalingsteken sluiten. De string kan zelf ook aanhalingstekens bevatten; in zo'n geval gebruiken we afwisselend dubbele en enkele aanhalingstekens, bijvoorbeeld: "'Help!' riep de badgast" of: '"Help!" riep de badgast'. Willen we in de string een enkel aanhalingsteken gebruiken, dan moeten we daarvoor een zogenaamde escape sequence gebruiken. Het aanhalingsteken wordt in zo'n geval voorafgegaan door een backslash ("\"). De string '"Help, 'k verdrink!" riep de badgast' geven we derhalve in JavaScript weer door middel van: '"Help, \'k verdrink!" riep de badgast'. Iets soortgelijks geldt indien we een dubbel aanhalingsteken in onze string willen opnemen: daarvoor gebruiken we dan \". Ook voor enkele andere speciale tekens gebruiken we een escape sequence. Zo kunnen we bijvoorbeeld aangeven dat de tekst van een JavaScript-alert over meerdere regels moet worden verdeeld, door een line feed- of newline-teken in de string op te nemen. Daartoe gebruiken we de escape sequence \n, dus bijvoorbeeld: "Twee dingen zijn essentieel voor het opbouwen van een machtspositie. \n 1. Vertel nooit alles." De tweede zin van het voorbeeld komt hiermee op een regel onder de eerste te staan. Met \t geven we een "tabstop" aan; hiermee kunnen we bijvoorbeeld tabellen maken waarvan de teksten in verschillende kolommen netjes onder elkaar staan. Als we bijvoorbeeld schrijven: alert('kolom1 \t kolom2 \t kolom3 \na \t b \t c'), dan komt de a netjes onder de k van kolom1, de b onder de k van kolom2, en de c onder de k van kolom3. Dat geldt althans voor een JavaScript-alert. Als we echter proberen om een HTML-document op deze wijze op te maken --m.b.v.: document.write('kolom1 \t kolom2 \t kolom3 \na \t b \t c')--, dan heeft dat normalerwijze niet het beoogde effect. Door ons script worden namelijk wel tabstops en new line-tekens aangemaakt, maar die worden in HTML behandeld als "white noise" en dus bij het tonen 1

2 van de pagina door de browser genegeerd! Als we echter met behulp van JavaScript onze string laten genereren tussen de HTML-tags <PRE> en </PRE> (die aangeven dat het om "gepreformatteerde" tekst gaat), dan krijgen we wel het beoogde resultaat. We moeten er dan wel voor zorgen dat de <PRE>-tags om de <SCRIPT>-tags heen staan, en niet andersom. In het laatste geval zouden de <PRE>-tags namelijk worden behandeld als JavaScript-opdrachten i.p.v. HTML-tags, en een foutmelding veroorzaken. De laatste escape sequence die we hier zullen bekijken, heeft betrekking op de backslash zelf. Doordat het backslash-teken wordt gebruikt als escape character, om aan te geven dat het volgende teken een speciale betekenis heeft, kunnen we het niet zomaar opnemen in een string. In plaats daarvan gebruiken we een dubbele backslash, dus bijvoorbeeld: "U vindt het bestand in directory C:\\TEST", waarmee we dan verwijzen naar C:\TEST. Een tekenreeks wordt in Javascript gezien als een String. In feite vormt een String een object die een eigenschap length heeft en tal van interessante methoden ondersteund: methode touppercase tolowercase substring substr concat indexof LastIndexOf charat split beschrijving Zet de tekenreeks om in hoofdletters Zet de tekenreeks om in kleine letters Retourneert een deel uit een string met meeggeven begin- en eindpositie Retourneert een deel uit een string met meeggeven beginpositie en het aantal tekens Voegt tekenreeksen samen Retourneert de eerste positie van een meegegeven argument, je kan als tweede argument de startpositie voor het zoeken meegeven Retourneert de laatste positie van een meegegeven argument Retourneert het teken op de aangegeven positie Splitst de tekenreeks in een Array, met een aangegeven delimeter of scheidingsteken 2

3 Voorbeeld: var tekst = "Ik ben een stukje tekst"; document.write("<br><b>" +(tekst) +"</b>"); document.write("<br>type: <b>" +typeof(tekst) +"</b>"); document.write("<br>lengte: <b>" +tekst.length +"</b>"); document.write("<br>hoofdletters: <b>" +tekst.touppercase() +"</b>"); document.write("<br>kleine letters: <b>" +tekst.tolowercase() +"</b>"); document.write("<br>substring 11,15: <b>" +tekst.substring(11,15) +"</b>"); document.write("<br>substr 11,4: <b>" +tekst.substr(11,4) +"</b>"); document.write("<br>concat: <b>" +tekst.concat(", met nog een stukje erbij.") +"</b>"); document.write("<br>concat(+): <b>" +tekst +", met nog een stukje erbij." +"</b>"); document.write("<br>indexof(t): <b>" +tekst.indexof("t") +"</b>"); document.write("<br>lastindexof(t): <b>" +tekst.lastindexof("t") +"</b>"); document.write("<br>charat(21): <b>" +tekst.charat(21) +"</b>"); document.write("<p><u>split:</u>"); var reeks = new Array(); reeks = tekst.split(" "); document.write("<br>eerste woord: <b>" +reeks[0] +"</b>"); document.write("<br>tweede woord: <b>" +reeks[1] +"</b>"); Het gebruik van Arrays komt verderop in de cursus aan bod. Het is belangrijk in te zien dat het toepassen van deze methoden op de String tekst enkel als retourwaarde van de gebruikte methode de gemanipuleerde tekenreeks bevat. Dit wil zeggen dat de originele String tekst in geen enkel geval blijvend werd aangepast. Hiervoor moet je het resultaat van de methode toekennen aan de variabele tekst. Methoden om HTML-opdrachten te gebruiken: Methode bold italics strike blink big small sup sub link anchor Beschrijving Zet de tekenreeks vet Zet de tekenreeks schuin Zet de tekenreeks doorstreept Doet de tekereeks knipperen (indien ondersteund) Maakt het uitzicht van de tekenreeks groter Maakt het uitzicht van de tekenreeks kleiner Zet de tekenreeks in superscript Zet de tekenreeks in subscript Maakt van de tekenreeks een hyperlink Maakt van de tekenreeks een anchor 3

4 var tekst = "Ik ben een stukje tekst"; document.write("<br>" +tekst.bold()); document.write("<br>" +tekst.bold().italics()); document.write("<br>" +tekst.link(" MANIPULEREN Als we strings alleen maar zouden kunnen tonen, dan waren we er snel over uitgepraat. We hebben echter in JavaScript verschillende middelen tot onze beschikking om er iets "nuttigs" mee te doen. Allereerst kunnen we strings samenvoegen; daartoe gebruiken we de operator "+". Als stringvariabele A de string "Het is lente." bevat, dan kunnen we schrijven: B = "Om te beginnen bij het begin: " + A waardoor stringvariabele B als waarde krijgt: "Om te beginnen bij het begin: Het is lente." We noemden strings eerder één van de ingebouwde gegevenstypen van JavaScript. Als we heel precies willen zijn, dan moeten we eigenlijk zeggen dat strings een van de ingebouwde (of "intrinsieke") objecttypen van JavaScript zijn. Objecten hebben, zoals we in het volgende hoofdstuk zullen zien, een aantal eigenschappen of "properties" en een aantal "methods". In het geval van strings is er slechts één property die de moeite waard is, te weten: length. Hiermee kunnen we bepalen hoeveel tekens een string bevat. Als X de string "Laura" is, dan geldt dat X.length de waarde 5 heeft; is X een lege string (""), dan heeft X.length de waarde 0. Interessanter dan die property zijn de verschillende methods van het string-object: daarmee kunnen we onze strings namelijk manipuleren. Als string X de waarde "Test" bevat, dan kunnen we bijvoorbeeld schrijven: Y = X.toUpperCase(), en daardoor krijgt Y de waarde "TEST". Op vergelijkbare wijze geeft Z = X.toLowerCase() aan Z de waarde "test". (Let op de precieze schrijfwijze met hoofd- en kleine letters en met haakjes aan het eind, anders krijg je een foutmelding!) Deze methoden werken niet alleen bij variabelen maar ook bij constanten; we kunnen dus bijvoorbeeld ook schrijven: document.write("test".tolowercase()). Deze twee methoden werken alleen bij de gewone letters van ons alfabet, dus niet bij tekens met bijvoorbeeld een umlaut of een accent. Er zijn verschillende methoden waarmee we de weergave van strings kunnen beïnvloeden. Een voorbeeld daarvan is "bold". Als we schrijven: X = "test".bold(), dan krijgt X daarmee de waarde "<B>test</B>"; het woord "test" zal daardoor vet worden weergegeven indien X door de browser wordt getoond. Soortgelijke methoden zijn bijvoorbeeld "big", "blink", "fontcolor", "fontsize" en "sup": al deze methoden zetten de overeenkomstige HTML-tags rondom de string en beïnvloeden zo de weergave ervan in de browser. Met de methode "charat" kunnen we individuele tekens van de string benaderen. We moeten ons daarbij wel realiseren dat de telling begint bij nul en niet bij een. Om het eerste teken van string X te benaderen, schrijven we dus: X.charAt(0); het laatste teken van de string benaderen we met X.charAt(Y), waarbij geldt: Y = X.length - 1. (N.B.: bij "length" gebruiken we geen haakjes aan het eind, omdat het een property is en geen method!) Hiermee kunnen we bijvoorbeeld controleren wat 4

5 we hiervoor hebben beweerd over de werking van bold. Als we schrijven: document.write("test".bold().charat(1)), dan wordt het tweede teken van de string getoond; omdat "bold()" <B> en </B> rondom de string heeft gezet, krijgen we een "B" te zien en dus niet de "e" van Test! We kunnen ook onderdelen van de string benaderen die meer dan een enkel teken bevatten; hiertoe gebruiken we "substring". Deze methode heeft een verplichte parameter (de beginpositie) en een optionele (merkwaardig genoeg het teken NA de eindpositie). Als X bijvoorbeeld de waarde "Dit is een test" bevat, dan heeft X.substring(7,10) de waarde "een" (de tekens op positie 7 tot en met 9), en X.substring(7) de waarde "een test". Als we de optionele parameter achterwege laten, krijgen we dus alles vanaf de beginpositie tot aan het einde van de string. ZOEKEN EN VINDEN Vaak is het interessant om te weten of een bepaalde string voorkomt in een grotere string. We kunnen dat nagaan met de methoden indexof en lastindexof (let op de spelling!). Heeft string X de waarde "'Mijn lief, mijn lief, mijn lief', zo sprak mijn lief mij toe", dan heeft X.indexOf("lief") de waarde 6: "lief" komt namelijk inderdaad voor binnen string X, en wel (de eerste keer) vanaf positie 6. Komt de gezochte string niet voor, zoals in X.indexOf("liefde"), dan krijgen we als resultaat -1. Ook hier kunnen we een optionele parameter gebruiken: schrijven we X.indexOf("lief",7), dan wordt niet gezocht vanaf positie 0 (het begin van de string) maar vanaf positie 7, en het resultaat is in dat geval 17. Iets soortgelijks geldt voor de methode lastindexof, alleen wordt daar niet gezocht naar de eerste maar naar de laatste keer dat de substring voorkomt; er wordt dus gezocht vanaf het einde van de string. In ons voorbeeld geldt: X.lastIndexOf("lief") heeft de waarde 49; X.lastIndexOf("liefde") heeft de waarde -1 en X.lastIndexOf("lief",10) heeft de waarde 6. Overigens kent JavaScript voor het zoeken in strings ook een methode search. Deze maakt gebruik van zogenaamde "regelmatige uitdrukkingen" (regular expressions), net als de methoden match, replace, split, test en exec waarmee in strings kan worden gezocht, vervangen en verwijderd. Regular expressions en de bijbehorende methoden worden echter pas ondersteund vanaf JavaScript versie 1.2, en we zullen er hier niet verder op in gaan. 5

6 ARRAYS We hebben gezien dat we strings als geheel kunnen benaderen maar ook als een "verzameling" van individuele elementen (de losse letters waaruit de string bestaat). In dat opzicht lijken strings op "arrays": ook daar is sprake van een object dat individuele elementen bevat die onafhankelijk van elkaar kunnen worden benaderd. (Bij de taal Pascal zien we die verwantschap goed terug: wat in JavaScript een string heet, heette in Pascal oorspronkelijk een "array of char[acters]", dus een array bestaande uit lettertekens.) Arrays behoren, net als strings, tot de ingebouwde objecttypen van JavaScript en hebben, naast de property length die het aantal elementen in een array aangeeft, een aantal methoden waarmee de individuele elementen kunnen worden gemanipuleerd (bijvoorbeeld: samengevoegd of gesorteerd). Om arrays te kunnen gebruiken, moeten we ze eerst expliciet creëren met behulp van de "constructor" new. We kunnen bijvoorbeeld schrijven: X = new Array() en zo een array aanmaken die nog geen elementen bevat. Vervolgens kunnen we enkele elementen aan de array toevoegen, bijvoorbeeld: X[0] = "aap"; X[1] = "noot"; X[2] = "mies". We verwijzen dus naar een element van een array door middel van zijn "index", geplaatst tussen vierkante haken; en ook bij arrays beginnen we te tellen bij nul. Er bestaat echter een eenvoudiger manier om het array uit het voorbeeld aan te maken en te vullen. We kunnen namelijk ook schrijven: X = new Array("aap", "noot", "mies"). De elementen van het array hoeven overigens niet altijd strings te zijn, en we mogen ook elementen van verschillende typen door elkaar gebruiken, bijvoorbeeld: X = new Array("aap", , true). Het is zelfs mogelijk dat een element van een array zelf een array bevat, bijvoorbeeld: X[2] = new Array("a","b","c"); op deze manier ontstaat een "multidimensionale" (in dit geval: tweedimensionale) array. Om te verwijzen naar een individueel element van zo'n array schrijven we bijvoorbeeld: Y = X[2][1], waardoor Y de waarde "b" krijgt. Schrijven we: document.write(x[2]), dan wordt het hele array X[2] getoond, dus: "a,b,c". Op soortgelijke wijze kunnen we de inhoud van een array in een keer toekennen aan een ander array: Z = X[2]. We kunnen zelfs schrijven: document.write(x), met als resultaat: "aap,3.1415,a,b,c"; het multidimensionale array wordt in zo'n geval "opengevouwen" tot een eendimensionaal array. Behalve de expliciet gecreëerde arrays uit onze voorbeelden, kent JavaScript ook arrays die als het ware "impliciet" ontstaan bij het aanmaken van onze HTML-pagina's. Een voorbeeld hiervan is "links": dit array (dat zelf een property is van het object "document") bevat de links op onze pagina, in de volgorde waarin ze op de pagina voorkomen. Dit array "ziet" overigens alleen links die "reeds eerder" in de HTML zijn opgenomen. Bevat onze pagina twee links, een verwijzing naar document.links.length (het aantal elementen in dit array, dus: het aantal links op de pagina), en vervolgens een derde link, dan geeft document.links.length de waarde 2 en niet 3, omdat de laatste link nog niet "bekend" was op het moment van de verwijzing. Zoals we in latere hoofdstukken nog zullen zien, behandelt JavaScript niet alleen "links" (en het verwante "anchors"), maar ook de verschillende elementen van een formulier (<FORM>) als (impliciete) arrays. 6

7 BASISBEGRIPPEN OVERZICHT VAN ARRAYS Arrays worden vaak ook gegevensvelden of tabellen genoemd. var mijnarray = new Array(); Aan een variabele kan je altijd maar één waarde tegelijk toewijzen. Een Array daarentegen kan verschillende waarden bevatten. Men spreekt daarbij van verschillende elementen, waarbij elk element een waarde heeft. De afzonderlijke elementen gedragen zich bijgevolg als variabelen. In plaats van tien variabelen kan je dus ook een Array van tien elementen gebruiken. Arrays hebben nog een groot voordeel : de verschillende elementen worden doorlopend genummerd. In een lus kan je dan via een automatische teller de Array doorlopen. In onderstaand voorbeeld maken we eerst een Array met 3 elementen. De Array is gekend onder de naam namen. Het opvullen van de Array doe je door aan elk element van de Array een waarde toe te kennen. Het eerste element is namen[0] en krijgt de waarde "William" toegewezen. Elementen kunnen we dus aanspreken door de naam van de Array te laten volgen door een indexcijfer tussen vierkante haakjes: [ en ]. Dit indexcijfer is zero-based: het eerste cijfer is een nul. Het aantal elementen in een Array kan je opvragen via de eigenschap length van de Array. Je kan met een eenvoudige for-lus alle elementen van de Array aflopen. var namen = new Array(3); namen[0] = "William"; namen[1] = "Jos"; namen[2] = "Tine"; document.write("<br>aantal namen: " +namen.length); document.write("<br>eerste naam: " +namen[0]); document.write("<br>tweede naam: " +namen[1]); document.write("<hr>"); for(var i = 0; i < namen.length ; i++){ document.write("<br>naam" +(i+1) +": " +namen[i]); } 7

8 In dit tweede voorbeeld wordt een Array op een compacte manier gevuld met gemeenten. var gemeenten = new Array("Knokke","Brugge","Gent","Oostende"); document.write("<br>aantal gemeenten: " +gemeenten.length); for(var i = 0; i < gemeenten.length ; i++){ document.write("<br>gemeente" +(i+1) +": " +gemeenten[i]); } Een alternatieve manier om een Array af te lopen is met een for...in-lus. Hier neemt de variabele item de taak van de index over: voor elk element in de Array wordt het indexcijfer in de variabele item gestopt. var gemeenten = new Array("Knokke","Brugge","Gent","Oostende"); document.write(" Aantal gemeenten: " +gemeenten.length); for(var item in gemeenten){ document.write("<br>gemeente" +item +": " +gemeenten[item]); } 8

9 METHODEN Behalve de ene property "length" hebben arrays, zoals gezegd, een aantal methoden waarmee de individuele elementen kunnen worden gemanipuleerd. Met reverse kunnen we een array omdraaien zodat het laatste element het eerste wordt en andersom. Als geldt: X = new Array("a","b","c"), dan geeft document.write(x.reverse()) het resultaat "c,b,a". Met de methode sort kunnen we de elementen van het array alfabetisch sorteren: als geldt X = new Array("aap","noot","mies"), dan heeft X = X.sort() tot gevolg dat X[0] = "aap", X[1]="mies" en X[2]="noot". Geldt X = new Array(100,2,3,10,20,1), dan geeft document.write(x.sort()) het resultaat "1,10,100,2,20,3"! De elementen van een array kunnen worden samengevoegd tot een string met behulp van de methode join: als geldt X = new Array("aap","noot","mies"), dan krijgt mystring met mystring = X.join(":+") de waarde "aap:+noot:+mies". Hierbij is de "separator" (de tekens ":+" in het voorbeeld) optioneel; laten we die weg, dan krijgt mystring de waarde "aap,noot,mies". OVERZICHT METHODEN Arrays ondersteunen een aantal methoden: Zie tabel: Methode concat join pop push reverse shift slice Beschrijving Voeg de elementen van twee (of meer) Arrays samen Plaatst alle elementen van een Array in een String. De elementen worden gescheiden door een aangegeven delimeter (standaard een komma). Verwijdert en retourneert het laatste element van de Array Voegt een of meerdere elementen toe aan een Array en retourneert de nieuwe lengte van de Array Keert de volgorde van de Arrayelementen om Verwijdert en retourneert het eerste element van de Array Maakt een nieuwe Array van een aangegeven bereik in een Array. Argumenten: beginpositie en optioneel de eindpositie sort splice unshift Sorteert de elementen in de Array Elementen verwijderen en toevoegen aan een Array. Deze methode retourneert de verwijderde elementen. Argumenten: startpositie voor verwijderen, aantal te verwijderen elementen, nieuwe elementen Voegt een of meerdere elementen toe aan het begin van de Array en retourneert de nieuwe lengte 9

10 var dieren = new Array("koe","aap","ezel"); var beesten = new Array("paard","eend","kikker","hond"); document.write("<br>dieren: <b>" +dieren.join() +"</b>"); // als je join() niet gebruikt levert de naam van de Array ook een String document.write("<br>nog eens de dieren: <b>" +dieren +"</b>"); document.write("<br>beesten: <b>" +beesten.join("-") +"</b>"); document.write("<br>dieren en beesten: <b>" +dieren.concat(beesten) +"</b>"); document.write("<br>dieren omgekeerd: <b>" +dieren.reverse() +"</b>"); document.write("<br>dieren gesorteerd: <b>" +dieren.sort() +"</b>"); document.write("<br>beesten eruit: <b>" +beesten.splice(1,2) +"</b>"); document.write("<br>beesten over: <b>" +beesten +"</b>"); document.write("<br>dieren.pop(): <b>" +dieren.pop() +"</b>"); document.write("<br>dieren.push('kat'): <b>" +dieren.push("kat") +"</b>"); document.write("<br>dieren: <b>" +dieren +"</b>"); Bij het toepassen van een methode op een Array wordt deze onmiddellijk gemanipuleerd en is dus de originele Array veranderd. Wil je de originele Array bewaren, dan moet je die eerst 'kopiëren' in een ander Array-object. Dit is anders dan bij de String-methoden CONCLUSIE We hebben het deze keer gehad over strings en arrays, twee "ingebouwde" objecttypen van JavaScript. In het volgende hoofdstuk komen de eigenschappen en methoden van enkele andere ingebouwde objecten als Date en Math ter sprake. Daarnaast zullen we het hebben over objecten die je zelf definieert, en over zogenaamde browser-objecten. 1 0

11 Hoofdstuk: oefeningen arrays OEFENINGEN ARRAYS OEFENING 1: KLAS Schrijf met behulp van een Javascript functie een html pagina waarin je de voornaam van een klasgenoot moet typen en na bevestiging moet je zijn geboortejaar terugkrijgen. Maak gebruik van een Array om te zoeken. 1 1