Technologies Internet et Education, © TECFA3. Introduction à JavaScript
Le code JavaScript est exécuté par le navigateur qui recoit la page (client-side) : c'est interactif (pas besoin de faire appel au serveur de nouveau, tout se passe en local).
C'est un langage basé objet qui permet d'interagir avec les éléments qui se trouvent dans le navigateur.
Pour illustrer l'utilisation de ce langage, nous allons travailler avec un petit fomulaire HTML et procéder à son traitement de 2 manière différentes.
Chaque élément de la page correspond à un objet qui s'insère dans un arbre hiérarchique. " les boutons radio réponse1 sont dans le formulaire questions qui se trouve dans le document par défaut". On nomme l'objet en écrivant sa hiérarchie :
document.questions.reponse1
Voici quelques exemple pour accéder à des propriétés ou a des méthodes :
soumettre le formulaire questions (méthode):
document.question.submit();
mettre le nombre d'éléments du formulaires questions dans une variable (propriété):
elements = document.questions.length;
envoyer un popup d'alerte avec un bouton "ok" (méthode) :
alert("attention, vous devez remplir le champ nom")
JavaScript permet de faire réagir le programmes à des évènement qui se passent dans le navigateur. On donne alors une instruction (exécuter une fonction, modifier une variable, changer une propriété d'un objet...) lorsque cet évènement survient.
Exemples d'évènements : click sur un bouton, chargement de la page, soumision d'un formulaire, entrée du curseur de la souris sur un objet...
On va ici traiter chaque click que fait l'utilisateur sur les boutons radio avant de soumettre le formulaire. On donnera le résultat dans une boite d'alerte.
On commence par déclarer une variable pour chaque réponse :
var rep1 = null;
var rep2 = null;
Initialiser les variables à la valeur null permet de tester si l'utilisateur a bien répondu aux questions avant de soumettre.
Pour chaque bouton radio, on rajoute une option onClick qui permet d'éxécuter une instruction à chaque fois que le bouton en question est cliqué.
<INPUT TYPE="radio" NAME="reponse1" VALUE="0" onClick="rep1=0" >
Ensuite, on écrit une fonction qui sera appelée lorsque le formulaire est soumis :
function displayScore (rep1, rep2) {
var score = 0;
if (rep1 == null || rep2 == null) {
alert("Il faut répondre aux questions avant de soumettre");
} else {
score = rep1 + rep2;
if (score == 4) {
alert("Vous êtes un expert");
} else {
if (score >= 2) {
alert("Vous avez une certaine maîtrise de HTML");
} else {
alert("Vous êtes un novice, continuez à vous entrainer");
}
}
}
}
Enfin, on indique au formulaire d'utiliser cette fonction JavaScript lors de la soumission
<form method="post" name="questions" action="javascript:displayScore(rep1,rep2)" >
Cet exemple et plus efficace au niveau de la programmation mais plus difficile à comprendre pour des débutants. Voici la fonction displayScore modifiée et commentée:
function displayScore () {
// petit artifice pour eviter un message d'erreur quand on recommence sans recharger la page.
document.questions.submit.checked = false;
// on déclare la variable score et on initialise à 0
var score = 0;
// on regarde combien d'élément il y a dans le formulaire
elements = document.questions.length;
// on fait ensuite un boucle sur le nombre d'éléments pour les passer en revue un par un.
var i;
for (i = 0; i < elements; i++) {
// on regarde si l'élément est "checked". Si oui, on calcule le score
if (document.questions.elements[i].checked) {
score = score + eval(document.questions.elements[i].value);
}
}
// feedback
...
Le traitement pour le feedback est le même que dans l'exemple précédent.
-- TIE
