Inhoud:
Inleiding
Oef.
1: mijn eerste javascriptje
Oef. 2 : een functie
in Javascript
Oef. 3: een invulveld.
Oef. 4: de onMouseOver-eigenschap
Oef. 5: een datumfunctie
Oef. 6: random-getallen
Oef. 7: een nieuw
venster openen
Oef. 8: tekst in
de statusbalk
Oef. 9: in de statusbalk
schrijven met onMouseOver
Oef. 10: een bewegende
tekst in de statusbalk
Oef. 11: de achtergrondkleur
aanpassen
Oef. 12: cookies
maken
Wiskundige
functies
Javascript-spelletje:
zoek de drie juiste
Bereken je interest
in Javascript
Verwerken
van berichten
Javascript
als object-georiënteerde scripttaal
Nuttige internetadressen
Als je de javascript-voorbeelden in actie wil zien, klik hier
Wat is javascript?
Java is een scripttaal voor Webpagina's.Je kan hiermee je webpagina
veel boeiender en aantrekkelijker maken. Alle moderne browsers kunnen Javascript
aan.
Is er verschil met Java?
De namen lijken op elkaar, maar het zijn totaal verschillende dingen.
Java is een volledige programmeertaal. Met Java kun je "echte" programma's
maken. Javascript kun je alleen binnen een webpagina gebruiken.
Hoe kun je Javascript in je webpagina inpassen?
Om dit te laten zien eerst een zeer eenvoudig voorbeeldje.
Oef. 1: mijn eerste javascriptje
Typ onderstaande html-pagina in, sla ze op als Oef1.html, en bekijk ze in een browser.
<html>
<head>
<title>Mijn eerste javascriptje!</title>
</head>
<body>
Dit is een gewoon html-document.
<br>
<script language="JavaScript">
document.write("En dit is Javascript!")
</script>
<br>
Terug in gewoon html.
</body>
Het resultaat moet er ongeveer zoals hieronder uitzien:
Dit is natuurlijk geen goede javascript-toepassing! Want dit ging veel sneller in html. Maar let op <script>-tags. Deze kun je in je document gebruiken waar je maar wil!
Tip: Opgepast! Javascript houdt rekening
met hoofdletters of kleine letters. De code
Document.write('Hallo')
geeft een verwarrende foutmelding, terwijl
document.write('Hallo')
feilloos werkt!
Oef. 2 : een functie in Javascript
Voer weer onderstaande tekst in. En bewaar het als Oef2.html.
<html>
<head>
<script language="JavaScript">
<!-- verberg het script voor oude browsers in
commentaar!
function pushbutton()
{
alert("Hallo!");
}
// stop hier met verbergen -->
</script>
<title>Oef2</title>
</head>
<body>
<form>
<input type="button" name="Knop1" value="Druk
hierop"
onclick = "pushbutton()">
</form>
</body>
</html>
Uitleg:
Met de <form>-tag wordt een drukknop met opschrift "Druk hierop"
gemaakt. Als je er op drukt (onClick) wordt de functie "pushbutton()" aangeroepen.
Deze zorgt ervoor dat er een attentie-venstertje met de tekst "Hallo!"
op het scherm verschijnt.
Oef. 3: een invulveld.
Dit is de tekst voor Oef3.html.
<html>
<head>
<script language="JavaScript">
<!-- verberg script voor oude browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// stop met verbergen -->
</script>
</head>
<body>
Geef je naam :
<form>
<input type="text" name="name" onChange="getname(this.value)"
value="">
</form>
</body>
</html>
Typ een tekst in het tekstkadertje en duw op return.
Oef. 4: de onMouseOver-eigenschap
Als je je pagina wil laten reageren als je de muis over een tekst (hier een link) beweegt, gebruik je de onMouseOver-eigenschap van Javascript.
Dit is Oef4.html:
<html>
<head>
<script language="JavaScript">
<!-- Hiding
function hello() {
alert("Hello!");
}
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
Probeer ze uit. Wat gebeurt er als de muiscursor over de link beweegt?
Dit is oef5.html:
<html>
<head>
<title>Oefening 5</title>
</head>
<body>
<script language="JavaScript">
<!-- Verbergen
today = new Date()
document.write("De tijd is: ",
today.getHours(),":",today.getMinutes(),"
")
document.write("De datum is: ",
today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// einde verbergen -->
</script>
</body>
</html>
Bekijk het resultaat in de browser!
Oef. 6: random-getallen
In allerlei toepassing zijn willekeurige (random) getallen nodig. Met
dit Javascriptje kun je ze genereren:
<html>
<head>
<script language="JavaScript">
function RandomNumber() {
today = new Date();
num= Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
document.write("Dit is een random getal: ", RandomNumber());
// -->
</script>
</body>
</html>
Als je bv. een random-getal tussen 0 en 100 wil kan je de volgende code gebruiken:
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000))
% 100;
return num;
}
Uit de computertijd wordt een random-getal afgeleid.
Pas dit even toe in deze oefening. Telkens als je de pagina inlaadt,
krijg je een willekeurig getal tussen 0 en 100.
Oef. 7: een nieuw venster openen
Met onderstaande code kun je javascript een nieuw venster laten openen.
<html>
<head>
<script language="JavaScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>Dit
is echt COOL!
</B></h1></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Hier
drukken"
onclick="WinOpen()">
</form>
</body>
</html>
Tip:
Ook in de statusbalk kun je tekst schrijven. Dat doe je als volgt:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!" onclick="statbar('Hi!
This is the statusbar!');">
<input type="button" name="erase" value="Erase!" onclick="statbar('');">
</form>
</body>
</html>
Oef. 9: in de statusbalk schrijven met onMouseOver
Je kan in voorgaande oefening ook de eigenschap onMouseOver gebruiken zoals in Oef9.html:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver=
"moveover('Hé daar !!!
Hier ben ik even...');return true;">
link</a>
</body>
</html>
Met de functie setTimeout wordt de tekst hier na 1000msec gewist.
Oef. 10: een bewegende tekst in de statusbalk
Een bewegende tekst in de statusbalk kan ook, zoals in onderstaande Oef10.html:
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="Hier komt uw bewegende tekst in de
statusbalk die de bezoekers +
"van je pagina zal fascineren...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Hier een bewegende tekst in je statusbalk!
</body>
</html>
Probeer eens uit te vissen hoe het script werkt!
Oef. 11: de achtergrondkleur aanpassen
Deze oefening voorziet een drukknop waarmee je de kleur van de achtergrond kan aanpassen
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function reversecolor() {
// The if statement still requires the triplet.
if (document.bgColor == '#ffc0cb') {
document.bgColor = 'purple'}
else {
document.bgColor = 'pink'
}
}
</SCRIPT>
<BODY bgColor = 'pink'>
<FORM>
<INPUT type = "button" value="Druk hier" onclick="reversecolor()">
</FORM>
</BODY>
</HTML>
Het veranderen van de tekstkleur is ingewikkelder. Hiervoor moet je een nieuw venster aanmaken en de pagina met de nieuwe tekstkleur opnieuw inladen.
In het if-statement moet de hex-code worden gebruikt. De 'pink' aanduiding wordt hier niet herkend.
Deze cookie zorgt ervoor dat de pagina vermeld hoe dikwijs je op deze
site bent geweest.
Hier is de tekst van Oef12.html:
<html>
<head>
<title>Een Cookie & JavaScript combinatie</title>
<SCRIPT LANGUAGE="JavaScript1.1" TYPE="text/javascript">
function incCookie(cookieName)
{
cookie = readCookie (cookieName)
if (cookie)
{
cookie = eval(cookie) + 1 }
else
{cookie = 1 }
document.cookie=cookieName+"="+cookie+"; expires=Tuesday,
01-Dec-1999 08:00:00 GMT"
}
function getCookie(cookieName)
{
count = readCookie (cookieName)
if (count)
{
if (count == 1)
{ return
("1 keer")
}
else
{return
(count+" keren")
}
}
else
{
return ("0 times")
}
}
function readCookie(cookieName)
{ cookie_array = document.cookie.split
("; ")
for (x=0; x < cookie_array.length;
x++)
{
cookieParts_array
= cookie_array[x].split("=")
if
(cookieParts_array[0] == cookieName)
{
return cookieParts_array[1]
}
}
return null;
}
</SCRIPT>
</head>
<body onLoad="incCookie('jscookie11')">
<h1>Cookies en JavaScript</h1>
<h2><script TYPE="text/javascript">
document.write("Je bent reeds "+getCookie('jscookie11')+"
op deze pagina geweest.");
</script></h2>
<p>Probeer het en laad deze pagina opnieuw
in...
en kijk hoe de teller verhoogt! Deze teller wordt
bijgehouden in de cookie
die in uw browser wordt opgeslagen.</p>
</body>
</html>
Wat zijn cookies?
In een cookie wordt lokaal op je PC informatie opgeslagen door de browser,
die later terug kan gelezen worden. Zo kan een serienummer, een getal of
een datum worden opgeslagen in een tekstbestandje cookies.txt geheten.
Als je daarna naar die site terugkeert gaat de browser deze waarde terug uitlezen, en zich daarnaar gedragen.
In onze cookie wordt opgeslagen hoe dikwijls je de site al bezocht hebt.
Je kan dus alleen dingen uit de cookie halen, die je er eerst hebt opgeslagen.
Waartoe kunnen cookies dienen?
Cookies kunnen voor ongelooflijk veel dingen worden gebruikt. Denk
maar aan de "shopping sites" om je boodschappenkarretje op te slaan, in
Javascript/CGI communicatie, voor statistische doeleinden, waarvan onze
cookie een voorbeeld is.
En zo werkt het
Het aantal keren dat de browser deze pagina bezocht wordt opgeslagen
in een cookie in je browser.
De code dat de cookie maakt is in de pagina ingebed in de HTML-code van de webpagina.
Er zijn drie delen:
De functie readCookie
function readCookie(cookieName) {
cookie_array = document.cookie.split ("; ")
for (x=0; x < cookie_array.length; x++)
{
cookieParts_array
= cookie_array[x].split("=")
if
(cookieParts_array[0] == cookieName)
{return cookieParts_array[1]
}
}
return null;
}
Hier wordt het echte werk gedaan.
Deze functie leest de cookies in document.cookie, gebruikt het split-commando om de verschillende cookies in een array te laden en stapt dan door dit array, en gebruikt split opnieuw om de cookie op te splitsen in zijn twee delen: zijn naam en de inhoud.
De juiste cookie is gevonden als zijn naam overeen komt met deze in cookieName. De inhoud van de cookie wordt dan teruggegeven. Als de cookie niet gevonden is, wordt een null teruggegeven.
De functie getCookie
function getCookie(cookieName) {
count = readCookie (cookieName)
if (count) {
if
(count == 1) {
return ("1 keer")
}
else
{
return (count+" keren")
}
} else {return ("0 keer")
}
}
Deze functie leest de waarde in de cookie uit. De if-statements dienen om een goede nederlandse syntax te bekomen. Deze functie is eigenlijk niet echt nodig, eigenlijk alleen maar voor de grammatica.
functie incCookie()
function incCookie(cookieName) {
cookie = readCookie (cookieName)
if (cookie) {
cookie = eval(cookie) + 1
}
else {
cookie
= 1
}
document.cookie=cookieName+"="+cookie+";
expires=Tuesday, 01-Dec-1999 08:00:00 GMT"
}
Dit is de functie die de cookie op je PC zet. Eerst wordt gekeken of de cookie al bestaat, en als dat zo is, wordt de teller met één verhoogd.
Als de cookie nog niet bestaat wordt een "1" geschreven.
Je kan een hele info meegeven met de cookie. (Kijk in Netscape's cookie informatie voor meer details) Een vervaldatum van de cookie is vereist.
Automatisch updaten
<body onLoad="incCookie('jscookie11')">
Hierin zit het trukje om de cookie te updaten. Het onLoad-commando komt
in de body-tag van de pagina en wordt uitgevoerd als de pagina ingeladen
is. Dan wordt de functie incCookie uitgevoerd, die de cookie, jscookie11
genaamd, aanpast.
Printing the counter
<script>
document.write("Je bent reeds "+getCookie('jscookie11')+"
op deze pagina geweest.")
</script>
Dit drukt de teller af op het scherm.
Javascript kent natuurlijk ook veel wiskundige functies zoals in onderstaand voorbeeld.
<html>
<head>
<title>Wiskundige functies</title>
</head>
<body>
Geef een getal:
<form>
<input type="text" size=10 onChange="toon(this.value)"
name="veld">
</form>
<script language="javascript">
function toon(x)
{
document.write("<h2>Je hebt het getal ",x,"
ingegeven</h2>")
document.write("De sinus is ",Math.sin(x),"<br>")
document.write("De cosinus is ",Math.cos(x),"<br>")
document.write("De vierkantswortel is ",Math.sqrt(x),"<br>")
document.write("De natuurlijke logaritme is ",Math.log(x),"<br>")
with (Math)
{document.write("Pi: ",PI,"<br>")
document.write("E : ",E,"<br>")
document.write("Een randomgetal
: ",random(),"<br>")
document.write("2 tot die macht
is : ",pow(2,x),"<br>") }
}
</script>
</body>
</html>
De uitvoer ziet er uit als volgt:
En na ingave:
Javascript-spelletje: zoek de drie juiste.
Nu we de smaak te pakken
hebben volgt hier voor de liefhebbers een iets gecompliceerder Javascript.
Dit is een eenvoudig spelletje, geprogrammeerd in Javascript. Men moet
drie juiste vakjes aankruisen uit 6 om te winnen.
En hier volgt de code:
<HTML>
<HEAD>
<TITLE>Zoek de drie juiste</TITLE>
<META NAME="Author" CONTENT="Chris Daniels">
<SCRIPT language="JavaScript">
var ar = new Array(6); // een array met de oplossing
var pogingen=0; // aantal pogingen om tot de oplossing
te komen
// initialiseer 3 random waarden
function Initialiseer()
{
var hulp;
for (i=0;i<6;i++) ar[i]=false;
for (i=0;i<3;i++) {
hulp=(Math.random())*6;
hulp=Math.round(hulp);
while (ar[hulp]==true) {
hulp=(Math.random())*6;
hulp=Math.round(hulp)
};
ar[hulp]=true;
}
pogingen=0;
}
function Count(form)
{
aantal=0;
if (form.box1.checked) aantal++;
if (form.box2.checked) aantal++;
if (form.box3.checked) aantal++;
if (form.box4.checked) aantal++;
if (form.box5.checked) aantal++;
if (form.box6.checked) aantal++;
return aantal;
}
function Test(form)
{
// Kijk hoeveel vakjes er werden aangekruist
aantal=Count(form);
if (!(aantal==3))
{
form.resultaat.value=0;
alert("Je moet 3 vakjes aankruisen
!");
}
else{
// ok, kijk nu of er drie juiste zijn
aantal=0;
if ((ar[0]) && (form.box1.checked))
aantal++;
if ((ar[1]) && (form.box2.checked))
aantal++;
if ((ar[2]) && (form.box3.checked))
aantal++;
if ((ar[3]) && (form.box4.checked))
aantal++;
if ((ar[4]) && (form.box5.checked))
aantal++;
if ((ar[5]) && (form.box6.checked))
aantal++;
form.resultaat.value=aantal;
pogingen++;
form.pogingen.value=pogingen;
if (aantal==3)
{
if (pogingen<5)
alert("WAW
!!! Je hebt het al gevonden in "
+pogingen+" keer ! JE BENT SUPER !!!");
if ((pogingen>=5) &&
(pogingen<10))
alert("OKE,
je hebt het gevonden in "
+pogingen+" keer. Is toch prima gespeeld !");
if (pogingen>=10)
alert("Bah,
Je hebt het slechts gevonden na "
+pogingen+" keer. Kon eigenlijk heel wat sneller...");
Initialiseer();
ClearAll(form);
}
}
}
function ClearAll(form)
{
form.reset();
pogingen=0;
}
function Spiek(form)
{
if (ar[0]) form.box1.checked=true
else form.box1.checked=false;
if (ar[1]) form.box2.checked=true
else form.box2.checked=false;
if (ar[2]) form.box3.checked=true
else form.box3.checked=false;
if (ar[3]) form.box4.checked=true
else form.box4.checked=false;
if (ar[4]) form.box5.checked=true
else form.box5.checked=false;
if (ar[5]) form.box6.checked=true
else form.box6.checked=false;
alert("Dit was de oplossing ! We starten een nieuw
spelletje !")
Initialiseer();
ClearAll(form);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#c0c000" onLoad="Initialiseer()">
<P><FONT COLOR="#000080" SIZE=+3>Zoek de
drie juiste vakjes !</FONT>
<HR WIDTH="100%"></P>
<P><FONT SIZE=+1>Uitleg : klik drie vakjes
aan. <BR>
Klik dan op 'Test' om te kijken hoeveel je er
juist hebt.</FONT>
<HR WIDTH="100%"></P>
<P><FORM name="form1"></P>
<TABLE>
<TR><FONT SIZE=+2><B>
<TD ALIGN=CENTER>1 </TD>
<TD>2 </TD>
<TD>3 </TD>
<TD>4 </TD>
<TD>5 </TD>
<TD>6 </TD></B></FONT>
</TR>
<TR>
<TD><INPUT type="checkbox" name="box1"></TD>
<TD><INPUT type="checkbox" name="box2"></TD>
<TD><INPUT type="checkbox" name="box3"></TD>
<TD><INPUT type="checkbox" name="box4"></TD>
<TD><INPUT type="checkbox" name="box5"></TD>
<TD><INPUT type="checkbox" name="box6"></TD>
</TR>
</TABLE>
<P><INPUT type="button" value=" Test " name="button1"
onClick="Test(this.form)">
Aantal juiste :<INPUT type="text" value=0 name="resultaat"
size=3>
Aantal pogingen:<INPUT type="text" value=0
name="pogingen" size=2>
</P>
<P><INPUT type="button" value="Nieuw spelletje" name="button2" onClick=ClearAll(this.form)></P>
<P><INPUT type="button" value=" Spieken " name="button1" onClick="Spiek(this.form)">
</FORM></P>
</BODY>
</HTML>
Enige uitleg:
Functie Initialiseer()
Deze functie initialiseert een array van 6 zodanig dat er juist 3 waarden
TRUE zijn.
Functie Test(form)
Deze functie gaat tellen hoeveel vakjes juist werden aangekruist. Het
aantal pogingen wordt daarbij met één verhoogd.
Als alles juist is wordt tevens een waardering in een attentievenster
gegeven.
Functie ClearAll(form)
Alle velden van de form worden gereset om een nieuw spelletje
te kunnen beginnen.
Functie Spieken(form)
De oplossing wordt getoond en een attentievenster. Er wordt daarna
een nieuw spelletje geïnitialiseerd.
Bereken je interest in Javascript
Met dit javascript kun je de maandelijkse aflossing berekenen, als je ingeeft hoeveel aflossingen je doet, het interestpercentage, en het geleende kapitaal.
En hier is de code:
<HTML>
<HEAD>
<TITLE>JavaScript Interest Calculator</TITLE>
<SCRIPT LANGUAGE="LiveScript">
// JavaScript Loan Calculator
// by Paul Colton
// based on a demo by Netscape Communications,
Inc.
function checkNumber(input, min, max, msg)
{ msg = msg + " field has invalid
data: " + input.value;
var str = input.value;
for (var i = 0; i < str.length;
i++)
{
var
ch = str.substring(i, i + 1)
if
((ch < "0" || "9" < ch) && ch != '.')
{
alert(msg);
return false;
}
}
var num = 0 + str
if (num < min || max <
num)
{
alert(msg
+ " not in range [" + min + ".." + max + "]");
return
false;
}
input.value = str;
return true;
}
function computeField(input)
{
if (input.value != null &&
input.value.length != 0)
input.value = "" + eval(input.value);
computeForm(input.form);
}
function computeForm(form)
{
if ((form.payments.value == null || form.payments.value.length
== 0) || (form.interest.value == null || form.interest.value.length ==
0) || (form.principal.value == null || form.principal.value.length == 0))
{
return;
}
if (!checkNumber(form.payments, 1, 480, "# of payments")
|| !checkNumber(form.interest, .001, 99, "Interest") || !checkNumber(form.principal,
100, 10000000, "Principal"))
{
form.payment.value = "Invalid";
return;
}
var i = form.interest.value;
if (i > 1.0)
{
i = i / 100.0;
form.interest.value = i;
}
i /= 12;
var pow = 1;
for (var j = 0;j < form.payments.value; j++)
pow = pow * (1 + i);
form.payment.value = (form.principal.value * pow
* i) / (pow - 1)
}
function clearForm(form)
{
form.payments.value = "";
form.interest.value = "";
form.principal.value = "";
}
</SCRIPT>
<TITLE>JavaScript Interest Calculator</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<CENTER><FONT SIZE=+2>JavaScript Interest
Calculator</FONT><BR>
<SMALL>(Based on a demo from Netscape)</SMALL>
</CENTER>
<HR>
<SMALL>In dit JavaScript voorbeeld, kun je
berekenen hoeveel je moet aflossen voor de aankoop van je huis of je nieuwe
wagen.
Geef deze bedragen in in de velden hieronder om
te weten hoeveel je maandelijks moet afbetalen.
<BR></SMALL>
<HR><CENTER><FORM method=POST>
<TABLE border=4>
<TR>
<TD><DIV ALIGN=CENTER> aantal <br>afbetalingen</DIV></TD>
<TD><DIV ALIGN=CENTER>Interest<br>per
jaar</DIV></TD>
<TD><DIV ALIGN=CENTER>te lenen<br>Kapitaal</DIV></TD>
<TD> </TD>
<TD><DIV ALIGN=CENTER> Maandelijkse<br>afbetaling</DIV></TD>
</TR>
<TR>
<TD><INPUT TYPE=TEXT NAME=payments SIZE=5
onChange=computeField(this)> </TD>
<TD><INPUT TYPE=TEXT NAME=interest SIZE=6
onChange=computeField(this)> </TD>
<TD><INPUT TYPE=TEXT NAME=principal SIZE=9
onChange=computeField(this)> </TD>
<TD> </TD><TD><INPUT TYPE=TEXT NAME=payment
SIZE=9 onChange=computeField(this)> </TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN=5>
<INPUT TYPE="button" VALUE="Bereken" onClick=computeForm(this.form)>
<INPUT TYPE="reset" VALUE="Reset" onClick=clearForm(this.form)>
</TD>
</TR>
</FORM>
</TABLE>
</BODY>
</HTML>
Dit voorbeeldje laat nog eens op een ludieke manier zien hoe boodschappen
naar de gebruiker kunnen worden gestuurd.
Hier is de tekst van messages.html. (Geef het bestand geen andere
naam! Waarom niet?)
<HTML>
<HEAD>
<SCRIPT>
// JavaScript Form Validation Demo
// by Paul Colton
</SCRIPT>
<TITLE>JavaScript User Messages</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<CENTER><FONT SIZE=+2>JavaScript's User
Messages</FONT><BR>
</CENTER>
<HR>
<SMALL>Hierna volgen enkele voorbeelden van
de verschillende manieren waarop je een bericht kunt sturen naar de user.
Klik op de links om te ontdekken welke acties zij nemen. Voor sommige links
hoef je zelfs niet te klikken!<BR></SMALL>
<HR>
<FONT SIZE=+2>
<UL>
<LI><A HREF="messages.html" onClick="alert('Dank
U!')">Klik hier.</A><P>
<UL>
<LI><A HREF="messages.html" onClick="if(confirm('Ben
je hier wel zeker van?'))
alert('Zelfvertrouwen is een
mooie zaak!');
else
alert('Misschien de volgende
keer.');">
Een vraagje voor u.</A><P>
<UL><LI>Kijk beneden naar de status bar:
<A HREF="messages.html" onMouseOver="self.status='A
is for Appel';return true">A</A>
<A HREF="messages.html" onMouseOver="self.status='B
is for Beter';return true">B</A>
<A HREF="messages.html" onMouseOver="self.status='C
is for Cool';return true">C</A>
<A HREF="messages.html" onMouseOver="self.status='D
is for Droom';return true">D</A>
<A HREF="messages.html" onMouseOver="self.status='E
is for Epsilon';
return true">E</A><P>
<UL><LI>
<A HREF="messages.html" onMouseOver="alert('Je
komt een beetje te dichtbij!')">
Kom niet dichterbij!</A><P>
</UL></UL></UL></UL>
</FONT><P>
</BODY>
</HTML>
Javascript als object-georiënteerde scripttaal
Een van de kenmerken van een object-georienteerde taal is het aanmaken van een object met behulp van een constructorfunctie.
Dit kan ook in Javascript.
Stel dat je het merk, bouwjaar, en prijs van auto's wil bijhouden. Je kunt daartoe een nieuw object aanmaken met behulp van de volgende constructorfunctie.
Let op het laatste statement: return Wagen
function Wagen(me, bo, pr)
{
var btw = 25
Wagen.merk = me
Wagen.bouwjaar = bo
Wagen.prijs = pr
Wagen.btw = Wagen.prijs * btw/100
return Wagen
}
Deze functie is een constructor. Een nieuw Wagen-object W1 wordt als volgt aangemaakt:
W1 = new Wagen("Toyota",1995,600000)
De eigenschappen van W1 kunnen als volgt worden aangeroepen:
W1.merk
W1.bouwjaar
W1.prijs
W1.btw
Het volgende stukje programma :
Document.write(W1.merk, "" ,W1.bouwjaar, " " ,W1.prijs, " " ,W1.btw)
Geeft als uitvoer:
Toyota 1995 600000 150000
Hierna het volledige html-bestand:
<html>
<head>
<title>javascript object georiënteerd</title>
</head>
<body>
<script language="javascript">
function Wagen(m,b,p)
{
var btw=25
Wagen.merk=m
Wagen.bouwjaar=b
Wagen.prijs=p
Wagen.btw=Wagen.prijs*btw/100
return Wagen
}
w1= new Wagen("Audi",1996,600000)
document.write(w1.merk," ",w1.bouwjaar," ",w1.prijs,"
",w1.btw,"<br>")
</script>
</body>
</html>
Methoden
Objecten worden eveneens gekenmerkt doordat ze niet alleen data maar
ook functies ingebouwd hebben. Deze worden methoden genoemd.
In het volgende voorbeeld wordt de methode wprint() ingebouwd om de autogegevens op het scherm te brengen:
<html>
<head>
<title>javascript object georiënteerd</title>
</head>
<body>
<script language="javascript">
function Wagen(m,b,p)
{
var btw=25
Wagen.merk=m
Wagen.bouwjaar=b
Wagen.prijs=p
Wagen.btw=Wagen.prijs*btw/100
function wprint() {
document.write("<br><hr>Merk:
",Wagen.merk)
document.write("<br>Bouwjaar:
",Wagen.bouwjaar)
document.write("<br>Prijs:
",Wagen.prijs)
document.write("<br>BTW:
",Wagen.btw,"<hr>")
}
return Wagen
}
w1= new Wagen("Audi",1996,600000)
w1.wprint()
</script>
</body>
</html>
De voorgaande html-code geeft volgende output:
De data van een object kan ook zelf een object zijn, zoals in het volgende voorbeeld waar een
object Eigenaar wordt aangemaakt, en gebruikt als data in Wagen. Hiermee kun je de gegevens van de eigenaar van deze wagen opslaan. Een en ander wordt in onderstaand voorbeeld getoond.
<html>
<head>
<title>javascript object georiënteerd</title>
</head>
<body>
<script language="javascript">
function Eigenaar(n,v)
{
Eigenaar.naam=n
Eigenaar.voornaam=v
return Eigenaar
}
function Wagen(m,b,p,e)
{
var btw=25
Wagen.merk=m
Wagen.bouwjaar=b
Wagen.prijs=p
Wagen.btw=Wagen.prijs*btw/100
Wagen.eigenaar=e
function wprint() {
document.write("<br><hr>Merk:
",Wagen.merk)
document.write("<br>Bouwjaar:
",Wagen.bouwjaar)
document.write("<br>Prijs:
",Wagen.prijs)
document.write("<br>BTW:
",Wagen.btw)
document.write("<br>Eigenaar:
",
Wagen.eigenaar.voornaam,
" ",
Wagen.eigenaar.naam,"<hr>")
}
return Wagen
}
e1= new Eigenaar("Jansens","Pieter")
w1= new Wagen("Audi",1996,600000,e1)
w1.wprint()
</script>
</body>
</html>
De uitvoer hiervan ziet er als volgt uit in de browser:
Andere cursussen javascript:
http://www.ivobrugge.be/cursusweb/javascript/
http://websitehulp.tripod.com/cursussen/js/