Inleiding

JavaScript is een scripttaal. Een script is een programma dat opgenomen is binnen een html-document. Met JavaScript kun je scripts programmeren.

JavaScript biedt mogelijkheden die html niet heeft. Met JavaScript kun je bijvoorbeeld berekeningen maken in formulieren. Je kunt in een bestelformulier het totaal van de bestelde artikelen optellen of controleren of bepaalde velden binnen een formulier wel ingevuld zijn door de bezoeker. Verder kan je interactie programmeren naar aanleiding van bepaalde handelingen van een bezoeker.

JavaScript is een uitbreiding van html net als CSS. Zoals je CSS kunt gebruiken om bepaalde opmaak toe te voegen aan een html-pagina, zo gebruik je JavaScript om dynamische effecten en interactiviteit  toe te voegen.

JavaScript is een scripttaal die je gebruikt aan de cliëntkant van WWW. De taal is niet geschikt voor het maken van programma’s op de server. Hiervoor gebruik je PHP of ASP.

Je kunt net als bij css een script in een extern bestand plaatsen en dan koppelen aan een html-bestand. een extern Javascript-bestand heeft de extentie .js.

Doel van deze training

In deze training leer je de basisprincipes van scripten. Je zult merken dat in veel scripttalen dezelfde principes gebruiken zoals werken met variabelen, voorwaardelijke statements, enz. Verder leer je hoe je met behulp van Javascript kunt werken met de elementen van een html-pagina. In het laatste hoofdstuk maak je kennis met jQuery.

Hoe is de training opgebouwd?

Deze training bestaat uit 7 hoofdstukken:

• introductie scripten
• statements en variabelen
• functies en events
• objecten 1
• objecten 2
• het object document
• formulieren
• jquery

Hoe maak je deze training?

Elke hoofdstuk bestaat uit theorie afgewisseld met oefeningen. Lees steeds de tekst door en maak deze oefeningen. Wanneer je een hoofdstuk hebt doorgewerkt, maak je de opdracht die bij dit hoofdstuk hoort. deze opdrachten moet je inleveren. Maak hiervoor een index-pagina met een link naar de verschillende opdrachten. lever het geheel in als .zip bestand.

Hoe lang ben je er mee bezig?

Deze training heeft studiebelasting van 40 uur.

Wat moet je kunnen/ kennen/ bewijzen aan het eind van deze training?

Om deze training af te sluiten moet je alle eindopdracht inleveren.

Waar kun je meer informatie vinden over het onderwerp?

Er zijn erg veel tutorials op Internet de vinden. Een paar voorbeelden:

• http://www.w3schools.com
• http://javascript.internet.com
• http://www.websitemaken.be
• http://jquery.com/

Introductie scripten

JavaScript en html

JavaScript is een taal die je kunt gebruiken om de functionaliteit van webpagina’s uit te breiden. Het is een aanvulling op html. Een script maakt altijd deel uit van een webpagina en is ook in de html-broncode opgenomen.

Een script wordt door de browser, net als de overige html-code regel voor regel afgewerkt, in de volgorde waarin ze getypt zijn.

Je kunt meerdere scripts opnemen in één html-document.

Een html-document waarin je gebruikt maakt van JavaScript wordt, net als alle andere html-documenten, getypt in het programma Kladblok.

Dreamweaver is behalve een html-editor ook een JavaScript-editor. Verder zijn op internet verschillende editors beschikbaar om te programmeren in JavaScript. In deze module wordt hier niet verder op ingegaan.

(naar boven)

Het verschil tussen programma’s en scripts

JavaScript is een scripttaal en geen programmeertaal. Er zijn grote verschillen tussen scripttalen en programmeertalen:

• Met een scripttaal kun je scripts maken. Een script is een (deel)programmaatje dat aangeroepen wordt binnen een ander programma. Met een programmeertaal schrijf je programma’s die zelfstandig kunnen functioneren.
• Een programma dat geschreven is met een programmeertaal wordt meestal gecompileerd. Een gecompileerd programma wordt ook wel een applet genoemd. De oorspronkelijk code is na het compileren niet meer te zien. Een script is altijd platte tekst en wordt verwerkt door een interpreter.
  Wanneer er binnen een html-pagina een script is gebruikt, is dit altijd te zien in de broncode van het document. Omdat het script iedere keer bij het inlezen opnieuw vertaald moet worden, is een script langzamer dan een applet.
• Hoe het script verwerkt wordt, is afhankelijk van de interpreter. Hierdoor kan het resultaat van een script in Firefox er anders uitzien dan in Internet Explorer. Ook worden de scripts door de verschillende versies van de browsers anders ondersteund omdat er een andere interpreter is ingebouwd.
  Een applet is altijd platformonafhankelijk. Dit wil zeggen dat de applet altijd hetzelfde resultaat geeft op welke computer de applet ook draait.
• In een script worden alleen de functies van het programma opgenomen. In een applet zijn ook opdrachten opgenomen die onder andere het geheugenbeheer en de schermindeling bepalen. Zo zijn er in het programma van een browser dat geschreven is met een programmeertaal, duizenden regels opgenomen waarin is vastgelegd hoe bijvoorbeeld de schermen zijn opgebouwd, hoe de standaardknoppen er uit zien en hoe het programma gebruik maakt van het intern geheugen. Een script dat je schrijft met behulp van JavaScript maakt gebruik van de programmacode van de browser.
• en scripttaal is meestal eenvoudiger te leren dan een programmeertaal.

(naar boven)

jQuery

jQuery is een zeer grote javascript functies Bibliotheek. Het includen van jQuery op je website is in feite dan ook niets anders als het includen van een groot aantal handige functies die geschreven zijn in JavaScript en die je kunt gaan gebruiken. Om goed te kunnen werken met jQuery is het handig dat je iets weet van JavaScript.

Objectgeoriënteerde talen

JavaScript is een object-gebaseerde scripttaal.

Bij een objectgeoriënteerde programmeertaal wordt alle elementen gezien als een object. Bijvoorbeeld een knop is een object met bepaalde eigenschappen bijvoorbeeld een opschrift, grootte of kleur. Het object kan overal in het programma gebruikt worden, waarbij je de eigenschappen kunt laten veranderen wanneer een gebruiker bepaalde handelingen verricht.

JavaScript benadert alle elementen in een html-document als object. Voorbeelden van de objecten in JavaScript zijn het document, een tabel, een formulier of een formulierveld.

(naar boven)

Syntaxis

JavaScript heeft net als elke andere taal een syntaxis. Elke regel met code moet voldoen aan vaste taalregels. Elke punt, komma, spatie of ander teken heeft een betekenis. Zodra je een (typ)fout hebt gemaakt, geeft het script een foutmelding. JavaScript is hierin strenger dan html. In html kun je nog wel bepaalde eindtags vergeten of hoofdletters en kleine letters door elkaar gebruiken. JavaScript staat dit niet toe! De taal is hoofdlettergevoelig.

Alle scripts moet je testen in Firefox en in Internet Explorer om te kijken of in de browsers het juiste resultaat bereikt wordt.

Debuggers

In browsers zijn debuggers ingebouwd. Debuggers zijn programma’s die helpen om fouten in het script op te sporen.

Wanneer een fout script ingelezen wordt in Internet Explorer, verschijnt een venster met een waarschuwing. Wanneer je bevestigt dat je de fout wilt opsporen, wordt de debugger gestart.

In het programma wordt de broncode van het document weergegeven. Hierbij wordt gebruikt gemaakt van verschillende kleuren voor verschillende elementen in het document. De regel waarop het script vastloopt is meestal gemarkeerd. Dit wil niet altijd zeggen dat de fout (=bug) ook in deze regel is gemaakt. De fout kan worden veroorzaakt in eerdere delen van het script.

Bedenk wel: de meeste fouten die je maakt, zijn net als bij html, typefouten!!

(naar boven)

De eerste scripts

Een script moet geplaatst worden tussen de html-tag <script> </script>. Binnen deze tags kun je JavaScript opdrachten en html-tags plaatsen. De tag <script> heeft een tweetal attributen:

language=”JavaScript”

src=”bestand.js”

Met language=”JavaScript” geef je aan in welke taal het script is geschreven.

Het attribuut src=”bestand.js” gebruik je wanneer je het script opslaat in een apart bestand. Dit kan je vergelijken met het gebruik van een extern stijlblad.

Je moet rekening houden met dat scripts geblokkeerd kunnen worden. .De browser herkent dan de JavaScript tags niet en zal alle tekst tussen de tags niet als JavaScript gebruiken, maar gewoon exact hetzelfde op het scherm tonen. Om dit op te lossen gebruik je de html commentaar tags: <!-- en //-->.

Oefening:

1. Open in Dreamweaver of in een andere editor een nieuw html-document.
2. Type het volgende script en test het in een browser.

<html>
<head>
<title> Het eerste document met javascript.
</title>
</head>
<body>
<p>Dit is een normaal html document.</p>

<script language="javascript">
<!-- verbergen voor browsers zonder javascript
document.write ("Dit is javascript!");
//--> einde verbergen voor browsers zonder javascript.
</script>
<p>Nu ben je weer terug in de html pagina.</p>
</body>
</html>

Het grootste deel van de listing is een gewoon html-document. Alleen het deel tussen de tags <script>… </script> is een script. Ook in dit deel zijn html-tags gebuikt voor commentaar.  

De regel document.write ("dit is JavaScript!"); is in de listing eigenlijk de enige opdracht in JavaScript. Met de opdracht document.write wordt de tekst die er achter tussen haakjes en aanhalingstekens is geplaatst, op het scherm getoond.

Elke regel JavaScript wordt een statement genoemd. Een statement binnen een script wordt afgesloten met een puntkomma (;).

