Introduction to JavaScript
Chapitre 7
Première étape: le script. La page HTML devra contenir deux objets text, dans lesquels l'utilisateur
inscrira son nom puis son adresse e-mail. Vous pouvez écrire n'importe quoi dans ces éléments puis valider
avec le bouton. Vous pouvez aussi presser le bouton sans rien écrire dans les cases.
Mais à quoi ressemble le script commandant ces deux objets et leur validation.
Le voici:
Etudions tout d'abord le code HTML se situant dans la section
Ce script devrait donner le focus au premier objet text montré dans le script précédant.
Vous devez spécifier le nom du formulaire l'on a surnommé first ainsi que celui de l'objet en question
appelé text1. Si vous voulez focaliser cet élément dès le chargement de la page, utilisez la propriété onLoad de la balise
<body>.
Voici par exemple ce à quoi cela ressemble:
Les données des formulaires sont très importantes dans certaines pages Web,
puisqu'elles sont toujours renvoyées vers le serveur. JavaScript offre la possibilité de
contrôler la validité de ces informations avant leur transfert. Le veux vous montrer tout d'abord
de quelle manière les formulaires peuvent être validés. Ensuite nous verrons les possibilités offertes
pour envoyer des informations depuis JavaScript ou HTML.
Le second élément du formulaire est un peu plus complexe. Essayez d'entrer une quelconque chaîne de caractères telle que votre nom
et vous obtiendrez un message d'erreur (sauf si vous possédez un @ dans votre nom...).
Le critère de validation de l'adresse e-mail entrée réside dans le caractère @.
Chacun sait que les adresses e-mail Internet comportent un @, il semble donc raisonnable de
vérifier la présence de ce dernier, même si cette dernière n'est que peu fiable (un simple @ convient pour passer cette détection).
<html>
<head>
<script language="JavaScript">
<!-- Masque
function test1(form) {
if (form.text1.value == "")
alert("Veuillez taper une chaîne de caractères SVP!")
else {
alert("Salut "+form.text1.value+"! Donnée du formulaire ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Adresse e-mail non valide!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Entrez votre nom:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Validation" onClick="test1(this.form)">
<P>
Entrez votre adresse e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Validation" onClick="test2(this.form)">
</body>
La fonction test1(form) vérifie si la chaîne est vide par l'intermédiaire de l'instruction
if (form.text1.value == "")... . 'form' est la variable recevant le paramètre
'this.form' transmis lors de l'appel à cette fonction. On analyse les informations entrées dans cet objet
grâce à la propriété 'value' combinée avec form.text1. on compare cette chaîne avec "" pour savoir si elle est vide.
Si c'est le cas, l'utilisateur obtient un message d'erreur puisque aucune entrée n'a été tapée. Sinon c'est un 'ok!' que reçoit l'utilisateur en guise de validation.
Le problème ici réside dans la possibilité de l'utilisateur à ne taper que des espaces, ce qui serait considéré comme une entrée valide!
Si vous le voulez, vous pouvez tester ces possibilités et les exclure. Je crois cela aisé avec toutes les informations dont nous disposons actuellement.
Maintenant, jetons un oeil à la fonction test2(form), qui, pour les même raisons, compare la chaîne inscrite avec "".
Mais nous avons tout de même ajouté quelque chose à la commande if. Le || est appelé opérateur OU (OR).
Vous l'avez étudié dans le chapitre 6 de cette introduction.
La commande if vérifie si l'une des deux comparaisons renvoi true (vrai). Il suffit que l'une des expressions soit évaluée à true
pour que les instructions suivantes soient exécutées. Et par conséquent un message d'erreur sera renvoyé si votre chaîne est vide ou si elle
ne comporte pas de @. Ce que vérifie le second membre de la comparaison.
Quelles sont les différentes possibilités existantes pour transmettre le contenu
des formulaires? La voie la plus simple est l'envoi du formulaire sous forme d'un e-mail.
C'est la méthode que nous allons utiliser. Si vous désirez un traitement automatique,
immédiat, s'accompagnant d'une réaction adaptée de la part du serveur, le e-mail s'exclut de lui-même et
il vous reste les scripts CGI pour l'instant. CGI devient indispensable dans le cas de moteurs de recherches
tels que Yahoo où l'utilisateur obtient les résultats juste après avoir rempli le formulaire.
Il ne doit pas attendre que les administrateurs de ce serveur lisent sa requête et renvoi les informations
demandées. Ceci est fait automatiquement par le serveur. JavaScript n'a pas les capacités de faire de telles choses.
Même si vous désirez créer une liste de clients, vous ne pourriez pas obliger le serveur à mettre à jour
automatiquement les informations dans une page HTML seulement avec JavaScript. Pour cela il vous faut CGI.
Cependant, pour constituer cette liste il est toujours possibles aux gens de répondre par e-mail.
Il vous faudra traiter les réponses manuellement. Ceci est raisonnable si vous n'attendez pas
1000 réponses par jour.
Ce script n'est constitué que de HTML. JavaScript n'intervient pas ici! Sauf si vous voulez contrôler
l'intégrité des informations avant leur transfert. J'ai dû utiliser la commande mailto:
que les vieux navigateurs ne supportent pas.
<FORM METHOD=POST ACTION="mailto:votre_email@vient.ici">
<H3>Aimez vous cette page?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">En aucun cas.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>C'est une perte de temps.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">C'est le plus mauvais site jamais visité.<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
Par ce moyen, les réponses vous arrivent par e-mail. Seul problème, vous recevrez des messages qui sembleront
énigmatiques. Certaines fois les espaces seront remplacés par des '+', d'autres fois ce seront des '%20'.
Cela+ressemblera+donc+à+ceci+à+peu+de+choses+près. Il existe quelques petits programmes sur le Net qui remettront de l'ordre
dans vos message mais vous pouvez aussi rajouter ENCTYPE="text/plain" dans la balise <FORM METHOD=...>.
Il existe un autre truc qui rendra vos formulaires un peu plus sympathiques.
Vous pouvez définir quel élément obtiendra le focus initialement ou même ordonner au navigateur de focaliser l'élément comportant une donnée invalide.
Ceci signifie que le navigateur donnera le focus à tel ou tel élément et que l'utilisateur n'aura pas à clickez
sur le formulaire avant de taper quelque chose. On peut le faire grâce à la partie de script suivante:
function setfocus() {
document.first.text1.focus();
return;
}
<body onLoad="setfocus()">