Le Langage JavaScript

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 :
Modèles Exemples
/ma/ mari, emma, demandé
/^ma/ mari
/ma$/ emma
/^maison$/ maison
/al+/ ralentir,rallier,calibre
/al*/ ralentir, rallier, rateau, calibre
/^ral+/ ralentir, rallier
/^ra{2}/ rallier
/^ral{1,3}/ ralentir, rallier, ralllou
/(ra){1,3}/ tarara, tara, tirarace
/un|le/ un chat, le chat
/^.{3}$/ lui, non, une (3 caractères uniquement)
/[abc]/ chat, bal, bien (contient a ou b ou c)
/^[a-z]/ bateau ( commence par une lettre minuscule)
/^[^a-zA-Z]/ 5 bateaux (ne commence pas par une lettre)
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);
}

Le Langage JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

Le Langage JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Le Langage JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

Le langage JavaScript

Le langage JavaScript permet d'ajouter un contrôle au niveau du client qui reçoit

 Le modèle événementiel : le code pourra "réagir" à des événements générés

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

Ecriture du code JavaScript.

var nom = prompt("nomsvp","");

Ce code ouvre une boite dialogue

fig 2 boite de dialogue

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

Nous n'abordons succintement que les éléments particuliers de JavaScript. Il suit la

Les variables en JavaScript.

JavaScript propose deux portées :

 locale à une fonction : var exemple var n = 12;

Les structures de contrôle.

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

var ageSaisi = prompt("Age svp ","");

fig 3 validation numérique

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 :

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

var tab =new Array(4);

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

Les chaînes de caractère.

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

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

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, ...

fig 4 alerte JavaScript

le langage JavaScript s'appuie sur un modèle de développement utilisant des

fig 7 événements associés aux objets

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

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

<input type=text name="nom" maxlength=15 size=20

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

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

envoyé. Il faut donc bloquer cet envoi :

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

<input type=submit name=Submit value=Envoyer onClick="return

3) Les expressions régulières

Les validations logiques de saisie, responsabilité souvent incombant à JavaScript,

Une expression régulière permet de décrire une chaîne de caractères en fonction de

1) En utilisant les string.

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

 Le caractère / représente le délimitaeur de chaîne (notez l'absence de ")

2) En utilisant la classe RegExp

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

Vous aimerez peut-être aussi