In de regel voor het einde van het script is een dubbele slash (//) geplaatst. Dit zijn de tekens die je gebruikt om commentaar te geven binnen een JavaScript. De regel achter // is niet zichtbaar voor de bezoeker. Wil je binnen het script meerdere regels commentaar plaatsen, dan gebruik je de codes /* aan het begin van de commentaarregels en de codes */ om het commentaar af te sluiten.

Het scheelt een hoop werk, wanneer je het bestand standaard.html, dat je hebt gebruikt in de training html, aanpast voor het gebruik van JavaScript.

Oefening:

1. Maak het volgende bestand en bewaar het onder de naam standaardjs.html.

2. Gebruik het bestand om onderstaande listing te maken en bewaar het geheel onder de naam locatie.html en test het document.

<html>
<head>
<title>
Voorbeeld van html-tags binnen een script
</title>
<script language="javascript">
<!--
//-->
</script>
</head>
<body>
<script language="javascript">
<!--
document.write('<h1>Welkom op mijn eerste pagina met een javascript</h1>');
document.write('<h2>Deze pagina is opgeslagen op de volgende locatie:</h2>' + document.location );
//-->
</script>
<hr>
</body>
</html>

.

(naar boven)

Objecten, eigenschappen en functies

De regel document.write('Welkom op mijn eerste pagina met een JavaScript’); is een voorbeeld van het gebruik van objecten in JavaScript.

Het object document is de hele inhoud van het browservenster. Het venster zelf is ook een object. Dit object wordt window genoemd.

Elk object heeft bepaalde eigenschappen. Een eigenschap wordt meestal een propertie genoemd. Een eigenschap van het object document is bijvoorbeeld de achtergrondkleur (document.bgcolor). Een eigenschap van het object window is de statusbalk (window.statusbar).

Met objecten kun je bepaalde handelingen verrichten. Je kunt bijvoorbeeld tekst in het object document schrijven. Hiervoor is de methode (methode of functie) document.write() beschikbaar.

Een functie is een stukje kant-en-klaar programmatuur waarin een aantal opdrachten zijn ondergebracht. Het aanroepen van de functie heeft tot gevolg dat deze opdrachten worden uitgevoerd. Wanneer een functie speciaal ontwikkeld is om bepaalde handelingen te verrichten met een object, dan wordt de functie een methode genoemd.

Het object en de eigenschappen of methodes worden gescheiden door een punt.

Achter een methode staan altijd haakjes. Hieraan kun je het verschil zien tussen een methode en een propertie. Binnen de haakjes kunnen de argumenten van de methode geplaatst worden. In het voorbeeld is het argument: 'Welkom op mijn eerste pagina met een JavaScript’

Omdat het argument in het voorbeeld een letterlijke tekst is, moet het tussen aanhalingstekens geplaatst worden. Je kunt aan een methode meerdere argumenten koppelen. De volgende regel is hier een voorbeeld van.

document.write('<H2>Deze pagina is opgeslagen op de volgende locatie:</H2>' + document.location );

Het object document kent meerdere methodes en meerdere eigenschappen. Een ander voorbeeld van een eigenschap van het object document is location. Het geeft de URL aan van het document. Met andere woorden: Het object document heeft een eigenschap location, waarin de locatie van het huidige document is opgeslagen.

(naar boven)

Events

Niet alle JavaScript-opdrachten worden tussen de tags <script></script> geplaatst. De onderstaande listing geeft hier een voorbeeld van.

<html>
<head>
<title>
Voorbeeld van javascript gekoppeld aan een html-tag
</title>
</head>
<body >
<form>
<input type="button"value="klik hier" onclick="alert('een'+ ' waarschuwingsvenster in javascript')">
</form>
<hr>
</body>
</html>

De functie alert() toont een venster. De functie wordt pas uitgevoerd nadat de bezoeker op de knop heeft gedrukt. Het klikken op een knop is een event (=gebeurtenis). onClick()  wordt een eventhandler genoemd.

De argumenten van deze eventhandler staan tussen de haakjes.

De eventhandler onClick() kan alleen gebruikt worden wanneer de bezoeker ook ergens op kan klikken.

Aanklikbare objecten in een html-document zijn knoppen en hyperlinks. Deze eventhandler kan hierdoor alleen gebruikt worden in combinatie met de html-tags voor knoppen en hyperlinks. De algemene schrijfwijze voor eventhandlers is:

<tag eventhandler =’JavaScriptcode’>

JavaScript kent meer eventhandlers. Deze worden in een apart hoofdstuk verder behandeld.

Oefening:

1. Maak het bovenstaande script en test deze in de browser.

(naar boven)

Statements en variabelen

Inleiding

Een script kan opgebouwd worden uit verschillende elementen. In dit hoofdstuk maak je kennis met de elementen statements, variabelen en operatoren.

Statements

Elk script is opgebouwd uit één of meer statements. Elk statement bevat een afgeronde opdracht. Een statement kan bijvoorbeeld een methode oproepen van een object of een waarde toekennen aan een variabele.

Een statement kan bestaan uit meerdere tekstregels. Met een puntkomma wordt een statement afgesloten. Wanneer je de puntkomma vergeet, geeft de browser dit niet aan als fout. Toch is het aan te bevelen om deze puntkomma wel te gebruiken, omdat je het script dan beter kunt lezen.

In een statement wordt onderscheid gemaakt tussen hoofdletters en kleine letters. Dit geldt zeker voor de gereserveerde woorden (keywords) van JavaScript. Keywords zijn woorden die JavaScript voor een bepaald doel gebruikt.

(naar boven)

Variabelen

Een variabele is een geheugenplaats waar je een bepaald gegeven in op kunt slaan die je later in het script kunt gebruiken. Een variabele heeft een naam en een bepaalde inhoud. De waarde van een variabele kan door bepaalde statements veranderen, de naam van de variabele blijft hetzelfde.

Bij veel programmeertalen is het voorschrift dat een variabele eerst wordt gedeclareerd, voordat de variabele gebruikt wordt. Een variabele declareren betekent dat je een bepaalde geheugenruimte reserveert door er een (variabele)naam aan toe te kennen en hier een waarde aankoppelt. Bij JavaScript is dit niet noodzakelijk. Variabelen worden gecreëerd op het moment dat er een waarde aan een nieuwe naam wordt toegekend. Het is wel een goede gewoonte om een variabele eerst te declareren.

De naam van een variabele

De naam van een variabele wordt ook wel een identifier genoemd. Dit woord wordt ook gebruikt in de foutmeldingsvensters van de interpreter.  Je bent vrij om een naam voor een variabel te kiezen, zolang je rekening houdt met de volgende regels:

• Namen mogen geen spaties of leestekens bevatten. Alleen de underscore (_) is toegestaan.
• Het eerste teken van de naam moet een letter of een underscore zijn.
• Je mag geen keyword als naam voor een variabele gebruiken.

Kies altijd een logische naam voor een variabele. Wanneer je later het script leest zegt de naam adres meer over de inhoud van de variabele dan de naam a.

Variabelen declareren

Met het keyword var kun je een variabele declareren. In het volgende statement wordt een geheugenplaats gereserveerd voor een variabele met de naam test. De varabele heeft nog geen waarde.

var test;

Je kunt een waarde toekennen aan een variabele met de operator “=”.

var test = ”Dit is en test”;

Je kunt verschillende typen gegevens toekennen aan variabelen:

Wanneer een variabele is gedeclareerd, kan de variabele overal in het script gebruikt worden. In het onderstaande voorbeeld worden vier variabelen gedeclareerd en gebruikt in een tekst dat op het scherm verschijnt.

Oefening:

1. Maak de bovenstaande listing en bekijk het resultaat in de browsers.
2. Maak zelf een document met een script waarin variabelen worden gedeclareerd en die de waarde van de variabelen afdrukt op het scherm. Het script moet het onderstaande resultaat geven.
   De gebruikte variabelen zijn:
1. Leeftijd= (je eigen leeftijd)
2. Naam= (je eigen naam)
3. Woonplaats ( je eigen woonplaats)

(naar boven)

Waarden toekennen met behulp van invoer-schermen

Je kunt de waarde van een variabele ook laten toewijzen door de bezoeker van een pagina. Hiervoor moet je zorgen dat een invulvenster verschijnt, waarin de bezoeker een waarde op kan geven.

In het onderstaande script zorgt de functie prompt() voor een invoervenster waarin de bezoeker een string in kan typen. De ingevoerde waarde wordt toegekend aan de variabelennaam. De functie heeft twee argumenten. Het eerste argument is de melding die in het venster verschijnt, het tweede argument bepaald de standaardwaarde van het invoerveld. Wanneer een bezoeker niets invult, wordt de standaardwaarde aan de variabele toegekend.

<html>
<head>
<title>
Voorbeeld met een variabele ingevoerd door de bezoeker.
</title>
</head>
<body >
<script language="JavaScript">
<!--
var naam = prompt ('Typ je naam', 'bezoeker')
document.write(' <h2>Hallo ' + naam + '</h2> <hr> <p> Fijn dat je mijn website bezoekt </p>');
document.write('<p>Dag, tot ziens ' + naam + '</p>');
//-->
</script>
</body>
</html>

Dat de waarde die ingevoerd wordt een string is, bewijst het volgende script:

<html>
<head>
</head>
<body >
<script language="JavaScript">
<!--
var getal1 = prompt ('geef een getal', 0)
var getal2 = prompt ('geef nog een getal', 0)
var getal3 = getal1 + getal2
document.write(' Het eerste getal dat je invoerde was: ' + getal1);
document.write(' <p>Het tweede getal dat je invoerde was: ' + getal2);
document.write('</p><p>De getallen samen zijn: ' + getal3 + '</p>');
//-->
</script>
</body>
</html>

Wanneer dit script wordt uitgevoerd, is het volgende resultaat te zien in de browser:

Het eerste getal dat je invoerde was: 34
Het tweede getal dat je invoerde was: 34
De getallen samen zijn: 3434

De getallen zijn niet opgeteld, maar achter elkaar “geplakt“. Met strings kun je namelijk niet rekenen. JavaScript kent de functie parseFloat() om een string om te zetten in een numerieke waarde. Wanneer je de invoer van een gebruiker wilt omzetten om hier een berekening mee uit te voeren, moet je deze functie gebruiken:

<html>
<head>
</head>
<body >
<script language="JavaScript">
<!--
var getal1 = parseFloat(prompt('geef een getal', 0));
var getal2 = parseFloat(prompt('geef nog een getal', 0));
var getal3 = getal1 + getal2;
document.write('Het eerste getal dat je invoerde was: ' + getal1);
document.write('<BR>Het tweede getal dat je invoerde was: ' + getal2);
document.write('<BR>De getallen samen zijn: ' + getal3);
//-->
</script>
</body>
</html>

Oefening:

1. Probeer beide scrips uit.
2. Maak zelf een document met een script die uiteindelijk het volgende resultaat geeft. Je kunt hiervoor delen van scripts gebruiken die je al eerder hebt gemaakt. De gebruikte variabelen zijn:
1. naam = (eigen naam)
2. leeftijd = (eigen leeftijd)
3. naam_bezoeker = de bezoeker kan zijn/ haar naam invoeren.
4. leeftijd_bezoeker = de bezoeker kan zijn/haar leeftijd invoeren
5. verschil_leeftijd= leeftijd - leeftijd_bezoeker

(naar boven)

Operatoren

In de vorige alinea heb je kennis gemaakt met drie verschillende operatoren om een waarde toe te kennen aan variabelen: =, -  en +. JavaScript kent nog vele andere operatoren. Deze operatoren zijn onder te verdelen in verschillende groepen. Alleen de meest gebruikte operatoren worden in deze module besproken.

Toewijzingsoperatoren

Toewijzingsoperatoren worden gebruikt om rechtstreeks een waarde toe te kennen aan een variabele. In de onderstaande regels verandert de waarde van A steeds:

Wiskundige operatoren

Met wiskundige operatoren kun je berekeningen uitvoeren op variabelen.
In de onderstaande regels verandert de waarde van A steeds:

Logische operatoren

Logische operatoren worden gebruikt bij booleaanse expressies. Deze zijn behandeld in de module Access. Ze kijken of een bepaalde expressie WAAR of ONWAAR is. Een logische operator wordt meestal gebruikt in combinatie met een vergelijkingsoperator. Een voorbeeld met logische en vergelijkingsoperatoren is:

Var uitkomst= Woonplaats ==‘Amsterdam‘||woonplaats == “Den Haag”

Deze zin kun je lezen als:
Variabele uitkomst krijgt de waarde WAAR wanneer de variabele Woonplaats de waarde ‘Amsterdam’ bevat OF wanneer de variabele Woonplaats de waarde ‘Den Haag’ bevat.
De variabele uitkomst krijgt de waarde ONWAAR wanneer de variabele woonplaats een andere waarde heeft.
In de volgende voorbeelden heeft A de waarde 5 en B de waarde 10:

Volgorde bewerkingen

Wanneer je meerdere operatoren in één statement gebruikt, worden de verschillende operatoren in een bepaalde volgorde verwerkt.
Bij de onderstaande statement krijgt de variabele uitkomst een heel andere waarde toegekend wanneer eerst 2 en 4 bij elkaar worden opgeteld en dan vermenigvuldigd met 25 dan wanneer eerst vermenigvuldigd wordt en dan pas opgeteld.

Var uitkomst= 2 + 4 * 25 / 5

De volgorde waarop de interpreter de operatoren afwerkt is:

• Haakjes
• Complement, ++ en –
• Vermenigvuldigen en delen
• Optellen en aftrekken
• Vergelijkingsoperatoren (<, >, <=,
• Is-gelijk-aan en is-ongelijk-aan (==, !=)
• AND (&&)
• OR (||)
• Toewijzingsoperator (=)

Wanneer in een statement meerdere operatoren worden gebruikt die gelijkwaardig zijn, worden de operatoren van links naar rechts afgewerkt.

Oefening:

1. Welke waarde heeft de variabele uitkomst na de volgende statements?
1. Uitkomst = 3*5
2. Uitkomst = uitkomst * 2
3. Uitkomst -= 5
4. Uitkomst ++
5. Uitkomst /=2
2. Welke waarde heeft de variabele uitkomst. De variabele A heeft de waarde 4 en B heeft de waarde 12. 
1. Uitkomst (B==A)
2. Uitkomst (B=A) || (A<B)
3. Uitkomst (B=A) && (A<B)
4. Uitkomst (B>=12) || (A=<5)
3. Welke waarde krijgt de variabele A in de volgende statements?
   1. Var A=5 + 2 * 4
   2. Var A= (5 + 2 ) * 4
   3. Var A= 4 - 2 * 6 / 3
   4. Var A= 3 * 6  => 30 /2

(naar boven)

Functies en voorwaardelijke statements

Functies

In een script maak je vaak gebruik van functies. In een functie is een aantal opdrachten samengebracht die worden opgeslagen onder één naam. Wanneer je in het script functie aanroept (= de naam van de functie gebruikt), worden de opdrachten van de functie uitgevoerd. Je kunt functies beschouwen als kleine programma's binnen het script.
JavaScript heeft zelf veel functies ingebouwd. Je hebt in de vorige hoofdstukken al kennis gemaakt met de functies alert(), prompt(), document.write en parseInt().

Elke functie heeft een naam. Voor de namen van de functies gelden dezelfde regels als voor variabelen.

In een functie kun je gebruik maken van argumenten of parameters. Deze worden tussen haakjes achter de naam van de functie geplaatst. Het gebruik van parameters is niet verplicht, de haakjes wel. De parameters worden door een komma van elkaar gescheiden. Zo heeft de functie prompt() twee parameters. De eerste parameter is de tekst in het venster, de tweede parameter geeft de standaardwaarde van het tekstveld in het venster. Bijvoorbeeld: 

prompt ('Typ je naam', 'bezoeker')

(naar boven)

Functies definiëren

Je kunt ook zelf functies definiëren. Je maakt zelf een functie wanneer je een bepaalde taak in een script vaker wilt gebruiken.

Bijvoorbeeld:

<html>
<head>
</head>
<body>
<script language="javascript">
<--
document.write("Welkom op mijn site<br>");
document.write("Ik hoop dat u vaker terug komt!<br>");

document.write("Welkom op mijn site<br>");
document.write("Ik hoop dat u vaker terug komt!<br>");

document.write("Welkom op mijn site<br>");
document.write("Ik hoop dat u vaker terug komt!<br>");
//-->
</script>
</body>
</html>

Dit script zal als resultaat 3 keer de tekst "Welkom op mijn site. Ik hoop dat u vaker terug komt!" weergeven op het scherm. Dit is drie keer exact hetzelfde. Voor dit soort opdrachten kun je in JavaScript een functie definiëren.  Een functie wordt gedefinieerd met het keyword function. Het statement waarin je de functie definieert, heeft de volgende opbouw:

functie functienaam (parameter1, parameter2, …)
{
//functieopdrachten;
}

Alle opdrachten die je wilt laten uitvoeren wanneer je de functie aanroept, staan tussen accolades. Dit deel wordt de body van de functie genoemd.

Voorbeeld van een script met een functie:

<html>
<head>
<script language="javascript>
<!--
function welkom()
{
document.write("Welkom op mijn site<br>");
document.write("Ik hoop dat u vaker terug komt!<br>");
}
//-->
</script>
</head>
<body>
<h1> Hallo! </h1>
<hr>
<script language="javascript>
<!--
welkom();
welkom();
welkom();
//-->
</script>
</html>

Een functie definieer je meestal in een script dat geplaatst is in de kop van het html-document, dus tussen de tag <head> </head>. Hierdoor wordt de functie als eerste ingelezen en is ze bereikbaar voor alle scripts die verder in de webpagina voorkomen.

In het bovenstaande voorbeeld wordt in de kop van het document de functie welkom gedefinieerd. De functie heeft geen argumenten want er is niets tussen de haakjes geplaatst. In de body van de functie is tweemaal de functie document.write geplaatst met verschillende parameters. Je kunt dus in een functie andere functies gebruiken. Andere taken die je kunt laten uitvoeren in een script zijn onder andere vergelijkingen uitvoeren, variabelen declareren of expressies evalueren.

(naar boven)

Voorbeelden van functies

Een voorbeeld van een functie waarbij wel gebruikt gemaakt wordt van parameters:

<html>
<head>
<script language="javascript">
<!--
function regel(naam,leeftijd)
{
document.write("Mijn naam is ",naam," en ik ben ",leeftijd, " jaar.<BR>");
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
regel ("Maryan",41)
regel ("Lucia", 35)
regel ("Netty", 56)
//-->
</script>
</body>
</html>

Een voorbeeld van een functie waarin variabelen gedeclareerd worden:

              
<html>
<head>
<script language="javascript">
<!--
function Loon()
{
var y=10;
var x=8;
var uitbetalen= x*y;
alert(uitbetalen)
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Loon" onclick="Loon()">
</form>
</body>
</html>

Oefeningen

1. Maak de bovenstaande html-documenten en bekijk het resultaat in de browser.
2. Lees het volgende html-document en bedenk wat het resultaat op het scherm zal zijn. Maak hierna het document en bekijk of het resultaat overeenkomt met je verwachtingen.

<html>
<head>
<title> Een rekenfunctie</title>
<script language="JavaScript">
<!--
function bereken(a, b)
{
// converteer de strings naar getallen
a = parseFloat (a);
b = parseFloat (b);
//schrijf resultaten naar het scherm.
document.write('De getallen die u invoerde waren :<b> ', a, ' en ', b, '</b><hr>');
document.write( a , ' plus ', b, ' = <b>', a + b, '</b><br>');
document.write( a , ' min ', b, ' = <b>', a - b, '</b><br>');
document.write( a , ' maal ', b, ' = <b>', a * b, '</b><br>');
document.write( a , ' gedeeld door ', b, ' = <b>', a / b, '</b><br>');
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
var getal1 = prompt ('Voer het eerste getal in: ', 0);
var getal2 = prompt ('Voer nu een tweede getal in: ', 0);
bereken (getal1, getal2);
// -->
</script>
</body>
</html>

1. Lees ook het volgende document en bedenk wat het resultaat van de scripts zullen zijn. Probeer hierna of het resultaat werkelijk is zoals je had bedacht.

<html>
<head>
<title>een functie voor het maken van een tabel</title>
<script language="JavaScript">
<!--
function rij(voornaam,achternaam,woonplaats)
{
document.write ('<tr><td>',voornaam,'</td><td>',achternaam,'</td><td>', woonplaats , '</td></tr>');
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
document.write('<table border=1>');
rij("Voornaam", "Achternaam", "Woonplaats");
rij("Maryan","Kohoot", "Den Haag");
rij("Lisa","Ponit","Utrecht");
rij("Gina", "Ewijk", "Amsterdam");
document.write('</table>');
// -->
</script>
</body>
</html>

(naar boven)

Voorwaardelijke statements met if()

In de meeste statements die je tot nu toe hebt gebruikt, heb je een bepaalde variabele gedeclareerd. Je kunt in een statement ook een voorwaarde inbouwen die bepaalt welke statements wel of niet worden uitgevoerd of hoe vaak een statement wordt uitgevoerd.

In deze voorwaardelijke statements wordt een vergelijking gemaakt. Wanneer de uitkomst van de vergelijking waar is wordt een andere regel van het script uitgevoerd dan wanneer de uitkomst niet waar is. Een voorbeeld in gewone spreektaal is de regel:

Als het niet regent, ga ik met de fiets, anders met de tram.

In JavaScript kan je van deze regel de volgende statement maken:

if (weer!='regen')
{
document.write ('Ik ga met de fiets');
}
else
{
document.write ('Ik ga met de tram');
}

In de eerste regel van het statement staat de expressie:

als de variabele weer ongelijk is aan regen.

Wanneer deze expressie de uitkomst WAAR (TRUE) heeft, worden de programmaregels tussen de eerste accolades uitgevoerd. Binnen de accolades kun je zoveel statements plaatsen als dat je zelf wilt.

Wanneer de expressie in de eerste regel ONWAAR (FALSE) is, dan worden de regels tussen de accolades na het woord else uitgevoerd.

Het gebruik van het keyword else is niet verplicht. Wanneer je alleen if() gebruikt en er wordt niet voldaan aan de voorwaarde, dan gaat JavaScript verder met de uitvoering van de eerst volgende regel na het if-statement.

                   
<html>
<head>
<title>hallo</title>
</head>
<body>
<script language="JavaScript">
<!--
naam = prompt ("Wat is uw naam", "")
if (naam=="")
{
naam= "anoniem"
}
if (naam=="anoniem")
{
document.write("Jammer dat u geen naam niet wilt opgeven!");
}
else
{
document.write("<h2>Hallo ",naam, "</h2><br>");
document.write("Leuk dat je mijn pagina bezoekt!");
}
// -->
</script>
</body>
</html>

In de eerste regel van het script wordt de bezoeker om een naam gevraagd. De variabele naam krijgt de waarde van de invoer.

In het eerste if-statement wordt er gekeken of de bezoeker wel een naam heeft ingevuld (naam==("")). Wanneer dat het geval is, wordt aan de variabele de waarde anoniem toegekend. Wanneer de vergelijking niet waar is, dan gaat JavaScript gewoon verder met het volgende statement. Er is geen else gebruikt.

In het tweede if-statement is er wel een else gebruikt. Wanneer de vergelijking naam=="anoniem" waar is komt de tekst Jammer dat u geen naam niet wilt opgeven! op het scherm. Wanneer de bezoeker wel een naam heeft ingevuld, worden de regels na het keyword else uitgevoerd.

Oefeningen

1. Maak van het bovenstaande script een html-document.
2. Maak een html-document waarin de gebruiker gevraagd wordt om een getal onder de 10 in te voeren. Zorg er voor dat er gecontroleerd wordt of het getal wel lager dan 10 is. 
   Wanneer een te hoog getal wordt ingevoerd, is het resultaat op het scherm de volgende regels:
   

U gaf het getal 23.
Dit getal is niet kleiner dan 10

Wanneer een getal onder de 10 wordt ingevuld, wordt het getal vermenigvuldigd met 2. Het resultaat op het scherm is dan:

U gaf het getal 3.
Tweemaal het getal is 6

(naar boven)

Voorwaardelijke statements met while()

In een script kan het noodzakelijk zijn dat bepaalde statements een aantal malen herhaald worden. Een deel van het script dat steeds herhaald wordt, wordt een programmalus genoemd. Je gebruikt een voorwaarde om te bepalen hoe vaak de regels herhaald moeten worden.
Met het statement while() kun je de uitvoering van het script beïnvloeden.
De algemene vorm van het statement is:

while (voorwaarde==true)
{
statements;
}

Je kunt dit vergelijken met de gewone zin: Zolang het nog regent ga ik met de tram.

Voorbeeld met het statement while():

                  
<html>
<head>
<title>de tafel van 5</title>
</head>
<body>
<h1> De tafel van 5</h1>
<hr>
<script language="JavaScript">
<!--
var lus = 1;
var getal = 5;
while (lus <= 10)
{
document.write(lus, ' x ', getal , '= ', lus*getal, '<br>');
lus++; 
}
// -->
</script>
</body>
</html>

Het script begint met statements waarin de variabelen lus en getal worden gedefinieerd. De waarde van getal is het getal waarvan je de tafel wilt tonen.

De variabele lus is de teller. De beginwaarde van lus is 1. In de regel while (lus<=10) wordt er gekeken of de waarde van de variabele lus kleiner of gelijk is aan 10. Wanneer dit het geval is, worden de regels tussen de accolades uitgevoerd.

In het eerste statement wordt een regel op het scherm geplaatst. In de tweede regel wordt de waarde van de variabele met één verhoogd.
Hierna wordt er gekeken of variabele lus nog voldoet aan de voorwaarde die gesteld wordt in het while-statement. Wanneer dat juist is, worden de regels tussen de accolades herhaald. De lus eindigt wanneer lus de waarde 11 heeft.

Oefeningen

1. Maak het bovenstaande html-document en bekijk het resultaat op het scherm.
2. Wat gebeurt er wanneer je de statement  lus++ meteen na de beginaccolade plaatst?
3. Pas het script aan, zodat een bezoeker een getal in kan voeren waarmee de tafel gemaakt wordt.
4. Hoeveel sterretjes zet onderstaand script op het scherm?

var teller = 1
while (teller <= 15)
{
document.write(  ' * ');
teller= teller + 2;
}

5. Wat is fout in het onderstaande script?

var A = 1
while (A <= 15)
{
document.write(  ' * ');
B= A + 2;
}

(naar boven)      

Voorwaardelijke statements met for()

Het statement for() is de derde manier waarop je het verloop van het script kunt beïnvloeden. Het statement lijkt op het while-statement. Het verschil is dat bij het statement for() in de eerste regel de beginwaarde van de teller, de voorwaarde en de tellerbewerking wordt vastgelegd.

De algemene vorm van for() is:

for (teller; voorwaarde; tellerbewerking)
{
statements
}

De for-lus heeft dus altijd drie parameters die van elkaar worden gescheiden door een puntkomma.
De eerste parameter declareert een variabele. De tweede parameter is een voorwaarde die WAAR moet zijn om de lus te laten herhalen. De laatste parameter bevat een bewerking en wordt bij elke herhaling van de lus uitgevoerd.

Het volgende script zorgt dat de tafel van 5 op het scherm getoond wordt met behulp van een for-statement.

               
<html>
<head>
<title>tafel van 5</title>
</head>
<body>
<script language="JavaScript">
<!--
var getal= 5
for (var teller = 1; teller <= 10; teller++)
{
document.write (teller, '  x  ', getal, '  =  ', teller*getal, '<br>');
}
// -->
</script>
</body>
</html>

 
Je kunt meestal zelf kiezen of je het statement while() of for() gebruikt. Het voordeel van het statement while is dat je binnen de lus ook nog allerlei bewerkingen op de teller-variabele kunt uitvoeren. Kies de lus waarmee je het minste typewerk hebt.

(naar boven)

Break en continue

Je kunt een lus altijd afbreken met het statement break.
In de onderstaande listing wordt de lus verbroken wanneer de variabele na lus de waarde 5 heeft.

<html>
<head>
<title>de tafel van 5</title>
</head>
<body>
<h1> De tafel van 5</h1>
<hr>
<script language="JavaScript">
<!--
var lus = 1;
var getal = 5;
while (lus <= 10)
{
document.write( lus, ' x ', getal , '= ', lus*getal, '<br>');
lus++; 
if (lus== 5)
break;
}
// -->
</script>
</body>
</html>

Het statement continue slaat de rest van de lus over wanneer aan een bepaalde voorwaarde wordt voldaan.
Bij de onderstaande listing wordt de regel 5 x 5 = 25 niet op het scherm getoond.

<html>
<head>
<title>de tafel van 5</title>
</head>
<body>
<h1> De tafel van 5</h1>
<hr>
<script language="JavaScript">
<!--
var lus = 1;
var getal = 5;
for(var lus=1; lus<=10; lus++)
{
if (lus==5)
{
continue;
}
else
{
document.write( lus, ' x ', getal , '= ', lus*getal, '<br>');
}
}
// -->
</script>
</body>
</html>

Oefening:

1. Maak de bovenstaande scripts en test ze in een browser.
2. Ga naar http://www.w3schools.com/js/js_switch.asp en kijk wat je met het voorwaardelijke statement switch kunt doen. Maak hier zelf een script mee.

(naar boven)

Events

Inleiding

Je kunt in een script reageren op gebeurtenissen. Een gebeurtenis is meestal een handeling van een bezoeker. Een gebeurtenis wordt een event genoemd.
De opdrachten die uitgevoerd worden, wanneer de gebeurtenis plaats vindt, worden eventhandlers genoemd.

Met de programma's Flash, Dreamweaver en Photoshop kun je ook eventhandlers maken, al worden ze anders genoemd. Flash noemt de eventhandlers dynamische knoppen en acties, Dreamweaver noemt ze behaviors en Photoshop kent rollovers.

Hoe het ook genoemd wordt, het principe is altijd hetzelfde. Bijvoorbeeld: een bezoeker klikt op een knop (=event) en de knop verandert van kleur, er klinkt een geluid of er wordt een andere pagina geopend (=eventhandler). Welke eventhandlers je kunt schrijven voor welke events , is afhankelijk van de gebruikte software of de gebruikte scripttaal. Een eventhandler is altijd gekoppeld aan een object in een html-document. Niet met alle elementen in een document kunnen dezelfde handelingen verricht worden. Een gewone kop is bijvoorbeeld niet aanklikbaar en je moet een invoervenster hebben om te kunnen reageren op invoer.

Het is onmogelijk om alle eventhandlers in deze les te behandelen. Je leest daarom alleeen voorbeelden van scripts met de meest gebruikte eventhandlers.

(naar boven)

Events

(naar boven)

Eventhandlers

Eventhandlers zijn kleine scripts die als attribuut in een tag worden gebruikt. Een eventhandler wordt dus nooit tussen de tags <script> </script> geplaatst. Om een eventhandler voor een bepaald event te schrijven, neem je de naam van het event en plaats je hiervoor het woord on. De eventhandler die bij het event MouseOver hoort, heet onMouseOver.

De algemene opbouw van een eventhandler is:

<html_tag andere_attributen onEvent="JavaScript-code">

Binnen de eventhandler kun je allerlei JavaScript-codes opnemen. Meestal zal je verwijzen naar een functie die je in de kop van het document hebt gedefinieerd. Dit maakt het document overzichtelijker.

html vereist dat alle waarden van de verschillende attributen tussen dubbele aanhalingstekens worden geplaatst. Wanneer binnen het stukje JavaScript in een eventhandler ook aanhalingstekens noodzakelijk zijn, gebruik dan enkele aanhalingstekens. Hiermee voorkom je fouten bij de interpretatie van het document.

In de onderstaande listing is een voorbeeld opgenomen van de eventhandler onClick. Wanneer de bezoeker op de knop klikt, verschijnt een venster met het resultaat van de functie bereken.

                  
<html>
<head>
<script language="javascript">
<!--
function bereken()
{
var A=10;
var B=8;
var bereken= A+B;
alert(bereken)
}
//-->
</script>
</head>
<body>
<h1> Vraag!</h1>
<HR>
Wil je weten wat de som van is van 10 en 8?
<form>
<input type="button" value="bereken" onClick="bereken()">
</form>
</body>
</html>

Een event is wat anders dan een eventhandler. Events kunnen altijd optreden, maar niet alle html-elementen kennen een eventhandler om een event af te handelen. Een bezoeker kan bijvoorbeeld best op een afbeelding klikken. Zelfs als je in de tag <img> de eventhandler Onclick hebt opgenomen, blijft het klikken zonder effect. Een eventhandler hoort altijd bij een bepaald object en elk object kent zijn eigen eventhandlers.

Oefening:

1. Maak een html-document met de listing in deze alinea en test het document in de browser.
2. Maak een html-document waarbij de bezoeker meteen bij het laden van het document een venster te zien krijgt met de tekst: Welkom!!
3. Welke van de onderstaande statements zijn goed. Er is het in het document een functie welkom gedefinieerd.
1. <form onLoad="welkom();"
2. <body onClick="welkom();"
3. <textarea onSelect="welkom();"
4. <a onMouseOver="welkom();" onMouseOut="tot_ziens()">
5. <input type=text onClick="welkom();"

(naar boven)

Events met de muis

De eventhandlers onMouseOver, onMouseout, onClick, onMouseDown en onMouseMove reageren allemaal op gebeurtenissen met de muis.

In de onderstaande listing worden deze eventhandlers gebruikt om de achtergrond van het document te veranderen.
Hiervoor is een functie gedefinieerd met de naam andere_kleur. De achtergrondkleur is een eigenschap van het object document. De eigenschap kan veranderd worden met de statement:

document.bgcolor=kleurcode

De eventhandler onClick is gekoppeld aan het object Button. De eventhandler onMouseMove is de enige eventhandler die kan gekoppeld worden aan alle elementen. In het onderstaande document is het gekoppeld aan het object paragraaf <p>. De andere eventhandlers zijn gekoppeld aan een verwijzing <a>.

               
<html>
<head>
<script language="JavaScript">
function andere_kleur(code)
{
document.bgColor=code
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="RED" onClick=" andere_kleur ('#ff0000')">
<input type="button" name="Button2" value="GREEN" onClick=" andere_kleur ('#00ff00')">
<input type="button" name="Button3" value="BLUE" onClick=" andere_kleur ('#00ff00')">
<input type="button" name="Button4" value="WHITE" onClick=" andere_kleur ('#ffffff')">
</form>
<p onMouseMove=" andere_kleur ('ffff00')">
Een alinea met een eventhandler.
</p>
<p>
<a onMouseOver=" andere_kleur ('#808000')" onMouseOut=" andere_kleur ('#FFB6C1')" onMouseDown=" andere_kleur ('#FAEBD7')"  >
Een verwijzing met eventhandlers</a>
</p>
</body>
</html>

De volgende listing zorgt voor tekst in de statusbalk van het venster. De statusbalk is ook een eigenschap van het object window. Er is gebruik gemaakt van een functie om tekst in de statusbalk te plaatsen.

Het script werkt alleen in Internet Explorer!

               
<html>
<head>
<script language="JavaScript">
<!--
function statusbalk(txt)
{
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="Kijk" value="Kijk!!" onClick="statusbalk('deze tekst verschijnt in de statusbalk!');">
<input type="button" name="wis" value="Weg" onClick="statusbalk('');">
</form>
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

(naar boven)

Events met het toetsenbord

De eventhandlers onKeyDown, onKeyPress, onKeyUp reageren op handelingen met het toetsenbord.
In het onderstaande script zijn deze eventhandlers gebruikt als attribuut van de tag <body>.

                   
<html>
<head>
<script language="JavaScript">
<!--
function changecolor(code)
{
document.bgColor=code
}
//
</script>
</head>
<body onKeyUP="changecolor('#ff0000')" onKeyDown= "changecolor('ffff00')" >
</body>
</html>

(naar boven)

OnAbord en onError

De eventhandler onAbort kun je een actie uitvoeren op het moment dat de bezoeker het laden van grafische afbeeldingen onderbreekt door bijvoorbeeld op de knop Stoppen van de browser te klikken.
Een voorbeeld van een statement met onAbort is:

<img src="plaatje.jpg" onAbort= "alert('Jammer dat u geen geduld heeft om de afbeelding helemaal te laden!')">

De eventhandler onError kan opgenomen worden als attribuut van de tags <body> en <img>. Hiermee kun je bijvoorbeeld een waarschuwingsvenster laten zien, wanneer er een fout optreed tijdens de overdracht van de afbeelding of het document.
Een voorbeeld van een statement met onError is:

<img src="plaatje.jpg" onError= "alert('Jammer, er gaat iets fout! Probeer nogmaals!')">

(naar boven)

OnBlur en onFocus

Je gebruikt deze eventhandlers om een actie uit te voeren als de bezoeker naar een ander object van de pagina of naar een ander venster gaat. Het actief maken van een ander element heet het wijzigen van focus. De eventhandlers onBlur en OnFocus kun je gebruiken binnen formulieren, maar ook in pagina's waarbij gebruik gemaakt wordt van frames.

In het onderstaande script verandert de achtergrondkleur, wanneer je de cursor verplaatst naar het volgende tekstvak.

                   
<html>
<body>
<form>
<input Type="text" Name="bgred" value="rood" onFocus= "document.bgColor='#ff000'">
<p>
<input Type="text" Name="bgGreen" value="groen" onFocus= "document.bgColor='#00ff00'"></p>
<p>
<input Type="text" Name="bgBlue" value="blauw" onFocus= "document.bgColor='#0000ff'"></p>
<p>
<input Type="text" Name="bgYellow" value="geel" onFocus= "document.bgColor='#ffff00'"></p>
<p>
<input Type="text" Name="bgCoral" value="roze" onFocus= "document.bgColor='#ff00ff'"></p>
</form>
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.
2. Wat doet het volgende script? Probeer het uit!
   <body>
   <table border=2 bordercolor=#0000FF bgcolor=#777777 align=center>
   <tr>
   <td bgcolor=#ffffff>
   <font color="#000000" size="1">Licht</font>
   </td>
   <th bgcolor="#FFFFFF">
   <span style="cursor: crosshair">
   <a href="#" onmouseover="document.bgColor='ffffff'">[]</a>
   <a href="#" onmouseover="document.bgColor='eeeeee'">[]</a>
   <a href="#" onmouseover="document.bgColor='dddddd'">[]</a>
   <a href="#" onmouseover="document.bgColor='cccccc'">[]</a>
   <a href="#" onmouseover="document.bgColor='bbbbbb'">[]</a>
   <a href="#" onmouseover="document.bgColor='aaaaaa'">[]</a>
   <a href="#" onmouseover="document.bgColor='999999'">[]</a>
   <a href="#" onmouseover="document.bgColor='888888'">[]</a>
   <a href="#" onmouseover="document.bgColor='777777'">[]</a>
   <a href="#" onmouseover="document.bgColor='666666'">[]</a>
   <a href="#" onmouseover="document.bgColor='555555'">[]</a>
   <a href="#" onmouseover="document.bgColor='444444'">[]</a>
   <a href="#" onmouseover="document.bgColor='333333'">[]</a>
   <a href="#" onmouseover="document.bgColor='222222'">[]</a>
   <a href="#" onmouseover="document.bgColor='111111'">[]</a>
   <a href="#" onmouseover="document.bgColor='000000'">[]</a>
   </span>
   </th>
   <td bgcolor=#FFFFFF>
   <font size=1>
   Donker</font>
   </td>
   </tr>
   </table>
   </body>

(naar boven)

Objecten

Objecten

In JavaScript werk je veel met objecten. Alle elementen van een internetpagina beschouwd JavaScript als een object. JavaScript  bevat veel ingebouwde objecten zoals window en document. Je kunt ook zelf objecten maken. 

Een object is eigenlijk een verzameling variabelen en functies. Deze variabelen en functies worden de eigenschappen en methodes van een object genoemd.
Het object window is bijvoorbeeld een verzameling van alle eigenschappen van het browservenster. De statusbalk van het venster is een eigenschap van het object. De statusbalk kan verschillende strings (teksten) bevatten. De statusbalk kun je de vergelijken met een gewone variabele (window.status='Een tekst in de statusbalk'). Je kunt met het venster bepaalde handelingen laten uitvoeren. Je kunt bijvoorbeeld een venster openen. Hiervoor kent het object window de functie open (window.open() ).

Alle objecten van JavaScript zijn geordend in een hiërarchische structuur.

Bovenaan de hiërarchie staat het object window. Met andere woorden: De andere objecten zijn allemaal child-objecten van het parent-object window. Een child-object is eigenlijk een eigenschap van het parent-object. Een child-object kan zelf andere child-objecten hebben. Elk object in de hiërarchie heeft dus eigenschappen of properties die zelf ook weer objecten kunnen zijn.  De parent- en child-objecten worden van elkaar gescheiden door een punt:

Parent_object.child_object.child_property

Bijvoorbeeld:

window.history.forward()               

(naar boven)

Zelf objecten definiëren

Objecten kun je beschouwen als functies. Het zijn speciale functies met eigenschappen en methoden. Met behulp van functies kun je zelf ook weer objecten maken.

Wanneer je bijvoorbeeld een webpagina wilt maken met informatie over werknemers van een bedrijf, kun je dan een object werknemers maken, waarnaar je kan verwijzen in de scripts. Elke werknemer heeft bepaalde "eigenschappen", bijvoorbeeld de naam van de werknemer, de afdeling waar de werknemer aan verbonden is, de functie, datum van indiensttreding, enzovoort.  Je kunt naar deze eigenschappen op de volgende manier verwijzen:

werknemer.naam
werknemer.afdeling
werknemer.functie
werknemer.in_dienst
werknemer.uit_dienst

Constructors

Een functie waarin een object wordt gedefinieerd, wordt een objectdefinitie of een constructor genoemd.
De functie krijgt de naam van het object dat je wilt definiëren. De functie heeft zoveel argumenten als het object properties heeft. Zoals bij alle functies, worden de argumenten gescheiden door een komma. Binnen de functie gebruik je het keyword this. Het keyword verwijst naar het object dat gemaakt wordt.

De constructor voor het object werknemer ziet er als volgt uit:

                
function werknemer (naam, afdeling, functie, in_dienst , uit_dienst)
{
this.naam = naam
this.afdeling = afdeling;
this functie = functie;
this.in_dienst = in_dienst;
this.uit_dienst = uit_dienst;
}

Instanties

Van een object kunnen meerdere nieuwe objecten worden afgeleid. Deze afgeleide objecten worden instanties (instances) genoemd. Deze instanties hebben altijd dezelfde properties als het object waarvan het is afgeleid. In een script werk je meestal met de instanties van een object. Een instantie wordt gedefinieerd met behulp van het keyword new. In het volgende statement wordt een instantie van het object werknemer gecreëerd:

Vlijmen = new werknemer ("Gerda Vlijmen", "automatisering " , "webdeveloper ", "1-12-2001", "")

Omdat deze werknemer nog in dienst is, heeft de laatste propertie geen inhoud. Je kunt hier later nog een waarde aan toekennen met het statement:

Vlijmen.uit_dienst = "15-6-2002";

Methodes

Je kunt voor zelfgemaakte objecten ook methodes maken. Methodes zijn immers functies die horen bij een bepaald object. Een methode geldt ook voor alle instanties van het object.

Het onderstaande script definieert een methode voor het object werknemer. De methode zorgt ervoor dat de gegevens van de instanties op het scherm getoond worden. De functie leest de properties van het huidige object (this) en schrijft de regel op het scherm.

function toon
{
document.write('afdeling: ', this.afdeling, '<br>');
document.write('functie: ', this.functie, '<br>');
document.write('in dienst zins: ', this.in_dienst, '<br>');
document.write('uit dienst zins: ', this.uit_dienst, '<br>');
}

Om aan te geven dat de functie een methode is van het object werknemer, moet in de constructor van het object de functie worden opgenomen als propertie.

function werknemer (afdeling, functie, in_dienst , uit_dienst)
{
this,naam = naam
this.afdeling = afdeling;
this functie = functie;
this.in_dienst = in_dienst;
this.uit_dienst = uit_dienst;
this.toon= toon
}

Een functie die gebruikt wordt als methode van een object, moet in het script voor de constructor opgenomen worden.

In de volledige listing wordt de functie en het object gedefinieerd. Hierna worden er drie instanties afgeleid en het resultaat wordt op scherm getoond.

<html>
<head>
<title>
Een voorbeeld met objecten
</title>
<script language="JavaScript">
<!--
function toon()
{
document.write('<b> naam: ', this.naam, '</b><br>');
document.write('afdeling: ', this.afdeling, '<br>');
document.write('functie: ', this.functie, '<br>');
document.write('in dienst zins: ', this.in_dienst, '<br>');
document.write('uit dienst zins: ', this.uit_dienst, '<br><hr>');
}

function werknemer (naam, afdeling, functie, in_dienst , uit_dienst)
{
this.naam = naam;
this.afdeling = afdeling;
this.functie = functie;
this.in_dienst = in_dienst;
this.uit_dienst = uit_dienst;
this.toon = toon;
}

//-->
</script>
</head>
<body>
<h1>Werknemers van Coulance</h1>

<script language="JavaScript">
<!--
// hier worden drie instanties gemaakt

vlijmen = new werknemer ("Gerda Vlijmen", "automatisering " , "webdeveloper ", "1-12-2001", "")
bronner = new werknemer ("Anja Bronner", "verkoop", "boekhoudster", "15-6-1994", "")
deira = new werknemer ("Rubia Deira", "automatisering" , "systeembeheerder", "1-4-1999", "")

// hier worden de objecten op het scherm gezet

vlijmen.toon();
bronner.toon();
deira.toon();
//-->
</script>
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

(naar boven)

Het object Window

Het object window is het belangrijkste object in JavaScript. Het object staat bovenaan de objecthiërarchie. Dit betekent dat alle andere objecten eigenschappen zijn van dit object.

Eigenschappen van het object Window

De properties van window beschrijven de informatie over het venster en het document in het venster.

De eigenschappen document, location en history zijn zelf weer objecten.

Wanneer er maar één venster is, wat meestal het geval is, kan de verwijzing naar het venster weggelaten worden. Dit blijkt bijvoorbeeld uit het gebruik van document.write().  Omdat document een child-object is van window zou je eigenlijk in een statement de verwijzing window.document.write() moeten gebruiken.  Je gebruikt het volledige statement alleen, wanneer je meerdere vensters opent vanuit een script.

In het volgende voorbeeld worden een aantal eigenschappen van het venster bepaald.

<html>
<head>
<title>
Eigenschappen van het object window</title>
</head>
<script language="JavaScript">
<!--
var tekst='JavaScript is leuk om te leren!!.'
window.DefaultStatus = 'Windows.DefaultStatus bepaalt de standaardtekst in de statusbalk';
//-->
</script>
<body onLoad="window.status=window.DefaultStatus">
<script language="JavaScript">
<!--
window.document.write ('Dit document bevindt zich op de volgende locatie: ', window.location , '<br>')
//-->
</script>
<A onMouseOver="window.status=tekst" onMouseOut="window.status=window.DefaultStatus">Wanneer je over deze tekst beweegt, verandert de tekst in de statusbalk in Internet Explorer.</A>
</body>
</html>

Methodes van het object Windows

Het object window kent een aantal ingebouwde methodes:

alert(),prompt() en confirm()

Je hebt al kennis gemaakt met de methodes alert(), en prompt(). Omdat deze allemaal methodes zijn van het object window, hoef je de aanduiding window niet op te nemen bij de vermelding van de functie.

Beide methodes openen een dialoogvenster. De methode confirm() opent ook een dialoogvenster. Het dialoogvenster heeft twee knoppen: OK en Cancel. Wanneer de bezoeker op de knop OK klikt, geeft dit de waarde TRUE. Wanneer de bezoeker op Cancel klikt, geeft JavaScript de waarde FALSE.

                
<html>
<head>
<title>
</title>
</head>
<body>
<script>
var x=window.confirm("Weet je het zeker?")
if (x)
window.alert("goed zo!")
else
window.alert("Jammer")
</script>
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

(naar boven)

window.open en window.close

Met de methode window.open() kun je een nieuwe instantie van het browservenster openen. In het venster kun je een andere pagina openen. De vormgeving van het nieuwe venster bepaal je met behulp van attributen.
De onderstaande listing laat de eenvoudigste vorm van de methode zien.  Wanneer de bezoeker op de knop klikt, wordt een tweede venster geopend.

<html>
<head>
<title>
</title>
</head>
<body>
<form>
<input type="button" value="Klik hier om een nieuw venster te openen. ">
onclick="window.open('page2.htm')"
</form>
<body>
</html>

Bij het openen van het nieuwe venster kun je met behulp van de methode het venster een naam geven en de eigenschappen van het venster bepalen.

open("URL","name","attributen")

Je kunt de volgende attributen gebruiken:

• Width=aantal_pixels
• Toolbar=yes/no
• Location=yes/no
• Scrollbars=yes/no
• Height=aantal_pixels
• Directories=yes/no (alleen Netscape)
• Resizable=yes/no
• Status=yes/no
• Menubars=yes/no

     
Alleen de attributen die je opgeeft, worden veranderd in het nieuwe venster. De attributen die je weg haalt, houden hun standaardwaarden. Alle attributen moeten achter elkaar geschreven worden, gescheiden door komma's, zonder spaties. De hele lijst staat tussen aanhalingstekens.

<html>
<head>
<title>
</title>
</head>
<body>
<form>
<input type="button" value="Click here to see"
onclick= "window.open('page2.htm','win1','width=200,height=200,menubar=no,resizable=no,staus=no')">
</form>
</body>
</html>

Het volgende script gebruikt een functie om de inhoud van het nieuwe venster te bepalen.
Met de methode window.close sluit je een venster. De methode self.close sluit het venster waarin de methode wordt aangeroepen.

<html>
<head>
<script Language = "JavaScript">
function dialoog(msg)
{
var opties = 'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
'scrollbars=no,resizable=no,width=200,height=150'
nieuw = window.open ("","Dialoog",opties)
nieuw.document.write ("<body bgColor='black' text='white'>")
nieuw.document.write ("<h2><center>",msg,"</center></h2>")
nieuw.document.write ("<form><center>")
nieuw.document.write ("<input type='button' value='OK' onClick = 'self.close()'>")
nieuw.document.write ("</center></form>")
}
</script></head>
<body>
<form>
<input type='button' value = 'open een venster met inhoud'
onClick = 'dialoog("klik hier om het venster te sluiten")'>
</form>
</body>
</html>

(naar boven)

Overige methods

Niet alle methodes van het object window kunnen in deze module behandeld worden.
In de onderstaande scripts zie je nog wel wat voorbeelden.

Voorbeeld met window.moveBy:

<html>
<head>
<title>
Een trillend venster
</title>
</head>
<body>
<script langauge="JavaScript">
function trillen()
{
var x=10
for (i=0;i,i<20;i++)
{
window.moveBy(0,x)
window.moveBy(x,0)
window.moveBy(0,-x)
window.moveBy(-x,0)
}
}
</script>
<form>
<input type="button" onClick="trillen()" value="trillend venster">
</form>
</body>
</html>

Voorbeeld met window.moveTo:

                
<html>
<head>
<title>
Een venster wordt geopend en in de linkerbovenhoek geplaatst.
</title>
</head>
<body>
<script langauge="JavaScript">
function open_en_verplaatsen()
{
win2=window.open("page.htm","","width=300,height=300")
win2.moveTo(0,0)
}
</script>
<form>
<input type="button" onClick="open_en_verplaatsen()" value="Klik hier!">
</form>
</body>
</html>

Voorbeeld met window.resizeTo:

<html>
<head>
<title>
Maak het venster groot mogelijk
</title>
</head>
<body>
<script langauge="JavaScript">
function full_screen(){
window.moveTo(0,0)
window.resizeTo(screen.width,screen.height)
}
</script>
<form>
<input type="button" onClick="full_screen()" value="volledig scherm">
</form>
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

 (naar boven)

Timeouts

Bij een aantal methodes van het object window kun je gebruik maken van timeouts. Een timeout is een statement die uitgevoerd wordt nadat een bepaalde tijd is verstreken. Je gebruikt ze bijvoorbeeld voor een klok of een scrollende tekst in de statusbalk.
Een timeout begint met de functie setTimeout() en wordt gestopt met de functie clearTimeout(). 

De algemene vorm van een statement met setTimeout()is:

SetTimeout ("statements", wachttijd_in_milliseconden)

Alle statements moeten tussen dubbele aanhalingstekens staan. De teller wordt aangegeven in milliseconden (duizendsten van een seconde). Wil je een wachttijd van een minuut, dan wordt de waarde 6000.

De functie clearTimeout()gebruik je om een lopende timer die gestart is met de functie setTimeout() te stoppen.  De parameter van clearTimeout() is het getal die setTimeout() teruggeeft, zodra de timer begint te lopen. Je kunt dit getal opslaan in een variabele.

In het onderstaande script wordt eerst aan de variabele i de waarde 0 toegekend.
De functie timer telt 1000 milliseconde en geeft de waarde terug aan de variabele timerID. Hierna wordt op de statusbalk een tekst weergegeven. i++ telt 1 op bij de variabele i.

In de functie stop_timer wordt de timer stopgezet en de inhoud van de statusbalk gewist.

<head>
<title>
setTimeout() en clearTimeout()
</title>
<script language="JavaScript">
<!--
var i=0;

function timer()
{
timerID= setTimeout ("timer()", 1000);
window.status= "verstreken seconde:  " + i++;
}

function stop_timer()
{
clearTimeout (timerID);
window.status=' ';
}
//-->
</script>
</head>
<body>

<p> Een timer in de stausbalk van Internet explorer</p>
<form>
<input type="button" value="Start" onClick="timer()">
<input type="button" value="Stop" onClick="stop_timer()">
</body>
</html>

Oefening:

1. Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

(naar boven)

Nog meer objecten

Het object history

Elke browser houdt een lijst bij van alle bezochte sites van een sessie. Met behulp van deze lijst kun je snel terug keren naar eerder bezochte sites. De  URL's van deze sites vormen samen het object history.  Het object history is in JavaScript een eigenschap van het object window. De inhoud van het object history wordt tijdens de browsersessie steeds bijgewerkt. 

Het object history heeft de volgende properties en methodes:

De methode back() komt overeen met het klikken op de knop Terug van de browser. forward() komt overeen met de knop Vooruit. Tussen de haakjes van de methode history.go() plaats je een getal dat aangeeft hoeveel pagina's vooruit of achteruit gesprongen moet worden. history.go(-1) komt overeen met history.back() en  history.go(1) met history.forward().  Met history.go(0) wordt de pagina opnieuw geladen.

In het onderstaande script worden een aantal voorbeelden getoond van het object history.

<html>
<body>
<script language="JavaScript">
var lengte= window.history.length;
document.write('<h1>U heeft al ' , lengte , ' pagina\'s bezocht!</h1><br>');
</script>
<button style="width:65;height:65" onClick="history.go(-1)"><b>terug</b></button>
<button style="width:65;height:65" onClick="history.go(1)"><b>verder</b></button>
<button style="width:65;height:65" onClick="window.location='http://www.ma-web.nl'"><b>Home</b></button>
<button style="width:65;height:65" onClick=" history.go(0)"> <b>opnieuw</b></button>
<button style="width:65;height:65"
onClick="window.close()"><b>afsluiten</b></button>
</body>
</html>

Oefening:

1.  Maak een html-document van bovenstaande listings en bekijk het resultaat in een browser.

(naar boven)          

Het object location

Het object location beschrijft de locatie van het document in de browser. Het is een child-object van het object window. Door de juiste properties te gebruiken, kun je ook delen van de url gebruiken.

De onderstaande tabel geeft een overzicht van de meest gebruikte properties en methodes van het object location.

Oefeningen:

1. Maak de volgende html-documenten. Bewaar het eerste document onder de naam: pagina1.html,  het tweede document onder de naam: pagina2.html en het derde onder de naam: pagina3.html.  Lees de documenten in de browsers.

<html>
<head>
<script>
setTimeout("window.location.replace('pagina2.html')",5000)
</script>
</head>
<body>
<h1> Pagina 1</h1>
<br>
<script>
<!--
document.write('de volledige url van het huidige document is: ' ,location.href)
document.write('<br> de pathnaam van het huidige document is: ' ,location.pathname)
document.write('<br>het gebruikte protocol is: ' ,location.protocol)
//-->
</script>
</body>
</html>

<html>
<head>
<script>
setTimeout("window.location.replace('pagina3.html')",5000)
</script>
</head>
<body>
<h1> Pagina 1</h1>
<br>
<script>
<!--
document.write('de volledige url van het huidige document is: ' ,location.href)
document.write('<br> de pathnaam van het huidige document is: ' ,location.pathname)
document.write('<br>het gebruikte protocol is: ' ,location.protocol)
//-->
</script>
</body>
</html>

<html>
<head>
<script>
setTimeout("window.location.replace('pagina1.html')",5000)
</script>
</head>
<body>
<h1> Pagina 1</h1>
<br>
<script>
<!--
document.write('de volledige url van het huidige document is: ' ,location.href)
document.write('<br> de pathnaam van het huidige document is: ' ,location.pathname)
document.write('<br>het gebruikte protocol is: ' ,location.protocol)
//-->
</script>
</body>
</html>

1.  Maak zelf een document dat een venster geeft, waarin de bezoeker op OK kan klikken om de pagina van De Volkskrant in te lezen (www.volkskrant.nl) of op de knop Annuleren te klikken om naar de site van CNN te gaan (www.cnn.com).  Maak gebruik van een functie.

(naar boven)  

Het object navigator

Het object navigator omvat alle gegevens over de browser waarmee de bezoeker de pagina bekijkt. Het object valt buiten de objecthiërarchie.

De onderstaande tabel geeft een overzicht van de meest gebruikte properties en methodes van het object navigator.

Het onderstaande script laat op het scherm de versie van de browser zien.

<html>
<head>
<title>
</title>
</head>
<body>
<script language="JavaScript">
var versie=navigator.appVersion;
var name= navigator.appName;
var agent=navigator.userAgent

document.write('<p>De naam van de browser is: ', name)
document.write('</p><p>Je werkt met versie: ', versie)
document.write('</p><p> agent: ', agent)
</script>
</p>
</body>
</html>

Oefening:

1. Maak van de bovenstaande listing een html-document en test het script in beide browsers.

(naar boven)  

Het object screen

Het object screen bevat informatie over het beeldscherm van de gebruiker. Het object heeft alleen properties en geen methodes.

Oefening:

1. Vul het script van de vorige alinea aan zodat ook de schermbreedte, schermhoogte, de kleurdiepte en de pixeldiepte getoond wordt. Let er op dat niet alle browsers de laatste twee properties ondersteunen!

(naar boven)  

Het object Date()

Het object Date() is een ander soort object dan de objecten die tot nu toe besproken zijn. Het object is geen child van het object window. Het object Date() staat voor de huidige datum en tijd. Omdat de datum en de tijd steeds veranderen, bestaan er vele instanties van het object Date(). Om een instantie van het object Date() te maken gebruik je het volgende statement:

var datum= new Date()

Hierbij krijgt de variabele datum de waarde van de huidige datum en tijd.
Wanneer je geen parameters opgeeft, zal JavaScript de huidige tijd toekennen aan het object.  Je kunt ook een datumobject maken met een specifieke tijd door de juiste parameters mee te geven. Hiervoor kun je de volgende statements gebruiken:

var datum = new Date ('Maand dd jjjj hh:mm:ss');
var datum = new Date ('Maand dd jjjj ');
var datum = new Date ('jj, mm, dd,hh, mm, ss ');
var datum = new Date ('jj, mm, dd');
var datum = new Date (milliseconden);

Het volgende script gebruikt zowel de huidige datum als een opgeven datum.

<html>
<head>
<title>
</title>
</head>
<body>
<script language="JavaScript">
<!--
var datum_nu = new Date();
var geboorte_datum = new Date ('September 4, 1989');
document.write ('Het is nu : ' + datum_nu)
document.write ('<br> Ik ben geboren op: ' + geboorte_datum)
//-->
</script>
</body>
</html>

Het script geeft het volgende resultaat:

Het is nu : Tue Oct 9 12:57:48 UTC+0200 2001
Ik ben geboren op: Wed Sep 4 00:00:00 UTC+0200 1974

De standaardweergave van de datum op het scherm is meestal niet zoals je dat wenst. Met behulp van de methodes van het object kun je de weergave van de tijd beïnvloeden.

Het object Date() kent geen properties, wel veel methodes. Met behulp van de methodes kun je datum- en tijdsinformatie uit het datumobject halen of instellen.
De methodes om informatie uit het object te halen beginnen met het woord get. De methodes om een datum in te stellen beginnen met het woord set.

In het volgende script wordt eerst de huidige datum in de variabele nu geplaatst. Hierna wordt met behulp van de verschillende methodes van het object delen van de datuminformatie op het scherm gezet.

<html>
<body>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers
nu= new Date();
document.write("Tijd: " + nu.getHours() + ":" + nu.getMinutes() + "<br>");
document.write("Datum: " + nu.getDate() + "/" + (nu.getMonth() + 1) + "/" + nu.getYear());
// -->
</script>
</body>
</html>          

Oefening:

1. Maak html-documenten van de scripts uit deze paragraaf en test de scripts in de browsers.
2. Lees het onderstaande script en probeer te beredeneren wat het effect van dit script zal zijn.
3. Maak hierna van het script een html-document en test het in een browser.

<html>
<head>
<script Language="JavaScript">
function klok() {
nu= new Date();
// tijd
hours= nu.getHours();
minutes= nu.getMinutes();
seconds= nu.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.klok.time.value = timeStr;
// datum
date= nu.getDate();
month= nu.getMonth()+1;
year= nu.getYear();
dateStr= "" + date;
dateStr+= ((month < 10) ? "/0" : "/") + month;
dateStr+= "/" + year;
document.klok.date.value = dateStr;
Timer= setTimeout("klok()",1000);
}
// -->
</script>
</head>
<body onLoad="klok()">
<form name="klok">
<p> Tijd: <input type="text" name="time" size="8" value=""></p>
<p> Datum: <input type="text" name="date" size="8" value=""></p>
</form>
</body>
</html>

(naar boven)  

Het object array()

Het Nederlandse woord voor array is reeks of rij. Arrays zijn zeer belangrijk in JavaScript. Stel dat je 100 verschillende namen op wilt slaan. Je kunt hiervoor 100 verschillende variabelen creëren naam1, naam2, .... tot en met naam100. Dit is zeer omslachtig en niet efficiënt.

Voor dit voorbeeld en vergelijkbare toepassingen gebruik je in JavaScript het object Array(). Arrays kun je zien als een aantal variabelen die samen gebundeld zijn. Net als bij het object Date() kun je vele instanties maken van het object Array().
Een instantie maak je door middel van de volgende statement:

mijnArray= new Array();

Je kunt toegang krijgen tot de inhoud van de variabelen door middel van de naam van de array en een nummer. Stel dat je bijvoorbeeld een array namen definieert met hierin 100 namen. Je kunt toegang krijgen tot de eerste naam met behulp van namen[0]. De tweede naam benader je met namen[1], de derde naam met namen[3] en de honderste naam met namen[99].

Je kunt allerlei type data opslaan in een Array: cijfers, letters of andere objecten.

mijnArray[0]= 2;
mijnArray[1]= "JavaScript-training";
myArray[2]= "opleiding interactief vormgever";

Elke array heeft een bepaalde lengte. De lengte van de array ligt vast in de propertie lenght. Je kunt de lengte van een array vastleggen door een getal tussen de haakjes te plaatsen.

mijnArray= new Array(100);

In het statement wordt een nieuwe instantie van het object Aray() gemaakt met een lengte van 100.
De lengte van Arrays kan steeds aangepast worden. Een JavaScript array kan alleen maar groeien - het kan niet verkleinen).

Je kunt een waarde toekennen aan een bepaalde plaats in de rij, door achter de naam van de array een getal tussen de blokhaakjes te plaatsen:

myArray[99]= "xyz"

Hierbij krijgt de honderdste plaats in de array myArray de waarde "xyz" toegekent.

De inhoud van een array kan uitgelezen worden.

               
<script language="JavaScript">
<!--
mijnArray= new Array();
mijnArray[0]= "eerste element";
mijnArray[1]= "tweede element";
mijnArray[2]= "derde element";

for (var i= 0; i< 3; i++) {
document.write(mijnArray[i] + "<br>");
}
// -->
</script>

Het script plaatst het volgend resultaat op het scherm:

eerste element
tweede element
derde element

Oefening:

1. Maak van het bovenstaande script een html-document en test het resultaat in een browser.

(naar boven)  

String

Een string is een tekenreeks. Je hebt in deze modules JavaScript al veel met strings gewerkt. Wanneer je een aantal tekens aan een variabele toekent, is deze variabele te zien als een instantie van het object string.
Het object string kent één propertie (= lenght)  en vele methodes. Met de methodes van het object kun je tekenreeksen bewerken en opmaken.

Voorbeelden van methodes van het object string.

In de volgende listing zijn een aantal methodes voor onder andere de opmaak van het object string gebruikt.

<html>
<head>
<title>string</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!--
str1="De morgen breekt aan. ";
str2="De zon schijnt.";
str3=str1.concat(str2)
str4="Hallo, wereld";
str5="Goede morgen!!";
document.write (str1);
document.write("<br>" , str2);
document.write("<br>" , str3);
document.write("<br>" ,str4.fixed());
document.write("<br>" ,str5.toUpperCase());
document.write("<br>" ,str5.toLowerCase());
document.write("<br>" ,str5.fontcolor("red"));
document.write("<br>" ,str5.fontsize(4));
document.write("<br>" ,str5.fontsize(4).fontcolor("yelow"));
document.write(str5.slice(0,4))
document.write("<br><br>Het teken met index 0 is " + str5.charAt(0));
document.write("<br>Het teken met index 1 is " + str5.charAt(1));
document.write("<br>Het teken met index 2 is " + str5.charAt(2));
document.write("<br>Het teken met index 3 is " + str5.charAt(3));
document.write("<br>Het teken met index 4 is " + str5.charAt(4));

function splitsen (hele_string,scheidingsteken)
{ 
stringarray = hele_string.split(scheidingsteken); 
document.write ('<p>De originele string is: "' + hele_string + '"'); 
document.write ('<br>Het scheidingsteken is: "' + scheidingsteken + '"'); 
document.write ("<br>De array heeft" + stringarray.length + " elementen: ");

for (var i=0; i < stringarray.length; i++)
{ 
document.write (stringarray[i] + " / "); 
}
}
var str6="Oh brave new world that has such people in it.";
var str7="Jan,Feb,Mrt,Apr,Mei,Jun,Jul,Aug,Sep,Okt,Nov,Dec";
var spatie=" ";
var komma=",";
splitsen(str6,spatie);
zoeken= str6.indexOf("people");
document.write ('<br>Het woord "people" staat op positie '+ zoeken);
splitsen(str7,komma);
str8="Firefox"
URL="http://www.firefox.com"
document.write("<br>Klik hier " + str8.link(URL))
var boodschap="Welkom op mijn site!"
var format=boodschap.toUpperCase ()
var size=1
for (i=0;i<format.length;i++){
document.write(format.charAt(i).fontsize(size))
if (size<7)
size++
else
size=1
}
//-->
</script>
</body>
</html>

(naar boven)  

Reguliere expressies

De methodes match, search en replace van het object string gebruiken reguliere expressies om in een tekenreeks te zoeken. Om met een reguliere expressie te werken, moet je eerst een zogeheten patroon (patterns) maken door een variabele te declareren. Een patroon wordt tussen schuine tekens (/)  geplaatst.  Hierbij kun je gebruik maken van de volgende tekens:

Reguliere expressies: voorbeeld 1:

str = "abcDdcba";
resultaat = str.match(/d*/gi);
document.write(resultaat);

In de eerste regel wordt de variabele str gedeclareerd. Met deze string wordt in de volgende regels verder gewerkt.

Aan de variabele resultaat wordt door de methode match de waarde Dd toegekend. Hiervoor wordt de expressie (/d*/gi) gebruikt. Het deel (/d*/) geeft aan dat de letter d wordt gezocht. Het *-teken geeft aan dat d vaker mag voorkomen. Het patroon is tussen /…/ geplaatst. De letters g en i geven aan dat de hele string doorzocht moet worden en dat het gebruik van hoofdletters en kleine letters genegeerd wordt.

Voorbeeld 2:

In de eerste regel wordt de variabele str gedeclareerd. Met deze string wordt in de volgende regels verder gewerkt.

De variabele re bevat het patroon. Het patroon is tussen /…/ geplaatst.  De i achter de laatste / geeft aan dat het gebruik van hoofdletters en kleine letters in de string genegeerd wordt.
Het patroon zorgt voor het vinden van het woord 'hoofdstuk' gevolgd door één of meer numerieke tekens,  een punt en een numeriek teken,  nul of meer maal.
Het patroon wordt gebruikt om aan de variabele gevonden een waarde toe te kennen.

Voorbeeld 3:

In de volgende functie wordt gebruik gemaakt van de methode search om te contoleren of een tekstveld de tekens @ en . bevat.

function controleer()
{
test= document.forms[0].elements[2].value
if test.search(/@ \./)
alert( "Dit is geen geldig e-mailadres!")}

Oefeningen

1. Maak van de listings een html-document en test het document in de browsers.
2. Voeg de eerste twee voorbeelden in deze alinea toe aan dit document en test het resultaat.
3. Voeg de functie van het derde voorbeeld toe aan het html-document uit 3.5 om de invoer van het e-mailadres te controleren. Test het resultaat.

(naar boven)  

Math

Met het object Math kun je wiskundige en statistische berekeningen uitvoeren. Het object heeft vele properties en methodes. In deze module worden alleen de volgende methoden behandeld: 

De methode random() geeft een willekeurig getal tussen de 0 en de 1. Het gaat altijd om een breukgetal bijvoorbeeld 0.238901.

De onderstaande listing plaatst op het scherm een tekstvak en een knop. Wanneer de bezoeker op de knop klikt, verschijnt in het venster een willekeurig getal.

<html>
<head>
<title>math</title>
</head>
<body>
<script>
<!--
function willekeurig()
{
var getal=Math.random();
document.mijnForm.getal.value = getal;
}
</script>
<center>
<form name="mijnForm">
<p><B>Een willekeurig getal</B></p>
<input type="text" name="getal" size=16 onFocus="blur()">
<br><br>
<input type="button" value="een nieuw getal" onClick="willekeurig()">
</form>
</center>
<body>
</body>
</html>

Het resultaat is als volgt:

Wanneer je een heel willekeurig getal wilt gebruiken in een script, moet je de methode random() combineren met de methode round().
Het statement in de functie luidt dan: 

getal=Math.round(Math.random());

Als resultaat geeft het statement altijd het getal 0 of 1.
Wanneer je met de methode een gooi met een dobbelsteen nabootst, dan moet je het getal 0 uitsluiten en het willekeurige getal vermenigvuldigen met zes.
Het statement in de functie wordt dan: 

getal=Math.round(Math.random()* 6 + 1);

of:

getal=Math.ceil(Math.random()* 6 );

De methode random wordt veel toegepast om een willekeurig item uit een array te halen. Hiermee kun je bijvoorbeeld in een pagina de tip of spreuk van de dag laten zien, de pagina steeds van een andere achtergrondkleur voorzien of naar een willekeurige URL verwijzen. De volgende listing is hier een voorbeeld van:

<html>
<head>
<title>willekeurig</title>
</head>
<body>
<script>
<!--
var willekeurig=new Array()
willekeurig[0]="http://www.spelpunt.nl/"
willekeurig[1]="http://www.ma-web.nl"
willekeurig[2]="http://www.villa_achterwerk.nl"
willekeurig[3]="http://www.africanmusic.org"
willekeurig[4]="http://elo.ma-web.nl"
willekeurig[5]="http://www.hyves.nl"
willekeurig[6]="http://www.vpro.nl/villa-achterwerk"
willekeurig[7]="http://www.weekendjeweg.nl"
willekeurig[8]="http://www.gratiz.nl/"

function randomlink()
{
window.location=willekeurig[Math.floor(Math.random()*willekeurig.length)]
}
//-->
</script>
<form>
<p><input type="button"  value="klik hier" onclick="randomlink()"></p>
</form>
</body>
</html>

Oefeningen

1. Maak van de listings in deze alinea html-documenten en test de scripts in de browsers
2. Maak zelf een html-document die elke keer ingelezen wordt met een willekeurige achtergrondkleur.

(naar boven)  

Het object document

Inleiding

Dit hoofdstuk is voornamelijk gewijd aan het object document. Het object is een child-object van het object window en bevat de inhoud van een pagina. Met het object kun je de inhoud van een pagina bepalen met JavaScript

Verder worden er een aantal toepassingen getoond van JavaScripts. De meeste objecten die gebruik worden, zijn al behandeld in één van de hoofdstukken. In sommige toepassingen zijn één of meer nieuwe objecten, eigenschappen of methodes van objecten gebruikt. Deze worden niet uitgebreid behandeld. Zoek de functie van deze methodes op in een van de naslagwerken op Internet. De meest uitgebreide documentatie biedt de site w3schools. 

Een document in JavaScript

In html is een document een bestand met html-code voor een webpagina. Een html-document heeft bepaalde eigenschappen die je vast legt in de tag <body>. Kenmerken zijn onder meer de achtergrondafbeelding, de achtergrondkleur en de kleuren van de links. Wanneer een html-document eenmaal ingelezen is in een browser, kan het document niet meer veranderd worden. Met andere woorden, een html-document is statisch.

In JavaScript is een document een ingebouwd child-object van het object window. Het object heeft, net als alle andere objecten, eigenschappen en methodes.  De eigenschappen zijn uit te lezen en te gebruiken in een script (bijvoorbeeld document.location) of in te stellen in een script. Met dit laatste heb je al kennis gemaakt bij de oefeningen waarbij je een nieuw venster openende, waarvan de inhoud helemaal bepaald was in een script.

Nadat het object document in de browser is gelezen, kun je bepaalde eigenschappen van het object nog veranderen. Met andere woorden, het object document is dynamisch. Wanneer je de inhoud van een pagina wilt wijzigen, bijvoorbeeld op basis van invoer van de bezoeker, moet je de inhoud van een pagina helemaal met behulp van een script bepalen.

Het instellen van de eigenschappen en het schrijven van tekst naar de pagina verloopt via het object document. Het object heeft veel eigenschappen waarvoor html ook tags of attributen heeft. Bijvoorbeeld, de eigenschap achtergrondkleur wordt in JavaScript ingesteld met document.bgcolor, in html met de tag <body bgcolor>.

(naar boven)  

Eigenschappen van het object document

Het object document heeft veel eigenschappen. In onderstaande tabel vind je een opsomming van alle eigenschappen van het object. Sommige van deze properties zijn zelf weer objecten, andere zijn arrays.

Kleuren van een document

In het onderstaande script wordt een nieuw venster geopend. de kleuren worden bepaald door JavaScript.

<html>
<head>
<script Language = "JavaScript">
function dialoog(msg)
{
var opties = 'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
'scrollbars=no,resizable=no,width=200,height=150'
nieuw = window.open ("","dialoog",opties)
nieuw.document.write ("<h2><center>",msg,"</center></h2>")
nieuw.document.write ("<form>")
nieuw.document.write ("<center><input type='button' value='OK' onClick = 'self.close()'>")
nieuw.document.write ('<br><a href="http://www.ma-web.nl"> MA</a>');
nieuw.document.write ("</center></form>")
nieuw.document.bgColor='#ffd700';
nieuw.document.fgColor='#ffffff';
nieuw.document.linkColor='000000';
nieuw.document.alinkColor='ff0000';
}
</script></head>
<body>
<form>
<input type='button' value = 'open een venster met inhoud'
onClick = 'dialoog("klik hier om het venster te sluiten")'>
</form>
</body>
</html>

Oefening:

1. Probeer het script uit en test het in de browser.

with

Je kunt veel typewerk besparen wanneer je gebruik maakt van het keyword with. Door het woord wordt een object gemaakt waarin alle inhoud als blok wordt ingesteld. De standaard syntax is:

with (parameter)
{
statements
}

Wanneer je het keyword with toepast op de listing, ziet het script er als als volgt uit:

           
<html>
<head>
<script Language = "JavaScript">
function dialoog(msg)
{
var opties = 'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
'scrollbars=no,resizable=no,width=200,height=150'
nieuw = window.open ("","dialoog",opties)
with (nieuw.document)
{
write ("<h2><center>",msg,"</center></h2>")
write ("<form><center>")
write ("<input type='button' value='OK' onClick = 'self.close()'>")
write ('<br><a href="http://www.ma-web.nl"> MA</a>');
write ("</center></form>")
bgColor='#ffd700';
fgColor='white';
linkColor='black';
alinkColor='indianred';
}
}
</script></head>
<body>
<form>
<input type='button' value = 'open een venster met inhoud'
onClick = 'dialoog("klik hier om het venster te sluiten")'>
</form>
</body>
</html>

Informatie over het document

De eigenschappen title, URL en lastModified bevatten informatie over het document. Het script in de volgende listing zorgt ervoor dat deze eigenschappen worden getoond in een venster.

<html>
<head>
<title> eigenschappen van het document</ title >
<script Language = "JavaScript">
function eigenschappen()
{
var boodschap = 'document.URL= '+ document.URL + '\n De titel van het document = '+ document.title + '\n Het document is het laatst gewijzigd op= ' + document.lastModified;
alert(boodschap);
}
</script>
</head>
<body>
<form>
<input type='button' value = 'eigenschappen'
onClick = 'eigenschappen()'>
</form>
</body>
</html>

Wanneer op de knop in het document geklikt wordt, verschijnt het volgende venster:

De propertie document.title kan ook gebruikt worden om het document een titel te geven. De statement hiervoor is:

document.title='Een titel van het document';

Oefening:

1. Maak van alle scripts in deze alinea een html-document en test het resultaat in de browsers.
2. Maak een html-document die het volgende resultaat geeft op het scherm. gebruik hiervoor het script uit het vorige hoofdstuk.

   Het document is het laatst gewijzigd op : donderdag 11 oktober 2001

Arrays van het object document

De volgende eigenschappen van het object document zijn arrays:

• links[]
• anchors[]
• images[]
• forms[]

De arrays bevatten informatie over de linken, de ankers de afbeeldingen en de formulieren. Al deze eigenschappen zijn zelf ook weer objecten.

Door te verwijzen naar de plaatst in de array, kun je de objecten aanspreken. Zo verwijst document.images[0] naar de eerste afbeelding op de pagina, document.forms[1] verwijst naar het tweede formulier.

Oefening:

1. Bekijk de volgende listings en probeer te verklaren wat het resultaat zal zijn.
2. Maak van de listings html-documenten en test de scrips in de browsers.
   Sla het eerste document op onder de naam links1.html en het tweede document onder de naam links2.html

<html>
<body>
<script>
window2=open("link2.html","","scrollbars=yes,width=250, weight=400");

function linkToWindow(num)
{
if (window2.document.anchors.length > num)
{
window2.location.hash=num;
}
else
{
alert("Anker bestaat niet!")
}
}
</script>
<b>Links en Ankers</b>
<form>
<p>Klik op een knop om de ankers in window 2 te zien
<p>
<input type="button" value="0" name="link0_button" onClick="linkToWindow(this.value)">
<input type="button" value="1" name="link0_button" onClick="linkToWindow(this.value)">
<input type="button" value="2" name="link0_button" onClick="linkToWindow(this.value)">
<input type="button" value="3" name="link0_button" onClick="linkToWindow(this.value)">
<input type="button" value="4" name="link0_button" onClick="linkToWindow(this.value)">
</form>
</script>
</body>
</html>

<html>
<head>
<title> Window 2</title>
</head>
<body>
<a name="0">
<b>Enkele nummers</B> (anker 0)</a>
<ul>
<li>een
<li>twee
<li>drie
<li>vier
</ul>
<p></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a name="1"><B>Enkele kleuren</B> (ankers 1)</A>
<ul>
<li>rood
<li>oranje
<li>geel
<li>groen
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a name="2"><B>Enkele muziek types</b> (anker 2)</a>
<ul>
<li>R&B
<li>Jazz
<li>Soul
<li>Reggae
<li>Rock
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<a name="3"><B>Enkele landen</b> (anker 3)
<li>Noorwegen
<li>Duitsland
<li>Canada
<li>Finland
<li>Iran
</ul>
</body>
</html>

(naar boven)

Methodes van het object document

Het object document kent de volgende methodes:

CaptureEvenst()

De methode captureEvents() is ook een methode van het object window. De methode captureEvents() controleert gebeurtenissen. Als parameter moet je de gebeurtenissen opgeven die gecontroleerd moeten worden. Je gebruikt hierbij dezelfde namen als van de eventhandlers zonder het woordje on ervoor. Hiervoor in de plaats gebruik je het object Event.

De methode wordt alleen ondersteund door Firefox (Netscape)!

Je kunt de volgende gebeurtenissen controleren:

Het volgende script geeft een voorbeeld van het gebruik van de methode captureEvents():

<html>
<head>
<title>
</title>
<script language="JavaScript">
<!--
document.captureEvents(Event.KEYPRESS);
document.onkeypress= weergave
function weergave(gebeurtenis)
{
alert("Je hebt op de toets met de waarde " + gebeurtenis.which + " gedrukt!");
document.captureEvents(Event.KEYPRESS);
document.onkeypress = weergave;
}
//-->
</script>
</head>
<body>
Druk op een toets!
</body>
</html>

De methode wordt alleen ondersteund door Firefox (Netscape)! Om het script geschikt te maken voor andere browsers, kun je het volgende script gebruiken.

<script>
if( document.captureEvents && Event.KEYUP ) {
document.captureEvents( Event.KEYUP );
}

document.onkeyup = alertkey;

function alertkey(e) {
if( !e ) {

if( window.event ) {
//Internet Explorer
e = window.event;
} else {
//total failure, we have no way of referencing the event
return;
}
}
if( typeof( e.keyCode ) == 'number' ) {
e = e.keyCode;
} else if( typeof( e.which ) == 'number' ) {
//NS 4 compatible
e = e.which;
} else if( typeof( e.charCode ) == 'number' ) {
//also NS 6+, Mozilla 0.9+
e = e.charCode;
} else {
return;
}
window.alert('De keycode is ' + e +
' . Het is toets ' + String.fromCharCode( e ) );
}
</script>

Oefeningen

1. Probeer beide scripts uit in verschillende browsers.
2. Zoek alles op wat je niet begrijpt van de scripts op w3schools.com.

getSelection()

Deze methode vraagt de tekst op die door de bezoeker is geselecteerd. Ook deze methode wordt alleen ondersteund door Netscape!!
In het onderstaande voorbeeld zorgt een eventhandler er voor dat bij een klik op de knop de geselecteerde tekst weergegeven wordt in een venster.

Wanneer je het document test in de browser, moet je wel eerst een tekst selecteren, anders is het resultaat een leeg venster.

<html>
<head>
<title>selectie</title>
</head>
<body bgcolor="#e7cc9a" text="black">
veel tekst om te selecteren, veel tekst om te selecteren, veel tekst om te selecteren, veel tekst om te selecteren, veel tekst
<form>
<input type=button value="toon de selectie" onClick="alert(document.getSelection())">
</form>
</body>
</html>

open() en close()

Bij de methode open() wordt de inhoud van een venster vrijgegeven om opnieuw beschreven te worden. De methode close() sluit een documentinhoud.

In het onderstaande voorbeeld wordt eerst het onderste deel van het script uitgevoerd omdat de functie wissel pas later wordt opgeroepen.

Let op: in de tag <a href….> wordt de functie wissel aangeroepen door aan het attribuut href de waarde "javascript:wissel()" toe te kennen.

<html>
<body>
<script language="JavaScript">
function wissel()
{
document.open();
document.write('<a href="pagina1.html"> En nu sta ik hier</a>');
document.close();
}
document.open();
document.write('<a href="javascript:wissel()"> Ik sta hier nog</a>');
document.close();
</script>
</body>
</html>

write() en writeln()

De methode write() heb je al vaker gebruikt. De methode zet de string die tussen haakjes is geplaatst op het scherm. De methode writeln() werkt hetzelfde als write() alleen wordt hierbij een regelopschuiving toegevoegd.

<html>
<body>
<script language="JavaScript">
document.write( 'De eerste regel ');
document.write( 'De tweede regel ');
document.write( 'De derde regel ');
document.writeln( 'De vierde regel ');
document.writeln( 'De vijfde regel ');
document.writeln( 'De zesde regel ');
</script>
</body>
</html>

Oefening:

1. Probeer alle scripts van deze alinea uit. Let hierbij op dat niet alle methoden ondersteund worden door Internet Explorer.

(naar boven)

Enkele toepassingen

Cookies

Een cookie is een stukje informatie dat op de vaste schijf van een bezoeker wordt geplaatst. Het script bepaalt welke informatie opgeslagen wordt. Je kunt met behulp van een script het cookie lezen en de opgeslagen informatie gebruiken. Cookies worden gebruikt om de bezoekers van sites te volgen en te identificeren. Ze kunnen informatie bevatten als datum/tijd van bezoek, namen van bezochte pagina's of gekochte producten. In elke browser kan de mogelijkheid van het plaatsen van een cookie uitgeschakeld worden. Nadeel is dat veel websites dan geen toegang meer geven.

Cookies zijn strings die in een txt-bestand worden opgeslagen. Een cookie heeft een inhoud en een vervaldatum. De inhoud wordt opgenomen in de string achter de code naam= en de vervaldatum achter de code expires= .
Cookies gebruiken over het algemeen drie functies: één om de cookie in te stellen, één om de cookie te lezen en één om de cookie te verwijderen.

In de volgende listing wordt een cookie ingesteld die bijhoudt hoe vaak een bezoeker de pagina inleest.

Het is een voorbeeld met een extern Javascript-bestand. Je maakt dus twee bestanden: cookie.html en cookie.js.

cookie.htm:

 <html>
<head>
<script type="text/javascript" src="cookie.js"></script>
<title>koekje</title>
</head>
<body>
<script type="text/javascript">
<!--
printOut()
//-->
</script>
</body>
</html>

cookie.js:

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}

function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function printOut() {
if(amt() == 1) {
var message="Welkom op mijn pagina!";}
if(amt()== 2) {
var message="Ik zie dat je weer terug gekomen bent!"; }
if(amt() == 3) {
var message=" Leuk dat je weer komt!";}
if(amt() == 4) {
var message=" Jij komt wel vaak!";}
if(amt() == 5) {
var message="Heb je niets beters te doen?";}
if(amt() == 6) {
var message="Oh,ben jij dat weer!";}
if(amt() == 7) {
var message=" Wat zoek je hier nu?"; }
if(amt() == 8) {
var message="Slaap je wel eens?";}
if(amt() == 9) {
var message="Ga eens wat anders doen, dan achter de computer ziten!"; }
if(amt() >= 10) {
var message=" Ik ga jou elke maand maar huur vragen!";}
document.write("Je bent hier al <b>" + amt() + "</b> geweest.<br> " + message);
}

Oefeningen:

1. Lees het script en kijk of je de werking van de verschillende functies begrijpt.
2. Zoek wat je niet weet op bijvoorbeeld bij: w3schools.com.
3. Maak van de listing een html-document en test de scripts in de browser.

 Dynamische afbeeldingen

Alle afbeeldingen op een pagina staan in de array document.images[]. JavaScript biedt de mogelijkheid om na het laden van de pagina, een afbeelding te laten vervangen door een andere afbeelding.

In de volgende listing is hiervan gebruik gemaakt:

                   
<html>
<head>
<title>Fotoalbum</title>
</head>
<body>
<table border="0" cellpadding="0">
<h1>Fotoalbum<h1>
<tr>
<td width="100%"><img src="foto1.gif" width="300" height="240" name="fotoreeks"></td>
</tr>
<tr>
<td width="100%">
<form name="rotater">
<div align="center"><center><p>

<script language="JavaScript1.1">
var fotos=new Array()
var welke=0

fotos[0]="foto1.jpg"
fotos[1]="foto2.jpg"
fotos[2]="foto3.jpg"
fotos[3]="foto4.jpg"
fotos[4]="foto5.jpg"

function terug(){
if (welke>0)
{
window.status=''
welke--
document.images.fotoreeks.src=fotos[welke]
}
}

function verder(){
if (welke<fotos.length-1){
welke++
document.images.fotoreeks.src=fotos[welke]
}
else window.status='Einde'
}
</script><input type="button" value="&lt;&lt;terug" name="B2"
onClick="terug()"> <input type="button" value="volgende&gt;&gt;" name="B1"
onClick="verder()"><br>
<a href="#" onClick="welke=1;terug();return false"><small>Start opnieuw</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>
</body>
</html>

Oefeningen

1. Lees het script en kijk of je de werking van de verschillende functies begrijpt.
2. Maak een html-document en test deze in de browser. Zorg dat de bestanden met de afbeeldingen de juiste naam hebben en opgeslagen zijn in dezelfde map als het html-document.

Ook JavaScript kan werken met div's.

De volgende listings zijn voorbeelden van het werken met lagen:

<!DOCtype html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>verborgen Div</title>
<style type="text/css">
<!--
#main{
width:500px;
height: 20px;
background: lightblue;
}
#hidden {
width:300px;
height:20px;
background: lightgrey;
display: none;
}
-->
</style>
<script language="JavaScript">
function weg(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
</head>
<body>
<div id="main">
Deze is zichtbaar.
<a href="#" onclick="weg('hidden');">laat zien</a>
</div>
<div id="hidden">Deze is verborgen.</div>
</body>
</html>

Het volgende script werkt alleen in Internet Explorer

<html>
<style type="text/css">
<!--

#dragMe
{
position: absolute;
background-color: white;
padding: 2px;
width: 200px;
border: 1px black solid;
}

//-->
</style>
<body>
<div id="dragMe">
klik om te slepen
</div>

<script type="text/javascript" language="Javascript">
<!--

var ob;
var magHet;
var temp;
var tempL;
var TempT;
var test;
var theObj;

function MouseDown(e)
{
// kijken welk object het is
if(event.srcElement.id == 'dragMe'){
ob = event.srcElement;

// positie bepalen
tempL = ob.style.pixelLeft;
tempT = ob.style.pixelTop;

X=event.offsetX;
Y=event.offsetY;
}
}

function MouseMove(e)
{
if (ob)
{
ob.style.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.style.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}

function MouseUp()
{
if(ob)
ob = null;
}

document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;

//-->
</script>

</body>
</html>

Kalender

In het volgende script wordt het object date gebruikt om een kalender in een tabel te plaatsen.

<html>
<head>
<title>kalender</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
<!--
var d = document;
monthnames = new Array(
"januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december");
var linkcount=0;

function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
d.write("<table border=2>");
d.write("<tr><th colspan=7>" + monthnames[thismonth] + " " + thisyear + "</th></tr>");
d.write("<tr>");
d.write("<td align=center>Zo</td>");
d.write("<td align=center>Ma</td>");
d.write("<td align=center>Di</td>");
d.write("<td align=center>Wo</td>");
d.write("<td align=center>Do</td>");
d.write("<td align=center>Vr</td>");
d.write("<td align=center>Za</td>");
d.write("</tr>");
d.write("<tr>");
for (s=0;s<startspaces;s++) {
d.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
d.write("<td align=right>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
d.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
d.write("<strong>");
}
if (count <= monthdays[thismonth]) {
d.write(count);
}
else {
d.write(" ");
}
if (count==thisdate) {
d.write("</strong>");
}
if (linktrue)
d.write("</a>");
d.write("</td>");
count++;
}
d.write("</tr>");
d.write("<tr>");
startspaces=0;
}
d.write("</table>");
//-->
</script>
</body>
</html>

Oefeningen

1. Lees de scripts en kijk of je de werking van de verschillende functies begrijpt.
2. Maak van de scripts een html-document en test deze in de browser.

Formulieren

Inleiding

Eén van de child-objecten van document is het object form. Je zult JavaScript vaak gebruiken om formulieren te controleren of waarden in de verschillende velden in te voeren. Dit hoofdstuk is helemaal gewijd aan het object form en alle chid-objecten van form.

Het object form

Het object form is een child-object van het object document, dat weer een child-object is van window. De volledige benaming van het object is daarom:

window.document.form

De aanduiding window mag weggelaten worden wanneer je werkt met één object van window.
Elk element binnen een formulier is zelf ook weer een object met eigen properties en methodes. Deze elementen zijn child-objecten van het object form.

Properties, methodes en eventhandlers van form

Een formulier staat op een pagina tussen de tags <form></form>. De tag kent een aantal attributen. Alle mogelijke attributen zijn als eigenschap van het object form uit te lezen. Ze zijn niet te veranderen!

De eigenschappen van het object zijn uit te lezen.
Stel je hebt in een html-document het volgende formulier gedefinieerd:

<form method="post" action="http://www.server.com/cgi-bin/script.pl" name="bestelformulier">
<input type="text" name="test">
</form>

Je kunt dan in een script om de eigenschappen uit te lezen als voorbeeld de volgende variabelen declareren:

var actie= document.form[0].action;
var methode= document.form[0].method;
var naam= document.form[0].name;
var aantal_elementen= document.form[0].elements.length

De variabelen krijgen de volgende waarden:

actie= http://www.server.com/cgi-bin/script.pl
methode=post
naam=bestelformulier
aantal_elementen=1

In het volgende html-document wordt aan de bezoeker nog een bevestiging gevraagd voor het wissen van de inhoud van het formulier, wanneer op de knop reset geklikt wordt. Dit wordt geregeld door de eventhandler onReset van het object form. Wanneer op de knop reset geklikt wordt, wordt de functie test() aangeroepen.

<html>
<head>
<title>
</title>
<script language="JavaScript">
function test()
{
if (confirm('Weet u zeker dat u die inhoud van het formulier wilt wissen?'))
{
document.NAW.reset();
}
else
{
alert('het formulier wordt niet gewist!');
}
}
</script>
</head>
<body>
<form name="NAW" onReset="test()">
Naam: <input type="text"name="naam" size=40><br>
straat: <input type="text"name="straat" size=40><br>
plaats: <input type="text"name="plaats" size=40><br><br>
<input type="submit" value="verzenden" name="verzenden">
<input type="reset" value="wissen" name="wissen">
</form>
<script language="JavaScript">
document.write('aantal formulierelementen : ', document.NAW.elements.length);
</script>
</body>
</html>

Oefeningen

1. Maak het bovenstaande html-document en test het script in de browsers.
2. Pas het document aan met een functie die er voor zorgt dat een venster met een bedankje verschijnt wanneer er op de knop verzenden geklikt wordt. 

Child-objecten van form

Alle elementen binnen formulieren beschouwt JavaScript ook als object. Elk child-object van form kent zijn eigen properties, methodes en eventhandlers. De eigenschappen zijn af te leiden van de attributen van het veld. In deze alinea vind je eerst een overzicht van alle objecten. Hierna zijn een aantal scripts opgenomen waarin je leert hoe je met deze objecten kunt werken.

Tekstinvoervelden

Je kunt met JavaScript op twee manieren gebruik maken van tekstvelden. Je kunt de waarde van het veld uitlezen en je kunt zelf waarden invoeren.

In de onderstaande listing is een functie opgenomen die de inhoud van het eerste tekstveld optelt bij de inhoud van het tweede tekstveld. Het resultaat wordt getoond in het tekstveld met de naam uitkomst. De eventhandler onFocusvoorkomt dat de bezoeker een getal kan invoeren in het tekstveld uitkomst. Zodra de cursor in het veld wordt geplaatst, zorgt de methode blur() er voor dat de focus uit het veld verdwijnt.

<html>
<head>
<title>rekenen</title>
<script>
function optellen ()
{
document.mijnForm.uitkomst.value = parseFloat(document.mijnForm.getal1.value) + parseFloat(document.mijnForm.getal2.value);
}
</script>
</head>
<body>
<form name="mijnForm">
<p><B>Een rekenmachine</B></p>
getal 1: <input type="text" name="getal1" SIZE=6><br>
getal 2: <input type="text" name="getal2" SIZE=6><br>
<br>
uitkomst: <input type="text" name="uitkomst" size=12 onFocus="blur()"><br>
<br>
<input type="button" value="+" onClick="optellen()">
<input type="reset" value="wis getallen" >
</form>
</body>
</html>

De invoervelden die je maakt met de tag <textarea> lijken op de gewone invoervakken. De properties, methodes en eventhandlers zijn hetzelfde.
In het onderstaande voorbeeld wordt de eventhandler onChange gebruikt om de bezoeker te bedanken voor het invullen van het tekstveld. Zodra de focus in het veld is geplaatst, wordt de tekst geselecteerd.

<html>
<head>
<title>bedankt</title>
</head>
<body>
<form name="mijnForm">
<h3>Heeft u nog andere op- en aanmerkingen over deze module?</h3>
<textarea name="commentaar" rows=5 cols=70 onChange="alert('Bedankt voor uw op- en aanmerkingen.')" onFocus="select()">
Type hier uw commentaar.
</textarea>
</form>
<a onMouseover="document.mijnForm.commentaar.value='Deze les is heel leerzaam'"
onMouseout="document.mijnForm.commentaar.value='Deze les is erg moeilijk'">Standaardcommentaar</a>
</body>
</html>

Oefeningen

1. Maak van de bovenstaande listings een html-document en test ze in een browser.
2. Vul in de eerste listing het formulier aan met knoppen voor aftrekken, vermenigvuldigen en delen. Maak ook de bijpassende functies.
3. Maak een html-document met een formulier met een aantal tekstvelden. Zorg dat de achtergrondkleur van het document verandert wanneer de cursor in een ander veld wordt geplaatst. Het scherm ziet er als volgt uit:

Selectievakjes en keuzerondjes

Selectievakjes worden meestal gebruikt voor het in- of uitschakelen van bepaalde instellingen. Een selectievakje kent ook maar twee toestanden: aan of uit (checked of not checked). Alle selectievakjes staan voor één bepaalde selectie. Een selectievakje maakt geen deel uit van een groep.

Bij keuzerondjes is er altijd sprake van een groep, die samen één object vormen en ook maar één naam hebben. Elk keuzerondje heeft wel een eigen propertie voor value en checked. Om de eigenschap van elk keuzerondje te benaderen, moet je de array-notatie gebruiken. Om de waarde uit te lezen van het tweede keuzerondje in een groep gebruik je de regel:

var waarde= document.formulier_naam.naam_groep[1].value

Denk er aan dat JavaScript een array begint met het getal 0.

In de volgende listings zijn voorbeelden opgenomen van het gebruik van een selectievakje en keuzerondjes.

<html>
<head>
<title>selectievakje</title>
<script>
function aan_uit (check)
{
if (check.checked)
alert("Het vakje is aangevinkt.");
else
alert("Het vakje is niet (meer) aangevinkt.");
}

</script>
</head>
<body>
<form name="mijnForm">
<input type="checkbox" onClick="aan_uit(this)"> Klik in het vakje!
</form>
</body>
</html>

              
<html>
<head>
<title>keuzerondjes</title>
<script>
function aan_uit (check)
{
if (check.checked)
alert("Weet je zeker dat " + check.value + " het leukste vak van de opleiding is?");
}
</script>
</head>
<body>
<form name="mijnForm" >
<h2> Wat is je lievelingsvak? </h2>
<input type="radio" name="vakken" value="HTML" onClick="aan_uit(this)"> HTML<BR>
<input type="radio" name="vakken" value="Javascript" onClick="aan_uit(this)"> Javascript<br>
<input type="radio" name="vakken" value="Dreamweaver" onClick="aan_uit(this)"> Dreamweaver<br>
<input type="radio" name="vakken" value="Photoshop" onClick="aan_uit(this)"> Photoshop<br>
<input type="radio" name="vakken" value="Flash" onClick="aan_uit(this)"> Flash<br>
<input type="radio" name="vakken" value="Vormgeven" onClick="aan_uit(this)"> Vormgeven<BR>
</form>
<script>
document.write('<hr>Het aantal keuzerondjes: ' + document.mijnForm.vakken.length);
var derde= document.mijnForm.vakken[2].value;
document.write('<br> Het derde keuzerondje staat voor het vak: ' + derde);
</script>
</body>
</html>

Keuzelijsten

Bij keuzelijsten gebruik je, net als de keuzerondjes, een serie gegevens (options) onder één naam. Ook voor keuzelijsten geldt dat sommige eigenschappen gelden voor de gehele lijst en andere voor elke optie apart.

In de eerste listing zie je een voorbeeld van hoe je een keuzelijst kunt gebruiken om een compact menu met hyperlinks te maken, in het tweede voorbeeld worden de achtergrondkleuren ingesteld.

<html>
<body>
<script language = "JavaScript">
function link(){
var URL = document.menu.selectie.options [document.menu.selectie.selectedIndex].value
window.location.href = URL
}
</script>
<h1>Kies een zoekmachine: </h1>
<form name = "menu">
<select name="selectie" SIZE=1 onChange ="link()">
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.vindex.nl">Vindex
<option value="http://www.altavista.com ">Altavista
<option value="http://www.webcrawler.com ">Webcrawler
<option value="http://www.lycos.com ">Lycos
<option value="http://www.ilse.nl ">Ilse
<option value="http://www.google.com ">Google
</select>
</body>
</html>

<html>
<head>
<title>Verander de achtergrondkleur</title>
</head>
<body>
<center><b>Kies een achtergrondkleur en klik op OK.</b>
<p>
<form>
<select name=achtergrond>
<option selected> Kies een kleur
<option value=000000>Black
<option value=730200>donker rood
<option value=231800>bruin
<option value=044302>donker groen
<option value=0D09A3>donker blauw
<option value=444444>grijs
<option value=FF0400>rood
<option value=EFE800>geel
<option value=05EF00>groen
<option value=0206FF>blauw
<option value=AE08EF>violet
<option value=FF8C8A>Mauve
<option value=FFCCCC>perzik
<option value=FFCC99>Oranje
<option value=FFF8DC>maispluim
<option value=DDDDDD>licht grijs
<option value=FBFF73>licht geel
<option value=7CFF7D>licht groen
<option value=A6BEFF>licht blauw
<option value=40E0D0>turquoise
</select>
<input type=reset value="ok" onClick="(document.bgColor=achtergrond.options[achtergrond.selectedIndex].value)">
<p>
<input type=button value="Maak de achtergrond weer wit" onclick='document.bgColor="white"'></P>
</form>
</center>
</body>
</html>

Oefeningen

1. Maak van de bovenstaande listings een html-document en test de documenten in de browsers.

Formulieren controleren

JavaScript wordt veel gebruikt om de invoer van formulieren te controleren voordat de gegevens naar de server worden verzonden.  Je ontlast hiermee de server en de bezoeker krijgt direct reactie, wanneer fouten zijn gemaakt bij het invullen van het formulier.
In deze alinea zijn een aantal voorbeelden opgenomen met scripts die de invoer van de formulieren controleren.

In het volgende html-document wordt aan de bezoeker gevraagd om drie tekens in te vullen. De functie controleert de invoer en geeft een melding wanneer meer of minder tekens zijn ingevoerd.

<html>
<head>
<title>controleren 1</title>
<script>
function controleer ()
{
if (document.mijnForm.drie.value.length == 3)
{
document.mijnForm.submit()
}
else
{
alert("Voer drie karakters in. " + document.mijnForm.drie.value + " is niet geldig.")
return false
}
}
</script>
</head>
<body>
<form name="mijnForm" onSubmit="alert('Het formulier wordt verstuurd.')">
<b>Vul drie karakters in:</b>
<input type="text" NAME="drie" size=3>
<p>
<input type="button" value="Klaar" name="button1" onClick="controleer()">
<input type="submit" value="verzenden" >
</form>
</body>
</html>

In het onderstaande html-document wordt gecontroleerd of alle velden van het formulier zijn ingevuld. In de functie is geen gebruik gemaakt van het attribuut Name van de verschillende objecten van het formulier. Er wordt verwezen naar het eerste formulier in het document (form[0]) en het zoveelste object binnen het formulier (elements[1])

<html>
<head>
<title>controleer 2</title>
</head>
<body bgcolor=FFFFFF>
<script>
function controleer()
{
if(document.forms[0].elements[0].value==""
|| document.forms[0].elements[1].value==""
|| document.forms[0].elements[2].value==""
|| document.forms[0].elements[3].value==""
|| document.forms[0].elements[4].value==""
|| document.forms[0].elements[5].value=="")
{
alert("U moet alle velden invullen voordat u het formulier verzendt!")
}
}
</script>
<center>
<h1> Test</h1>
<p>
<h2>Vul uw gegevens in:</h2>
<p>
<form onSubmit="return controleer()">
<table>
<tr>
<td>Naam:</td>
<td><input type="text" size=35></td>
</tr>
<tr>
<td>Adres:</td>
<td><input type="text" size=35></td>
</tr>
<tr>
<td>Woonplaats:</td>
<td><input type="text" size=35></td>
</tr>
<tr>
<td>E-mail-adres:</td>
<td><input type="text" size=17 >
Postcode: <input type="text" size=12></td>
</tr>
<tr>
<td>Telefoon:</td>
<td><input type="text" size=35</td>
</tr>
</table>
<input type="submit" value="verzenden" >
</form>
</center>
</body>
</html>

Wanneer je wilt controleren of er een juist e-mail-adres is ingevoerd, dan moet je het script uitbreiden met de volgende functie. De functie kan aangeroepen worden door in de tag van het veld de eventhandler onChange="e_mail() te gebruiken.

              
function e_mail()
{
if (document.forms[0].elements[3].value.indexOf ('@') == -1
|| document.forms[0].elements[3].value.indexOf ('.') == -1)
{
alert('Dit is geen goed e-mailadres!\nProbeer opnieuw!');
document.forms[0].elements[3].select();
document.forms[0].elements[3].focus();
}
}

De methode indexOF() controleert of een bepaalde string in de ingevoerde tekst aanwezig is. De gezochte string moet tussen aanhalingstekens tussen de haakjes worden geplaatst.

De functie controleert of de invoer het @-teken en een punt bevat. Wanneer dat niet het geval is, wordt de uitkomst van de vergelijking Onwaar of –1. Een bezoeker kan nog steeds een verkeerd e-mail-adres invoeren. De invoer gr.mail@778 wordt goedgekeurd.

 Oefeningen

1. Maak van de bovenstaande listings een html-document en test de scripts in de browsers.
2. Voeg ook de functie e_mail toe aan het laatste html-document en test de functie in een browser.

jQuery

Wat is jQuery?

jQuery is een grote javascript bibliotheek met kant en klare functies. Het is een opensource dat steeds meer gebruikt wordt bij het maken van interactieve websites. Het combineert JavaScript met CSS-selectoren. De jquery-bibliotheek wordt steeds meer uitgebreid met nieuwe plugins. Je kunt jQuery vergelijken met de Spry-functies in Dreamweaver.

jQuery maakt het eenvoudig om JavaScript te schrijven en te gebruiken voor effecten die je eerst alleen met Flash kon bereiken. jQuery is zeer geschikt voor:

• Het toevoegen van geanimeerde effecten aan elementen zoals vervagen , schuiven en vergroten
• Het creëren van diavoorstellingen.
• Het maken van drop-down menu's.
• Het creëren van drag-and-drop interface.
• Het controleren van formulieren

Het voordeel van jQuery boven Flash is dat de bestanden klein zijn. Het is alleen maar tekst.

Voorbeelden van sites die gebouwd zijn met behulp van jQuery zijn:

• http://www.mtvsticky.com
• http://www.markandspencer.com
• http://bonadiesarchitect.com
• http://www.whitehouse.gov

Oefeningen

1. Bekijk de bovenstaande sites en kijk naar de broncode van de pagina's.

jQuery gebruiken

Dit hoofdstuk is alleen een kennismaking met jQuery. Daarom zijn er alleen een aantal voorbeeld scripts opgenomen.

Om jQuery te gaan gebruiken moet je op de website www.jquery.com de “jQuery library” downloaden. Hierna maak je een html bestand waar je de jQuery library aan koppeld.

Oefeningen

1. Ga naar de website www.jquery.com en download de bibliotheek.
2. Bewaar de bibliotheek in dezelfde map als je html-bestanden.

Wanneer je jQuery wilt aanroepen in je webpagina, dan moet je de functie gebruiken die jQuery heet. Je kunt jQuery ook afkorten tot : $.

Een jQuery commando begint dus met het oproepen van de functie, kort of volledig. (jQuery of $) Verder bestaat een commando uit een ‘selector’, een ‘action’ en een ‘parameter’.

Een voorbeeld:

jQuery('p') .css ('color', 'red');
$('p') .css ('color', 'red');

Hierboven zie je dat er eerst een selector staat, de ‘p’. Dit betekent dat alle paragrafen van de webpagina worden geselecteerd. Daarna zie je de action, de actie die het betreft. In ons voorbeeld CSS. Dit wordt in jQuery gebruikt om een CSS eigenschap aan te passen.

Vervolgens komen de parameters te staan die aangeven dat de kleur aangepast moet worden en wel naar rood. Dus met dit voorbeelden wordt alle tekst in paragrafen rood.

Het aantal parameters kan overigens variëren van nul naar veel. Maar bovenstaand voorbeeld is de basis van een jQuery commando.

Om een actie in te kunnen zetten is het vaak verstandig dat een pagina helemaal geladen is. Om dit te regelen gebruik je de volgende functie:

$(document).ready(function() {
// hier komt de functie;
});

Oefeningen

1. Maak de volgende bestanden en test het in de browser.Gebruik de juiste naam bij het aanroepen van de bibliotheek (scr=)
2. Zoek de codes die je niet begrijpt op Internet.

<html>
<head>
<title>mijn eerste jQuery</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p"). css ('color', 'red');
});
</script>
</head>
<body>
<p> deze alinea wordt rood</p>
</body>
</html>

<html>
<head>
<title>Nog een voorbeeld</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(function() { alert('Ga maar aan de slag!'); });
});
</script>
</head>
<body>
<p> een popvenster</p>
</body>
</html>

 

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Zoals je ziet werkt de link niet meer!");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

3. Voor het volgende voorbeeld heb je afbeeldingen nodig. Neem 5 afbeeldingen en maak ook thumnails van deze afbeeldingen. Geef de afbeeldingen de juiste naam.
4. Maak de volgende css- en htlm-bestand.
5. Test het resultaat in de browser.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fotoalbum</title>

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

<script type="text/javascript">
$(document).ready(function(){

$("h2").append('<em></em>')

$(".thumbs a").click(function(){

var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });

$("h2 em").html(" (" + largeAlt + ")"); return false;
});

});
</script>

