Le langage JavaScript

Le langage JavaScript permet d'ajouter un contrôle au niveau du client qui reçoit une page HTML. C'est un lanage qui s'interprète sous la forme des scripts embarqués dans le code HTML. Il est basée sur deux technologies :

• Le modèle événementiel : le code pourra "réagir" à des événements générés dans le navigateur
• Le modèle objet au travers du modèle DOM (Document Object Model)

1) Le modèle DOM.

Ce modèle propose une description objet et hiérarchique d'un document HTML :

fig 1 le modèle DOM

Cette organisation permettra d'écrire :

document.forms[0].elements[0].value="bonjour"; // l'objet Window est implicite

• forms représente ici la collection de d'objet form
• elements représente la collection d'éléments du formulaire

Ecriture du code JavaScript.

• Scripting local : le code est écrit au sein de la page HTML à l'intérieur des balises <script language=javascript> et </script>
• Scripting externe : le code est déporté dans un fichier séparé (d'extension js), le chargement se fera donc de manière séparé grace à un attribut scr : <script language=javascript scr=monScript.js> </script> . Ce mécanisme permet de construire des bibliothèques de fonctions JavaScript.

Un premier exemple.

var nom = prompt("nomsvp","");
document.write("bonjour " + nom);

Ce code ouvre une boite dialogue

fig 2 boite de dialogue

et affiche ensuite dans le document la chaîne "bonjour patrice"

Eléments du langage.

Nous n'abordons succintement que les éléments particuliers de JavaScript. Il suit la syntaxe standard aujourd'hui (java, C#), il est sensible à la casse.

Les variables en JavaScript.

La déclaration des variables n'est pas obligatoire, son type est implicite au moment de la première affectation. Mais son type peut changer ; une variable a le type de sa dernière affectation. 4 types de base sont proposés :

• entier long
• flottant : 12.456 ou -0.56e5
• booléen : false ou true
• chaîne

JavaScript propose deux portées :

• locale à une fonction : var exemple var n = 12;
• globale au document : sans spécificateur ou avec var en dehors de toutes fonction exemple n = 125;
• conséquence : utiliser toujours le spécificateur var

Les structures de contrôle.

La syntaxe est celle de C, java ou C#; nous n'y reviendrons pas

Fonctions

Le terme générique function est utilisé pour les fonctions et procédures, seule l'instruction return les distingue.

function estHumain(age){
      return (age>0 && age<125)
}

var ageSaisi = prompt("Age svp ","");
if(!estHumain(ageSaisi))
        alert ("vous n'êtes pas humain");
else
        alert("ok");

provoque :

fig 3 validation numérique

• Arguments des fonctions. Le passage est par valeur
• Liste d'arguments. On peut omettre les arguments, un mécanisme intéressant à l'interprétation est mis en oeuvre :

function produit(){
      var args=produit.arguments;
      var nbArgs=produit.arguments.length;
      var p=1;
      for(var i=0;i<nbArgs;i++)
                p*=args[i];
      return p;
}

var pro = produit(4,5,9);   // retourne 180

var pro = produit(5,7) ; //retourne 35

Extraction de type à partir d'une chaîne.

• La fonction eval évalue une expression mathématque dans une chaîne : eval(" 1-Maths.cos(60)")
• Les fonctions préfixées par parse permettent d'extraire les parties numériques à gauche :
  parseInt("12",10) retourne 12 -10 est la base- ; pareInt("1100",2) retourne 12 -2 est la base-
  parseFloat("425ER") retourne 425
  parseFloat("12AZE43") retourne 12
  parseFloat("RTY23") retourne NaN (Not A Numérique)

Les tableaux.

Se déclare à l'aide de l'opérateur new, n'est pas typé :

var tab =new Array(4);
tab[0]=12;
tab[1]="toto";
tab[2]=45;
tab[3]=78;
for(var i=0;i<tab.length;i++)   // length référe le nombre d'éléments déclaré
       document.write(tab[i]);

De nombreux services sont disponibles : split, reverse...

Les chaînes de caractère.

Très proche de Java :

ch = "Bonjour le Monde";

ch.charAt(1)    // retourne 'o'

ch.IndexOf('o')  // ou ch.IndexOf("o") retourne 1

ch.IndexOf('o',3) // retourne 4

ch.lastIndexOf('o') // retourne 12

ch.substring(8,2) // retourne "le"

ch.toLowerCase() // retourne "bonjour le monde"

ch.toUpperCase() // retourne "BONJOUR LE MONDE"

D'autres méthodes sont disponibles : concat, split, ...

Le débogage.

Les navigateurs peuvent alerter en cas d'erreur dans les scripts. Ceci dépend du navigateur. Pour IIx, un message apparaît en bas à gauche :

fig 4 alerte JavaScript

Si l'on double-clique sur l'icône on fait apparaître une boite de dialogue, le choix de visualiser les détails indique la ligne concernée :

fig 5 débogueur JavaScript

2) Le modèle événementiel

le langage JavaScript s'appuie sur un modèle de développement utilisant des événements associés aux éléments HTML.

fig 6 événements JavaScript

fig 7 événements associés aux objets

Exemples

exemple 1 : vérification d'une saisie vide.

Une fonction vérifie la présenced'une chaîne de caractères :

function verifSaisieNulle(ch){
       if(ch.length==0)
           alert("il faut saisir votre nom");
}

Cette fonction est appelé sur l'événement onBlur (perte de focus) de la zone de nom :

      <input type=text name="nom" maxlength=15 size=20 onBlur=verifSaisieNulle(this.value)>

remarque : le code JavaScript n'est pas écrit ici dans des balises.

Ce qui provoquera dans le cas de saisie incorrecte:

fig 8validation de l'exitence du contenu d'un champ

exemple 2 : vérification de plusieurs champs

Si l'on désire vérifier les saisies dans les deux champs on modifie la fonction afin de controler toutes les zones de textes :

function verifSaisieNulleBis(){
      var nb = document.forms[0].length;
      for(var i =0;i<nb;i++)
              if(document.forms[0].elements[i].value.length==0)
                    alert("il faut saisir tous les champs");
}

L'événement onClick du bouton Envoyer va appeler cette fonction :

<input type=submit name=Submit value=Envoyer onClick= verifSaisieNulleBis()>

Mais si l'on effectue des saisies invalides (champs vides), après la fermeture des boites de dialogues, le formulaire est néanmoins

envoyé. Il faut donc bloquer cet envoi :

function verifSaisieNulleBis(){
     var nb = document.forms[0].length;
     for(var i =0;i<nb;i++)
               if(document.forms[0].elements[i].value.length==0){
                     alert("il faut saisir tous les champs");
                     return false;
                }
      return true;
}

L'appel de la fonction sera un peu différent :

<input type=submit name=Submit value=Envoyer onClick="return verifSaisieNulleBis()">

3) Les expressions régulières

