Lab Webdesign: Javascript 3 maart 2008

Transcriptie

1 H5: OPERATORS In dit hoofdstuk zullen we het hebben over de operators (of ook wel: operatoren) in JavaScript waarmee allerlei rekenkundige en logische bewerkingen kunnen worden uitgevoerd. Daarbij zullen we ook aandacht besteden aan de "voorrangsregels" die gelden als in een opdracht meer dan één operator wordt gebruikt. SOORTEN OPERATORS We hebben eerder in deze cursus gezien hoe we in JavaScript opdrachten herhaald uit kunnen laten voeren. Eén mogelijkheid is het gebruik van een "for-loop" of -herhalingslus. Een dergelijke lus zag er als volgt uit: for (tel = 1; tel <= 1000; tel++) {document.write "hallo"} De for-opdracht bevat drie elementen tussen de haakjes, te weten: een initialisatie van de tellervariabele (tel = 1), een voorwaarde voor uitvoering van de lus (tel <= 1000), en een opdracht voor het bijwerken van de teller-variabele (tel++), gevolgd door de opdracht die herhaald moet worden uitgevoerd (document.write "hallo"). De drie elementen tussen de haakjes bevatten alle een operator, te weten: een toekenningsoperator ("="), een logische operator ("<="), en een berekeningsoperator ("++"). Behalve deze drie soorten operators kent JavaScript nog bitsgewijze operators, alsmede enkele speciale operators. We zullen nu op elke categorie wat nader in gaan. TOEKENNINGSOPERATORS De simpelste toekenningsoperator is het is-teken ("="). Dit wordt gebruikt om het resultaat van een expressie toe te kennen aan een variabele, bijvoorbeeld: x = of x = y + z. De andere toekenningsoperators zijn eigenlijk verkorte schrijfwijzen waarmee het is-teken en een andere operator worden gecombineerd. Een voorbeeld daarvan is de operator "+=". De opdracht x += y betekent hetzelfde als x = x + y. Iets vergelijkbaars geldt voor "-=" (x -= 2 is hetzelfde als x = x - 2), "*=" (x *= y is hetzelfde als x = x * y), enzovoort. Ook de nog te bespreken bitsgewijze operators kunnen met het is-teken worden gecombineerd. 1

2 LOGISCHE OPERATORS De simpelste logische operator is de logische ontkenning, weergegeven door een uitroepteken ("!"), en uitgesproken als "NOT". Deze operator wordt gebruikt om een expressie logisch te ontkennen: als die expressie X de waarde true heeft, dan heeft!x de waarde false, en omgekeerd. Als X een expressie van het type Boolean is, dan ligt deze interpretatie tamelijk voor de hand ("NOT true" is "false" en "NOT false" is "true"). We kunnen de logische ontkenning echter ook combineren met getalsexpressies. In dat geval geldt: als die expressie Y de waarde nul heeft, dan heeft!y de waarde true; heeft Y een andere waarde dan nul, dan heeft!y de waarde false. Gebruiken we deze operator met een expressie die ongedefinieerd is of null, of met een stringexpressie die niet in een getalsexpressie kan worden omgezet, dan krijgen we een run-time foutmelding. Andere logische operators stellen ons in staat om een logische vergelijking uit te voeren. Tot deze categorie behoren "<" (kleiner dan), ">" (groter dan), "<=" (kleiner dan of gelijk aan) en ">=" (groter dan of gelijk aan). Een van deze operators waren we al tegengekomen in de herhalingslus hiervoor: de voorwaarde voor uitvoering van de lus luidde "tel <= 1000". Deze expressie heeft de waarde true als variabele tel een waarde heeft die kleiner is dan, of gelijk aan, duizend, of de waarde false als tel groter is dan duizend. Deze operators kunnen ook gebruikt worden voor stringexpressies; in dat geval worden de onderliggende Unicode-waarden van de tekens in de string gebruikt voor de vergelijking. De expressie 'a' < 'b' heeft bijvoorbeeld de waarde true, maar 'a' < 'B' heeft de waarde false, omdat hoofdletters een lagere waarde hebben dan kleine letters. Met de operator "!=" kunnen we testen op ongelijkheid: de expressie X!= Y heeft de waarde true als variabele X inderdaad een andere waarde heeft dan variabele Y, of false als de twee variabelen dezelfde waarde hebben. De logische operator "==" (niet te verwarren met toekenningsoperator "="!) test juist op gelijkheid: X == Y is true als de twee variabelen dezelfde waarde hebben, maar false als ze verschillende waarden hebben. Bij deze twee operators worden de twee te vergelijken elementen zonodig eerst omgezet naar hetzelfde type; als gevolg daarvan heeft de expressie '1' == 1 de waarde true. De operators "&&" en " " maken het mogelijk om twee expressies te combineren met respectievelijk een logische AND of een logische OR. De expressie X && Y is alleen true als zowel X als Y de waarde true heeft. De expressie X Y is true als X true is, als Y true is, of als beide true zijn. Tenslotte moeten we hier de voorwaardelijke operator "?:" noemen. Deze kunnen we beschouwen als een verkorte schrijfwijze voor een if else-opdracht. Deze operator wordt bijvoorbeeld zo gebruikt: X == Y? 'gelijk' : 'ongelijk'. We lezen deze expressie als volgt: als het deel links van het vraagteken true is, dan wordt het deel tussen het vraagteken en de dubbele punt als resultaat teruggegeven; is het deel links van het vraagteken false, dan wordt het deel rechts van de dubbele punt als resultaat teruggegeven. 2

