Après cette leçon, vous pourrez :
Si vous n'avez pas accès à un serveur web ou ne possédez pas la science innée de la programmation CGI, vous pouvez quand même créer des formulaires web fonctionnels avec JavaScript. Un des avantages est que tout le "travail" est fait sur l'ordinateur de l'internaute ("orienté client") plutôt que de tourner sur un serveur web -- il y a donc moins de communication aller / retour sur Internet. Un autre bénéfice est que vous pouvez créer des pages web qui marcheront même si vous n'êtes pas connectés au net. De plus, JavaScript offre des fonctionnalités supplémentaires pour vérifier la validité des données saisies avant le traitement.
Il y a pourtant des choses que JavaScript ne peut pas faire -- il ne peut ni écrire, ni stocker des données envoyées depuis un formulaire web. De plus, le code JavaScript doit être inclus dans une page web. Les scripts complexes impactent donc la taille des fichiers HTML (et le temps de chargement) de vos pages web. Autre chose : comme les scripts font partie de vos pages, n'importe qui peut en étudier le code en regardant le source HTML -- si vous créez un test JavaScript, vous devez, quelque part dans le code, inclure les réponses !
Enfin, vous pouvez encore trouver des internautes visitant vos pages web qui utilisent un vieux navigateur ne supportant pas le JavaScript.
Maintenant, nous allons modifier nos documents web Volcan afin d'inclure du code JavaScript pour les formulaires. La première page sur laquelle nous allons travailler est le formulaire que nous avons créé dans la leçon précédente, et qui calculait, via un script CGI, une estimation de vélocité à partir d'une hauteur saisie dans un champ de formulaire. L'équation étant assez simple, cela peut aisément être réalisé avec le JavaScript.
Mais, plutôt que d'afficher le résultat dans une nouvelle page web comme avec le script CGI, nous pouvons créer un champ de saisie et faire afficher par du JavaScript la valeur calculée à cet endroit. Ainsi, la personne utilisant le formulaire reste sur la même page et peut tester une série de valeurs différentes.
<tr> <td valign=top align=right><tt><b>résultat</b></td> <td valign=top><input type="text" name="result" size="20"> </td> </tr>
<script language="JavaScript">
<!--
/* Calcul de Vélocité
Calcule la vélocité théorique maximum à partir d'une
hauteur saisie grâce à l'égalité des énergies potentielles et cinétiques */
function calc_vel (form) {
// Vérifie que la saisie est valide
if ( isNaN(form.height.value) || (form.height.value <= 0) ) {
alert('La hauteur saisie \''+ form.height.value +
'\' n\'est pas valide. Pour effectuer le calcul, ' +
'la hauteur doit être un nombre supérieur à 0.');
form.result.value = '';
} else {
// suppose une entrée en mètres d'abord
var gravity = 9.8;
var myUnits = 'mètres';
// Si les pieds sont sélectionnés, mise à jour de l'unité et de la constante de gravité
if (form.units[1].checked) {
gravity = 32.0;
myUnits = 'pieds';
}
// Calcule la vélocité et présente le résultat dans le champ d'affichage
var velocity = parseInt(Math.sqrt( 2 * gravity * form.height.value));
form.result.value = velocity + ' ' + myUnits + '/seconde';
}
// renvoie la valeur FALSE pour que le formulaire n'appelle pas le CGI
return false;
}
//-->
</script>
La première partie du code utilise un format de commentaire sur plusieurs lignes, /* ... */ pour la description du script. Nous enverrons à notre fonction appelée "calc_vel" des informations grâce à un paramètre (entre parenthèses) appelé "form" -- qui sera une structure de données JavaScript pour tout ce qui sera sélectionné ou saisi dans notre formulaire de page web.
La première chose que notre script fait est de vérifier que le nombre saisi est valide. Nous faisons donc un test pour voir si la valeur est numérique à l'aide de la fonction intégrée JavaScript NaN qui teste si une valeur n'est "Pas un Nombre" ("Not a Number") et nous nous assurons que ce nombre est supérieur à 0. Si la valeur de la hauteur que nous recevons donne une erreur pour un des deux tests, nous affichons un message d'alerte.
Dans l'autre cas (après le else), nous effectuons le calcul, en assummant d'abord que la saisie est en métres. Nous vérifions ensuite l'état des boutons-poussoir et ajustons les valeurs si l'unité sélectionnée était le pied. Puis le script utilise d'autres fonctions JavaScript pour calculer la réponse, et la renvoie dans un format entier (sans décimales). Nous intégrons enfin le résultat dans le champ de formulaire que nous avons créé à l'étape 2.
La fonction renvoie une valeur "faux" à ce qui l'a appelée. Dans la prochaine étape, nous verrons ce que ça signifie.
La dernière chose à faire est d'éditer notre tag <form> afin qu'il appelle cette nouvelle fonction JavaScript.
<form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl" name="energy" onSubmit="return calc_vel(this)">
L'option onSubmit est nouvelle dans ce tag et exécute le JavaScript entre guillemets quand on clique sur le bouton Envoyer (Submit en anglais). Cette option se déroule avant de faire appel au script CGI de l'attribut ACTION=. Si le résultat de calc_vel(this) est vrai, alors le CGI est exécuté ; si il est faux, le scripts CGI n'est pas appelé. Cette fonctionnalité vous permet d'exécuter le JavaScript avant que le formulaire soit envoyé au script CGI, souvent afin de vérifier les valeurs saisies.
Un autre des avantages de la combinaison de code est que si l'internaute utilise un navigateur web ne supportant pas le JavaScript, la fonction onSubmit est ignorée et les données sont envoyées au CGI sur le serveur pour traitement.
Envoyer le paramètre this à la fonction calc_vel signifie "envoie à cette function toutes les données de mon formulaire, les noms et valeurs de tous les éléments du formulaire".
Pour continuer, nous allons nous faire aider de JavaScript pour rendre plus facile la navigation parmi les pages de notre site.
Jusqu'à maintenant, nous avons créé des liens hypertexte en haut de chaque page pour permettre au visiteur d'avancer, de revenir à une des pages de notre site ou de retourner ý la page d'index. Nous pouvons utiliser les formulaires de page pour remplacer ces liens par des menus déroulants afin de permettre à notre visiteur d'aller vers n'importe quelle page de notre site. Ceci est une fonctionnalité très précieuse dans un site web complexe, et cela réduit le nombre de pages que les internautes doivent afficher avant d'arriver à la page de leur choix. De plus, les menus déroulants condensent les informations de navigation dans un affichage compact (comparez l'espace occupé par 25 liens hypertexte et celui occupé par un menu déroulant).
Notre approche va être d'écrire une fonction générique JavaScript pouvant être utilisée dans n'importe quel document nécessitant des menus de navigation, puis de faire quelques modifications mineures pour chaque cas.
function goPage (newURL) {
// Cette fonction est appelée depuis les menus déroulants pour
// transférer vers une page différente. Ignore la valeur envoyée
// dans une chaine vide
if (newURL != "") {
// ignore les séparateurs de menus et réinitialise la sélection par
// défaut
if (newURL == "-" ) {
resetMenu();
} else {
// Envoie à la page indiquée par l'URL
document.location.href = newURL;
}
}
}
function resetMenu() {
// réinitialise la sélection du menu lors de l'entrée dans cette page
document.gomenu.selector.selectedIndex = 2;
}
Ces fonctions réalisent trois tâches différentes. Si la valeur envoyée à function goPage est vide (newURL=""), on ne fait rien. C'est le cas si la personne sélectionne la page déjà affichée. La deuxième possibilité est la valeur "-", que nous allons utiliser pour indiquer une ligne appelée "séparateur" dans nos menus (dans ce cas, nous avons sélectionné le troisième élément de ce menu -- souvenez-vous, Javascript commence à compter à partir de 0.), auquel cas nous appelons une seconde fonction, resetMenu(), qui repositionne le menu dans son état initial. Et le dernier cas est celui où quelque chose se passe réellement, nous transférant vers le document indiqué par l'URL.
Débutons avec notre fichier intro.html, qui contient déjà du JavaScript. Nous avons donc juste à copier et coller les deux fonctions n'importe où avant le tag JavaScript de fin.
<H5>Web Volcan / <A HREF="index1.html">Index</A> / <A HREF="term.html">suivant</A></H5>par :
<form name="gomenu"> <H5>Web Volcan / <select onChange="goPage(this.options[this.selectedIndex].value)" name="selector"> <option value = "index1.html">Web Volcan</option> <option value = "-"> --------------</option> <option value = "" selected>Introduction</option> <option value = "term.html">Terminologie des Volcans</option> <option value = "usa.html">Endroits Volcaniques aux USA</option> <option value = "mars.html">Endroits Volcaniques sur Mars</option> <option value = "proj.html">Projet de Recherche</option> </select> <noscript> <A HREF="index.html">Index</A> / <A HREF="term.html">suivant</A> </noscript> </form> </H5>
Nous avons créé un formulaire appelé "gomenu" contenant un menu déroulant appelé "selector". L'évènement JavaScript onChange s'exécute quand la sélection de menu change, et appelle la fonction goPage à qui on envoie la valeur contenue dans la partie value de l'élément sélectionné dans le menu.
L'élément de menu correspondant à cette page ("introduction") sera sélectionné au chargement de la page grâce au mot-clé selected du tag option. Notez également que la valeur de ce tag est vide (ou ""), afin que, si on choisissait cet élément de menu, notre fonction JavaScript ne changerait rien. Enfin, nous avons utilisé une ligne de traits comme séparateur sous le premier élément ; si cet élément est sélectionné, notre fonction JavaScript appelle la fonction resetMenu qui remet le menu dans son état initial (car nous ne voulons rien faire si le visiteur sélectionne le séparateur).
Le HTML à l'intérieur des tags <noscript>...<.noscript> affiche nos liens hypertexte originaux dans le cas où le navigateur de l'internaute ne supporte pas le JavaScript.
Maintenant, nous allons ajouter une toute petite chose qui rendra notre menu complètement opérationnel. Ce petit morceau de code sert à réinitialiser l'élément de menu correspondant à une page quand l'internaute utilise le menu pour aller vers une autre page, puis clique sur le bouton précédent pour revenir vers cette page. Sans cela, le menu s'afficherait avec le dernier élément sélectionné.
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666 onLoad="resetMenu()">
L'évènement JavaScript onLoad est appelé à chaque chargement de la page web afin de réinitialiser notre menu chaque fois que la page Introduction se charge.
Maintenant, pour finir le menu, vous allez modifier les liens de la même manière dans les autres documents principaux de notre site web Volcan, en copiant le code des étapes 1,2 et 3 ci-dessus. Les quelques différences pour chaque page sont résumées dans le tableau ci-dessous :
| Editions des Menus JavaScript | |
|---|---|
| Terminologie des Volcans term.html |
|
| |
| Endroits Volcaniques aux USA usa.html |
|
| |
| Endroits Volcaniques sur Mars mars.html |
|
| |
| Projet de Recherche (document de navigation de la page de cadres) proj_nav.html |
|
| |
Que de travail !
Si tout s'est bien passé, vos pages web principales sont maintenant reliées par le menu de navigation, permettant à un visiteur de votre site d'aller immédiatement d'une page à une autre sans devoir cliquer dans une série de pages.
Maintenant, nous allons utiliser un peu de ce que nous avons appris pour créer un outil JavaScript de navigation vers les pages d'un autre site web. Nous tirons profit de l'excellente structure du site web Regards sur le Système Solaire qui offre des informations sur toutes les planètes et est traduit dans différentes langues. En examinant les URLs de ce site, nous voyons qu'ils sont construits de la manière suivante :
où langage est :
et planet est tout simplement le nom de la planète (e.g. "mars", "jupiter")
Sachant cela, nous pouvons créer un formulaire web à l'aide duquel l'internaute sélectionne une planète dans un menu déroulant et une langue dans un ensemble de boutons-poussoir, pour voir le contenu de ce site. Cela constitue une navigation plus simple et plus compacte qu'une liste de liens hypertexte.
function goPlanet () {
// Fonction pour la navigation vers différentes parties du site
// Regards sur le Système Solaire
// récupérer la planète sélectionnée dans le menu
var planet = document.solar.planets[document.solar.planets.selectedIndex].value;
// vérifier qu'une entrée valide est sélectionnée
if (planet == "") {
alert ('Sélectionnez une planète, SVP !');
} else {
// déterminer quelle langue est sélectionnée
for (i=0; i<5; i++) {
if (document.solar.lang[i].checked) {
lang = document.solar.lang[i].value;
break;
}
}
// construire l'URL du lien distant
var url = 'http://solarviews.com/' + lang + '/' + planet + '.htm';
// ouvrir l'URL dans une nouvelle fenêtre
var planet_window = window.open( url , "planets", "toolbar,status,location,menubar,scrollbars,resizable,width=550,height=450");
// Si nous utilisons NetScape, nous pouvons amener la fenêtre à l'avant-plan
if (navigator.appName.substring(0,8) == "Netscape") planet_window.focus();
}
}
<p>Comparez les paysages volcaniques de Mars avec les autres planètes<br>
<form name="solar">
<center>
<table border=0 cellpadding=10 cellspacing=2>
<tr>
<td valign=top><select name="planets">
<option value = "" selected>Sélectionnez une Planète...</option>
<option value = "mercury">Mercure</option>
<option value = "venus">Vénus</option>
<option value = "earth">Terre</option>
<option value = "mars">Mars</option>
<option value = "jupiter">Jupiter</option>
<option value = "saturn">Saturne</option>
<option value = "uranus">Uranus</option>
<option value = "neptune">Neptune</option>
<option value = "pluto">Pluton</option>
</select>
</td>
<td valign=top>Afficher l'information en :<br>
<input type="radio" name="lang" value="eng" checked>Anglais<br>
<input type="radio" name="lang" value="span">Espagnol<br>
<input type="radio" name="lang" value="portug">Portuguais</td>
<input type="radio" name="lang" value="french">Français</td>
<input type="radio" name="lang" value="germ">Allemand</td>
<td valign=bottom><input type="button" value="Afficher l'information"
onClick="goPlanet()"></td>
</tr>
</table>
</center>
</form>
Nous avons créé un nouveau formulaire web contenant un menu déroulant avec les noms des planètes et les boutons-poussoir pour le choix de la langue d'affichage. Notre fonction JavaScript prend simplement les éléments de formulaire sélectionnés et construit l'URL du site web distant qui contient l'information. En bonus, il ouvre une nouvelle fenêtre JavaScript, comme nous l'avons appris dans la leçon 27c.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Cette leçon contient beaucoup de JavaScript à copier et coller, et il est très facile de faire des fautes de frappe avec cette méthode.
Revoyons les grandes lignes de cette leçon :
Essayez de changer les liens de navigation de vos propres pages web pour qu'ils utilisent les menus de navigation JavaScript.
Ceci n'est qu'un tout petit exemple de ce que vous pouvez faire avec JavaScript. De nombreux sites web offrent gratuitement du code JavaScript que vous pouvez copier et utiliser. Vous n'étes même pas obligés de comprendre comment ça marche (bien que ça aide !). Visitez quelques-uns de ces sites et essayez de trouver un exemple de code à inclure dans vos pages web :
Nous avons également créé un autre didacticiel/ressource appelé le jClicker, un modèle montrant comment créer facilement une présentation JavaScript.
Ajouter du son, de la vidéo, de l'animation à vos pages web.
Ecrire le HTML : Leçon 28c : Action de Formulaires avec JavaScript
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut28c.html