Les validations logiques de saisie, responsabilité souvent incombant à JavaScript, nous font entrer dans un monde en soi que sont les expressions régulières. Issues du monde Unix, elles permettent de vérifier la cohérence d'une chaîne de caractère. Par exemple, vérifier si une chaine peut-être une adresse mail, ou un code postal ou un numéro de téléphone mobile etc...

C'est un vaste domaine qu'il n'est pas question de d'aborder dans le détail ici. Nous n'allons présenter que quelques aspects.

Une expression régulière permet de décrire une chaîne de caractères en fonction de carcatères spéciaux prédéfinis :

fig 9 caractères spéciaux (extrait du site commentcamarche.net)

Remarque : les règles de gestion des expressions régulières sont indépendantes des langages; c'est un langage en soi

Exemples :

Utilisation.

1) En utilisant les string.

Fonction qui vérifie que les caractères saisis sont alphabétiques

function controle(ch){
     var modele =/^[A-Za-z]+$/;
     if(ch.search(modele)!=-1)
              alert("ok");
     else
               alert("pas ok");
}

Remarque:

• Le caractère / représente le délimitaeur de chaîne (notez l'absence de ")
• La méthode search retourne -1 si le modèle n'est pas trouvé

2) En utilisant la classe RegExp

var modele =new RegExp("^[A-Za-z]+$");

if(modele.test(ch))

Exemples :

function evalMdP(ch){
    var modele = new RegExp("^[a-zA-Z]{5,8}$");
    if(modele.test(ch))
         alert("valide :");
     else
          alert ("pas valide :");
}

function verifNumeroMobile(ch){
     var modele = new RegExp("^(06)[0-9]{8}$");
     if(modele.test(ch))
          alert("valide :"+ch);
     else
           alert ("pas valide :"+ch);
}

Function verifMail(ch){
var modele=new RegExp("^[a-zA-Z0-9\-_]+[a-zA-Z0-9\.\-_]*@[a-zA-Z0-9\-_]+\.[a-zA-Z\.\-_]{1,}[a-zA-Z\-_]+")
 if(modele.test(ch))
          alert("valide :"+ch);
     else
           alert ("pas valide :"+ch);
}