3 GELIJK / NIET GELIJK Een gelijkheid zoals we kennen uit de lessen wiskunde wordt in Javascript uitgedrukt met twee gelijkheidstekens (==): var a = 6; var b = 7; if (a==b) document.write ('a en b zijn gelijk') else document.write ('a en b zijn niet gelijk') Om een ongelijkheid te testen gebruik je de operator!= waarbij! de not-operator is. IDENTIEK / NIET IDENTIEK Het identiek zijn van twee variabelen of waarden betekent dat niet alleen hun waarde maar ook hun type gelijk is. De operator om het identiek zijn van twee variabelen te testen is het trippele gelijkheidsteken ===. De negatie is!==. '42' is niet identiek aan 42 daar '42' een String is en 42 een number. GROTER / KLEINER <, >, <=, >= : kleiner, groter, kleiner of gelijk, groter of gelijk. Het resultaat van een dergelijke test is steeds true of false. var a = 6; var b = 7; if (a<b) document.write ('a is kleiner dan b'); else if (a>b) document.write ('a is groter dan b'); else document.write ('a en b zijn gelijk'); Deze operatoren kan je ook toepassen op string-variabelen, je kan nu bvb. testen of een woord alfabetisch voor een ander woord komt. 3

4 BEREKENINGSOPERATORS Tot de groep berekeningsoperators behoren "+", "-", "*", "/" en "%". De operator "+" wordt gebruikt om twee waarden bij elkaar op te tellen, maar ook om twee strings samen te voegen. Als variabelen X en Y beide de waarde 1 hebben, dan geeft X + Y het resultaat 2. Hebben X en Y beide de waarde '1', dan geeft X + Y het resultaat '11'; hetzelfde resultaat krijgen we als de ene variabele de waarde 1 heeft en de andere de waarde '1': de getalsvariabele wordt dan eerst omgezet in een stringvariabele, en vervolgens worden de twee strings samengevoegd. De expressie 'X' + 'Y' tenslotte geeft het resultaat 'XY' De operator "-" wordt gebruikt om twee waarden van elkaar af te trekken of om het teken van een expressie te veranderen: -X is positief als X negatief is en vice versa. Met de operators "*" en "/" kunnen we respectievelijk vermenigvuldigen en delen, terwijl we met operator "%" een modulo-bewerking kunnen uitvoeren. Dit houdt in dat er als het ware een staartdeling wordt uitgevoerd waarvan we alleen de rest terugkrijgen. Een voorbeeld: 19 % 7 geeft als resultaat 5, want als we 19 door 7 delen, houden we een rest (19-14 =) 5 over. Daarnaast behoren de operators "++" en "--" tot de groep berekeningsoperators. Met deze operators worden variabelen respectievelijk met een verhoogd of verlaagd. Bij deze operatoren moeten we goed opletten of ze voor of achter de variabele staan: dit maakt namelijk iets uit voor het resultaat! Laten we aannemen dat variabele Y de waarde 1 heeft. In de opdracht X = ++Y krijgt X dan de waarde 2: de waarde van Y wordt eerst met een verhoogd, en vervolgens wordt het resultaat aan X toegekend. In de opdracht X = Y++ daarentegen krijgt X de waarde 1: de waarde van Y wordt aan X toegekend, en pas daarna wordt de waarde van Y met een verhoogd! Iets soortgelijks geldt voor de operator "--". De operators "++" en "--" hoeven niet altijd in een toekenningsopdracht gebruikt te worden: ze kunnen ook op zichzelf staan. De opdracht X++ bijvoorbeeld zorgt ervoor dat de waarde van X met een wordt verhoogd; het is dus een verkorte schrijfwijze voor X = X + 1. Betekenis Operator Voorbeeld Optellen + som = a + b; Aftrekken - verschil = a - b; Tegengestelde - tegengestelde = -b; Vermenigvuldigen * product = a * b; Delen / quotiënt = a / b; Modulo % rest = a % b; Verhogen met 1 ++ a++ of ++a (a = a + 1) Verlagen met 1 -- a-- of --a (a = a - 1) 4

5 Opgepast met de ++ en -- operatoren, er is een subtiel, doch belangrijk verschil wanneer deze operatoren als prefix of suffix worden gebruikt: var aantal=1; document.write(aantal++); document.write('<br>'); document.write(aantal); document.write('<hr>'); aantal=1; document.write(++aantal); document.write('<br>'); document.write(aantal); In de eerste toepassing wordt de variabele aantal ingesteld op 1. De waarde van aantal++ wordt op het scherm gezet. Aantal wordt hier met 1 opgehoogd pas nadat de instructie werd uitgevoerd! In de tweede toepassing wordt ++ als prefix gebruikt en wordt de waarde van aantal reeds opgehoogd vooraleer die op het document wordt geplaatst. 5

