Formulieren en events |
||||||
|---|---|---|---|---|---|---|
|
Tot nu toe hebben we in de voorbeelden variabelen gedeclareerd en gezien hoe we met deze aangemaakte variabelen kunnen rekenen. De uitkomst is elke keer hetzelfde, tenzij je de waarde in de code verandert. Een bezoeker van het HTML document ziet dus iedere keer de zelfde berekening. Niet erg interactief dus. In het begin van het vorige hoofdstuk lieten we onderstaand voorbeeld al eens zien.
In dit voorbeeld is er wel interactie mogelijk. In dit hoofdstuk ga je leren hoe we op deze manier in Javascript met de gebruiker kunnen communiceren. Aan het einde van deze les weet je :
Bekijk de video. Deze video biedt een basis voor de rest van dit hoofdstuk. |
||||||
|
|
||||||
Het formulierJe hebt vast wel eens in een website gegevens moeten invullen. Een pagina met invoervelden noemt men een formulier. HTML biedt de mogelijkheid formulieren aan te maken. Met een formulier kun je communiceren met een server of kun je op de bladzijde zelf opdrachten uitvoeren door het formulier te koppelen aan Javascript. In het onderstaande voorbeeld vult de gebruiker zelf een willekeurige waarde in. Door op de knop of op enter de drukken, doet het programma iets met de invoer. Wat het programma doet, is nu niet van belang. Het gaat erom hoe dit principe werkt. In het onderstaande voorbeeld vult de gebruiker zelf een willekeurige waarde in. Door op de knop of op enter de drukken, rekent het programma iets uit. Wat het programma uitrekent, is nu niet van belang. Het gaat erom hoe dit principe werkt. |
||||||
| voorbeeld |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table summary="">
<tr>
<td>
Voorbeeld: Geef een tekenreeks
</td>
<td>
<form onsubmit="return false;">
<input id="invoer" value="" />
</form>
</td>
<td>
<button onclick="javascript:voeruit();">Voer uit</button>
</td>
<td id="uitvoer">
</td>
</tr>
</table>
</body>
</html>
De tag input definieert een invoer veld. Binnen de button tag staat de code "javascript:voeruit();". Bij de button tag staat die achter onclick. De engelse term on staat hier voor "als er ge... wordt". Dit klinkt als actie na een gebeurtenis (event in het engels). Dit is de manier waarmee HTML met javascript praat als er gebeurtenissen optreden. Zo zie je bij de form tag onsubmit, de gebeurtenis submit is het opsturen van het formulier naar de server. De onsubmit actie is "return false;". Dit heeft het resultaat dat het formulier niet opgestuurd wordt, maar dat de huidige pagina in het browser tabblad blijft. Iets dat we in deze javascript cursus willen. Als je bovenstaande code in een HTML document hangt krijg je een foutmelding. De browser weet niet wat voeruit is. Deze naam hebben we zelf verzonnen en moeten we in javascript aanmaken. De ronde haakjes () achter voeruit verteld de browser dat voeruit een javascript functie is. De benodigde code gaan we toevoegen en wel in de head sectie van het HTML document. |
|||||
| script |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
/**
functie voeruit reageert op het invullen van het formulier in dit
HTML document. Met de invoer wordt .... gedaan.
*/
function voeruit() // Begin functie declaratie
{ // functie blok begint met accolade openen
// tussen de accolades is de code die wordt uitgevoerd
} // functie blok eindigt met accolade sluiten
</script>
</head>
<body>
<form onsubmit="return false;">
<table summary="">
<tr>
<td>
Voorbeeld: Geef een tekenreeks
</td>
<td>
<input id="invoer" value="" />
</td>
<td>
<button onclick="javascript:voeruit();">Voer uit</button>
</td>
<td id="uitvoer">
</td>
</tr>
</table>
</form>
</body>
</html>
De zwart gedrukte code is nodig om geen fouten op de pagina te hebben. Er
gebeurt echter nog iets. We zullen de functie voeruit een alert box laten
tonen met daarin de ingetypte waarde.
<script type="text/javascript">
/**
functie voeruit reageert op het invullen van het formulier in dit
HTML document. Met de invoer wordt .... gedaan.
*/
function voeruit()
{
/*
Pak uit de het HTML document het element met id 'invoer'
met behulp van de methode document.getElementById
en stop die in de variabele invoerobject.
*/
let invoerobject = document.getElementById('invoer');
/*
Een input element heeft de eigenschap value
Deze representeerd de ingevoerde tekenreeks
*/
alert(invoerobject.value);
}
</script>
|
|||||
| Opdrachten |
|
|||||
| Nette uitvoer | In het voorbeeld boven in deze bladzijde komt de uitvoer niet in een alert box maar
wordt de uitvoer in het venster getoond. Een gebruiker wordt gek als die iedere keer
weer op "OK" moet drukken om de popup te sluiten. Ieder HTML element waar
binnen je weer nieuwe HTML elementen kwijt kan heeft een innerHTML eigenschap.
Deze eigenschap kan je met javascript een nieuwe waarde toekennen. In het voorbeeld gebruiken we
de kolom <td id="uitvoer"></td> om de uitvoer in te stoppen.
<script type="text/javascript">
/**
functie voeruit reageert op het invullen van het formulier in dit
HTML document. De in het invoerveld getypte tekens worden in het
uitvoerveld weergegeven.
*/
function voeruit()
{
// Pak het invoer object
let invoerobject = document.getElementById('invoer');
// Pak het uitvoer object
let uitvoerobject = document.getElementById('uitvoer');
// Schrijf een regel in het uitvoerveld.
uitvoerobject.innerHTML=
"<i>Je hebt de volgende <u>invoer</u> gegeven</i>:<b>" +
invoerobject.value + ":<b>";
}
</script>
|
|||||
| Opdrachten |
|
|||||