JavaScript deel 1
1.1 Javascript invoegen in HTML
Met JavaScript kun je programmeren binnen een HTML-document.
Het lijkt wel wat op Visual Basic, maar de opdrachten komen uit C++
De Javascript-code is een onderdeel van het HTML-document, net als andere HTML-tags.
Als je Javascript-code aan het schrijven bent, en je werkt met Internet Explorer, dan is het
verstandig om er voor te zorgen dat de browser aangeeft waar eventuele fouten zitten.
Want een foutje is zo gemaakt, maar de browser geeft standaard niets aan bij een fout.
Klik daarvoor op Extra, dan op Internet Opties, tabblad Geavanceerd.
Onder het kopje "Webpagina's bekijken" staat standaard een vinkje voor Foutopsporing in scripts uitschakelen, haal
dat vinkje weg.
Zet verder, onder datzelfde kopje, een vinkje voor: melding van elke scriptfout weergeven
Door een <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" > tag
in een document te plaatsen vertel je de browser
dat hij de volgende regels als een "Javascript-programma" moet opvatten, tot de
corresponderende </SCRIPT> tag verschijnt.
Je moet je aan een aantal regels houden als je Javascript gebruikt.
- De <SCRIPT> tag wordt meestal tussen de
<HEAD> en </HEAD> tags geplaatst, dus voor de <BODY> tag.
- Omdat sommige browsers Javascript niet kunnen verwerken is het verstandig je hele
JavaScript
code tussen <!-- commentaar-tags --> te plaatsen.
Als je dat doet zullen niet_Javascript-browsers je pagina toch verwerken, maar dan zonder het
Javascript te verwerken.
- Laat elke JavaScript-regel die je als commentaar toevoegt
beginnen met // .
- Denk er om dat Javascript hoofdlettergevoelig is. Als je bijvoorbeeld
location.tostring() gebruikt in
plaats van location.toString() dan werkt het niet !
Voorbeeld :
<HTML>
<HEAD>
<TITLE>Test script</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
<!-- Gebruik deze tag aan het begin
// Je JavaScript code begint hier
hier staat dus de echte javascriptcode
// sluit af vlak voor de </SCRIPT> tag met -->
</SCRIPT>
</HEAD>
<BODY>
Hier zit je Web-document
</BODY>
</HTML>
Je kunt de javascriptcode ook in een apart bestand zetten, met de extensie .js
Als je de volgende code invoert:
<SCRIPT LANGUAGE="JavaScript" SRC="script.js">
dan wordt de code uit het bestand "script.js" gelezen en uitgevoerd.
1.2 Structuur van
de taal
JavaScript gebruikt een object-georienteerde benadering, net als
Visual Basic en Java.
Een paar voorbeelden van Javascript-opdrachten:
document.write('Hallo mensen !');
window.status='Hallo mensen !';
document.write('<h1>Hallo mensen !</h1>');
De eerste opdracht heeft tot gevolg dat er 'Hallo mensen' op de eerste regel van de
pagina wordt afgedrukt.
De tweede opdracht heeft tot gevolg dat er 'Hallo mensen' op de statusregel van het venster
van de browser wordt afgedrukt.
De derde opdracht heeft tot gevolg dat er 'Hallo mensen' op de eerste regel van de
pagina wordt afgedrukt, en wel als H1-kop. (Je kunt in Javascript dus ook HTML-tags gebruiken)
Je hebt steeds een objectnaam en een methode of property,
gescheiden door een punt.
Objecten
De belangrijkste objecten:
| Object |
Functie/betekenis |
| location |
Hiermee wordt bedoeld de informatie over de vindplaats van de webpagina,
inclusief de URL, het protocol, de domain name, het pad en de poort.
| | history |
Dit object houdt bij welke sites de Web browser heeft bezocht tijdens deze sessie,
en je kunt ook veranderingen aanbrengen in die historie.
| | document |
Het document-object bevat alle gegevens over wat er in de lopende pagina staat.
Ook de formulieren, links en ankers die er op voorkomen. Je kunt daar met behulp van
script-regels ook veranderingen in aanbrengen.
| | form |
Dit bevat informatie over het formulier, tenminste als dat op de pagina voorkomt,
inclusief action (de URL waar het heengezonden moet worden) en method (get or post).
| | navigator |
Dit bevat informatie over de browser die gebruikt wordt. De naam, de versie, het operating-system, enz.
| | button |
Dit bevat informatie en beinvloedt de buttons die in het document voorkomen.
| | Date |
Dit bevat informatie over de tijd waarop de pagina wordt bekeken, de datum, het jaar, het
tijdstip van de dag, enz.
|
Ook een tabelcel en een anker en een div-blok kun je een naam geven, waarmee het een object wordt waar je in Javascript gebruik van
kunt maken.
Een tabelcel kun je op de volgende manier een naam geven: <TD ID="cel1">
En dan kun je bijvoorbeeld m.b.v. de opdracht
document.getElementById("cel1").style.background="red"; de achtergrondkleur van die cel veranderen.
Een anker kun je op de volgende manier een naam geven: <A HREF="........" ID="link1">
En dan kun je bijvoorbeeld m.b.v. de opdracht
document.getElementById("link1").style.color=""#0000ff""; de tekstkleur van die link veranderen.
Elke tekst, die tussen <div> en </div> geplaatst is kun je op de volgende manier een naam geven:
<div ID="par1">
En dan kun je bijvoorbeeld m.b.v. de opdracht
document.getElementById("par1").style.display="none"; er voor zorgen dat die tekst
onzichtbaar is (en na een klik bijvoorbeeld zichtbaar wordt of omgekeerd)
tekst.style.display == "none")
1.3 Properties en methoden
Properties
De objecten hebben "Properties" of "Eigenschappen".
Een paar voorbeelden:
| eigenschap |
betekenis |
| document.bgColor |
de achtergrondkleur van het document |
| form.action |
De URL van het CGI-script waar het naar toe gestuurd moet worden |
| location.hostname |
De naam van de host waarop de lopende webpagina staat |
| navigator.appName |
De naam van de browser, bijv. Microsoft Internet Explorer |
Methoden
Aan de objecten zijn ook methoden gekoppeld.
Voorbeeld:
document.write("Hallo wereld");
Denk er om dat er achter een methode altijd haakjes staan. Soms staat er
niets tussen die haakjes, maar je mag ze niet weglaten.
Voorbeeld : document.write (location.toString( ) ).
De toString() methode zorgt er voor dat de URL als een string (=woord) wordt opgevat, zodat
die string in het document kan worden afgedrukt. De haakjes achter toString mogen niet worden
weggelaten.
Meer voorbeelden van methoden:
| methode |
betekenis |
|
document.write(string) |
Drukt tekst op de pagina of HTML-code af. |
|
form.submit() |
Stuurt de inhoud van het formulier weg. |
|
window.alert(string) |
Er verschijnt een venstertje met een tekst er in; string bevat die tekst. |
|
location.href="URL" |
Opent een nieuwe pagina in het bestaande venster, URL is het adres van de pagina die geopend moet worden.
|
|
window.open("URL",name) |
Opent een nieuw venster, waarin een pagina verschijnt.
URL is het adres van de pagina die geopend moet worden, en name is de naam van het venster waarin het getoond moet worden
(vergelijk met target=name.) |
|
document.getElementById("cel1").style.background="kleur"; |
De achtergrondkleur van het element met de naam cel1 zal veranderen.
| |
| Als je de variabele nu als volgt definieert: var nu = new Date(); |
|
nu.getDate(); | De dag van de maand (1 t/m 31) |
Oefening 1
Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)
(Denk er om dat JavaScript verschil maakt tussen kleine letters en
hoofdletters. Als je in het volgende voorbeeld location.tostring() getypt hebt in
plaats van location.toString() dan werkt het niet !)
<HTML>
<HEAD>
<TITLE>Oefening 1 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
window.status='Dit staat op de statusregel';
document.bgColor='yellow';
document.write('Titel van deze pagina : ' + document.title + '<BR>');
document.write('URL van deze pagina : ' +location.toString() + '<BR>');
document.write('Gebruikte browser : ' + navigator.appName + '<BR>');
document.write('Laatste wijziging van dit document op: '+document.lastModified);
window.alert('Dit gebeurt allemaal m.b.v. Javascript');
</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>
Sla het bestand op, en bekijk het m.b.v. een browser.
1.4 Variabelen, prompt, datum en tijd
In JavaScript kun je ook met variabelen werken.
Je moet een variabele declareren door het woordje
var voor de naam te zetten, maar je hoeft
niet aan te geven van welk type de variabele is (integer, real, string, of iets dergelijks)
Dat zoekt Javascript zelf wel uit.
De declaratie en de toekenning van een waarde vindt meestal in één opdracht
plaats.
Op de volgende manier : var variabelenaam = waarde ;
Voorbeeld:
var voornaam = 'Piet' ;
var achternaam = 'de Vries' ;
var leeftijd = 28 ;
var naam = voornaam + achternaam
In het voorbeeld hierboven zie je in de laatste opdracht een plus tussen twee variabelen, maar dat zijn geen getallen.
Als je een plus tussen twee strings zet, dan worden ze achter elkaar geplakt.
Dus de variabele naam krijgt als inhoud PietdeVries
Je kunt er ook voor zorgen dat er een invulvenster verschijnt (m.b.v. window.prompt(string1,string2) en de inhoud daarvan
kun je in een variabele opslaan
Dit kan als volgt : var variabelenaam = window.prompt(string1,string2)
Daarbij verschijnt string1 in het venster, en string2 in de titelbalk van het venster.
Verder kun je ook een boodschappenvenstertje laten verschijnen.
Als je de opdracht alert ('Hallo'); geeft verschijnt er een venstertje met de tekst Hallo
Voorbeeld:
naam = prompt("Wat is je naam?", "");
alert ('Hallo ' + naam);
Je kunt variabelen ook gebruiken voor andere dingen dan getallen en woorden (strings).
Dan gaat het declareren op een andere manier, dan moet je het type er wel bij zetten, en dan moet het woordje new worden
toegevoegd.
Er is een speciale variabele, die de datum en de tijd bevat, en dat is een voorbeeld daarvan.
Die declareer je bijvoorbeeld als volgt:
var d = new Date();
De variabele d bevat dan de datum plus de tijd, maar in een vreemde notatie.
Op het moment dat ik dit schrijf geldt, als ik het afdruk m.b.v. de opdracht document.write(d);, voor die variabele:
Sat Sep 8 11:49:13 UTC+0200 2007
Als je alleen de datum, of alleen de tijd wilt afdrukken, dan kan dat ook. Maar dan moet je een aantal methoden van het Date-object
gebruiken.
Als je de variabele d als volgt definieert: var d = new Date(); dan kun je de volgende methoden gebruiken:
| methode |
betekenis |
|
d.getDate(); | De dag van de maand (1 t/m 31) |
|
d.getMonth() + 1; | Het nummer van de maand (1 er bij optellen, anders geldt januari=0
|
|
d.getYear(); | Het jaar |
|
d.getDay(); | De dag van de week (0 t/m 6) 0=zondag, 1=maandag, enz |
| d.getHours(); | Het hoeveelste uur van de dag het is. |
| d.getMinutes( ) | Het aantal minuten over het uur. |
| d.getSeconds( ); | Het aantal seconden over de minuut. |
| d.getSeconds( ); | Het aantal seconden over de minuut. |
Probeer het volgende maar eens.
Oefening 2
Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)
<HTML>
<HEAD>
<TITLE>Oefening 2 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var d = new Date();
var datum = d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getYear();
var naam = 'Piet de Vries' ;
var leeftijd = 28 ;
var titel = document.title ;
var documenturl = location.toString() ;
var uur = d.getHours();
document.write(naam + ' ' + leeftijd + ' ' + titel + '<BR>');
document.write(documenturl + ' ' + uur + ' uur <BR>');
var lm = new Date(document.lastModified);
var dag = lm.getDate();
var maand = lm.getMonth();
document.write('<I>' + "Laatst gewijzigd op" + " " + dag + " " + maand + " " + lm.getYear() + '</I><BR>');
</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>
Sla het bestand op, en bekijk het m.b.v. een browser.
1.5 Het if-statement
Je kunt in Javascript if ... then ... else gebruiken, maar het woordje then
moet je weglaten.
En de opdrachten op de stippeltjes moeten tussen accolades worden gezet, en de
voorwaarde achter if moet tussen haakjes.
Het ziet er in de eenvoudige vorm (zonder else) als volgt uit:
if (voorwaarde)
{
doe iets;
}
en in de vorm met else wordt het als volgt:
if (voorwaarde)
{
doe iets;
}
else
{
doe iets anders;
}
Als in de voorwaarde wordt gecontroleerd of een variabele een bepaalde waarde heeft, dan moet
je een dubbele == gebruiken ! (zie de oefening hieronder)
Verder zijn er de vergelijkingssymbolen <, <= (kleiner
of gelijk), >, >= (groter
of gelijk), != (ongelijk aan).
Als je twee voorwaarden hebt, en er moet aan beide zijn voldaan dan zet je niet het woordje
and er tussen maar && (dus twee ampersand-tekens)
Als je twee voorwaarden hebt, en er moet aan één van beide zijn voldaan dan zet
je niet het woordje
or er tussen maar || (dus twee zogenaamde pipe-symbolen)
Probeer het volgende maar eens.
Oefening 3
Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)
<HTML>
<HEAD>
<TITLE>Oefening 3 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var vandaag = new Date();
var uur = vandaag.getHours();
if (uur<12) {document.write('Goedemorgen') };
if ( (uur>11) && (uur<18) ) {document.write('Goedemiddag') };
if (uur>17) {document.write('Goedenavond') };
var naam = window.prompt('Geef je naam', '');
if((naam == "") || (naam == null))
{
naam = "Anoniem";
document.write('<BR>Waarom vertik je het om een naam in te vullen? ' + naam);
}
else
{
document.write('<BR>Hallo, '+ naam);
}
</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>
Sla het bestand op, en bekijk het m.b.v. een browser.
1.6 Functies, parameters, terugkeerwaarden
Als je de oefening hierboven hebt uitgevoerd, dan heb je gemerkt dat de Javascript-opdrachten
direkt na de start van de pagina worden uitgevoerd, en dat daarna pas de tekst, die tussen <BODY>
en </BODY> staat, op het scherm verschijnt.
Je kunt er ook voor zorgen dat bepaalde Javascript-opdrachten niet direkt bij de start
worden uitgevoerd, maar pas nadat er bijvoorbeeld op een bepaalde knop is geklikt, of als
het document bijvoorbeeld wordt weggeklikt.
Dan moet je er een zogenaamde functie van maken.
Dat doe je als volgt:
Parameters
Bij een functie kan er ook gebruik gemaakt worden van een parameter.
Kijk maar eens naar het voorbeeld hieronder:
<SCRIPT language="javascript" TYPE="text/javascript" >
function achtergrond(kleur)
{
document.bgColor = kleur;
}
</SCRIPT>
De parameter in bovenstaand voorbeeld heet kleur, dat is de variabele die tussen de haakjes achter de functienaam staat.
Je kunt de functie dan bijvoorbeeld gebruiken als attribuut van de body-tag (met onLoad bijvoorbeeld, dan wordt die functie
direkt bij het laden, dus bij de start van het document, uitgevoerd).
Je doet dat dan bijvoorbeeld als volgt: <BODY onLoad="achtergrond('red')" >
Dan wordt de functie achtergrond uitgevoerd, en de kleur wordt doorgegeven aan de functie door hem
tussen de haakjes te plaatsen achter de functie.
Je kunt de functie ook laten uitvoeren door het in een link op te nemen, bijvoorbeeld als volgt:
<A HREF="javascript:achtergrond('green')"> Groen </A>
Als je op deze link klikt wordt er niet naar een andere pagina gesprongen, maar dan wordt de achtergrond-functie
uitgevoerd. En daarbij krijgt de variabele kleur de waarde green.
Op die manier kun je er voor zorgen dat dezelfde functie verschillende dingen doet.
Dit 'doorgeef-principe' wordt parameter-overdracht
genoemd.
Er kunnen ook meerdere waarden worden doorgegeven aan functies, zet dan komma's tussen de parameters.
Terugkeerwaarde
Bij een functie kan er ook gebruik gemaakt worden van een terugkeerwaarde.
Je weet misschien uit de wiskunde dat een functie een soort "machientje" is :
je stopt er een getal in (meestal met x aangegeven) en dan komt er ook weer een getal uit (meestal met y aangegeven).
In Javascript hoeft dat niet beslist, maar het kan wel.
De waarde die er uit komt wordt wel de "terugkeerwaarde" genoemd.
En wat die waarde is moet achter het woordje "return" in de code van de functie worden gezet.
Kijk maar eens naar de volgende voorbeelden: (terugkeerwaarde in voorbeeld 4c)
Oefening 4
Maak html-documenten zoals hieronder en probeer ze uit.
<HTML>
<HEAD>
<TITLE>Oefening 4a JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function groet()
{
window.alert(' Bedankt voor het kijken en tot ziens ');
}
</SCRIPT>
</HEAD>
<BODY onUnload=" groet() ">
<BR>Bla bla bla
</BODY>
</HTML>
Nu een functie met een parameter :
<HTML>
<HEAD>
<TITLE>Oefening 4b JavaScript </TITLE>
<SCRIPT language="javascript" TYPE="text/javascript" >
function achtergrond(kleur)
{
document.bgColor = kleur;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:achtergrond('red')">Rood</A>
<A HREF="javascript:achtergrond('green')">Groen</A>
<A HREF="javascript:achtergrond('"#0000ff"')">Blauw</A>
</BODY>
</HTML>
Nu een functie met een terugkeerwaarde.
Bestudeer onderstaande code en probeer het uit.
<HTML>
<HEAD>
<TITLE>Oefening 4c JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function kwadraat(getal)
{
return getal * getal;
}
function vraaggetal()
{
var g=prompt("Geef een getal","");
alert("Het kwadraat is "+ kwadraat(g));
}
</SCRIPT>
</HEAD>
<BODY>
<form> <input type="button" value="Bereken kwadraat" onClick="vraaggetal()">
</form>
</BODY>
</HTML>
Je kunt er met een functie ook voor zorgen dat er naar een nieuwe pagina wordt gesprongen.
Dan hoef je geen gewone link te gebruiken, maar het kan dan bijv. ook met een button.
Kijk maar naar de volgende code en probeer het uit:
<HTML>
<HEAD>
<TITLE>Oefening 4d JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function naartest2()
{ location.href='test2.htm'; }
</SCRIPT>
</HEAD>
<BODY>
Zorg er wel voor dat er een document met de naam TEST2.HTM in de map waarin je werkt staat.<BR>
<form> <input type="button" value="Naar test2" onClick="naartest2()"> </form>
</BODY>
</HTML>
1.7 Events (gebeurtenissen): onMouseOver, onMouseOut, button
Je hebt in de vorige paragraaf gezien dat functies kunnen worden aangeroepen nadat bijvoorbeeld ergens op geklikt is.
Dan is er dus iets gebeurd, dat noem je wel een event (of gebeurtenis in het nederlands).
Daarbij wordt vaak gebruik gemaakt van zogenaamde buttons.
Een button is een onderdeel van een formulier, het is een zogenaamd <INPUT>-type.
Je maakt een button met de volgende code:
<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="geefkleur( )" >
</FORM>
Als je deze code in je HTML-document opneemt dan verschijnt er een button op de pagina met de tekst "Geef de achtergrondkleur"
En als je er op klikt dan wordt de functie met de naam geefkleur( ) uitgevoerd.
Dan moet er natuurlijk wel een functie met die naam zijn gedefinieerd. Probeer de volgende oefening maar eens.
Oefening 5
Maak een html-document zoals hieronder en probeer het uit.
<HTML>
<HEAD>
<SCRIPT language="javascript" TYPE="text/javascript" >
function geefkleur()
{
alert (document.bgColor);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#BBDDCC">
<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="geefkleur( )" >
</FORM>
</BODY>
</HTML>
We hadden de vorige oefening ook anders kunnen doen. Als je een korte functie hebt (met weinig opdrachten) dan kun je die ook
rechtstreeks als attribuut opnemen. En dan hoef je niet een aparte functie m.b.v. Javascript te definiëren.
Het kan namelijk ook als volgt:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#BBDDCC">
<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="alert (document.bgColor);" >
</FORM>
</BODY>
</HTML>
Dit principe wordt vaak toegepast bij de events onMouseOver, onMouseOut, enz.
Kijk maar naar de volgende voorbeelden.
In oefening 6 hieronder zie je hoe je er voor kunt zorgen dat er
iets speciaals
op de statusbalk verschijnt als je met de muis over een link gaat.
- Je moet dan aan het anker <A> toevoegen:
onMouseOver="window.status='------------------------'; return true; "
dan verschijnt ------------------------ op de statusregel.
(als je er geen return true; achter zet zal er iets anders op de statusregel verschijnen, namelijk het adres van de link)
-
Je kunt er ook voor zorgen dat er iets speciaals gebeurt als je weer van de link afgaat
met de muis.
Je moet dan aan het anker <A> (dat is de tag voor de link) toevoegen:
onMouseOut=" ----------------------- "
- Je kunt er ook voor zorgen dat de tekstkleur van de link verandert als je er met de
muis overheen gaat.
Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
onMouseOver= " this.style.color='#ffff00' "
onMouseOut="this.style.color='#ff0000' "
Je krijgt dan bijvoorbeeld het volgende:
<A href= "url.htm " onMouseOver= " this.style.color='#ffff00' "
onMouseOut="this.style.color='#ff0000' " >
-
Je kunt er m.b.v. hetzelfde principe ook voor zorgen dat de achtergrondkleur van de link verandert
als je er met de muis overheen gaat en ook als je er weer af gaat.
Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
onMouseOver= " this.style.backgroundColor='#ffff00' "
onMouseOut="this.style.backgroundColor='#ff0000' "
-
Verder kun je er bijvoorbeeld ook voor zorgen dat de achtergrondkleur van het hele document verandert
als je met de muis over een link gaat en dat het weer de oorspronkelijke kleur heeft als je
er weer af gaat.
Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
onMouseOver= " document.bgColor='#ff0000' "
onMouseOut="document.bgColor='#000000' "
- Ook kun je de vorm van de muisaanwijzer laten veranderen als je met de muis over een button gaat.
(bij een anker, dus een link, verandert de muisaanwijzer sowieso al als je er met de muis overheen gaat)
Dat kan door het volgende aan de button-tag toe te voegen:
onMouseOver="this.style.cursor='hand' " onMouseOut="this.style.cursor='default' "
De muisaanwijzer zal dan in een handje veranderen als je er overheen gaat!
- Er zijn nog veel meer mogelijkheden:
Je kunt er voor zorgen dat de tekst cursief wordt ('italic') of onderstreept ('underline') of vet ('bold') of
niets van dat alles ('none')
door bijvoorbeeld het volgende aan het anker toe te voegen:
on MouseOver="this.style.textDecoration='italic' " on MouseOut="this.style.textDecoration='none' "
Je kunt er voor zorgen dat de puntgrootte van de tekst verandert
door bijvoorbeeld het volgende aan het anker toe te voegen:
on MouseOver="this.style.width='16px'; " on MouseOut="this.style.width='20'; "
Je kunt er voor zorgen dat het lettertype verandert
door bijvoorbeeld het volgende aan het anker toe te voegen:
on MouseOver="this.style.fontFamily='Comic Sans MS'; " on MouseOut="this.style.fontFamily='Helvetica'; "
Je kunt er voor zorgen dat er een aantal dingen tegelijk veranderen door meer methoden tussen de aanhalingstekens te zetten, gescheiden
door puntkomma's, bijvoorbeeld zo:
on MouseOver="this.style.textDecoration='italic'; this.style.color='#ff0000'; this.style.width='16px';
this.style.fontFamily='Comic Sans MS'; this.style.fontStyle='normal'; this.style.fontWeight='normal'; "
Oefening 6
Maak een html-document zoals hieronder, en probeer het uit.
<HTML>
<HEAD>
<TITLE>Oefening 6 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function groet()
{
window.alert(' Bedankt voor het kijken en tot ziens ');
}
function vervolg()
{
window.open('URL.htm');
}
</SCRIPT>
</HEAD>
<BODY onUnload=" groet( ) ">
Dit is het zesde html-document met Javascript.<br>
Als je met de muis over de link hieronder gaat dan verschijnt er iets in de statusbalk.
Let maar goed op !<br>
<A href="test2.htm" onMouseOver="window.status='Hallo je zit op mijn link !'; return true; "
onMouseOut="window.status='Nu ben je er weer van af' " >
Naar Test2 </A><br>
Hieronder zie je een button met de tekst 'Naar URL'.<br>
Als je daarop klikt dan wordt de functie vervolg( ) uitgevoerd.<br>
En die zorgt er voor dat er naar een nieuwe pagina verschijnt, tenminste als je URL hebt vervangen door een bestaande pagina.<br>
<FORM>
<INPUT type="button" value="Naar URL" onClick="vervolg( )" >
</FORM>
</BODY>
</HTML>
Probeer er,als het werkt, ook nog voor te zorgen dat de kleur van de link verandert
als je er met de muis overheen gaat en ook als je er weer af gaat.
Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
<A href= "url.htm " onMouseOver= " this.style.color='#ffff00' "
onMouseOut="this.style.color='#ff0000' " >
Probeer er daarna ook nog voor te zorgen dat de achtergrondkleur van het hele document verandert
als je met de muis over een link gaat en dat het weer de oorspronkelijke kleur heeft als je
er weer af gaat.
Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
<A href= "url.htm " onMouseOver= " document.bgColor='#ff0000' "
onMouseOut="document.bgColor='#000000' " >
1.8 Het FOR-statement
Het FOR-statement gebruik je als je iets een aantal keren wilt laten herhalen, en je weet precies hoevaak het herhaald moet worden.
Stel je voor dat je een tabel met de wortels van de getallen 1 tot en met 20 wilt hebben, in 1 decimaal nauwkeurig.
Dan gebruik je het FOR-statement als volgt:
for ( int x = 0; x < 20; x++)
{
...............
...............
}
Als je een variabele x hebt, dan krijg je de wortel uit dat getal met de opdracht w = Math.sqrt(x);
Er is een opdracht, die ervoor zorgt dat het getal wordt afgerond. Dat gebeurt met de opdracht
y = Math.round(w);
Maar dan wordt het op gehelen afgerond.
En er is geen speciale opdracht om het op 1 decimaal af te ronden, maar daar kun je zelf wel voor zorgen m.b.v. een paar
programmaregels.
-
Als je het getal eerst vermenigvuldigt met 10, het dan op helen afrondt, en het dan deelt door 10, dan is het afgerond op 1 decimaal.
- Want stel je voor dat het getal 3,14159 is.
- Als je het vermenigvuldigt met 10 dan wordt het 31,14159
- Dat afronden op een geheel getal levert 31 op.
- En als je dat dan deelt door 10 wordt het 3,1. En dan is het dus afgerond op 1 decimaal.
Dat afronden gebeurt dus m.b.v. de opdrachten :
w = w * 10;
w = Math.round(w);
w = w / 10;
en dat kan ook m.b.v. één samengestelde opdracht:
w = (Math.round(10 * w) )/10;
Oefening 7
Maak html-documenten zoals hieronder, en probeer ze uit.
<HTML>
<HEAD>
<TITLE>Oefening 7a JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var x = 0;
var w = 0;
for ( x = 0; x < 20; x++)
{
w = Math.sqrt(x);
w = (Math.round(10 * w) ) / 10;
document.write("De wortel van " + x + " = " + w + "<br>");
}
</SCRIPT>
</HEAD>
<BODY>
Hier is de body
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Oefening 7b JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var x = 0;
var w = 0;
var tekst = "";
for ( x = 0; x < 20; x++)
{
w = Math.sqrt(x);
w = (Math.round(10 * w) ) / 10;
tekst = tekst + "De wortel van " + x + " = " + w + "\n"
}
alert(tekst);
</SCRIPT>
</HEAD>
<BODY>
Hier is de body
</BODY>
</HTML>
Toelichting:
Als je \n aan een tekst toevoegt komt de rest op een nieuwe regel.
Door de opdracht tekst = tekst + "De wortel van " + x + " = " + w + "\n" in de for-lus
op te nemen wordt er steeds iets aan de variabele tekst vastgeplakt.
Namelijk de wortel van het volgende getal.
En doordat er + "\n" achteraan wordt vastgeplakt wordt bij het afdrukken in een alert-venster
de volgende wortel steeds op een nieuwe regel afgedrukt.
1.9 Het While-statement
Het FOR-statement gebruik je als je iets een aantal keren wilt laten herhalen, en je weet precies hoevaak het herhaald moet worden.
Het WHILE-statement gebruik je als je iets een aantal keren wilt laten herhalen, maar je weet niet precies hoevaak het herhaald moet
worden, je weet alleen onder welke voorwaarde het herhaald moet worden.
Dan gebruik je het WHILE-statement als volgt:
while (voorwaarde)
{
...............
...............
}
Stel je wilt dat iemand zijn naam invult in een prompt-box, maar je wilt beslist dat hij een naam van drie of meer letters invult, dan
kun je dat m.b.v. de while-opdracht bereiken.
Het moet dan net zo lang herhaald worden tot de lengte van de naam minstens 3 tekens is.
Je kunt ook nog bijhouden hoevaak er een naam is ingevoerd, probeer het volgende maar eens:
Oefening 8
Maak een html-document zoals hieronder, en probeer het uit.
<HTML>
<HEAD>
<TITLE>Oefening 8 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var aantal = 0;
var naam = ""
while (naam.length < 3)
{
naam = prompt("Voer een naam in, minstens 3 tekens","");
aantal++;
}
document.write("Hallo "+ naam+ "<BR>");
document.write("Je hebt "+ aantal + " keer een naam ingevoerd" + "<BR>");
</SCRIPT>
</HEAD>
<BODY>
Hier is de body
</BODY>
</HTML>
Toelichting:
naam.length bevat het aantal tekens van de naam.
Zolang dat aantal kleiner dan drie is wordt de opdracht herhaald.
De opdracht aantal++ heeft tot gevolg dat de variabele aantal met één
wordt vermeerderd.
In plaats van aantal++ kun je ook de opdracht aantal = aantal + 1 geven.
|