<style type="text/css">
</style>
<link href="galery.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h2>Foto's</h2>

<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>

<p class="thumbs">
<a href="img2_lg.jpg" title="Image 2"><img src="img2-thumb.jpg" /></a>
<a href="img3_lg.jpg" title="Image 3"><img src="img3-thumb.jpg" /></a>
<a href="img4_lg.jpg" title="Image 4"><img src="img4-thumb.jpg" /></a>
<a href="img5_lg.jpg" title="Image 5"><img src="img5-thumb.jpg" /></a>
<a href="img1_lg.jpg" title="Image 6"><img src="img1-thumb.jpg" /></a>

</p>

</body>
</html>

css:

body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}

(naar boven)

Opdrachten Introductie scripten

1. Schrijf een html-document met een script dat het volgende resultaat geeft:
   
2. Pas het script aan zodat onder de laatste streep de tekst komt te staan:
   Dit document heeft de volgende URL: file:///(plaats van bestand)
3. Pas het document aan zodat de regel “Deze tekst is cursief” een hyperlink is. Wanneer de gebruiker hierop klikt, verschijnt een waarschuwing met de tekst “hallo”.
   Let op! Hierbij moet je JavaScript-opdrachten gebruiken die niet binnen de tags <script></script> vallen.

Opdracht Statements en variabelen