6 BITSGEWIJZE OPERATORS Aan de bitsgewijze operators zullen we hier niet al te veel aandacht besteden; ze vormen meer voer voor specialisten. Deze operators kunnen alleen gebruikt worden met getallen (Booleans worden eerst omgezet in een getal, net als strings indien dat mogelijk is). Op de binaire schrijfwijze van die getallen wordt vervolgens een bewerking uitgevoerd. De bitsgewijze NOT ("~") zet alle nullen om in enen en omgekeerd. Als de oorspronkelijke expressie bijvoorbeeld 1011 is, dan is het resultaat van deze operator De bitsgewijze OR (" ") vergelijkt de overeenkomstige bits in twee expressies en geeft steeds als resultaat een 1 als minstens een van de twee bits een 1 is, of 0 als beide bits 0 zijn. Als de twee expressies bijvoorbeeld 1100 en 0110 zijn, dan is het resultaat van deze operator Verder bevat deze groep nog een bitsgewijze AND ("&"), een bitsgewijze XOR ("^") en bitsgewijze verschuifopdrachten ("<<", ">>" en ">>>"). BITOPERATOR EN: & document.write( 14 & 7 ); Levert: 6. Werkwijze: 14 binair: binair logische 'en' berekening - decimaal resultaat: BITOPERATOR OF: document.write( 14 7 ); Levert: 15. Werkwijze: 14 binair: binair logische 'of' berekening - decimaal resultaat:

7 BITOPERATOR EXOR: ^ document.write( 14 ^ 7 ); Levert: 9. Werkwijze: 14 binair: binair logische 'exor' berekening - decimaal resultaat: De exor of exclusieve or levert true als een van de deelwaarden true is, doch false als alle voorwaarden true zijn. SPECIALE OPERATORS Ook aan deze groep besteden we slechts voor de volledigheid aandacht. Met de 'delete'-operator kan een element uit een (nog te behandelen) array worden verwijderd, of een eigenschap uit een (eveneens nog te behandelen) object. Met 'typeof' kan het type van een expressie worden bepaald (de mogelijke resultaten zijn 'number', 'string', 'boolean', 'object', 'function', en 'undefined'). Met 'void' tenslotte kan een expressie worden geëvalueerd zonder dat het resultaat wordt bewaard (deze operator geeft altijd de waarde undefined terug). 7

8 VOORRANGSREGELS In een expressie kunnen meerdere operators gebruikt worden. We hebben daarom regels nodig die aangeven in welke volgorde de JavaScript-operators worden toegepast; een soort uitgebreide "Mijnheer Van Dale wacht op antwoord". De hiervoor besproken operators worden toegepast in de volgorde die staat aangegeven in het overzicht hieronder. Operators die op een hogere regel staan, hebben voorrang op operators die op een lagere regel staan; operators die op dezelfde regel staan, worden van links naar rechts toegepast. Door middel van haakjes kan van de aangegeven volgorde worden afgeweken: wat tussen haakjes staat, wordt namelijk eerst geëvalueerd , --, - (negatief maken), ~,!, typeof, void, delete 2. *, /, % 3. +, - (aftrekken), + (samenvoegen strings) 4. <<, >>, >>> 5. <, <=, >, >= 6. ==,!= 7. & 8. ^ && ?: 13. =, OP= (operator gecombineerd met "=", bijvoorbeeld "+=") Als voorbeeld bezien we de toekenning X = (1 + 2) / 3 * Allereerst berekenen we 1 + 2, want dat staat tussen haakjes en gaat dus voor. In het dagelijks leven zouden we, volgens de "Mijnheer Van Dale"-regel, nu eerst 3 met 4 vermenigvuldigen en daarna het vorige resultaat 3 delen door 12. In JavaScript staan vermenigvuldigen en delen echter op hetzelfde niveau, en in dat geval is de regel: toepassen van links naar rechts. In ons geval delen we dus eerst 3 (het resultaat van de expressie tussen haakjes) door 3, en vermenigvuldigen de uitkomst 1 vervolgens met 4. Bij het resultaat 4 tellen we 5 op, en het eindresultaat 9 kennen we tenslotte toe aan variabele X. CONCLUSIE In het vorige hoofdstuk hebben we uitgebreid aandacht besteed aan de JavaScript-operators. In het volgende 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" zal dan aan de orde komen. 8

9 Hoofdstuk: oefeningen OEFENINGEN OEFENING 1:JUIST/FOUT Zijn de volgende declaraties of initialisaties correct? Leg uit waarom wel of waarom niet? Indien niet, leg uit hoe je het kan oplossen a) my_name = Masset ; b) var how many = 25; c) var zipcode = document.getelementbyid( zip ).value; d) var 1address = document.( address1 ).value; OEFENING 2: WAARDEN Veronderstel dat volgende statements snel NA elkaar volgen; waar elke statement afhankelijk is van de vorige. Schrijf voor elke statement de someval waarde var someval = 2; someval = someval + 2; someval = someval * 10; someval = someval + 20 ; someval = Robert ; 9