10. JavaScript
In dit gedeelte laten we drie voorbeelden zien van het gebruik van JavaScript in de pagina's WEB. We richten ons op het beheer van formulieren, maar JavaScript kan nog veel meer.
10.1. Gegevens uit een formulier ophalen
Het onderstaande voorbeeld laat zien hoe je in de browser de gegevens kunt ophalen die de gebruiker in een formulier heeft ingevoerd. Dit maakt het doorgaans mogelijk om de gegevens voor te bewerken voordat ze naar de server worden verzonden.
10.1.1. Het formulier
We hebben een formulier met de meest gangbare componenten en een knop ‘Weergeven’ waarmee de door de gebruiker ingevoerde gegevens kunnen worden weergegeven.
10.1.2. De code
<html>
<head>
<title>Un formulaire traité par Javascript</title>
<script language="javascript">
function afficher(){
// geeft de gegevens van het formulier weer in een lijst
// eerst wissen
effacerInfos();
// de waarde van de # velden weergeven
with(document.frmExemple){
// verborgen veld
ecrire("champ caché="+cache.value);
// enkel tekstveld
ecrire("champ textuel simple="+simple.value);
// meervoudig tekstveld
ecrire("champ textuel multiple="+lignes.value);
// keuzerondjes
for(i=0;i<radio.length;i++){
texte="radio["+i+"]="+radio[i].value;
if(radio[i].checked) texte+=", coché";
ecrire(texte);
}//for
// selectievakjes
for(i=0;i<qcm.length;i++){
texte="qcm["+i+"]="+qcm[i].value;
if(qcm[i].checked) texte+=", coché";
ecrire(texte);
}//for
//vervolgkeuzelijst
ecrire("index sélectionné dans le menu="+menu.selectedIndex);
for(i=0;i<menu.length;i++){
texte="menu["+i+"]="+menu.options[i].text;
if(menu.options[i].selected) texte+=",sélectionné";
ecrire(texte);
}//voor
//meerkeuzelijst
for(i=0;i<lstVoitures.length;i++){
texte="lstVoitures["+i+"]="+lstVoitures.options[i].text;
if(lstVoitures.options[i].selected) texte+=",sélectionné";
ecrire(texte);
}//voor
//wachtwoord
ecrire("mot de passe="+passwd.value);
}//met
}//functie
function ecrire(texte){
// tekst schrijven in de informatielijst
frmInfos.lstInfos.options[frmInfos.lstInfos.length]=new Option(texte);
}//schrijven
function effacerInfos(){
frmInfos.lstInfos.length=0;
}//effacerInfos
</script>
</head>
<body bgcolor="#C0C0C0" onload="afficher()">
<center>
<h2>Un formulaire traité par Javascript</h2>
<hr>
<form method="POST" name="frmExemple">
<input type="hidden" name="cache" value="secret">
<table border="0">
<tr>
<td align="center">Un champ textuel simple</td>
<td align="center" width="100"> </td>
<td align="center">Un champ textuel sur plusieurs lignes</td>
</tr>
<tr>
<td align="center"><input type="text" size="20" name="simple"></td>
<td align="center" width="100"> </td>
<td align="center">
<textarea name="lignes" rows="2" cols="40">Ce texte est modifiable</textarea>
</td>
</tr>
</table>
<table border="0">
<tr>
<td><strong>Des boutons radio :</strong></td>
<td>
<input type="radio" checked name="radio" value="FM">FM
</td>
<td>
<input type="radio" name="radio" value="GO">GO
</td>
<td>
<input type="radio" name="radio" value="PO">PO
</td>
<td> </td>
<td><strong>Des choix multiples :</strong></td>
<td>
<input type="checkbox" name="qcm" value="un">un
</td>
<td>
<input type="checkbox" name="qcm" value="deux">deux
</td>
<td>
<input type="checkbox" name="qcm" value="trois">trois
</td>
</tr>
</table>
<table border="0">
<tr>
<td>Un menu déroulant : </td>
<td>
<select name="menu" size="1">
<option>50 F</option>
<option>60 F</option>
<option>70 F</option>
<option>100 F</option>
</select>
</td>
<td>Une liste :</td>
<td>
<select name="lstVoitures" multiple size="3">
<option>Renault</option>
<option>Citroën</option>
<option>Peugeot</option>
<option>Fiat</option>
<option>Audi</option>
</select>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>Un mot de passe : </td>
<td><input type="password" size="21" name="passwd"></td>
<td> </td>
<td>Un champ de contexte caché : </td>
</tr>
</table>
</form>
<hr>
<h2>Informations du formulaire</h2>
<form name="frmInfos">
<table>
<tr>
<td><input type="button" value="Effacer" onclick="effacerInfos()"></td>
<td>
<select name="lstInfos" multiple size="3">
</select>
</td>
<td>
<input type="button" name="cmdAfficher" value="Afficher" onclick="afficher()">
</td>
</tr>
</form>
</body>
</html>
10.2. Reguliere expressies in JavaScript
Wat de browser betreft, kan JavaScript worden gebruikt om de geldigheid van de door de gebruiker ingevoerde gegevens te controleren voordat deze naar de server worden verzonden. Hieronder volgt een testprogramma voor deze reguliere expressies.
10.2.1. De testpagina
10.2.2. De code van de pagina
<html>
<head>
<title>Les expressions régulières en Javascript</title>
<script language="javascript">
function afficherInfos(){
with(document.frmRegExp){
// moet er iets gebeuren?
if (! verifier()) return;
// oké – we wissen de vorige resultaten
effacerInfos();
// controle van het sjabloon
modele=new RegExp(txtModele.value);
champs=modele.exec(txtChaine.value);
if(champs==null)
// geen overeenkomst tussen sjabloon en tekenreeks
ecrireInfos("pas de correspondance");
else{
// overeenkomst – de verkregen resultaten worden weergegeven
ecrireInfos("Il y a correspondance");
for(i=0;i<champs.length;i++)
ecrireInfos("champs["+i+"]=["+champs[i]+"]");
}//anders
}//met
}//functie
function ecrireInfos(texte){
// tekst schrijven naar de informatielijst
document.frmRegExp.lstInfos.options[document.frmRegExp.lstInfos.length]=new Option(texte);
}//schrijven
function effacerInfos(){
frmRegExp.lstInfos.length=0;
}//effacerInfos
function jouer(){
// test het sjabloon tegen de tekenreeks in het gekozen voorbeeld
with(document.frmRegExp){
txtModele.value=lstModeles.options[lstModeles.selectedIndex].text
txtChaine.value=lstChaines.options[lstChaines.selectedIndex].text
afficherInfos();
}//met
}//afspelen
function ajouter(){
//voegt de huidige test toe aan de voorbeelden
with(document.frmRegExp){
// moet er iets gebeuren?
if (! verifier()) return;
// toevoeging
lstModeles.options[lstModeles.length]=new Option(txtModele.value);
lstChaines.options[lstChaines.length]=new Option(txtChaine.value);
// invoer wissen
txtModele.value="";
txtChaine.value="";
}//met
}//toevoegen
function verifier(){
// controleer of de invoervelden niet leeg zijn
with(document.frmRegExp){
champs=/^\s*$/.exec(txtModele.value);
if(champs!=null){
alert("Vous n'avez pas indiqué de modèle");
txtModele.focus();
return false;
}//als
champs=/^\s*$/.exec(txtChaine.value);
if(champs!=null){
alert("Vous n'avez pas indiqué de chaîne de test");
txtChaine.focus();
return false;
}//als
// het is in orde
return true;
}//met
}//controleren
</script>
</head>
<body bgcolor="#C0C0C0">
<center>
<h2>Les expressions régulières en Javascript</h2>
<hr>
<form name="frmRegExp">
<table>
<tr>
<td>Expression régulière</td>
<td>Chaîne de test</td>
</tr>
<tr>
<td><input type="text" name="txtModele" size="20"></td>
<td><input type="text" name="txtChaine" size="20"></td>
</tr>
<tr>
<td>
<input type="button" name="cmdAfficher" value="Jouer le test" onclick="afficherInfos()">
</td>
<td>
<input type="button" name="cmdAjouter" value="Ajouter aux exemples" onclick="ajouter()">
</td>
</tr>
</table>
<hr>
<h2>Résultats de l'instruction champs=expression régulière.exec(chaine)</h2>
<table>
<tr>
<td>
<select name="lstInfos" size="3">
</select>
</td>
</tr>
</table>
<hr>
<h2>Exemples</h2>
<table>
<tr>
<td align="center">Modèles</td>
<td align="center">Chaînes</td>
</tr>
<tr>
<td>
<select name="lstModeles" size="1">
<option>^\d+$</option>
<option>^(\d+) (\d+)$</option>
<option>^(\d+)(.*)(\d+)$</option>
<option>^(\d+)(\s+)(\d+)$</option>
</select>
</td>
<td>
<select name="lstChaines" size="1">
<option>67</option>
<option>56 84</option>
<option>45abcd67</option>
<option>45 67</option>
</select>
</td>
<td>
<input type="button" name="cmdJouer" value="Jouer l'exemple" onclick="jouer()">
</td>
</tr>
</form>
</body>
</html>
10.3. Lijstbeheer in JavaScript
10.3.1. Het formulier
10.3.2. De code
<html>
<head>
<title>Les listes en Javascript</title>
<script language="javascript">
// toevoegen
function ajouter(L1,L2,T){
// voeg de waarde van veld T toe aan de lijsten L1,L2
// moet er iets gebeuren?
champs=/^\s*$/.exec(T.value);
if(champs!=null){
// het veld is leeg
alert("Vous n'avez pas indiqué la valeur à ajouter");
txtElement.focus();
return;
}//if
// dan wordt het element toegevoegd
L1.options[L1.length]=new Option(T.value);
L2.options[L2.length]=new Option(T.value);
T.value="";
}//toevoegen
//leegmaken
function vider(L){
// maakt de lijst L leeg
L.length=0;
}//leegmaken
//overzetten
function transfert(L1,L2,simple){
//zet de geselecteerde elementen uit de lijst L1 over naar L2
// moet er iets gebeuren?
// index van het geselecteerde element in L1
index1=L1.selectedIndex;
if(index1==-1){
alert("Vous n'avez pas sélectionné d'élément");
return;
}//if
// wat is de selectiemodus voor de elementen in de lijsten
if(simple){ // enkele selectie
element1=L1.options[index1].text;
//toevoegen in L2
L2.options[L2.length]=new Option(element1);
//verwijderen in L1
L1.options[index1]=null;
}//enkelvoudig
if(! simple){ //meervoudige selectie
//lijst 1 in omgekeerde volgorde doorlopen
for(i=L1.length-1;i>=0;i--){
//element geselecteerd?
if(L1.options[i].selected){
//toevoegen aan L2
L2.options[L2.length]=new Option(L1.options[i].text);
//verwijderen uit L1
L1.options[i]=null;
}//als
}//voor i
}//if ! eenvoudig
}//overdracht
</script>
</head>
<body bgcolor="#C0C0C0">
<center>
<h2>Les listes en Javascript</h2>
<hr>
<form name="frmListes">
<table>
<tr>
<td>
<input type="button" name="cmdAjouter" value="Ajouter" onclick="ajouter(lst1A,lst1B,txtElement)">
</td>
<td>
<input type="text" name="txtElement">
</td>
</tr>
</table>
<table>
<tr>
<td align="center">liste 1</td>
<td align="center"><input type="button" value=">>" onclick="transfert(lst1A,lst2A,true)"</td>
<td align="center"><input type="button" value="<<" onclick="transfert(lst2A,lst1A,true)"</td>
<td align="center">liste 2</td>
<td width="30"></td>
<td align="center">liste 1</td>
<td align="center"><input type="button" value=">>" onclick="transfert(lst1B,lst2B,false)"</td>
<td align="center"><input type="button" value="<<" onclick="transfert(lst2B,lst1B,false)"</td>
<td align="center">liste 2</td>
</tr>
<tr>
<td></td>
<td align="center">
<select name="lst1A" size="5">
</select>
</td>
<td align="center">
<select name="lst2A" size="5">
</select>
</td>
<td></td>
<td></td>
<td></td>
<td align="center">
<select name="lst1B" size="5" multiple >
</select>
</td>
<td align="center">
<select name="lst2B" size="5" multiple>
</select>
</td>
</tr>
<tr>
<td></td>
<td align="center"><input type="button" value="Vider" onclick="vider(lst1A)"</td>
<td align="center"><input type="button" value="Vider" onclick="vider(lst2A)"</td>
<td></td>
<td></td>
<td></td>
<td align="center"><input type="button" value="Vider" onclick="vider(lst1B)"</td>
<td align="center"><input type="button" value="Vider" onclick="vider(lst2B)"</td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"><strong>Sélection simple</strong></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"><strong>Sélection multiple</strong></td>
<td></td>
</tr>
</table>
<hr>
</form>
</body>
</html>