1. Maak een html document met een script waarin de bezoeker gevraagd wordt om twee getallen in te voeren. Deze getallen worden met elkaar vergeleken en het resultaat van deze vergelijking wordt op het scherm getoond. Het resultaat ziet er als volgt uit:

Opdrachten functies

1. Maak een html-document met een script die de tafels overhoort.  De bezoeker kan kiezen welke tafel hij/ zij wilt oefenen. Wanneer een fout antwoord is gegeven, wordt hier melding van gemaakt. De som verschijnt opnieuw. Pas als er een goed antwoord is gegeven, dan komt de volgende som op het scherm. De bezoeker kan de lus onderbreken door als antwoord het getal 0 in te typen. Het resultaat moet er uitzien als op onderstand scherm. Maak gebruik van:
   • Functies
   • While-statement
   • If-statement
     
   
   
2. Maak een tabel waarin de bezoeker getallen in kan voeren. Wanneer de gebruiker het getal 0 invult worden de som van alle getallen in de onderste rij geplaatst. Het resultaat ziet er als volgt uit:

Opdrachten events

1. Maak een pagina waarin na het laden van de pagina de gebruiker om een naam gevraagd wordt. Hierna verschijnt een welkom in een dialoogvenster. Wanneer de pagina verlaten wordt, verschijnt ook een dialoogvenster waarin de bezoeker gevraagd wordt om snel terug te komen. Maak gebruik van functies.
2. Pas het document van de tabel met de rekenmachine zo aan dat het totaal pas te zien is, wanneer de gebruiker op een knop klikt. Wanneer het focus naar de knop verplaatst wordt, krijgt de achtergrond een blauwe kleur.
3. Op Internet vindt je veel kant en klare scripts die je gratis kan gebruiken. Ga naar de site http://webdeveloper.earthweb.com/webjs en bekijk een aantal scripts uit de categorie background. Kijk naar de gebruikte statements en probeer stap voor stap het resultaat te verklaren.

