Programmeren in JavaScript/Printversie

Uit Wikibooks

Programmeren in JavaScript

document.write("Hallo Wereld!");

Inhoudsopgave

[bewerken] Inhoudsopgave

Basiscursus
1. Basis
  1. Scripts opnemen
    1. Waar je script plaatsen
  2. Je eerste scriptje(Hallo Wereld!)
  3. Commentaar
2. Variabelen
  1. Variabelen declareren
  2. Gevens in een variabel plaatsen
  3. Type variabelen
3. Operatoren
  1. Wiskundige operatoren
    1. "+"-operator
  2. Toewijzingsoperatoren
  3. Vergelijkingsoperatoren
  4. Logische operatoren
4. Conditionele statements
  1. De if-statement
    1. De gewone if
    2. if ... else
    3. if ... else if ... else
  2. De switch
5. Lussen
  1. for
  2. while
  3. do ... while
  4. break en continue
6. Functies
  1. Functies aanmaken
  2. De return
  3. Waar functies plaatsen?
7. Events
8. Errors
  1. try en catch
  2. throw
  3. finally
Objecten
Appendices
1. Appendix A: event attributen
Programmeren in JavaScript/Gegevens invoegen (kader) (weet iemand waar deze link het best 'past' in de inhoud?)

Deel I: Basiscursus

In dit deel van het wikibook leer je de basis om een script in JavaScript te schrijven.

[bewerken] De inhoud van dit deel

1. Basis

In dit hoofdstuk leer je de basis die je gewoonweg 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.

[bewerken] Scripts opnemen

Als je op een bepaald punt van een HTML-document een klein JavaScriptje wil plaatsen kan je dit op volgende manier doen:

JavaScript-code:Scripts opnemen

<script>
<!--
 
// -->
</script>

Dit script doet niets, er staat namelijk geen code in. Wel zal ik even uitleggen waarvoor alle element staan.

<script> : Geeft het begin van het script aan (HTML-tag).
<!-- : Dit is eigenlijk niet nodig, maar soms wel interessant, dit verbergt het script voor browsers die geen JavaScript ondersteunen.
: Op de plaats van de lege regel moet het script komen.
// --> : Geeft het einde van het verbergen voor oude browsers aan
</script>: Geeft aan dat het script gedaan is.

[bewerken] Waar je script plaatsen

Je plaatst je script gewoon tussen de <body> en de </body> van je document op de plaats waar je het script nodig hebt. Later in het hoofdstuk over functies zal je zien dat deze in de head van het document moeten komen maar daar moet je je nu nog geen zorgen over maken.

[bewerken] Je eerste scriptje (Hallo Wereld!)

Eerst iets makkelijks in JavaScript: tekst weergeven. Met het volgende scriptje komt er "Hallo Wereld!" te staan op je HTML-pagina. Hierbij gebruiken we de functie "document.write();"

JavaScript-code:Hallo Wereld!

<script type="text/javascript" />
<!--
document.write("Hallo Wereld");
//-->
</script>

Dit is een best simpel script, en je hebt er niets aan want je kunt ook gewoon "Hallo Wereld" in je HTML-pagina zetten. LET OP: als je tekst (een "string") wil laten zien, of ergens voor gebruikt, moet je altijd aanhalingstekens gebruiken.

Je kunt met de functie "prompt();" een klein venstertje laten verschijnen met een vraag erin. Op die manier zou je bijvoorbeeld de bezoeker van je site zijn of haar naam kunnen vragen, en dat daarna in de pagina zetten.

JavaScript-code:Prompt

<script language="javascript">
<!--
var naam = prompt("Hallo, hoe heet je?", "");
document.write("Hallo, " + naam);
//-->
</script>

In dit script wordt ook meteen een variabele ingesteld. De variabele "naam" wordt gezet op het antwoord op de vraag. prompt() heeft twee argumenten, die staan tussen haakjes. Het eerste argument is de vraag, en het tweede argument is het antwoord dat er al staat, dat is nu dus leeg. document.write zegt nu Hallo, en er wordt daarna het antwoord op de vraag bijgezet.

[bewerken] Commentaar

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 gemakkelijk om veel commentaar bij je script te plaatsen, als je dan later terug kijkt naar je script weet je ineens terug wat juist de bedoeling was van een bepaalde functie, een bepaalde regel,.... Zorg wel dat de commentaar nog nut heeft, ga niet boven een regel als i = i + 1 schrijven Tel bij i 1 op, zulke dingen maken het script alleen maar ingewikkelder.

2. Variabelen

Een variabele is een manier om in JavaScript (en ook in andere computertalen) veranderlijke gegevens te bewaren. Een variabele bestaat uit drie dingen:

een naam voor de variabele zodat je de gegevens in een programma kunt oproepen
gegevens die eventueel zijn bewaard in de variabele
een type

[bewerken] Variabelen declareren

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.

[bewerken] Gevens in een variabele plaatsen

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";

[bewerken] Types variabelen

Er zijn verschillende soorten variabelen die verschillende soorten gegevens kunnen bevatten.

Strings (Stukjes tekst)
Getallen
Boolean (true of false)
null
Objecten, zoals de onderdelen van het scherm

In tegenstelling tot andere talen heeft JavaScript maar weinig types. Je moet dan ook niet op voorhand opgeven van welk type de variabele is. De meest gebruikte twee types zijn getallen en strings.

