Programmeren in JavaScript/Basiscursus/Printversie
In dit deel van het wikibook leer je de basis om een script in JavaScript te schrijven.
De inhoud van dit deel
[bewerken]
1. Basis
In dit hoofdstuk leer je de basis die je moet weten om ook maar iets te doen met JavaScript, zoals waar je je scripts moet plaatsen en hoe je iets op het scherm laat zien.
Wat is een JavaScript?
[bewerken]Een JavaScript bestaat uit een aantal opdrachten, die door de browser moeten worden uitgevoerd. Het uitvoeren van deze opdrachten gebeurt tijdens het laden van de HTML pagina waarin de opdrachten voorkomen of op een ander moment afhankelijk van hoe het script is opgebouwd.
Je eerste scriptje (Hallo wereld!)
[bewerken]Eerst iets makkelijks in JavaScript: tekst weergeven. Het volgende scriptje toont een pop-up window met daarin "Hallo wereld!". Hierbij gebruiken we de functie "alert();"
HTML-code: Mijn eerste JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mijn eerste JavaScript</title>
</head>
<body>
<script>
alert("Hallo wereld!");
</script>
</body>
</html>
Natuurlijk willen we wat ingewikkelder dingen gaan doen met JavaScript. Om de eerste beginselen van JavaScript te onderzoeken willen we niet altijd een volledige HTML pagina hoeven te maken. In plaats daarvan gebruiken we een testpagina (Zie appendix B) waarin we alleen de JavaScript opdrachten hoeven in te tikken (of te plakken). Deze testpagina ondersteunt een functie "writeln()" waarmee we een regel tekst in een uitvoergebied kunnen zetten.
JavaScript-code: Hallo wereld op de testpagina
writeln("Hallo wereld");
Je kunt dit uitvoeren door de testpagina ergens neer te zetten (zoals beschreven in appendix B) en het script er in te plakken. Druk op de knop "uitvoeren" op de testpagina en klaar is Kees.
Een ander scriptje dat je kunt uitvoeren, gebruikt de functie "prompt();" om een klein venstertje laten verschijnen met een vraag erin. Op die manier zou je bijvoorbeeld de bezoeker van je site naar zijn of haar naam kunnen vragen, en die daarna in de pagina zetten.
JavaScript-code: Prompt
var naam = prompt("Hallo, hoe heet je?", "");
writeln("Hallo, " + naam);
Commentaar
[bewerken]Bij iedere programmeertaal is er wel een manier om commentaar bij je script te plaatsen en dat is bij JavaScript niet anders. In JS ziet commentaar er zo uit
JavaScript-code: Commentaar
// Achter deze streepjes staat de commentaar
/* Als je een commentaar wil van meerdere regels
(dat is handig om delen van het script even weg te laten)
doe je dit zo (achteraan moet er terug een teken) */
Het is nuttig om commentaar bij je script te plaatsen: Als je later je script overleest, weet je terug wat de bedoeling was van een bepaalde functie, een bepaalde regel, ... Vermijd echter redundantie: schijf bvb. niet boven een regel als i = i + 1 de tekst Tel bij i 1 op, want dat maakt het script alleen maar onoverzichtelijk.
2. Variabelen
Een variabele is een manier om in JavaScript (en ook in andere computertalen) veranderlijke gegevens te bewaren. Bij een variabele spelen drie dingen een rol:
- De naam van de variabele zodat je de variabele in een script kunt gebruiken.
- De gegevens die in de variabele zijn opgeslagen (een variabele kan ook "leeg" zijn).
- Het soort (type) gegevens die in de variabele zijn opgeslagen.
Variabelen declareren
[bewerken]Een variabele declareren betekent dat je simpelweg een variabele aanmaakt waar je gegevens in wilt opslaan. Dit gebeurt als volgt:
JavaScript-code: Variabele declareren
var variabelnaam;
Met het woordje var geef je aan dat je een nieuwe variabele aanmaakt. Dit wordt gevolgd door de naam van de variabelen. De naam van een variabele is hoofdlettergevoelig; dat betekent dat variabelnaam niet gelijk is aan VARIABELNAAM.
Gegevens in een variabele plaatsen
[bewerken]Nu wil je natuurlijk gegevens erin bewaren. Dit gebeurt met de = operator als volgt.
JavaScript-code: Gegevens in een variabele plaatsen
variabelnaam = "gegevens voor de variabele";
Om regels code uit te sparen kun je ook de gegevens meteen in de variabele opslaan wanneer je die declareert.
JavaScript-code: Gegevens in een variabele plaatsen
var variabelnaam = "gegevens voor de variabele";
Types variabelen
[bewerken]Variabelen kunnen verschillende soorten (typen) gegevens bevatten:
- Strings (Stukjes tekst)
- Getallen
- Booleans (Logische waarden: true of false)
- Functies
- Verwijzingen naar Objecten (zie hoofdstuk objecten)
- null (verwijzing naar een niet bestaand object)
Als een variabele nog geen waarde heeft gekregen is de waarde undefined en het type gegevens ook undefined; In een script kun je het type van de gegevens die in een variabele zijn opgeslagen opvragen met de functie typeof(x).
In tegenstelling tot andere talen kent JavaScript geen aparte soorten variabelen voor verschillende gegevens-types. Je kunt een variabele dus gebruiken voor elke soort gegevens die JavaScript kent. De meest gebruikte gegevens types zijn getallen en strings.
In het volgend voorbeeld gaan we een getal in een variabele opslaan.
JavaScript-code: Een getal opslaan
var getal = 10;
JavaScript weet hierbij automatisch dat je een getal hebt opgeslagen. Wanneer je een string wilt opslaan moet je het stukje tekst dat je wilt bewaren tussen aanhalingstekens plaatsen.
JavaScript-code: Een string opslaan
var tekst = "Dit is een stukje tekst";
Voor logische gegevens gebruiken we het type boolean Voor deze gegevenssoort bestaan slechts twee waarden: true of false, wat respectievelijk juist of fout betekent. Een boolean declareer je als volgt:
JavaScript-code: Een boolean opslaan
var juist = true;
var fout = false;
true en false moeten niet tussen aanhalingstekens staan, want het is geen tekst maar het zijn JavaScript-sleutelwoorden.
Het volgende voorbeeld gaan we alle mogelijke soorten gegevens in een variabele opslaan. Achter ieder statement staat als commentaar de waarde en het type van de in de variabele x opgeslagen gegevens. Dit voorbeeld kunt u ook naspelen, zie appendix B.
JavaScript-code: Verschillende soorten gegevens in een variabele opslaan
var x; // waarde(x)=undefined, type(x)=undefined
x = x + "=" + typeof(x);
alert(x);
x = 5; // waarde(x)=5, type(x)=number
x = x + "=" + typeof(x);
alert(x);
x = "Hallo wereld"; // waarde(x)=Hallo wereld, type(x)=string
x = x + "=" + typeof(x);
alert(x);
x = true; // waarde(x)=true, type(x)=boolean
x = x + "=" + typeof(x);
alert(x);
x = alert; // waarde(x)= function alert() { [native code] } , type(x)=function
x = x + "=" + typeof(x);
alert(x);
x = new Object(); // waarde(x)=[object Object], type(x)=object
x = x + "=" + typeof(x);
alert(x);
x = null; // waarde(x)=null, type(x)=object
x = x + "=" + typeof(x);
alert(x);
3. Operatoren
Tot nu toe hebben we alleen de "="-operator gezien die wordt gebruikt om gegevens in een variabele te bewaren. Nu gaan we dieper in op de operatoren.
Wiskundige operatoren
[bewerken]Een wiskundige operator wordt gebruikt om mee te rekenen. Hieronder vind je een lijst van al de wiskundige operatoren en wat ze precies doen. We gaan rekenen met de variabele x = 10.
| Operator | Omschrijving | Voorbeeld | Resultaat |
|---|---|---|---|
| + | Optellen | y = x + 5 | y = 15 |
| - | aftrekken | y = x - 5 | y = 5 |
| * | Vermenigvuldigen | y = x * 5 | y = 50 |
| / | Delen | y = x / 5 | y = 2 |
| % | Modulo | y = x % 3 | y = 1 |
| ++ | één optellen | x++ | x = 11 |
| -- | één aftrekken | x-- | x = 9 |
"+"-operator
[bewerken]Hoewel de "+"-operator een wiskundige operator is, kun je hem ook gebruiken om strings samen te voegen.
JavaScript-code: Tekst samenvoegen
var tekst = "Dit is tekst";
tekst = tekst + ", nog meer tekst.";
alert(tekst);
Dit is tekst, nog meer tekst.
Opgelet: als je een getal en een string samenvoegt, krijg je altijd een string als resultaat, omdat het getal eerst wordt omgezet naar een string.
Toewijzingsoperatoren
[bewerken]De "="-operator kun je combineren met de wiskundige operators. Je kunt dan rekenen met een variabele en de uitkomst onmiddellijk in diezelfde variable opslaan. Bijvoorbeeld x = x + 1 wordt x += 1. Hieronder vind je een overzicht van al de mogelijke combinaties van de "="-operator met de wiskundige operatoren. Als je goed oplet, merk je dat x in het begin 10 is.
| Operator | Voorbeeld | Hetzelfde als | Resultaat |
|---|---|---|---|
| += | x += 5 | x = x + 5 | x = 15 |
| -= | x -= 5 | x = x - 5 | x = 5 |
| *= | x *= 5 | x = x * 5 | x = 50 |
| /= | x /= 5 | x = x / 5 | x = 2 |
| %= | x %= 3 | x = x % 3 | x = 1 |
Vergelijkingsoperatoren
[bewerken]| Operator | Betekent | Voorbeeld |
|---|---|---|
| == | is gelijk aan | |
| != | is niet gelijk aan | |
| > | is groter dan | |
| < | is kleiner dan | |
| >= | is groter dan of gelijk aan | |
| <= | is kleiner dan of gelijk aan |
Logische operatoren
[bewerken]Logische operatoren maken bewerkingen tussen Boolean variabelen (true of false) of bewerkingen die true of false als resultaat hebben.
Deze operatoren kan je gebruiken om meerdere vergelijkingen met elkaar te koppelen.
Logische AND: &&
[bewerken]De AND is waar wanneer beide termen van de operator true zijn. Bijvoorbeeld: a&&b is true wanneer a EN b true zijn. In alle andere gevallen is het resultaat false.
Logische OR: ||
[bewerken]De OR is waar wanneer minstens één van beide termen van de operator true is. Bijvoorbeeld: a||b is true wanneer a OF b OF beide true zijn. In alle andere gevallen is het resultaat false.
Logische NOT: !
[bewerken]De NOT keert de waarde van een Boolean om.
Wanneer variabele a true is, dan zal !a false zijn
4. Conditionele statements
Conditionele of voorwaardelijke statements zijn essentieel in een programma. Ze stellen je in staat om te bepalen of je een stukje code uitvoert of niet. Of je kunt in het ene geval dat stukje code uitvoeren en in het andere geval een ander stukje code uitvoeren. Bijvoorbeeld wanneer een gebruiker een man is kun je op het scherm laten tonen "Hallo meneer!" en wanneer het een vrouw is kun je "Hallo mevrouw!" tonen.
Het if-statement
[bewerken]De gewone if
[bewerken]De gewone if betekent dat er wordt gezien of iets waar is en als het waar is wordt er iets uitgevoerd. Zoals in het volgende voorbeeld.
JavaScript-code: De gewone if
var x = 5;
var y = 5;
if(x == y){
document.write("De twee getallen zijn gelijk.");
}
In dit stukje code vergelijken we twee getallen, x en y. Als de twee getallen gelijk zijn wordt wat er in de if-blok (tussen de accolades) staat uitgevoerd. Was de waarde van y nu 10, dan werd het niet uitgevoerd. Een if-statement begint altijd met het woordje if en na de if komen twee haakjes. In die twee haakjes moet een voorwaarde komen. Die voorwaarde kan een vergelijking zijn of een boolean. In dit geval is het een vergelijking. Als de vergelijking klopt dan geeft die true terug. Wanneer je te maken hebt met een boolean, moet de boolean de waarde true hebben als je wilt dat het wordt uitgevoerd.
JavaScript-code: De gewone if
var waar = true;
if(waar){
//Voer de code uit bij 'true'.
}
if ... else
[bewerken]if ... else maakt het mogelijk om code uit te voeren als er niet wordt voldaan aan de voorwaarde van de if.
JavaScript-code: De gewone if
var a = 5;
var b = 10;
if(a == b){
document.write("De twee getallen zijn gelijk.");
} else {
document.write("De twee getallen zijn niet gelijk.");
}
Met als uitvoer:
De twee getallen zijn niet gelijk.
if ... else if ... else
[bewerken]Deze structuur maakt het mogelijk om te bepalen welke van 3 of meer blokjes code er wordt uitgevoerd.
JavaScript-code: if ... else if ... else
if(geslacht == "Man"){
document.write("Hallo meneer!");
} else if(geslacht == "Vrouw"){
document.write("Hallo mevrouw!");
} else {
document.write("Hallo!");
}
else if moet net zoals if een voorwaarde bevatten. Zoals er al werd gezegd, kan met deze structuur ook uit meer dan 3 blokjes code worden bepaald welke er wordt uitgevoerd. Dit kan worden gedaan door de else if meerdere malen te gebruiken.
JavaScript-code: if ... else if ... else
if(x == 1){
document.write("X is één waard.");
} else if(x == 2){
document.write("X is twee waard.");
} else if(x == 3){
document.write("X is drie waard.");
} else if(x == 4){
document.write("X is vier waard.");
} else if(x == 5){
document.write("X is vijf waard.");
} else if(x == 6){
document.write("X is zes waard.");
} else if(x == 7){
document.write("X is zeven waard.");
} else if(x == 8){
document.write("X is acht waard.");
} else if(x == 9){
document.write("X is negen waard.");
} else if(x == 10){
document.write("X is tien waard.");
} else {
document.write("X is meer dan tien of minder dan 1 waard.");
}
Je kunt oneindig veel keer else if gebruiken. Ook belangrijk om te weten is dat de if geen gelijkaardige voorwaardes moeten bevatten zoals in de voorbije voorbeelden. Wat we daarmee bedoelen is dat if bijvoorbeeld een voorwaarde in de stijl van "geslacht == "Man"" mag hebben, de else if mag dan bijvoorbeeld een voorwaarde hebben zoals "x == 10" en een andere else if mag dan weer een boolean hebben als voorwaarde.
De switch
[bewerken]De switch is een goed alternatief voor het if ... else if ... else structuur. Voornamelijk omdat het veel overzichtelijker overkomt. De switch kijkt één keer naar een variabele en vervolgens gaat het een hele lijst van mogelijke waarden af. We nemen het voorbeeld van het vorige stukje en veranderen het in een switch:
JavaScript-code: switch
switch(x){
case 1: document.write("X is één waard."); break;
case 2: document.write("X is twee waard."); break;
case 3: document.write("X is drie waard."); break;
case 4: document.write("X is vier waard."); break;
case 5: document.write("X is vijf waard."); break;
case 6: document.write("X is zes waard."); break;
case 7: document.write("X is zeven waard."); break;
case 8: document.write("X is acht waard."); break;
case 9: document.write("X is negen waard."); break;
case 10: document.write("X is tien waard."); break;
default: document.write("X is meer dan tien of minder dan één waard.");
}
Een switch begint natuurlijk altijd met het woord switch. Tussen de haakjes komt de variabele of een ander soort waarde waarmee je de lijst van mogelijkheden wilt afgaan. Iedere case staat voor zo'n mogelijkheid en daarachter komt de mogelijke waarde te staan. Daarachter komt de code staan die wordt uitgevoerd als het overeenkomt. Je moet wel heel goed opletten voor de break. Die moet altijd komen na de code die zou moeten worden uitgevoerd. De break zorgt ervoor dat je meteen uit de switch stapt. Dit is vooral belangrijk voor de 'default. Wanneer je geen break plaatst wordt wat er achter de default staat ook uitgevoerd. De default is de else van de switch, komt er geen mogelijkheid overeen met de waarde van de variabele dan wordt de code achter de default uitgevoerd.
5. Lussen
In dit hoofdstuk gaan we leren hoe je lussen moet aanmaken in JavaScript. Lussen zijn in staat om stukjes code te herhalen voor x aantal keren of tot wanneer er wordt voldaan aan een bepaalde voorwaarde. Als je de lussen kent van de programmeertaal Java of de Scripttaal php dan zul je hiermee geen problemen hebben. Er zijn 3 lussen in JavaScript:
- for
- while
- do ... while
Naast deze lussen zullen we het ook hebben over de statements break en continue.
for
[bewerken]De for lus wordt voornamelijk gebruikt wanneer je op voorhand weet hoeveel keer een lus moet worden uitgevoerd. Je moet natuurlijk die regel niet strikt opvolgen.
JavaScript-code: for lus
for (variabele=startwaarde;variabele<eindwaarde;variabele=variabele+verhoging){
//Hier komt de code die x aantal keer wordt uitgevoerd.
}
Dit is de algemene notatie van de for lus. De for lus heeft een startwaarde nodig vanwaar hij zal beginnen te tellen, meestal is dit 0 maar het kan om het even welk getal zijn. Dit gebeurt hier bij variabele=startwaarde. De for lus moet ook weten tot waar hij moet tellen, dit gebeurt bij variabele<=eindwaarde, wanneer de variabele een bepaalde waarde bereikt heeft, stopt de lus. In dit geval zodra het groter is dan de eindwaarde. Iedere keer wanneer de code in de lus werd uitgevoerd, wordt variabele=variabele+verhoging uitgevoerd. Hieronder volgt een praktisch voorbeeld.
JavaScript-code: for lus
var i;
for (i=0;i<10;i++){
document.write("Variabele i: " + i + "<br />");
}
Met als uitvoer:
Variabele i: 0 Variabele i: 1 Variabele i: 2 Variabele i: 3 Variabele i: 4 Variabele i: 5 Variabele i: 6 Variabele i: 7 Variabele i: 8 Variabele i: 9
De variabele i kan natuurlijk iedere startwaarde hebben, positief, negatief of nul. Ook kun je dat stukje leeg laten en de startwaarde buiten de for lus bepalen. Het stukje waar je de verhoging bepaalt kan ook allerlei vormen aannemen. Het belangrijkste is dat de variabele i van waarde verandert. Of dat nu een verhoging met 1 is, een verlaging met 5, vermenigvuldigd wordt door 2, het maakt niet uit. Ook kun je dit stukje leeg laten en bij de code in de for lus schrijven als volgt:
JavaScript-code: for lus
var i=0;
for ( ;i<10; ){
document.write("Variabele i: " + i + "<br />");
i++;
}
while
[bewerken]While wordt in tegenstelling met for eerder gebruikt wanneer je niet precies kunt zeggen wanneer de lus moet stoppen. De algemene notatie is als volgt:
JavaScript-code: while lus
while (voorwaarde){
//Hier komt de code die wordt uitgevoerd zolang er wordt voldaan aan de voorwaarde.
}
De lus blijft draaien zolang er aan een bepaalde voorwaarde wordt voldaan. Hieronder volgt een concreet voorbeeld:
JavaScript-code: while lus
var i=1;
while (i<=10){
document.write("Variabele i: " + i + "<br />");
i++;
}
Met als uitvoer:
Variabele i: 1 Variabele i: 2 Variabele i: 3 Variabele i: 4 Variabele i: 5 Variabele i: 6 Variabele i: 7 Variabele i: 8 Variabele i: 9 Variabele i: 10
Dit voorbeeld doet exact hetzelfde als wat we gezien hebben bij de for lus. Zolang variabele i kleiner of gelijk aan 10 is zal de lus blijven draaien. De voorwaarde kan eigenlijk van alles zijn.
do ... while
[bewerken]Het enige verschil dat deze soort lus heeft met de gewone while is dat de code in de lus minstens één keer wordt uitgevoerd ongeacht of er wel of niet wordt voldaan aan een bepaalde voorwaarde. De do ... while lus ziet er als volgt uit:
JavaScript-code: do ... while lus
var i=1;
do {
document.write("Variabele i: " + i + "<br />");
i++;
} while (i<=10);
Deze lus doet exact hetzelfde als het voorbeeld bij de while lus. Hieronder volgt een voorbeeld dat aantoont dat de code in de lus sowieso minstens één keer wordt uitgevoerd.
JavaScript-code: do ... while lus
var i=11;
do {
document.write("Variabele i: " + i + "<br />");
i++;
} while (i<=10);
Met als uitvoer:
Variabele i: 11
Hoewel het getal 11 niet meer voldoet aan de voorwaarde wordt de code in de lus nog steeds één keer uitgevoerd.
break en continue
[bewerken]Met break en continue kun je makkelijk de lus beïnvloeden. De break statement laat de lus abrupt stoppen en wordt er verder gegaan met de code na de de lus.
JavaScript-code: break
var i=0;
for (i=1;i<=10;i++){
if (i==3){break}
document.write("Variabele i: " + i + "<br />");
}
document.write("Nu wordt dit uitgevoerd. <br />");
Met als uitvoer:
Variabele i: 1 Variabele i: 2 Nu wordt dit uitgevoerd.
Zoals je kunt zien wordt zelfs de code die nog in de lus na de break komt niet uitgevoerd en stopt de lus met draaien wanneer het getal 3 wordt bereikt.
Continue laat in tegenstelling tot break niet de lus stoppen maar slaat een beurt over. Wanneer continue voor komt in een lus dan wordt de code die nog zou moeten worden uitgevoerd niet meer uitgevoerd. De lus blijft echter wel draaien, zolang er nog steeds wordt voldaan aan de voorwaarde.
JavaScript-code: continue
var i=0;
for (i=1;i<=10;i++)
{
if (i==3){continue}
document.write("Variabele i: " + i + "<br />");
}
document.write("Nu wordt dit uitgevoerd. <br />");
Met als uitvoer:
Variabele i: 1 Variabele i: 2 Variabele i: 4 Variabele i: 5 Variabele i: 6 Variabele i: 7 Variabele i: 8 Variabele i: 9 Variabele i: 10 Nu wordt dit uitgevoerd.
Zoals je kunt zien wordt continue opgeroepen wanneer de variabele i het getal 3 als waarde heeft. De lus slaat dan de code over, maar blijft nog steeds draaien.
6. Functies
Op een pak macaroni in de supermarkt trof ik het volgende recept aan:
Recept-code: Macaroni met ham en kaas
Kook de macaroni volgens de algemene bereidingswijze
Meng de hamblokjes en de gemalen kaas door de macaroni
Algemene bereidingswijze:
{
Zet een ruime hoeveelheid water op en wacht tot die kookt
Doe de macaroni in het water
Laat 8 minuten koken
Giet af
}
De "algemene bereidingswijze" is hier een deelrecept, dat ook voor andere macaronischotels dan "ham en kaas" gebruikt kan worden. Daarom zetten we het apart en geven in het recept aan dat het deelrecept moet worden uitgevoerd. Wanneer de eerste regel van het recept zou hebben ontbroken, zou het deelrecept nooit zijn uitgevoerd en zouden we onze tanden breken op de ongekookte macaroni.
Het equivalent van een deelrecept in JavaScript is een function
Je kunt in vele programmeer- en scripttalen zogenaamde functies aanmaken. Functies zijn stukjes code die buiten de rest van de script worden geschreven. Die code worden alleen maar uitgevoerd wanneer de script er expliciet om vraagt. Als een script veel dezelfde code bevat kun je de code die altijd hetzelfde is apart zetten in een functie en die functie telkens opnieuw oproepen.
Functies aanmaken
[bewerken]Een functie aanmaken is heel simpel en gaat als volgt:
JavaScript-code: Je eerste functie
function hallowereld(){
document.write("Hallo Wereld!");
}
hallowereld();
Deze functie laat het tekstje "Hallo Wereld!" zien op het scherm. Je begint eerst met het woord function te typen; dit geeft aan dat je een functie wilt aanmaken. Vervolgens geef je een naam aan de functie die kort omschrijft wat ze doet. Hier heet de functie hallowereld. De haakjes("()") moeten er altijd staan, net zoals de accolades({}) die aangeven waar de functie begint en eindigt. Alles wat tussen de accolades staat wordt uitgevoerd wanneer die functie wordt opgeroepen. Een functie oproepen doe je gewoon door de naam van de functie te typen. Vergeet vooral de haakjes niet, want anders denkt JavaScript dat het een gewone variabele is. Over de haakjes gesproken: ze hebben nog een bijkomende functie, die we gaan uitleggen met de algemene notatie van een functie.
JavaScript-code: Algemene notatie
function functienaam(parameter1, parameter2, ..., parameterN){
//code
}
Tussen de haakjes kun je zogenaamde parameters zetten, dat kan er ééntje zijn maar ook oneindig veel. Parameters zijn eigenlijk variabelen en dienen om gegevens uit te wisselen tussen het script en de functies.
JavaScript-code: Parameters
function hallo(naam){
document.write("Hallo " + naam + "!<br />");
}
var naamVanPersoon = "Jan"
hallo(naamVanPersoon);
hallo("jan");
Gegevens kun je doorgeven aan een functie d.m.v. een variabele zoals bij hallo(naamVanPersoon); of je kunt ze ook rechtstreeks geven aan een functie zoals hallo("jan");. Over variabelen gesproken, variabelen die gedeclareerd zijn in een functie gelden niet buiten een functie. Buiten een functie kun je ze dus niet oproepen zoals in het volgende voorbeeld.
JavaScript-code: Variabelen in ene functie
function functie(){
var x = 10;
}
document.write(x);
Als je dit zou doen zul je foutmeldingen krijgen en komt er niets op het scherm.
De return
[bewerken]Hoewel je variabelen die gedeclareerd zijn in een functie niet daarbuiten kunt gebruiken, is er toch een manier om de gegevens in de rest code te gebruiken. We kunnen dit doen via de return. De return laat toe om de gegevens van een variabele door te sturen naar een andere variabele of object buiten de functie.
JavaScript-code: Variabelen in ene functie
<html>
<head>
<script type="text/javascript">
function oppervlakte(x,y){
var uitkomst = x * y;
return uitkomst;
}
</script>
</head>
<body>
<script type="text/javascript">
var x = 10;
var y = 20;
var uitkomst = oppervlakte(x,y);
document.write(uitkomst);
</script>
</body>
</html>
Functies in een variabele
[bewerken]In javascript kun je functies ook in een variabele stoppen:
JavaScript-code: Functies in een variabele
function uitvoer(s)
{
writeln(s);
}
var f = uitvoer;
f("kijk nou toch");
Hierboven heb ik eerst een functie "uitvoer" aangemaakt. Vervolgens heb ik de functie aan de variable "f" toegewezen. Ik kan nu "f" als functie gebruiken. Je kunt ook een functie aan een variabele toewijzen zonder hem eerst "apart" aan te maken:
JavaScript-code: Functies in een variabele
var f = function(s) {writeln(s);};
f("asjemenou");
Dit laatste wordt vaak toegepast bij het aanmaken van methoden in objecten (zie later);
7. Events
Wat zijn events?
[bewerken]Events zijn gebeurtenissen, die betrekking hebben op de webpagina waarin het javascript voorkomt. Ze zijn belangrijk omdat een javascript op deze gebeurtenissen kan reageren.
Voorbeelden van dit soort gebeurtenissen:
- De bezoeker van de pagina drukt op een toets
- het laden van de pagina is voltooid
- Het browservenster wordt vergroot of verkleind
- Er wordt op een knop of menu geklikt
Een javascript kan op een gebeurtenis reageren als er een verbinding gemaakt is tussen de gebeurtenis die kan optreden en een stukje javascript. Deze verbinding kan worden gelegd in de HTML-code van de pagina maar ook in het script zelf.
Klikken op een HTML-element
[bewerken]Voorbeeld: Op de pagina staat een knop. Als op deze knop geklikt wordt, moet een boodschap getoond worden.
Verbinden in HTML
[bewerken]In HTML kan de verbinding als volgt gelegd worden:
HTML-code: Verbinding tussen het klikken op een knop en javascript
<button id="button1" type="button" onclick="onbutton1clicked()">
klik hier
</button>
Het attribuut "onclick" van het HTML-element "button" krijgt als waarde een of meerdere javascript statements. Dit mag van alles zijn, maar het meest overzichtelijke is om hier een functieaanroep te plaatsen. In het javascript moet dan een functie "onbutton1clicked" gedefinieerd zijn, deze functie handelt de gebeurtenis af en noemen we daarom in het Engels de "event handler".
Javascript-code: Event handler
function onbutton1clicked()
{
alert("Er is geklikt op button1");
}
Meer HTML attributen ten behoeve van gebeurtenissen zijn te vinden in de appendix "event attributen".
Verbinden in javascript
[bewerken]De verbinding tussen de gebeurtenis en de event handler kan ook in het script zelf worden aangelegd, op een plaats in het javascript die wordt uitgevoerd als de pagina geheel geladen is:
Javascript-code: Verbinding maken tussen gebeurtenis en event handler
...
var button1 = document.getElementById("button1");
button1.onclick = onbutton1clicked;
...
}
Events van het toetsenbord
[bewerken]Er zijn twee events die optreden als de bezoeken van een pagina op een toets drukt:
Event Keydown
[bewerken]Dit event treedt op na het indrukken van een toets. Het event treedt op bij alle toetsen. De variabele event.keyCode bevat (meestal) een aanduiding van de toets. Het woordje (meestal) hierboven geeft aan dat je (afhankelijk van de gebruikte browser) soms iets anders ziet. Een mooie manier om hier geen last van te hebben is het gebruik van JQuery (zie later).
Javascript-code: Verbinding maken tussen het indrukken van een toets en een event-handler
document.onkeydown = keydown;
En dan de event-handler:
Javascript-code: Event handler voor Keydown
function keydown(event)
{
writeln(event.keyCode);
}
Event KeyPress
[bewerken]Dit event treedt op na het indrukken van een toets. Het event treedt alleen op bij toetsen die een ASCII character genereren. De variabele event.charCode bevat (meestal) de gegenereerde ASCII code. Het woordje (meestal) hierboven geeft aan dat je (afhankelijk van de gebruikte browser) soms iets anders ziet. Een mooie manier om hier geen last van te hebben is het gebruik van JQuery (zie later).
Javascript-code: Verbinding maken tussen het drukken op een toets en een event-handler
document.onkeypress = keypress;
En dan de event-handler:
Javascript-code: Event handler voor Keypress
function keypress(event)
{
writeln(event.charCode);
}
Een combinatie van deze scripts voor uitvoering op de testpagina kunt u vinden in appendix B.
8. Errors
Errors of fouten komen heel vaak voor in script. Soms is het een fout in de code en soms is het een fout van de gebruiker. Daarom moet je aan errorhandling doen of beter gezegd zorgen dat je fouten er niet voor zullen zorgen dat je script blokkeert door die fout.
try en catch
[bewerken]try en catch zijn bedoeld om fouten op te vangen. Met het try blok probeer je de code en met het catch blok vang je mogelijk fouten op. In het volgende voorbeeld is de code fout.
JavaScript-code: try en catch
document.write("Dit gebeurt er voor de nonsensfunctie().<br />");
nonsensfunctie();
document.write("Dit gebeurt er achter de nonsensfunctie().<br />");
Met als uitvoer:
Dit gebeurt er voor de nonsensfunctie().
Er bestaat namelijk geen nonsensfunctie(), als je dit zou uitvoeren in een browser, zal de browser stoppen met de pagina te verwerken en krijg je alleen maar te zien wat er voor de nonsensfunctie() was. Alles wat er achter komt zal niet op het scherm worden getoond. We gaan nu de fout opvangen met try en catch.
JavaScript-code: try en catch
document.write("Dit gebeurt er voor de nonsensfunctie().<br />");
try {
nonsensefunctie();
} catch(fout) {
document.write("Er is een fout opgetreden.<br />");
}
document.write("Dit gebeurt er achter de nonsensfunctie().");
Met als uitvoer:
Dit gebeurt er voor de nonsensfunctie(). Er is een fout opgetreden. Dit gebeurt er achter de nonsensfunctie().
Zoals je ziet wordt de fout opgevangen door catch. Alles wat in het catch blok voorkomt zal alleen maar gebeuren wanneer er een fout is. fout die staat in de catch is een variabele die een object bevat waarmee je enkele dingen mee kunt doen. Zoals bijvoorbeeld achterhalen wat de fout precies is. Als je het volgende zou doen in de catch:
JavaScript-code: try en catch
document.write("Er is een fout gebeurd. Namelijk " + fout.discription + ".<br />");
Dan krijg je het volgende:
Dit gebeurt er voor de nonsensfunctie(). Er is een fout gebeurd. Namelijk undefined. Dit gebeurt er achter de nonsensfunctie().
Met fout.discription kun je de omschrijving van de fout opzoeken. In dit geval is het undefined en dit komt overeen met onze fout, we hebben namelijk een niet bestaande functie gebruikt.
throw
[bewerken]Met throw kun je je eigen foutmeldingen maken. Met throw "gooi" je een foutbericht naar de catch die het verder zal afhandelen. Dat kan een string, een integer, een boolean of een object zijn.
JavaScript-code: try en catch
var x = prompt("Geef een getal van 1 tot 10","");
try{
if(x > 10){
throw "Uw getal is te hoog!";
}else if(x < 0){
throw "Uw getal is te laag!";
}
}catch(fout){
document.write(fout);
}
finally
[bewerken]Naast try en catch is er ook nog het finally blok. Alles wat in het finally blok voorkomt zal sowieso worden uitgevoerd. Het maakt niet uit of er wel of niet fouten zijn voorgekomen in het try blok.
JavaScript-code: finally
document.write("Dit gebeurt er voor de nonsensfunctie().<br />");
try {
nonsensefunctie();
} catch(fout) {
document.write("Er is een fout gebeurd. Namelijk " + fout.description + ".<br />");
} finally {
document.write("Dit gebeurt er in het finally blok.");
}
Met als uitvoer:
Dit gebeurt er voor de nonsensfunctie(). Er is een fout gebeurd. Namelijk undefined. Dit gebeurt er in het finally blok.