Opdrachten objecten 1

1. Bekijk de volgende listing en bedenk wat het resultaat is in de browser.
   
   <html>
   <head>
   <script language="JavaScript">
   var scroll_tekst="Deze tekst scrollt in een invoervenster op het scherm. ";
   var teller = 0;
   function scroll() {
                   document.box.boxtext.value = scroll_tekst;
                   scroll_tekst=scroll_tekst.substring(1,scroll_tekst.length)
                                + scroll_tekst.charAt(0);
                   teller = setTimeout("scroll()",50) ;
   }
   </script>
   </head>
   <body onLoad = scroll()>
   <form name = "box" >
   <center>
   <input type="text" name="boxtext"  size="45" value="">
   </center>
   </body>
   </html>
   
   
2. Test de listing in de browser.
3. Maak zelf een html-document met een script dat er voor zorgt dat in een invoervenster na 3 seconden nadat een bezoeker op een knop heeft gedrukt, een tekst verschijnt.

Opdracht objecten 2

1. Lees de onderstaande listing en probeer te beredeneren wat het effect van het script zal zijn.
2. Maak hierna van de listing een html-document en test het script in een browser.

<html>
<head>
<script Language"JavaScript">

maanden = new Array(12);
maanden[0] = 'januari';
maanden[1] = 'februari';
maanden[2] = 'maart';
maanden[3] = 'april';
maanden[4] = 'mei';
maanden[5] = 'juni';
maanden[6] = 'juli';
maanden[7] = 'augustus';
maanden[8] = 'september';
maanden[9] = 'oktober';
maanden[10] = 'november';
maanden[11] = 'december';