Zoals al werd gezegd moet je geen type op voorhand opgeven; dit gebeurt eigenlijk wanneer je de gegevens in de variabele plaatst. 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";

Tot zover de twee belangrijkste types. Naast getallen en strings kunnen er nog twee dingen worden opgeslagen, een boolean en null. Een boolean kan dan weer twee waardes hebben: 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 haakjes staan, want het is geen tekst maar het zijn JavaScript-sleutelwoorden. null is ook een sleutelwoord wat simpelweg betekent dat een variabele niets bevat, dus ook geen nul. De variabele heeft gewoonweg geen waarde.

JavaScript-code:Een null object opslaan

var niets = null;

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.

[bewerken] Wiskundige operatoren

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 die als waarde 10 heeft.

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

[bewerken] "+"-operator

Hoewel de "+"-operator een wiskundige operator is kun je het ook gebruiken met strings. Namelijk om ze samen te voegen.

JavaScript-code:Tekst samenvoegen

var tekst = "Dit is tekst";
tekst = tekst + ", nog meer tekst."

Dit is tekst, nog meer tekst.

Let wel op: als je een getal en een string samenvoegt krijg je altijd een string als resultaat.

[bewerken] Toewijzingsoperatoren

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	Het zelfde 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

[bewerken] Vergelijkingsoperatoren

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

[bewerken] Logische operatoren

4. Conditionele statements

Conditionele of voorwaardelijke statements zijn essentieel in een programma. Ze laten je toe 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.

[bewerken] De if-statement

[bewerken] De gewone if

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'.
}

[bewerken] if ... else

if ... else laat toe om code uit te voeren als er niet wordt voldaan aan de voorwaarde van de if.

JavaScript-code:De gewone if

var x = 5;
var y = 10;
if(x == y){
	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.

[bewerken] if ... else if ... else

Deze structuur laat toe 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 laat deze structuur ook toe om uit meer dan 3 blokjes code te bepalen 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 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 voorwaare hebben zoals "x == 10" en een andere else if mag danweer een boolean hebben als voorwaarde.

[bewerken] De switch

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.

[bewerken] for

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 lust 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=0;
for (i=1;i<=10;i++){
	document.write("Variabele i: " + i + "<br />");
}

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

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=1;
for ( ;i<=10; ){
	document.write("Variabele i: " + i + "<br />");
	i++;
}

[bewerken] while

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.

[bewerken] do ... while

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.

[bewerken] break en continue

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:break

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

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.

[bewerken] Functies aanmaken

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 script 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 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.

[bewerken] De return

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 variabel door te sturen naar een andere variabel 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>

[bewerken] Waar functies plaatsen

Functies kun je om het even waar plaatsen in een script en om het even waar in het HTML-document. Toch wordt er aangeraden om ze in het head-element van het HTML-document te zetten. Zo ben je 100% zeker dat al de functies zijn geladen voor ze worden gebruikt door het script.

JavaScript-code:

<html>
	<head>
		<script type="text/javascript">
			function hallowereld(){
				document.write("Hallo Wereld!<br />");
			}
		</script>
	</head>
 
	<body>
		<script type="text/javascript">
		<!--
			hallowereld();
		// -->
		</script>
	</body>
</html>

Een script met functies in de head plaatsen is hetzelfde als een script in de body plaatsen, dus hier moet je normaal gezien geen problemen mee hebben. Als je meerdere pagina's hebt die dezelfde functies gebruiken kun je ze ook in een extern JavaScript-bestand plaatsen, meestal een .js-bestand.

JavaScript-code:.js bestand

function hallowereld(){
	document.write("Hallo Wereld!<br />");
}

Een .js opnemen in een HTML-document is heel simpel; je doet gewoon het volgende:

JavaScript-code:HTML document

<script type="text/javascript" src="script.js"></script>

De src-attribuut moet de locatie bevatten van het externe JavaScript.

7. Events

Programmeren in JavaScript/Events

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.

[bewerken] try en catch

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 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 en is een variabele die een object bevat waarmee je enkele dingen mee kant 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 gebeurt. 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.

[bewerken] throw

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);
	}

[bewerken] finally

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.

Programmeren in JavaScript/Printversie

Uit Wikibooks

[bewerken] Inhoudsopgave

[bewerken] De inhoud van dit deel

[bewerken] Scripts opnemen

[bewerken] Waar je script plaatsen

[bewerken] Je eerste scriptje (Hallo Wereld!)

[bewerken] Commentaar

[bewerken] Variabelen declareren

[bewerken] Gevens in een variabele plaatsen

[bewerken] Types variabelen

[bewerken] Wiskundige operatoren

[bewerken] "+"-operator

[bewerken] Toewijzingsoperatoren

[bewerken] Vergelijkingsoperatoren

[bewerken] Logische operatoren

[bewerken] De if-statement

[bewerken] De gewone if

[bewerken] if ... else

[bewerken] if ... else if ... else

[bewerken] De switch

[bewerken] for

[bewerken] while

[bewerken] do ... while

[bewerken] break en continue

[bewerken] Functies aanmaken

[bewerken] De return

[bewerken] Waar functies plaatsen

[bewerken] try en catch

[bewerken] throw

[bewerken] finally

Weergaven

Persoonlijke instellingen

Navigatie

Zoeken

zusterprojecten

Afdrukken/exporteren

Hulpmiddelen