|
Zoals in alle cursussen over programmeren, is het eerste wat we gaan doen het zinnetje "Hello world!" op het scherm tonen.
Open daarvoor een nieuw HTML-document met de onderstaande basisopbouw:
Typ nu tussen <body> en </body> de volgende code
in:
<script type="text/javascript">
document.write("Hello world!");
</script>
Sla nu deze pagina op (bijvoorbeeld voorbeeld1.html). Je krijgt nu normaal
gezien dit te zien in je browser:
Je eerste script is een feit! Maar wat heb je nu in feite gedaan?
Je hebt met JavaScript de opdracht gegeven om "Hello world" in het
browservenster te schrijven.
document is het object waarmee iets moet
gebeuren (het huidige document dus), wat ermee gebeurt is de methode
write, schrijven dus. Wat er moet geschreven worden, staat tussen
aanhalingstekens. De opdracht wordt afgesloten met ;
Het object en de methode worden met elkaar verbonden met een punt. Andere
methodes zijn open(), alert(), prompt(),
close(),... maar later hierover meer.
Tekst weergeven in alerts
We gaan nu een waarschuwingsvenstertje laten verschijnen met de methode
alert(). Typ in een HTML-document de volgende code:
Als je alles letterlijk overgetypt hebt, zie je nu iets zoals dit:
We gaan nu tekst in het alertvenster zetten en dat doe je door de code aan te
vullen als volgt:
<script type="text/javascript">
alert("welkom allemaal!");
</script>
Tekst die letterlijk moet worden weergegeven, zetten we altijd tussen
aanhalingstekens in JavaScript.
Nu gaan we een functie bouwen met de methode alert().
Alert() toont een waarschuwingsvenstertje.
Een functie heeft steeds dezelfde opbouw:
<script type="text/javascript">
function naam()
{
// hier komt de programmacode
}
</script>
Een functie wordt ingeleid met het woord function, daarna
geef je het een zelfgekozen naam, daarna komen er de haakjes. De functie begint
met een accolade en eindigt met een sluitende accolade. Een functie
staat altijd tussen de tags <head> en </head> (dit gebied wordt ook wel
eens de header genoemd).
We schrijven nu een functie waarbij we een waarschuwingsvenstertje krijgen
met daarop "Welkom!"
<head>
<script type="text/javascript">
function welkom()
{
alert("Welkom!");
}
</script>
</head>
Als je dit ingevoerd hebt en je je pagina opent, merk je dat er niets is
gebeurd. Dit komt omdat de functie in de header staat en nog niet aangeroepen
is.
Dit betekent dat de functie gestart moet worden bij een bepaalde handeling.
In dit geval is die handeling de pagina openen.
Om het script te laten werken, vul je de <body>-tag aan:
<body onload="welkom()">
Als je nu de pagina opent, zul je wel het waarschuwingsvenster zien.
Wat hebben we nu gedaan? We hebben aan de browser verteld dat het script (de
functie) moet starten wanneer de pagina geladen wordt. Dit wordt aangegeven door
de event handler onload.
Wat event handlers zijn, kun je hieronder lezen. Achter onload typ
je dan de functie tussen aanhalingstekens die geopend moet worden, in dit geval
welkom().
Event handlers
Event handlers zijn JavaScriptonderdelen die een JavaScriptfunctie verbinden
met HTML. Ze worden direct
in de desbetreffende tags gezet en vormen dus een uitzondering op de regel dat
JavaScriptcodes tussen de <script> en </script>-tags
moeten staan.
De ervaring leert me dat event handlers niet hoofdlettergevoelig zijn; het
is dus gelijk of je bijvoorbeeld onmouseover, onMouseOver of OnMouseOver
typt.
Event handlers wachten op een handeling van de gebruiker: van zodra de
gebruiker (de surfer) een handeling uitvoert, treedt de event handler in actie
en voert het een script uit.
Handelingen die de gebruiker kan uitvoeren zijn
bijvoorbeeld: de pagina openen, op een knop klikken, met de muiscursor over een
link bewegen, de venstergrootte aanpassen enzovoort. Bij elke handeling past een
bepaalde event handler.
| Event handler |
Handeling die ze activeert |
| onclick |
met de muisaanwijzer klikken |
| onmouseover |
de muisaanwijzer ergens overheen bewegen |
| onmouseout |
de muisaanwijzer van een object weg halen |
| onload |
een pagina wordt geladen |
| onunload |
de pagina wordt gesloten of verlaten |
| onfocus |
een object krijgt de focus |
| onblur |
een object wordt niet (meer) gefocust |
| onsubmit |
een formulier wordt verzonden |
| onreset |
de velden van het formulier worden leeggemaakt |
| onchange |
de gebruiker springt naar een ander veld in het
formulier |
| onselect |
een veld wordt geselecteerd |
| onabort |
het downloaden wordt gestopt |
| onerror |
een fout bij de bestandsoverdracht |
Je weet nu welke event handlers er zijn en in welke situatie ze worden
aangeroepen.
Een voorbeeld:
Je klikt op een link en je wordt gewaarschuwd met een venstertje dat je naar een
andere pagina zal worden omgeleid als je op die link klikt.
Een waarschuwingsvenster (alertbox) in JavaScript maak je zo:
alert('U verlaat deze pagina!');
De actie die je als gebruiker onderneemt is klikken (op de link): je gebruikt
dus de event handler onclick.
De volledige code ziet er nu als volgt uit (in het HTML-document):
<a href ="http://js.html" onclick="alert('U verlaat deze
pagina!')">link</a>
Dat is alles! Je kunt natuurlijk ook een functie aanroepen: bvb.
<a onclick="waarschuwing()">link</a>
Let er wel op wanneer je aanhalingstekens gebruikt (enkele of dubbele) dat
je met hetzelfde type afsluit dan datgene waarmee je begonnen bent!
Een andere handige toepassing van event handlers kan zijn dat je de bezoeker
op de hoogte wilt brengen dat een afbeelding nog niet volledig is ingeladen.
Hiervoor kun je onderstaande code gebruiken:
<img src ="plaatje.jpg" onAbort="alert('Je hebt de afbeelding nog niet
volledig ingeladen');">
Tekst weergeven in een nieuw venster
In dit derde voorbeeld gaan we door middel van JavaScript een nieuw
vensterbrowser openen.
We maken daarvoor een nieuwe functie aan:
<head>
<script type="text/javascript">
function nieuwvenster()
{
window.open();
}
</script>
</head>
<body onunload="nieuwvenster()">
We roepen deze functie aan in de <body>-tag door middel van de
event handler onunload, dus wanneer de surfer de pagina verlaat,
wordt de functie uitgevoerd, namelijk een nieuw browservenster wordt geopend.
Het browservenster dat je ziet, heeft alle kenmerken van een gewoon venster: een
menubalk, een werkbalk, een adresbalk enzovoort. Als je dit venster naar eigen
behoeften wilt aanpassen, kan dat met JavaScript. Stel dat je een venster wilt
creëren dat 600 op 400 pixels groot is en dat enkel een statusbalk en een
titelbalk heeft.
Daarvoor zul je enkele parameters moeten
toevoegen aan de methode open(). Deze methode heeft 3 parameters
waarvan de laatste nu van belang is. Pas je script als volgt aan:
<script type="text/javascript">
function nieuwvenster()
{
window.open("","","width=400,height=600,status=1");
}
</script>
Je krijgt dan een soortgelijk venstertje te zien:
Elke parameter staat tussen aanhalingstekens en wordt gescheiden door een komma.
Zoals je kunt zien zijn de eerste 2 parameters leeg en bevat de derde parameter
3 waarden: de breedte en de lengte van het venster gemeten in pixels en de
statusbalk staat aan.
De drie waarden van de 3e parameter worden gescheiden door
komma's. Let op: er mogen geen spaties staan in deze 3e parameter. Zoals je
wellicht weet, wordt "aan" in de computerwereld voorgesteld door "1" en "uit"
door "0". Zo kun je desgewenst een optie in- of uitschakelen.
Het volstaat ook
om "yes" of "no" in te vullen in plaats van "0" of "1". Met JavaScript kun je
nog meer opties instellen bij deze 3e parameter:
resizable, scrollbars, menubar,
toolbar, location, directories en status.
Al deze opties voorzie je van de waarde "1" of "0" om ze desgewenst in- of uit
te schakelen.
We kunnen nu een venster openen en het uitzicht er zelf van bepalen. Lay-out
is belangrijk, maar inhoud moet er natuurlijk ook zijn.
De inhoud die je in het venster wilt weergeven, Komt in de eerste parameter
te staan. Als de inhoud die weergegeven moet worden in het bestand inhoud.html
staat, komt deze bestandsnaam tussen het eerste paar aanhalingstekens te staan.
De code komt er dan als volgt uit te zien:
<script type="text/javascript">
function nieuwvenster()
{
window.open("inhoud.html","","width=400,height=600,status=1");
}
</script>
Tekst weergeven in statusbalk
In het laatste voorbeeld gaan we tekst weergeven in de statusbalk. De
statusbalk vind je onderaan in je browser.
Voer onderstaande regels code in:
<script type="text/javascript">
window.status="Welkom - tekst weergegeven in de statusbalk";
</script>
Nog een laatste tip: Wees niet ontmoedigd als het niet meteen wil lukken,
want een spatie of hoofdletter verkeerd gebruiken, kan al leiden tot een
onuitvoerbaar script. Accuraat werken, blijft de boodschap! Veel succes!!!
Ga naar het volgende deel van de Javascript basiscursus : Invoer van gegevens met Javascript
|
Ontwerp je site