dagen = new Array(7)
dagen [0] = 'zondag';
dagen [1] = 'maandag';
dagen [2] = 'dinsdag';
dagen [3] = 'woensdag';
dagen [4] = 'donderdag';
dagen [5] = 'vrijdag';
dagen [6] = 'zaterdag';

function maakdatum(datum)
{
var dag = dagen[datum.getDay()];
var maand = maanden[datum.getMonth()]
var jaar = datum.getYear();

var datumstring = dag + ' '+datum.getDate() + ' '+ maand + ' '+ jaar;
return datumstring;
}
// -->
</script>
</head>
<body>
<h2> Welkom, het is vandaag
<script Language="JavaScript">

document.write (maakdatum (new Date()));
</script>
</h2>
</body>
</html>

3. Maak zelf een script dat bij het openen van de pagina het volgende scherm laat zien. Wanneer de browser van de bezoeker microsoft Internet Explorer is, verschijnt op de pagina een link naar www.microsoft.com om de nieuwste versie te downloaden.
   Wanneer dit niet zo is verschijnt een link naar www.netscape.com. Op het scherm verschijnt de mededeling:

Download hier de nieuwste versie van uw browser

1. Schrijf een spelletje: getallen raden. De bezoeker kan een getal invullen. De invoer wordt vergeleken met een willekeurig getal. Door op een knop te klikken, krijgt de bezoeker te zien of het getal goed geraden is. Het scherm kan er zo uitzien:

1. Maak een script dat er voor zorgt dat bij het openen van de pagina een extra venster getoond wordt met hierin de datum en de spreuk van de dag. Het scherm kan er zo uitzien:

Opdracht object document

1. Schrijf een pagina waarop een knop geplaatst wordt. Wanneer de bezoeker op de knop klikt verschijnt er een nieuw venster met de eigenschappen van het document.

Opdrachten form

1. Lees de onderstaande listing en bedenk wat het resultaat zal zijn.
2. Maak van de listing een html document en test het in de browser.
3. Pas het document aan zodat in het geopende venster de totaalprijs van de pizza te zien is.

<html>
<head>
<title>Pizza bestellen</title>

<script language="JavaScript">
function form1()
{
this.tomaat=tomaat;
this.parmezaanse_kaas=parmezaanse_kaas;
this.gorgonzola=gorgonzola;
this.olijven=olijven;
this.ansjovis=ansjovis;
this.paprika=paprika;
this.broccoli=broccoli;
this.asperges=asperges;
this.rode_peper=rode_peper;
this.groene_peper=groene_peper;
}

function bestel()
{
alert ('uw pizza is besteld en wordt binnen 15 minuten warm afgeleverd!');
myWin.close();
}

function resultaat(form1)
{
string1='<table border=1>';
for (i=0; i<form1.pizza.length; i++)
{
if (form1.pizza[i].checked)
string1+='<tr><td>' + form1.pizza[i].value + '</td></tr>';
else
string1+='';
string2='</table>';
}

myWin=open('','','width=400,height=300,scrollbar=no,status=no ,toolbar=no');
myWin.document.open();
myWin.document.write('<html><head></head><body bgcolor="Teal" text="White">')>
myWin.document.write('<div align="center"> <h3>U bestelde de volgende pizza :</h3>Basis plus:');
myWin.document.write(string1);
myWin.document.write(string2);
myWin.document.write('<br><br><form><input type="button" value="bestel" onClick="opener.bestel()">');
myWin.document.write('&nbsp<input type="button" value="herstel" onClick="self.close()"><hr width="75%">');
myWin.document.write('</form></div></body></html>');
myWin.document.close();
}

