|
In het eerste deel van de JavaScriptcursus heb je geleerd hoe je gegevens met JavaScript kunt weergeven. De gegevens die je ging weergeven, bepaalde je zelf. Zo hebben we in de statusbalk de tekst "Welkom op deze site" weergegeven. Deze tekst kun je natuurlijk zelf aanpassen.
Met JavaScript kan nog veel meer; zo kan JavaScript gegevens weergeven die
niet vooraf vastgelegd zijn. Zo kan JavaScript werken met gegevens die de
gebruiker invoert of die JavaScript haalt uit de browser van de gebruiker.
Gegevens opnemen uit een inputbox
Een eerste manier om ingevoerde gegevens weer te geven, is de inputbox. De
inputbox is een dialoogvenster met een tekstvak waarin de gebruiker gegevens kan
invoeren. De inputbox die we gaan programmeren ziet er zo uit:
Open je teksteditor en typ onderstaande code in:
<html>
<head>
<title>Promptvenster weergeven</title>
</head>
<body>
Hallo
<script type="text/javascript">
var naam;
naam=window.prompt("Wat is uw naam?","Vul uw naam in dit veld in");
</script>
bedankt voor uw bezoek.
</body>
</html>
Sla de code op en open het bestand. Als je alles juist ingetypt hebt, krijg
je eerst een inputbox te zien wanneer de pagina geladen wordt. Als je een naam
invult en op de OK-knop klikt, gebeurt er nog niets.
Dit komt omdat de naam
enkel opgeslagen is in het geheugen van de variabele naam.
Variabelen staan altijd eerst in de functie. Een variabele wordt aangeduid met
het codewoord var en daarna een naam die je zelf mag kiezen.
Er zijn enkele woorden die je niet mag gebruiken om variabelen te benoemen.
Als je een variabele if zou benoemen, zou de computer hierdoor
verward geraken en denken dat je een if-lus wil gaan gebruiken.
Waarden die
je niet mag gebruiken zijn break, else,
false, function, for, if,
in, return, this, true,
var, while, comment, continue,
delete, export, import, label,
with, typeof, void, switch
en case.
De waarde die opgeslagen is in het geheugen moet nu nog weergeven worden. We
gaan ervoor zorgen dat de naam op de pagina wordt weergegeven. Hoe je tekst
weergeeft heb je al gezien met de opdracht document.write().
Typ onderstaande code tussen de script-tags onder de bestaande regels code:
document.write(naam);
Als je geen groet wilt laten weergeven als JavaScript niet aanstaat in de
browser, moet je de volledige groet ook opnemen binnen de opdracht:
document.write("Hallo ", naam, " bedankt voor uw bezoek!");
We gaan dit script nu uitbreiden zodat de gebruiker verplicht is een waarde
in te vullen en niet gewoon op "Annuleren" kan klikken zonder gevolgen.
Als de gebruiker niets invult, willen we een melding weergeven dat de gebruiker
anoniem wenst te blijven. Dit doen we met de if-uitdrukking. We controleren of
een bepaalde waarde aanwezig is.
Vervolledig de code als volgt:
<script type="text/javascript">
var naam;
naam=window.prompt("Wat is uw naam?","Vul uw naam in dit veld in");
if (naam=="" || naam=="Vul uw naam in dit veld in")
{
document.write("Hallo anonieme bezoeker.");
}
else
{
document.write("Hallo ", naam, " bedankt voor uw bezoek!");
}
</script>
Je test met de if-else constructie of de variabele gelijk is aan een lege
waarde (de twee aanhalingstekens met niets tussen) of aan de standaardtekst "Vul
uw naam in dit veld in".
Als dat het geval is, wordt de tekst "Hallo anonieme bezoeker" weergegeven. In
het andere geval (else) wordt de bezoeker begroet met zijn naam.
We maakten in dit script ook kennis met operatoren. Operatoren
worden gebruikt om vergelijkingen te maken of om berekeningen uit te voeren. De
tekens || betekenen "of" en == betekent "is gelijk aan".
Andere operatoren zijn:
< kleiner dan
> groter dan
<= kleiner dan of gelijk aan
>= groter dan of gelijk aan
== is gelijk aan
!= is niet gelijk aan
&& en (AND)
|| of (OR)
Gegevens opnemen uit een tekstveld
Een andere manier om gegevens op te nemen, is gebruik te maken van
tekstvelden in een formulier. Gebruikers kunnen een term invoeren en dat gegeven
kan worden opgeslagen in een script en verwerkt worden.
Maak eerst een pagina aan met daarin een formulier met een tekstveld en een
drukknop. Je verkrijgt onderstaande code:
<head>
<title>testpagina</title>
</head>
<body>
<form name="formulier1">
<input type="text" name="tekstveld1">
<input type="button" value="klik">
</form>
</body>
</html>
We gaan nu een functie schrijven die de waarde uit het tekstveld haalt en
nadien weergeeft in een alertbox.
Typ onderstaande code in de header:
<script type="text/javascript">
function toongegeven()
{
var gegeven_uit_tekstveld;
gegeven_uit_tekstveld= document.formulier1.tekstveld1.value;
alert(gegeven_uit_tekstveld);
}
</script>
We maken het geheugenplaatsje gegeven_uit_tekstveld aan in een
variabele. In die variabele stoppen we de waarde (value) die de
gebruiker ingeeft in het tekstveld.
Dit doen we door het object formulier (met
de naam formulier1) en het tekstveld (met de naam tekstveld1)
aan te spreken en hiervan de waarde te nemen. In het volgende deel van deze
cursus gaan we dieper in op dit objectenmodel.
Vervolgens geven we de waarde weer in een alertbox. Dit gebeurt door de functie
te koppelen aan de knop met de event handler onclick. Vul je
HTML-code aan met onderstaande code:
<input type="button" value="opslaan" onclick="toongegeven()">
We breiden de alert nog uit. We laten nog wat extra tekst verschijnen in de
alert. Verander de code als volgt:
<script type="text/javascript">
function toongegeven()
{
var gegeven_uit_tekstveld;
gegeven_uit_tekstveld= document.formulier1.tekstveld1.value;
alert("Het paswoord is: " + gegeven_uit_tekstveld);
}
</script>
</head>
<body>
<form name="formulier1">
<input type="password" name="tekstveld1">
<input type="button" value="klik" onclick="toongegeven()">
</form>
Je verkrijgt volgend resultaat:
Als je tekst wilt toevoegen merk je dat we hiervoor het plusteken gebruiken.
Verder zie je dat letterlijk weergegeven tekst tussen aanhalingstekens moet
staan, maar dat had je al geleerd in het eerste deel van de cursus.
Speciale tekens die je wilt laten weergeven die ook gebruikt worden bij het
programmeren, vereisen een speciale procedure om gebruikt te worden.
Deze tekens
moeten worden voorafgegaan worden door een zogenaamd escapeteken.
In JavaScript is dit escapeteken de slash ' \ '
alert("Het paswoord is: " + " \"" + gegeven_uit_tekstveld + "\" " + "\n
geldig paswoord");
Wijzig de code in je bestand en je zult zien dat het paswoord nu tussen
aanhalingstekens staat en dat de tekst geldig paswoord op een nieuwe regel
begint in de alertbox.
Dit werd verkregen met de code \n om een
nieuwe regel te beginnen.
Ga naar het volgende deel van de Javascript basiscursus : Objecten
|
Ontwerp je site