De meeste programma's zijn interactief. Dat wil zeggen dat een gebruiker gegeven invoert, daar wat mee doet, en het resultaat weergeeft op het scherm.
Er zijn verschillende manieren om gegevens in te voeren. Hier bespreken we de eenvoudigste. Later in de cursus komen de ingewikkelder, maar wel mooiere manieren.
Een confirmbox is een eenvoudig venster waarin de gebruiker op een vraag antwoord met ja of nee.
Neem onderstaande tekst over in HTML-kit en bekijk het resultaat.
<html>
<head>
<title>Een vraag stellen</title>
</head>
<body>
Even een vraagje...<br>
<script type="text/javascript">
var antw;
antw=window.confirm("Ben je blij vandaag?");
</script>
</body>
</html>
Je ziet: er wordt alleen een vraag gesteld. Met het antwoord wordt niets gedaan.
Je kunt het antwoord zichtbaar maken. Voeg onderstaande regels toe aan je tekst (op de juiste plaats). En test de verschillende mogelijkheden.
document.write ("<br>Je antwoord was: " + antw);
Nu hebben we er nog niet veel aan. Maar later gaan we programma's maken die verschillend reageren op de ingevoerde keuze.
De inputbox is een dialoogvenster met een tekstvak waarin de gebruiker gegevens kan invoeren.
Neem onderstaande tekst over in HTML-kit
<html>
<head>
<title>Promptvenster weergeven</title>
</head>
<body>
Hallo
<script type="text/javascript">
var naam;
naam=window.prompt("Wat is je naam?","Vul je naam in dit veld in");
</script>
bedankt voor je bezoek.
</body>
</html>
Bekijk het resultaat in de preview. Als je alles juist ingetypt hebt, krijg je eerst een inputbox te zien wanneer de pagina geladen wordt.
Ga na wat er gebeurt als je de tekst Vul uw naam in dit veld in weglaat. (en de aanhalingstekens laat staan).
Ga na wat er gebeurt als je niet op ok klikt, maar op annuleren.
Later in de cursus gaan we programma's maken die anders reageren op de ok-knop dan op de annuleren-knop.
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.
Deze variabele moet eerst gedeclareerd worden, dit gebeurt in de regel: var naam;
Met die variabele wordt echter nog niets gedaan; dat gaan we aanpassen
Voeg nu de volgende regels toe aan je tekst (op de juiste plaats):
document.write ("Welkom, ");
document.write (naam);
Begrijp je waarom in de eerste regel een spatie na de komma staat?
Zoals je weet kun je met document.write tekst in je venster plaatsen.
Alls tekst komt achter elkaar. Dit kun je verhelpen door in de tekst html-codes te plaatsen.
Vervang bovenstaande twee regels door:
document.write ("<br>Welkom, ");
document.write (naam);
document.write ("<br>");
Maar het kan ook anders:
Vervang de regels met document.write door:
alert ( "Welkom, " + naam );
Ga na wat het resultaat is.
Gegevens invoeren kan op verschillende manieren.
Als je alleen ja of nee op een vraag wilt hebben, kun je een confirmbox gebruiken.
Als je één gegeven hoeft in te voeren (of slechts enkele) dan maak je gebruik van de prompt (of enkele achter elkaar).
Mooier is natuurlijk als je zelf formulieren ontwerpt; dat komt later in de cursus aan de orde.
Gegevens uitvoeren kan ook op twee manieren:
met de code document.write(...);
De uitvoer komt in een regel op het scherm. Bij meerdere document.write-opdrachten komt de tekst achter de vorige. Tenzij je de html-codes <p> of <br> in je tekst opneemt.
met de code alert(...);
De uitvoer komt nu een een apart venstertje.
Let op: verschillende stukjes tekst (strings) kun je achter elkaar plaatsen met het + teken. Met 'numerieke variabelen' (getallen) lukt dit niet; die worden dan opgeteld.