</script>
</head>
<body bgcolor="#F0E68C">
<h1>Kies uw favoriete ingredienten voor een droompizza ! </h1>
<h2>De basispizza kost 10 gulden.<br>
Voor elke ingedient betaald uw 2 gulden extra.</h2>
<form name="form1">
<input type="checkbox" value="tomaat" name="pizza">Tomaat<br>
<input type="checkbox" value="parmezaanse kaas" name="pizza">Parmezaanse kaas<br>
<input type="checkbox" value="gorgonzola" name="pizza">Gorgonzola<br>
<input type="checkbox" value="olijven" name="pizza">Olijven<br>
<input type="checkbox" value="ansjovis" name="pizza">Ansjovis<br>
<input type="checkbox" value="paprika" name="pizza">Paprika<br>
<input type="checkbox" value="broccoli" name="pizza">Broccoli<br>
<input type="checkbox" value="asperges" name="pizza">Asperges<br>
<input type="checkbox" value="rode peper" name="pizza">Rode peper<br>
<input type="checkbox" value="groene peper" name="pizza">Groene peper
<p><p>
<input type="button" value="Bak mijn pizza !" onClick="resultaat(this.form)">
<input type="reset" value="herstel">
</form>
</body>
</html>

 

Opdrachten jQuery

Op internet zijn veel tutorials en plugins te vinden. Voorbeelden van plugins zijn te vinden bij:

• http://www.ndoherty.biz/tag/coda-slider/
• http://www.catchmyfame.com/catchmyfame-jquery-plugins/
• http://pupunzi.com/#mb.components/components.html
• http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
• http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

1. Bekijk de verschillende sites.
2. Kies één van de plugins en download deze.
3. Maak een html-bestand waarin je deze plugin gebruikt.