0% ont trouvé ce document utile (0 vote)

9 vues53 pages

Cours L1 JavaScript Partie 1

JavaScript

Transféré par

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

9 vues53 pages

Cours L1 JavaScript Partie 1

JavaScript

Transféré par

aroniaikoadolphfrancois591

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

COURS DE JAVASCRIPT

Auteur ; RATIARSON Venot, Enseignant-Chercheur à l’ENI, Fianarantsoa

Le Dynamic HTML (DHTML) est une extension du

HTML qui, associée au javascript et aux attribut d'une commande HTML...
feuilles de styles, permet de manipuler
dynamiquement des éléments HTML sur
<SCRIPT language="Javascript"
une page.
type= "text/javascript ">
 // Fin de la partie cachée

JavaScript est un langage de programmation </SCRIPT>

complètement lié au langage HTML. Le
développeur internet code ses pages HTML en y L'argument de la balise <SCRIPT> décrit le
intégrant des sources JavaScript. Le visiteur, par langage utilisé. Il peut être "JavaScript"
l'intermédiaire de son navigateur, charge le code "JavaScript1.1" "JavaScript1.2".
des pages.
Dans un fichier externe
C'est le navigateur qui interprète le code HTML et
JavaScript. L'interprétation dépend naturellement
Il est possible de mettre les codes de JavaScript
du type de navigateur utilisé et de sa version.
en annexe dans un fichier (à partir de Netscape
3.0 uniquement). Le code à insérer est le
JavaScript est un langage objet et événementiel.
suivant:
Le développeur peut créer des objets sur la page,
avec des propriétés et des méthodes et leur
<SCRIPT LANGUAGE=Javascript
associer des actions en fonction d'événements
SRC="url/[Link]"> </SCRIPT>
déclenchés par le visiteur (passage de souris, clic,
saisie clavier, etc...)
Oû url/[Link] correspond au chemin d'accès
au fichier contenant le code en JavaScript,
1 - COMMENT INTEGRER DU CODE
JAVASCRIPT DANS UNE PAGE HTML ?
Grâce aux évènements

On appelle évènement une action de

l'utilisateur, comme le clic d'un des boutons de
la souris. Le code dans le cas du résultat d'un
A quel emplacement insérer le Javascript
événement s'écrit:
dans votre page HTML
<balise eventHandler="code Javascript à
Il y a plusieurs façon d'inclure du JavaScript insérer">
dans une page HTML:
eventHandler représente le nom de
• Grâce à la balise <SCRIPT> l'événement.
• En mettant le code dans un fichier
• Grâce aux événements

Dans la balise script Ajouter des commentaires dans votre code

On place généralement le maximum d'éléments Pour écrire des commentaires, Javascript utilise
du script dans la balise d'en-tête (ce sont les les conventions utilisées en lange C/C++
éléments située entre les balises <HEAD> et
</HEAD>). Les évènements Javascript seront • Pour mettre en commentaires tout une
quant à eux placés dans le corps de la page ligne on utilise le double slash:
(entre les balises <BODY> et </BODY>) comme // Tous les caractères derrière le // sont

1
• soit de façon implicite, en écrivant
ignorés directement le nom de la variable suivie du
• Pour mettre en commentaire une partie caractère = et de la valeur à affecter:
du texte (éventuellement sur plusieurs chaine= "bonjour"
lignes) on utilise le /* et le */: Le navigateur détermine seul qu'il s'agit
/* Toutes les lignes comprises entre ces d'une déclaration de variable.
repères
Sont ignorées par l'interpréteur Même si une déclaration implicite est tout à fair
de code */ reconnue par le navigateur, il est tout de même
plus rigoureux de déclarer les variables de façon
Il faut veiller à ne pas embriquer des explicite avec le mot var...
commentaires, au risque de provoquer
une erreur lors de l'exécution du code! Portée (visibilité) des variables

Selon l'endroit où on déclare une variable, celle-ci

2 - LA DECLARATION DES VARIABLES, DES pourra être accessible (visible) de partout dans le
OBJETS ET DES TABLEAUX script ou bien que dans une portion confinée du
code, on parle de "portée" d'une variable.
JavaScript utilise l'instruction var pour la
déclaration. Toute nouvelle variable doit être Lorsqu'une variable est déclarée sans le mot clé
initialisée. var, c'est-à-dire de façon implicite, elle est
accessible de partout dans le script (n'importe
Déclaration des variables basiques quelle fonction du script peut faire appel à cette
variable). On parle alors de variable globale
Pour déclarer une variable basique, c'est-à-dire
de type entier, numérique, chaîne de caractères, Lorsque l'on déclare de façon explicite une
etc, il ne faut pas déclarer le type. Le navigateur le variable en javascript (en précédant sa déclaration
détecte. avec le mot var), sa portée dépend de l'endroit où
elle est déclarée.
EXEMPLES de déclaration de variables
• Une variable déclarée au début du script,
basiques :
c'est-à-dire avant toute fonction sera
globale, on pourra alors les utiliser à partir
var prenom_visiteur="Marcel";
de n'importe quel endroit dans le script
var nom_visiteur="Dupond";
var age_visiteur=29;
Une variable déclarée par le mot clé var dans une
fonction aura une portée limitée à cette seule
On remarque la présence du point virgule (;) à la
fonction, c'est-à-dire qu'elle est inutilisable
fin de chaque instruction.
ailleurs, on parle alors de variable locale
Il est possible de placer sur une même ligne
plusieurs instructions séparées par des points 3. CHAINE DE CARACTERES (STRING)
virgules.
Une chaîne de caractère est, comme son nom
Une variable déjà déclarée s'utilise ensuite
l'indique, une suite de caractères. On la
normalement :
représente par la suite de caractères encadrée
par des guillemets simples (') ou doubles ("),
var accueil="Bonjour " + prenom_visiteur + " " + sachant que les deux types de guillemets ne
nom_visiteur; peuvent être mélangés pour une même chaîne de
caractères, ce qui signifie que les guillemets dans
La déclaration des variables peut se faire de deux une chaîne de caractères existent par paire.
façons:
Il existe des caractères spéciaux à utiliser dans
• soit de façon explicite, en faisant précéder les chaînes pour simuler d'une part des
la variable du mot clé var qui permet caractères non visuels ou pour éviter au
d'indiquer de façon rigoureuse qu'il s'agit navigateur de confondre les caractères d'une
d'une variable: chaîne avec ceux du script, ces caractères sont
var chaine= "bonjour" précédés d'un antislash (\):

2
• \b : touche de suppression
• \f : formulaire plein
• \n : retour à la ligne
• \r : appui sur la touche ENTREE
• \t : tabulation
• \" : guillemets doubles
• \' : guillemets simples
• \\ : caractère antislash

Ainsi, si on veut stocker la chaine suivante dans la

variable Titre:
Qu'y a-t'il dans "c:\windows\"
Il faudra écrire dans le code Javascript:
Titre = "Qu'y a-t'il dans \"c:\\windows\\\"";
ou Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';

Booléens (booleans)

Un booléen est une variable spécial servant à

évaluer une condition, il peut donc avoir deux
valeurs:

• vrai: représenté par 1

• faux: représenté par 0

Les propriétés de l'objet String

L'objet string a une seule propriété : la propriété

length qui permet de retourner la longueur d'une
chaîne de caractères. Cette propriété est très utile
car lorsque l'on traite une chaîne de caractères on
aime généralement savoir à quel moment
s'arrêter.
La syntaxe de la propriété length est la suivante:

x = nom_de_la_chaine.length;
x = ('chaine de caracteres').length;

On peut donc directement passer la chaîne de

caractères comme objet, en délimitant la chaîne
par des apostrophes et en plaçant le tout entre
parenthèses.
La méthode traditionnelle consistant à appliquer
une propriété à une variable de type string
fonctionne bien évidemment aussi.

Les méthodes de l'objet String

Les méthodes de l'objet string permettent de

récupérer une portion d'une chaîne de caractère,
ou bien de la modifier.

Le tableau suivant décrit les méthodes de l'objet

string.

3
Méthode Description Exemples
Chaine = 'Comment ça marche?'

• var Resultat =
Retourne le caractère situé à la [Link]("Comment ça
chaî[Link](position)
position donnée en paramètre marche?", 1)
donne 'o'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'

• var Resultat =
Retourne la position d'une sous-chaîne [Link](Sous_Chaine,
(lettre ou groupe de lettres) dans une 6)
indexOf(sous-chaîne,
chaîne de caractère, en effectuant la donne '11'
position)
recherche de gauche à droite, à partir • var Resultat =
de la position spécifiée en paramètre. [Link](Sous_Chaine,
12)
donne '-1'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'
La méthode est similaire à indexOf(), à
• var Resultat =
la différence que la recherche se fait
[Link](Sous_Cha
de droite à gauche:
ine, 6)
lastIndexOf(sous-chaîne, Retourne la position d'une sous-chaîne
donne '-1'
position) (lettre ou groupe de lettres) dans une
• var Resultat =
chaîne de caractère, en effectuant la
[Link](Sous_Cha
recherche de droite à gauche, à partir
ine)
de la position spécifiée en paramètre.
donne '11'

Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'

• var Resultat =
[Link](Sous_Cha
La méthode retourne la sous-chaîne
ine, 6)
substring(position1, (lettre ou groupe de lettres) comprise
donne '-1'
position2) entre les positions 1 et 2 données en
• var Resultat =
paramètre.
[Link](Sous_Cha
ine)
donne '11'

Chaine = 'Comment ça Marche?'

• var Resultat =
Convertit tous les caractères d'une
toLowerCase() [Link]
chaîne en minuscule
donne 'comment ça marche?'

toUpperCase() Convertit tous les caractères d'une Chaine = 'Comment ça Marche?'

4
• var Resultat =
[Link]
chaîne en majuscule
donne 'COMMENT çA
MARCHE?'

D'autres methodes

Méthode description
Correspond à la balise HTML <A name="
">.
Transforme le texte en ancrage
anchor(nom_a_donner) var dmc="alias";
HTML
[Link]([Link]("Nom"));

var dmc="alias";
big() Augmente la taille de la police
[Link]([Link]());
Transforme la chaîne en texte
blink()
clignotant
bold() Met le texte en gras (balise <B>) var dmc="alias";
[Link]([Link]());

fixed var dmc="alias";

Transforme le texte en police fixe
[Link]([Link]());
(balise <TT>)

fontcolor(couleur) Modifie la couleur du texte (admet var dmc="alias";

comme argument la couleur en [Link]([Link]("#333399"));
hexadécimal ou en valeur littérale)
fontsize(Size) Modifie la taille de la police, en var dmc="alias";
afectant la valeur passée en [Link]([Link](6));
paramètre
italics() var dmc="alias";
Transforme le texte en italique
[Link]([Link]());
(balise <I>)

link(URL) var dmc="alias";

Transforme le texte en hypertexte
[Link]([Link]("../[Link]"));
(balise <A href>)

Correspond à la balise HTML <SMALL>.

var dmc="alias";
small() Diminue la taille de la police
[Link]([Link]());

Transforme le texte en texte barré

strike()
(balise <strike>)
Transforme le texte en indice (balise var dmc="alias";
sub()
<sub>) [Link]([Link]());
Transforme le texte en exposant (balise var dmc="alias";
sup()
<sup>) [Link]([Link]());

5
La méthode alert()

La méthode alert() permet d'afficher dans une

boîte toute simple composée d'une fenêtre et d'un
4. DECLARATION ET UTILISATION DES bouton OK le texte qu'on lui fournit en paramètre.
TABLEAUX

En JavaScript, les tableaux sont des objets et leur

déclaration est identique à celle vue plus haut.

var un_tableau=new Array(10)

Cette ligne crée un tableau de 10 éléments de

type basique (réel, entier, chaîne de caractères).
En JavaScript, le premier élément est indexé à 0. Voici sa syntaxe:
Il est possible de déclarer un tableau sans alert(nom_de_la_variable);
dimension fixée. La taille du tableau s'adapte en alert('Chaîne de caractères');
fonction du contenu : alert('Chaîne de caractères' +
nom_de_la_variable);
var un_autre_tableau=new Array;
La chaîne de caractère peut (et doit dans certains
Pour accéder aux éléments du tableau, on utilise cas) contenir des caractères marqués d'un
les crochets "[" et "]" antislash (\). Par exemple, si vous voulez écrire:

un_tableau[0]=10; Message d'alerte:

un_tableau[9]=5; Au feu!!

Des méthodes associées à l'objet permettent Il faudra écrire le script suivant:

d'effectuer des traitements ou d'accéder à des alert('Message d\'alerte \nAu feu!!');
propriétés. On utilise la notation pointée pour
appliquer une méthode sur un objet ou pour La méthode confirm()
accéder à une propriété.
La méthode confirm() est similaire à la méthode
var dimension=un_tableau.length; alert(), si ce n'est qu'elle permet un choix entre
Cette ligne retourne le nombre d'éléments de "OK" et "Annuler". Lorsque l'utilisateur appuie sur
l'objet Array appelé "un_tableau". "OK" la méthode renvoie la valeur true. Elle
renvoie false dans le cas contraire...
5. QU'EST-CE QU'UNE BOITE DE DIALOGUE?

Une boîte de dialogue est une fenêtre qui s'affiche

au premier plan suite à un événement, et qui
permet

• Soit d'avertir l'utilisateur

• Soit le confronter à un choix
• Soit lui demander de compléter un champ
pour récupérer une informations Elle admet comme alert() un seul paramètre: une
chaîne de caractères...
Ce sont des méthodes de l'objet window. Sa syntaxe est:
Ces boites de dialogue ont une mention confirm('Chaîne de caractères');
Javascript, par exemple "Javascript user prompt" confirm() est souvent utilisé dans une structure
pour permettre de savoir à l'utilisateur qu'il s'agit conditionnelle :
d'une boite d'invite de la page en cours. En effet if(confirm('Voulez-vous voir Mickey ?'))
certains webmasters peu scrupuleux pourraient [Link]='[Link]
faire croire qu'il s'agit d'une boite windows et
récupérer le mot de passe (Suite à une erreur du
fournisseur d'accès veuillez entrer votre login et
votre mot de passe)...

6
La méthode prompt()
else if (resultat > 30)
La méthode prompt fournit un moyen simple de alert("Votre entrée : " + resultat + " est
récupérer une information provenant de supérieure à 30")
l'utilisateur, on parle alors de boîte d'invite. La else
méthode prompt() requiert deux arguments: alert("Votre entrée : " + resultat + " est égale à
30")
• le texte d'invite </script>
• la chaîne de caractères par défaut dans le </body>
champ de saisie </html>

showModalDialog()

La méthode javascript showModalDialog(url,

arguments, parametres) est propre à Internet
Explorer version>= 4.
Elle permet d'avoir une boite de dialogue plus
personnalisée et dans laquelle des traitements
peuvent être effectués.

Elle est composée de trois parties :

Sa syntaxe est donc la suivante: - l'url de la page html.
Sa syntaxe est: - l'argument (information) à faire passer dans la
var reponse = prompt('Posez ici votre boite de dialogue.
question','chaîne par défaut'); - les paramètres de la boite de dialogue.
La boîte de dialogue renvoie une valeur
Cette boîte d'invite retourne la valeur de la chaîne ([Link] = "valeur") une fois
saisie par l'utilisateur, elle retourne la valeur null si fermée.
jamais aucun texte n'est saisi...
On l'écrit:
Exemple de prompt var m=showModalDialog("url de la page htmll" ,
"argument" , "paramètre");
<html>
<head> Les paramètre:
<title>Prompt</title> - scroll ( yes|no ) affiche les scrollbarres
<meta http-equiv="Content-Type" - center ( yes|no ) affiche la boîte center
content="text/html; charset=iso-8859-1"> - dialogWidth longueur de la boîte
</head> - dialogHeight hauteur de la boîte
- dialogTop position x de la boîte
<body bgcolor="#FFFFFF" text="#000000"> - dialogLeft position y de la boîte
<font face="Verdana, Arial, Helvetica, sans-serif" - dialogHide masque la boîte
size="3" color="#FF0000">Attention, - edge ( sunken|raised ) style des arêtes de la
en informatique les nombres dits "décimaux"<br> boîte
s'écrivent avec un point, pas avec une - help ( yes|no ) affiche l'icône d'aide
virgule.</font><br> - resizable ( yes|no ) autorise le
redimensionnement
<script language="JavaScript"> - status ( yes|no ) affiche la barre d'état
var resultat; - unadorned ( yes|no ) affiche la boîte sans
resultat = prompt("Entrez un nombre inférieur ou élément de contrôle
supérieur à 30", 29.789)
On l'écrit comme ceci :
if(resultat == null) var m =
alert("Vous ne voulez pas jouer ! Au-revoir.") showModalDialog("[Link]", "",
else if(isNaN(resultat)) "dialogWidth=100; dialogHeight=100");
alert("Entrée invalide : "+resultat)
else if(resultat < 30) Exemple
alert("Votre entrée : " + resultat + " est
inférieure à 30")
7
Il semble que l'on ne puisse pas faire passer function ma_fonction(param1, param2)
plusieurs arguments. {
Le seul moyen est de créer un Objet. ....
<html> }
<head>
<title>Prompt</title> function mon_autre_fonction()
<meta http-equiv="Content-Type" {
content="text/html; charset=iso-8859-1"> ....
</head> }
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript"> Le corps des fonctions et instructions est délimité
var mo = new Object(); par "{" et "}" dans lequel on place la déclaration
[Link] ="dmc"; des variables locales, propres à la fonction, ainsi
[Link]="alias"; que l'ensemble des traitements.
//var m =
showModalDialog("[Link]", mo, Une fonction aura dans son corps une ou
"status=no; scroll=no; help=no; unadorned=yes"); plusieurs instructions return qui permet de
var m = renvoyer une valeur ou un objet. L'instruction
showModalDialog("[Link]","", return n'est pas obligatoire; on a alors affaire à
"status=no; scroll=no; help=no; unadorned=yes"); une instruction qui ne renvoie pas de valeur.
if(m==true){
alert("le nom et prénom sont bons."); Les fonctions déclarées dans l'entête de la page
}else{ peuvent être appelées elles-mêmes, de manière
alert("le nom et prénom ne sont pas bons."); itérative, dans d'autres fonctions et dans le corps
} de la page.
</script>
</body> Exemple :
</html>
<HTML>
Dans la page [Link] pour
<HEAD>
recupérer l'objet mo:
<SCRIPT language="Javascript">
<html>
<!—
<head>
function Moyenne(a,b){ return (a + b)/2 ;}
<title>Prompt</title>
function Chargement() {
</head>
alert('Bienvenue sur le site');
<body bgcolor="#FFFFFF" text="#000000">
}
<script language="JavaScript">
if([Link] == "alias" &&
function Affiche(Texte) { alert(Texte); }
[Link] == "dmc"){
//-->
[Link] = true;
</SCRIPT>
[Link]();
</HEAD>
}else{
<BODY onLoad="Chargement();" >
[Link] = false;
[Link](); }
<A href="#"
onClick="Affiche('Texte1');return(false)">Texte1</
</script>
A>
</body>
<A href="#"
</html>
onClick="Affiche('Texte2');return(false)">Texte2</
A>
<A href="#" onClick=" alert(‘Moyenne de 7 et 8 : ‘
6 - LA DECLARATION DES FONCTIONS ET
+ Moyenne(7,8) )
DES INSTRUCTIONS
">Cacul moyenne</A>
</BODY>
Les fonctions et instructions sont déclarées et </HTML>
codées dans l'entête de la page et peuvent être
appelées ensuite à n'importe quel endroit de la
page. Pour déclarer une fonction ou une
instruction, on utilise le mot-clé "function", suivi de
son nom et des éventuels paramètres.

8
7. STRUCTURE DU JAVASCRIPT - L'instruction SWITCH

Le javascript a une structure de programmation L'instruction SWITCH est une variante de ELSE
proche du langage C, moins riche naturellement. IF mais elle reste moins souple car elle n'accepte
que des égalités.
- Grouper des instructions
var x = 10;
Comme en C, les instructions sont regroupées par switch (x){
les accolades { et }. Dans un script, il doit y avoir case 2 : alert("2 "); break;
autant d'accolades ouvertes que d'accolades case 4 :alert("4"); break;
fermées. case 10 :alert("10");break;
Le groupement d'instructions est utile. Il permet default :alert("nul");
par exemple de regrouper les instructions d'une }
fonction :
function somme(a,b) { - Les structures de boucles
var sum=a+b;
return sum; Comme en C, le javascript reconnaît les boucles
} itératives et les boucles conditionnelles.
Cette fonction inutile retourne la somme de deux Les boucles itératives
paramètres. Une boucle itérative exécute un groupe
d'instructions tant que le compteur d'itérations n'a
- Le test conditionnel pas atteint une valeur donnée.
Voici la syntaxe générale
Test simple
L'instruction if permet de diriger l'exécution du for(initialisation;condition;opération) {
script suivant le résultat d'un test. // Vos instructions
Il y a 2 moyens d'utiliser if. }
Si l'action à réaliser tient en une instruction :
Initialisation permet d'initialiser la valeur du
if (age<18) alert("Vous devez être majeur"); compteur.
Condition teste si le compteur a atteint la valeur
Ici, si l'âge du visiteur est inférieur à 18 ans, un limite. Si condition est vraie, la boucle continue.
message est affiché. operation permet d'incrémenter le compteur à
chaque passage de la boucle.
Si l'action à réaliser tient en plusieurs
instructions : Voici quelques exemples concrets.
if (age<18) { Faire une boucle pour i variant de 0 à 100 inclus
alert("Vous devez être majeur"); par pas de 1
[Link]="mineur.php3"; for (var i=0; i<=100; i=i+1)
}
Faire une boucle pour i variant de 10 à 0 inclus
Ici, si l'âge du visiteur est inférieur à 18 ans, un par pas de -1
message est affiché et le visiteur est redirigé vers for (var i=10;i>0;i=i-1)
la page mineur.php3.
Voici une application mathématique. Il s'agit de
Test Si - Sinon calculer la somme des nombres de 1 à N.
Entrez N dans le champ texte et cliquez sur le
Reprenons notre dernier exemple : bouton :
if (age<18) { N=
alert("Vous devez être majeur"); La fonction qui calcule cette somme est déclarée :
[Link]="mineur.php3"; function somme(N) {
} else { var sum=0;
[Link]="majeur.php3"; for (var i=1;i<=N;i=i+1) {
} sum=sum+i;
Ici, si le visiteur est mineur, il est redirigé vers }
mineur.php3, sinon il est redirigé vers la page alert("Somme de 1 à "+N+" = "+sum);
majeur.php3. }

9
for (i=2; i<10; i++){
Astuces d'écriture switch (i){
Le javascript reprend du C la syntaxe particulière case 2 : [Link]("c'est un deux");
pour les additions et soustractions. break;
Ainsi, écrire a=a+1; est équivalent à a++;
Et a=a-1; est équivalent à a--; case 8 : [Link]("c'est un huit");
break;
Dans la même idée, on peut aussi remplacer default : [Link]("valeur" +i +"<BR>");
a=a+5; par a+=5; }
}
Vous trouverez donc souvent les boucles for avec
cette syntaxe :
for(var i=0;i<100;i++) - Les boucles conditionnelles

Il peut être utile de faire une boucle tant qu'une

Exercice 2 condition est vraie.
La boucle "tant que" est déclarée par while :
Le second exercice est un mélange de FOR et IF.
Le but de cet exercice est de créer une boucle while (condition) {
avec FOR. // Les instructions de la boucle
}
La condition initiale i = 2.
Ici, tant que condition est vraie, la boucle est
La condition de répétition i < 10. exécutée.
Le bloc d'instruction sera { [Link]("valeur
de i est égale à"+i+"<BR>"); }. On peut imaginer de demander au visiteur de
Mais nous voulons que lorsque i = 5, saisir un nombre supérieur à 100 et de
le texte change pour { [Link]("valeur de i recommencer tant que ce nombre n'est pas
est égale à 5 "); }. supérieur à 100.
Voici la fonction appelée par le bouton :
function demander() {
Le script à taper sera :
var nb=0;
for (i=2; i<10; i++){ while (nb<=100) {
if (i==5){ nb=prompt("Entrez un nombre supérieur à
[Link]("valeur de i est égale à 5 "); 100");
} }
[Link]("valeur"+i+"<BR>"); alert("Merci !");
} }

Ici, la boucle est répétée tant que nb n'est pas

Pour le troisième exercice nous voulons que pour supérieur à 100. Dès que nb est plus grand que
100, on quitte la boucle et le message Merci est
la valeur i = 5 stopper la boucle.
affiché.
Le script à taper sera :
8. ECRIRE DU TEXTE
for (i=2; i<10; i++){
if (i==5){
[Link]("valeur de i est égale à 5, je La méthode write
stoppe la boucle");
break; La méthode write() de l'objet document permet de
} modifier de façon dynamique le contenu d'une
[Link]("valeur"+i+"<BR>"); page HTML, on peut l'utiliser de différentes
} façons:

Le dernier exercice est un mélange de FOR et • soit en passant directement le texte en

SWICHT. Nous voulons que pour la valeur i = 2 paramètres:
écrire "c'est un deux", [Link]("bonjour");
qui aura pour effet de concaténer la chaîne
pour la valeur i = 8 "écrire "c'est un huit".
'bonjour' à l'endroit où est placé le script
10
• soit en passant le texte par l'intermédiaire fenêtre elle-même mais aussi tous les
d'une variable: objets-enfants contenus dans celle-ci
Chaine='bonjour'; • location: contient des informations
[Link](Chaine); relatives à l'adresse de la page à l'écran
qui aura pour effet de concaténer la chaîne • history: c'est l'historique, c'est-à-dire la
'bonjour' (contenue dans la variable liste de liens qui ont été visités
Chaine)à l'endroit où est placé le script précédemment
• soit en utilisant les deux: • document: il contient les propriétés sur le
Chaine='bonjour'; contenu du document (couleur d'arrière
[Link]('je vous passe le' + plan, titre, ...)
Chaine);
qui aura pour effet de concaténer la chaîne Les objets du navigateur sont classés dans une
'bonjour' (contenue dans la variable hiérarchie qui décrit la page affichée à l'écran, et
Chaine) à la suite de la chaîne de qui permet d'accéder à n'importe quel objet grâce
caractère 'je vous passe le' dans la page à une désignation dépendant de la hiérarchie (on
HTML part du sommet puis on descend l'arborescence).

Il est ainsi possible d'utiliser des balises HTML à Dans cette hiérarchie, les descendants d'un objet
l'intérieur même de la méthode write: sont des propriétés de ces objets mais peuvent
[Link]('<font aussi être des objets qui contiennent eux même
color="#FF0000">Bonjour</font>'); des propriétés...
Voyons voir à quoi ressemble cette hérarchie:
Lorsque nous écrivons en javascript du texte dans
la page, nous pouvons formater le texte en gras,
italique..., à la seule condition que la chaîne à
formater soit de type String().
Pour cela, vous devez utiliser la méthode
javascript toString() ou String().

La méthode writeIn

La méthode writeIn fonctionne exactement

comme la méthode write à la seule différence
qu'elle ajoute un retour chariot à la fin de la
chaîne.

9. LES OBJETS DU NAVIGATEUR

Lorsque vous ouvrez une page Web, le navigateur

crée des objets prédéfinis correspondant à la
page Web, à l'état du navigateur, et peuvent
donner beaucoup d'informations qui vous seront
utiles.

Les objets de base du navigateur sont les

suivants:

• navigator: qui contient des informations sur

le navigateur de celui qui visite la page
• window: c'est l'objet où s'affiche la page, il
contient donc des propriétés concernant la

11
Niveau1 Niveau2 Niveau3 Commentaire Comment accéder à un objet?
navigator Informations sur le
Pour accéder à un objet du navigateur, il faut
browser utilisé
parcourir la hiérarchie du navigateur, en partant
window Gestion de la fenêtre du sommet (l'objet window), puis en parcourant
d'affichage tous les maillons jusqu'à atteindre l'objet désiré.
parent, Désignation de la sous- La syntaxe est
frames, self, fenêtre window.objet1.objet2.objet3.objet_vise .
top
Pour accéder modifier une propriété de l'objet visé
location Informations sur
l'emplacement de la
il suffit de rajouter un point, puis le nom de la
page propriété. Certaines propriétés sont modifiables,
c'est-à-dire que dynamiquement on va pouvoir
history Accès à l'historique modifier un élément (du texte, une image, ...).
(sites précédemment Certaines propriétés sont par contre en lecture
visités) seule, c'est-à-dire qu'elles permettent uniquement
document Informations sur le de récupérer des informations mais qu'on ne peut
contenu de la fenêtre pas les modifier...
(éléments qui
composent la page) 10. L’OBJET WINDOW
images Référence des images
présentes dans la page L'objet window est l'objet par exellence dans
Javascript, car il est le parent de chaque obet qui
forms Référence des
compose la page web, il contient donc:
formulaires présents
dans la page
• l'objet document: la page en elle-même
links Référence des liens • l'objet location: le lieu de stockage de la
présents dans la page page
anchors Référence des • l'objet history: les pages visitées
ancrages présents précédemment
dans la page • l'objet frames: les cadres (division de la
fenêtre en sous-fenêtres)

Les propriétés de l'objet window

propriété description lecture seule Exemples

<A href='#'>Passez la souris ici</A>
Il s'agit du message qui s'affiche <SCRIPT language=javascript>
non, modifiable à tout
defaultstatus par défaut dans la barre d'état du [Link]="Ceci est le
moment
navigateur texte par défaut";
</SCRIPT>
Il s'agit d'un tableau qui contient Tous les éléments de
frames les cadres présents dans la frames sont en
fenêtre lecture seule
location Pour récupérer l'url complète de Nous allons créer un bouton pour
la page en cours. charger une autre page.
function change(){
[Link]="../[Link]";
}
1.
Dans la balise HTML ou
XHTML body :
<form>
<input type="button" value="changer"
onclick="change()">

12
</form>
nombre de cadres (nombre
length Lecture seule
d'éléments du tableau frames
nom de la fenêtre dans laquelle
name Lecture seule
on se trouve
Il s'agit de la fenêtre qui englobe
Lecture seule,
parent celle dans laquelle on se trouvecontient des
(si il y en a une..) propriétés
Lecture seule,
Synonyme de la fenêtre actuelle
self contient des
(redondance ou précision?)
propriétés
[Link]="Vous êtes sur le
non, modifiable à tout
Il s'agit d'un message temporaire site de DMC";
moment, vous devez
qui s'affiche dans la barre d'état
status retournez la valeur
du navigateur suite à un Pour supprimer le texte dans la barre
true pour l'utiliser
événement des statuts :
avec onMouseOver
[Link]="";
Il s'agit de la fenêtre de plus haut Lecture seule,
Top niveau, celle qui contient tous les contient des
cadres (frames) propriétés
Lecture seule,
Window Il s'agit de la fenêtre actuelle... contient des
propriétés
bgColor récupérer et de modifier la :
couleur de fond de votre page [Link] = "#993333";
HTML.
lastModified savoir quand la page HTML a été [Link];
modifiée.

récupérer et de modifier la [Link] = "#993333

couleur des liens de votre page
linkColor
HTML.

vlinkColor récupérer et de modifier la [Link] = "#993333";

couleur des liens visités de
votre page HTML.
alinkColor récupérer et modifier la [Link] =
couleur des liens actifs de "#993333";
votre page HTML.
title récupérer et modifier le titre [Link] = "mon titre";
de votre page HTML.

des fenêtre de niveau supérieur,

Les propriétés window, self, frames, top et parent notamment pour "sortir" des frames...
permettent de naviguer dans le système de sous- • la propriété frames est un tableau qui
fenêtres, appelées frames. permet de cibler un cadre spécifique
• les propriétés self et window sont les faisant partie de la fenêtre où on se trouve.
mêmes, elles permettent de désigner la Pour désigner un cadre on utilise soit la
page en cours, leur seul but est notation [Link][i] où i représente
d'accentuer la précision de la hiérarchie le numéro du cadre, soit
pour une meilleure lecture du code. en window.nom_du_cadre en désignant le
effet, [Link] est plus explicite que cadre directement par le nom qu'on lui a
name assigné dans la balise frameset.
• les propriété top et parent permettent de
remonter dans la hiérarchie pour atteindre

13
Les méthodes de l'objet window Affiche ou non les ascenceurs
scrollbars = yes/no
(barres de défilement)
L'objet window possède des méthodes relatives à status = yes/no Affiche ou non la barre d'état
l'ouverture et à la fermeture des fenêtres. toolbar = yes/no Affiche ou non la barre d'outils
width = largeur (en
Une méthode est une fonction associée à un Définit la largeur
pixels)
objet, c'est-à-dire une action que l'on peut faire
exécuter à un objet.. Une méthode s'appelle un height = hauteur (en
Définit la hauteur
peu comme une propriété, c'est-à-dire de la pixels)
manière suivante: Position verticale en pixels sur
Top (en pixels)
l'écran
[Link]() Popup en plein écran (version
Fullscreen (yes/no)
5 et +)

Par exemple,
- Les méthodes alert(), confirm() et prompt() open("[Link]");
open("[Link]", "target");
Les méthodes alert(), confirm() et prompt() sont open("", "");
des méthodes qui font apparaître une boîte de open("[Link]", "target", "toolbar=yes,
dialogue. directories=yes, status=yes, menubar=yes,
width=100, height=100, scrollbars=yes,
location=yes, resizable=yes") ;
var Nom_fenetre = [Link]("_page.html",
"cible", "width=100, height=100");
- Les méthodes open(), et close() var Nom_fenetre = [Link]("[Link]",
"cible", "top=100, left=100");
Les méthodes open() et close() sont bien var Nom_fenetre =
évidemment destinées à permettre l'ouverture et [Link]("_page.html" ,"cible" ,"width=200,
la fermeture de fenêtres. Toutefois la syntaxe de height=200, resizable=yes, scrollbars=yes,
la méthode open() est longue car elle admet un menubar=yes, status=no, location=yes,
nombre important de paramètres: toolbar=yes");
La méthode open() permet d'ouvrir une nouvelle
fenêtre popup, voici sa syntaxe: Si vous voulez ouvrir une fenêtre virtuelle ne
[Link]("URL",["nom_de_la_fenetre"], mettez rien à l'emplacement de la page :
["options_de_la_fenetre"]); var Nom_fenetre = [Link]("", "cible",
"width=100, height=100, _les_autres_attributs");
La méthode javascript open() est composée de
trois parties : Quelques exemples de combinaisons
- la page à ouvrir (url), l'url de la page qui sera d'options :
affichée dans la nouvelle fenêtre
- la cible (target. _self , _blank.....) Popup positionné avec Position fixe en haut à
- ces caractéristiques (attributs). gauche :
OuvrirPopup('[Link]','','top=10,left=10')
Il est préférable de l'associer à une variable, ce
qui nous permettra de manipuler la pop up: Popup minimaliste avec Aucune barre de menu,
var m = open("[Link]","target","options"); non redimensionnable, taille fixe :
Les options de la fenêtre sont les suivantes: OuvrirPopup('[Link]', '', 'resizable=no,
location=no, width=200, height=100, menubar=no,
Option description status=no, scrollbars=no, menubar=no')
Affiche ou non les boutons de Popup fullscreen avec Page en plein écran
directory = yes/no
navigation (version 5 et +). Faire un ALT [F4] pour fermer la
Affiche ou non la barre fenêtre :
Location = yes/no
d'adresse OuvrirPopup('[Link]','','fullscreen=yes')
Affiche ou non la barre de menu
menubar = yes/no
(fichier, edition, ...) Voici la fonction javascript qui ouvre un popup
Définit si la taille de la fenêtre pour tous ces exemples :
resizable = yes/no
est modifiable ou non

14
<SCRIPT language=javascript> Pour un lien hypertexte, le code sera:
function OuvrirPopup(page,nom,option) { <A href="#"
[Link](page,nom,option); onClick="[Link]('nom_de_la_fenetre_');return(f
} alse)">Cliquez ici pour fermer la fenêtre</A>
</SCRIPT>
Pour un bouton (image), le code sera:
<A href="#"
• les options doivent être saisies les onClick="[Link]('nom_de_la_fenetre_');return(f
unes après les autres, séparées par alse)"><img src="nom_de_l_image"></A>
des virgules, sans espace
Il est bien évidemment possible d'utiliser cette
• l'ensemble des options doit être procédure avec tous les gestionnaires
encadré par les guillemets d'événement, en utilisant par exemple une
syntaxe proche de celle-ci:
Chacune des fenêtres doit cependant être fermée, <A href="#"
il faut donc se servir de la méthode close() qui onMouseOver="[Link]('nom_de_la_fenetre_');"
permet de fermer une fenêtre. ><img src="nom_de_l_image"></A>

La méthode close() requiert le nom de la fenêtre

comme argument, il suffit donc de créer un bouton
(image, hypertexte, ou bouton de formulaire) qui
permettra de fermer cette fenêtre.

15
LES AUTRES METHODES DE L’OBJET WINDOW

Méthodes Description Exemple

[Link](). <html>
<head>
Une pop up peut être fermée de deux façons : <title>Info Bulle</title>
Soit on la ferme à partir de la fenêtre qui l'a <script language="JavaScript">
ouverte, soit à partir d'elle même. var fen;
A partir de la fenêtre qui l'a ouverte : Pour cela function ouvrir()
la pop up doit être ouverte comme ceci : {
var m = open ("[Link]", "target", "attribut"); fen=open("[Link]", "mafen", "toolbar=yes,
[Link](); width=100, height=100, scrollbars=yes") ;
}
A partir d'elle même : [Link](); function fermer_popup()
{ [Link](); }

function fermer_window()
{ [Link](); }
</script>
</head>
<body bgcolor="#FFFFFF">
<input type="button" value="Ouvrir" onclick="ouvrir()"
title="Ouvrir" /> <br/>
<input type="button" value="fermer la fenetre popup"
onclick="fermer_popup() »> <BR>
<input type="button" value="fermer la fenetre en cours"
onclick="fermer_window()” >
</body>
</html>
: [Link]() <A href="javascript:[Link]()">Cacher la fenêtre</A>
Enlève le focus à la fenêtre
Rend la fenêtre invisible, en arrière plan en lui
supprimant le focus.

[Link](). Nous allons créer un bouton pour mettre la fenêtre en

premier plan.
de positionner la fenêtre en premier plan. Dans la balise HTML ou XHTML script :
Une pop up peut être mise en avant de deux function change(){
façons. [Link]();
Soit on met le focus à partir d'une autre }
fenêtre, soit à partir d'elle même.
A partir d'une autre fenêtre : Dans la balise HTML ou XHTML body :
Pour cela la pop Up doit être ouverte comme <form>
ceci : <input type="button" value="changer"
var m = open ("[Link]", "target", "attribut"); onclick="change()">
pour lui donner le focus :[Link](); </form>
A partir d'elle même : [Link]();

16
[Link](String code, Integer delai) <SCRIPT language=javascript>
function Horloge() {
Lance un traitement à intervalle régulier var dt=new Date();
[Link]=[Link]()+":"+[Link]()
[Link](Object timer) +":"+[Link]();
}
Arrête l'exécution d'un traitement timer var timer=setInterval("Horloge()", 1000);
précédemment défini avec setInterval(). </SCRIPT>
<A href='javascript:clearInterval(timer)'>Arrêter l'horloge</A>

timerID =
setTimeout("fonction()",millisecondes); Exemple2 :
Déclenche une minuterie et appelle le code
javascript fonc dans delai millisecondes <html><head><title>set & clearTimeout</title>
pour lancer la fonction "fonction( )" après un <script language="JavaScript">
délai de "millisecondes' :
var timerId=""; //Identificateur du temporisateur
clearTimeout(timerId); var tim2Id="";
Pour arrêter le lancement de la fonction avant var marche=false;
expiration du délai :
function Temporisation(){
if(!marche) {
Exemple1 Minuterie simple qui affiche timerId=setTimeout("Alarme3s()",3000);
l'heure tim2Id=setTimeout("Arret()",3000);
dans la barre de status. marche=true;
}
<SCRIPT language=javascript> else {
function Timer() { clearTimeout(timerId);
var dt=new Date() clearTimeout(timer2Id);
[Link]=[Link]() marche=false;
+":"+[Link]()+":"+[Link](); }
setTimeout("Timer()",1000); }
} function Arret(){marche=false;}
Timer(); function Alarme3s(){alert("3 secondes se sont écoulées.")}
</SCRIPT> </script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

: [Link]() Imprimer la page<A

Imprime la page en cours href="javascript:[Link]()">Imprimer</A>
[Link](x,y) Nous allons créer un bouton pour déplacer la fenêtre.
Déplacer la fenêtre. Dans la balise HTML ou XHTML script :
- x, position horizontale en pixel. function change(){
- y, position verticale en pixel. [Link](0,-10);
x, y sont les coordonnées sur lesquelles le }
coin haut gauche de la fenêtre va se
positionner. Dans la balise HTML ou XHTML body :
<form>
<input type="button" value="changer" onclick="change()">
</form>

17
[Link](x,y) Nous allons créer un bouton pour déplacer la fenêtre.
Dans la balise HTML ou XHTML script :
Déplacer la fenêtre. function change(){ [Link](-10,10);
- x, valeur de type Number positive ou }
négative en pixel.
- y, valeur de type Number positive ou Dans la balise HTML ou XHTML body :
négative en pixel. <form>
x, y sont le nombre de pixels dont va se <input type="button" value="changer"
déplacer le coin haut gauche de la fenêtre. onclick="change()">
</form>
[Link](x,y) Exemple 1

redimensionner la fenêtre. Nous allons créer un bouton pour redimensionner la fenêtre.

- x, valeur de type Number positive ou Dans la balise HTML ou XHTML script :

négative en pixel. function change(){
- y, valeur de type Number positive ou [Link](-10,10);
négative en pixel. }
x,y sont le nombre de pixels qui vont être
rajoutés à la taille actuelle de la fenêtre. Dans la balise HTML ou XHTML body :
<form>
<input type="button" value="changer"
onclick="change()">
</form>

Exemple 2

<SCRIPT language=javascript>
function TailleFenetre(deltaX, deltaY) {
[Link](deltaX, deltaY);
}
</SCRIPT>
<A href="javascript:TailleFenetre(-10,0)">Réduire la largeur
de la fenêtre</A>

[Link](x,y). Nous allons créer un bouton pour redimensionner la fenêtre.

redimensionner la fenêtre. Dans la balise HTML ou XHTML script :

- x, valeur de type Number positive ou function change(){
négative en pixel. [Link](250,250);
- y, valeur de type Number positive ou }
négative en pixel.
x, y sont la quantité de pixels à ajouter à la Dans la balise HTML ou XHTML body :
longueur et la quantité à ajouter à la <form>
hauteur. <input type="button" value="changer" onclick="change()">
</form>

naviguer dans cette liste d'adresse directement à

11. L’OBJET HISTORY partir de la page en cours.

L'objet history est une popriété de l'objet Les propriétés et les méthodes de l'objet
document. Il contient l'historique du navigateur, history
c'est-à-dire l'ensemble des URL (adresses des
pages) visitées par l'utilisateur. Ces adresses sont Les propriétés et les méthodes de l'objet history
accessibles par le navigateur en cliquant sur les sont peu nombreuses, elles peuvent néanmoins
boutons suivants et précédent. L'objet history offre être très utile pour aider à la navigation.
des objets et des méthodes qui permettent de

18
• la propriété length permet de connaître le possible d'entrer une chaîne de caractères
nombre d'objets dans l'historique en paramètre, auquel cas le navigateur
• la méthode back permet d'aller à l'URL cherchera la page de l'historique la plus
précédent dans l'historique proche contenant cette chaîne
• la méthode forward permet d'aller à l'URL
suivant dans l'historique Par exemple,
• la méthode go(variable) permet d'aller à
un des URL de l'historique. Le paramètre <input type="button" value="Back"
variable est un nombre entier (positif ou Onclick="javascript:[Link]()">
négatif) qui détermine le nombre de pages <input type="button" value="Actualiser"
relatif auquel se trouve l'URL désiré. Il est Onclick="javascript:[Link](0)">

12. L'OBJET NAVIGATOR

Les particularités de l'objet navigator

L'objet navigator est un objet qui permet de récupérer des informations sur le navigateur qu'utilise le
visiteur. Toutes les propriétés de l'objet navigator sont en lecture seule, elles servent uniquement à
récupérer des informations et non à les modifier .

Les propriétés de l'objet navigator

Les propriétés de l'objet navigator sont peu nombreuses, elles permettent en fait de retourner des portions
de l'information sur votre navigateur qui est en fait une chaîne de caractères.

Propriété Description Pour votre navigateur

retourne le code du navigateur. Un navigateur a pour
[Link] nom de code Mozilla (je ne sais pas pourquoi), cette Mozilla
information semble donc inutile
retourne le nom du navigateur (la plupart du temps la
[Link] marque). Cette propriété est utile pour différencier les Netscape
navigateurs de Netscape et de Microsoft)
retourne la version du navigateur. Cette propriété prend
la forme suivante:
Numéro de version( plateforme (système d'exploitation),
nationalité)
[Link] Elle est utile pour connaître le système d'exploitation de 5.0 (Windows)
l'utilisateur, mais surtout, associée avec la propriété
[Link] elle permet de connaître les
fonctionnlités que supporte le navigateur de votre
visiteur.
retourne la chaîne de caractère qui comprend toutes les
informations. Les propriétés ci-dessus offrent un moyen Mozilla/5.0 (Windows
pratique de récupérer une partie de cette information NT 5.1; rv:7.0a2)
[Link]
(cette chaîne étant de longueur variable, il ne serait pas Gecko/20110726
évident d'en récupérer une portion sans les autres Firefox/7.0a2
propriétés...)

Les navigateurs ne supportent pas tous le Javascript de la même façon, ainsi, suivant les instructions
Javascript que l'on utilisera (suivant qu'il s'agit de Javascript 1.0, 1.1, ou 1.2) il faudra exécuter des
instructions différentes. Par respect pour vos visiteurs il est généralement bon de mettre en début de script
une fonction qui permet de déterminer la version du navigateur (et/ou sa marque) et exécuter les
instructions appropriées en fonction du résultat.

19
Voici une grille avec les navigateurs, les valeurs de propriétés et quelques fonctionalités associées à ceux-
ci:

Navigateur Version [Link] [Link] Javascript

Netscape Navigator 2 Netscape 2.0 (Win95; I) 1.0
Netscape Navigator 3 Netscape [Link] (Win95; I) 1.1
Netscape
4 Netscape [Link] (Win95; I) 1.1
Communicator
Microsoft Internet Microsoft Internet 2.0 (compatible; MSIE 3.0x; Windows
3 1.0
Explorer Explorer 95)
Microsoft Internet Microsoft Internet 4.0x (compatible; MSIE 4.0x;
4 1.2
Explorer Explorer Windows 95)
Microsoft Internet Microsoft Internet [Link] (compatible; MSIE 5.0x;
5 1.2
Explorer Explorer Windows 95)
Exemple de script

Il est parfois bon de pouvoir exécuter un ensemble d'instructions différent selon que le navigateur utilisé est
Netscape Navigator ou Microsoft Internet Explorer, voici un exemple de petit script permettant la distinction:

[Link]([Link]);
// Version = [Link];
Nom = [Link];

if (Nom == 'Netscape') {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (Nom == 'Microsoft Internet Explorer') {

placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

Une méthode améliorée si jamais on a souvent besoin de faire le test de navigateur, car l'accès à l'objet
navigator n'est effectué qu'une seule fois. Ensuite deux variables booléenne sont utilisées, et le test
consiste uniquement à regarder si la variable contient 1 au 0 et le navigateur n'a pas besoin de comparer la
chaine nom à chaque test de navigateur...

Nom = [Link];
ns = (Nom == 'Netscape') ? 1:0
ie = (Nom == 'Microsoft Internet Explorer') ? 1:0

if (ns) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (ie) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

Imaginons que l'on veuille maintenant afficher du DHTML (HTML dynamique, c'est-à-dire dont les objets
peuvent bouger et être modifiés à loisir...), il faut alors vérifier que les versions des navigateurs sont
supérieures à 4 (seuls Netscape Navigator 4 (ou supérieur) et Microsoft Internet Explorer 4 (ou supérieur)
le supportent.

20
Voici le script permettant de vérifier que les versions sont supérieures à 4:

Nom = [Link];
Version = [Link];
ns4 = (Nom == 'Netscape' && Version >= 4 ) ? 1:0
ie4 = (Nom == 'Microsoft Internet Explorer' && Version >= 4 ) ? 1:0
if (ns4) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur
}

if (ie4) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur
}

13. L'OBJET IMAGE <img src="[Link]" width="140" height="76"

name="identifiant">
Déterminer l'image
alert([Link]);
Nous pouvons atteindre en javascript une image //[Link]
de deux façons.
Chaque image dans le document HTML ou La propriété javascript
XHTML à une référence. [Link]["identifiant"].src accepte
comme valeur :
- une référence numérique de 0 à X. - url relative ou absolue d'un image.
0 correspond à la première balise IMG trouvée [Link]["identifiant"].src = "nouvelle
dans votre page HTML, 1 la seconde balise URL";
IMG ...
[Link][Numbre] La propriété javascript
[Link]["identifiant"].height permet
- une référence par rapport l'attribut NAME ou ID de connaître la hauteur de l'image.
de la balise HTML ou XHTML <IMG> : <img src="[Link]" width="140" height="76"
<img src="[Link]" width="140" height="76" name="identifiant">
name="identifiant">
XHTML alert([Link]);
<img src="[Link]" width="140" height="76" //76
id="identifiant">
[Link] La propriété
[Link]["identifiant"].height
Attention, la valeur de "identifiant" doit être javascript renvoie une valeur de type Number dont
unique. l'unité est le pixel.

La propriété javascript [Link] La propriété javascript

renvoie un tableau contenant tous les objets [Link]["identifiant"].height accepte
image de la page. comme valeur :
Pour parcourir l'ensemble des images : - un nombre entier dont l'unité est le pixel.
for(var i = 0; i < [Link]; i++){ [Link]=150;
alert([Link][i].src)
} Attention, la hauteur ne peut être changée (sauf
dans les navigateurs récents, Firefox, Internet
explorer >5.5).
La propriété javascript
[Link]["identifiant"].src renvoie l'url La propriété javascript
de l'image. [Link]["identifiant"].width permet
Cette url peut être absolue de connaître la longueur de l'image.
("[Link] ou relative <img src="[Link]" width="140" height="76"
("image/[Link]") suivant le navigateur. name="identifiant">

21
alert([Link]); comme valeur :
//140 - un chaîne de caratère (String).
[Link]["identifiant"].alt="blabal";
La propriété javascript
[Link]["identifiant"].width renvoie Attention, l'attribut alt ne peut être changée (sauf
une valeur de type Number dont l'unité est le dans les navigateurs récents, Firefox, Internet
pixel. explorer >5.5).

La propriété javascript Déclaration

[Link]["identifiant"].width accepte
comme valeur : Pour changer une image, il faut d'abord la
- un nombre entier dont l'unité est le pixel. déclarer.
[Link] =150;
On la déclare :
var Nom = new Image();
Attention, la longueur ne peut être changée (sauf
dans les navigateurs récents, Firefox, Internet Il faut ensuite lui donner son emplacement.
explorer >5.5). On le note :
La propriété javascript var [Link] = "url";
[Link]["identifiant"].border permet
de connaître la valeur de l'attribut border d'une Les rollovers
image.
Exercice
<img src="[Link]" width="140" border="0"
height="76" name="identifiant"> Dans cet exercie javascript nous allons créer un
rollover.
alert([Link]); Les deux images à intervertir au passage de la
//0 souris.

La propriété javascript <img src="exemple/images/[Link]" width="75"

[Link]["identifiant"].border renvoie height="24" border="0">
comme valeur : <img src="exemple/images/[Link]"
- un nombre entier ou chaîne vide si l'attribut n'est width="75" height="24" border="0">
pas spécifié.
Le changement s'effectuera au passage de la
La propriété javascript souris soit "onMouseOver" et "onMouseOut" pour
[Link]["identifiant"].border accepte rétablir l'image.
comme valeur :
- un nombre entier. - La première étape consiste a mettre dans le
[Link]["identifiant"].border=5; corps du document HTML, la première image et
de lui rajouter un nom grâce à l'attribut name.

La propriété javascript Ce qui donne par exemple :

[Link]["identifiant"].alt permet de <img src="exemple/images/[Link]" width="75"
connaître la valeur de l'attribut ALT. height="24" border="0" name="bt">

La propriété javascript - En suite nous allons créer deux fonctions, une

[Link]["identifiant"].alt renvoie pour "onMouseOver" et une autre pour
comme valeur : "onMouseOut". Nous n'oublierons pas de déclarer
- un chaîne de caratère (String) nos images.
var bt1=new Image();
<img src="[Link]" width="140" alt="coucou" [Link]="exemple/images/[Link]";
height="76" name="identifiant"> var bt2=new Image();
[Link]="exemple/images/[Link]";
alert([Link]);
//coucou function montre(){
[Link]=[Link];
La propriété javascript }
[Link]["identifiant"].alt accepte
22
function cache(){ Ainsi, le document HTML deviendra réactif à un
[Link]=[Link]; événement si à cet événement est associée une
} fonction javascript :
Ces événements peuvent être dans un formulaire
- Il ne nous reste plus qu'a associer ces fonctions ou bien sur un lien hypertexte.
à la balise Img. ¨Par exemple, soit le code HTML (partie de
Pour cela, nous allons créer un lien sur l'image BODY) :
(balise <A>) dans laquelle nous allons mettre nos <form>
actions. <input type= "button " value= "exemple test "
<a href="#" onMouseOut="cache()" onClick= "alert(‘ouah!’); ">
onMouseOver="montre()">
</form>
<img src="exemple/images/[Link]" width="75"
height="24" border="0" name="bt"> Les interventions de l’utilisateur sont classifiées
</a> en événements, et chaque objet du browser est
sensible à certains événements. L’association
d’une série d’instructions ou d’une fonction à un
[Link] EVENEMENTS couple objet-événement (par l’attribut
Onnomdel’événement permettra d’associer un
Une action utilisateur (déplacement de la souris
comportement à l’action de l’utilisateur).
sur une zone, clic sur un bouton souris, ...) créée
un événement que javascript peut alors traiter par
un handler associé.

Les attributs dans Javascript 1.0

onBlur : l’utilisateur après avoir cliqué sur une zone d’entrée clique à l’extérieur
(événement Blur : un champ de formulaire perd le focus)
Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame,
frameset
onClick : l’utilisateur clique sur une zone hypertexte ou un élément de formulaire
Est utilisé sur l'objet javascript link,document, form
Est utilisé sur la balise HTML a, body, area et autre

onChange : l’utilisateur après avoir cliqué sur une zone de formulaire la quitte après
avoir changé son contenu
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea, select

onFocus l’utilisateur clique sur une zone de formulaire

Est utilisé sur l'objet javascript window, frame, form
Est utilisé sur la balise HTML body, frameset, frame, input

onLoad : une page est chargée par le navigateur (pour les images IMG aussi)
onMouseOver : la souris passe sur un lien hypertexte
onSelect : l’utilisateur sélectionne un champ élément d’un formulaire
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea

onSubmit : l’utilisateur soumet un formulaire (clique sur bouton submit)

onUnload : l'utilisateur ferme et quitte la page.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

23
En Javascript 1.2, les attributs suivants ont été rajoutés :
onMouseOut : le pointeur quitte un lien
onMouseDown, Quand le bouton de la souris est appuyé.
onMouseMove, onMouseOut Quand le curseur bouge.
onMouseUp, Quand le bouton de la souris est relâché.
onDblClick : Quand je sors du lien.

Est utilisé sur l'objet javascript link, document, form

Est utilisé sur la balise HTML a, body, form et autre
pour les liens et boutons de formulaires (button, checkbox, radio, submit,
reset)
Quand on fait un double clique.
Est utilisé sur l'objet javascript link, document,area
Est utilisé sur la balise HTML a, body, area et autre

onKeyDown, onKeyPress, Quand j'appuie sur une touche.

onKeyUp : Quand je lâche la touche.
pour les zones de saisie de texte d’un formulaire(text, textarea, password)
Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea

onAbort, L'utilisateur a stoppé le chargement de l'image.

onError Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame,
frameset

Lorsqu'il se produit une erreur de script.

Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML mg, body, frame, frameset

onReset Quand je réinitialise.

Est utilisé sur l'objet javascript forms
Est utilisé sur la balise HTML form

onMove, Quand je déplace la fenêtre.

Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

onDragDrop, onResize : pour la fenêtre du browser (tag Body ou Frameset) ;

Quand je redimensionne.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

et la gestion des événements est plus souple et programmable...

Exemple 1 :

<FORM><INPUT VALUE=onBlur

24
onBlur= "alert(‘onBlur de la zone’) "> onClick="[Link]='[Link]'";>
l’utilisateur après avoir cliqué sur une zone clique </FORM>
à l’extérieur de la zone active.
[<I>cliquez sur onBlur puis n’importe où à
Exemple 3 :
l’extérieur de la zone</I>] </FORM>
Exemple 3.1.
Exemple 2 :
<FORM>
Exemple 2.1.
<INPUT VALUE=onChange onChange=
<A HREF="#fin " onClick="alert('onClick sur le "alert(‘on Change du texte’) ">
lien') "> onClick </A>
l’utilisateur aprés avoir cliqué sur une zone, la
l’utilisateur clique sur une zone hypertexte. <BR> quitte aprés avoir changé le texte.<BR>
[<I>cliquez sur onChange, modifiez le texte puis
[<I>cliquez sur onClick</I>] cliquez à l’extérieur de la zone</I>]
</FORM>
Exemple 2.2.
Exemple 3.2.
<a href= "[Link] " onclick= "return
confirm('Etes-vous sûr de vouloir regarder cette Dans cet exemple, nous allons modifier
page ?'); ">Regardez cette exemple onClick</a> dynamiquement le contenu d'une liste déroulante.
La première liste est classique et le contenu de la
Exemple 2.3. seconde est réaffecté dès que l'on agit sur la
<FORM> première :
<INPUT TYPE="button"
VALUE="Back" onClick="[Link]()"> Préparation d'un formulaire
</FORM>
La première liste du formulaire est créee en HTML
Exemple 2.4. Ouvre une fenetre
pur et dur et est nommée sur cet exemple,
Rubrique. On l'accompagne toutefois de
<FORM>
l'événement onChange qui va déclencher la mise
<INPUT TYPE=BUTTON
à jour de la deuxième liste, Page :
VALUE="Cliquez ici pour ouvrir une petite
fenetre !"
<SELECT NAME="Rubrique"
onClick="PetiteFenetre()">
onChange='Choix([Link])'>
</FORM>
<OPTION>-- Choisissez une rubrique
---</OPTION>
Javascript
<OPTION>Plongée</OPTION>
function PetiteFenetre()
<OPTION>Nucléaire</OPTION>
{
<OPTION>Bonheur</OPTION>
msg=open("","DisplayWindow","width=250,height
</SELECT>
=100,scrollbars=no");
[Link]("...Début du code HTML..."+
"<P>Pour fermer cette fenêtre,<BR>cliquez à La seconde liste est quasiment vide à la création,
l\'intérieur.</P>" + car son contenu dépendra de la sélection faite
"<FORM NAME='Formulaire'><INPUT dans la première liste :
TYPE=text NAME='ZoneTexte'" +
" onBlur='[Link]()'></FORM> <SELECT NAME="Page">
<SCRIPT>" + <OPTION>-- Choisissez une page ---</OPTION>
"[Link](); <OPTION></OPTION>
</SCRIPT>"+ "...fin du code HTML..."); <OPTION></OPTION>
[Link](); <OPTION></OPTION>
} </SELECT>
Exemple 2.4. Ouvre une nouvelle page
<FORM>
<INPUT
TYPE=button
VALUE="Lien vers... "
25
La fonction qui travaille <OPTION
VALUE="[Link]
La fonction Choix() sera déclarée dans l'en-tête </SELECT>
de la page, comme d'hab' et effectuera les tâches </FORM>
suivantes :
La fonction JavaScript :
• Repérer la sélection de la première liste
• Ne pas réagir si on sélectionne le 1er La fonction Lien() doit être placée dans l'entête de
élément la page (quelque part entre les balises <HEAD> et
• Créer un tableau d'options </HEAD>).
• Ecrire les nouvelles options dans la liste
function Lien() {
function Choix(form) { i = [Link];
i = [Link]; if (i == 0) return;
if (i == 0) { url =
return; [Link][i].value;
} [Link] = url;
switch (i) { }
case 1 : var txt = new Array
('Materiel','Poissons','Sécurité'); break; Exemple 4 de code :
case 2 : var txt = new Array
('Radioactivite','Information','Mesures'); break; Exemple 4.1.
case 3 : var txt = new Array
('Philosophie','Psychologie','Humour'); break; <FORM>
} <INPUT VALUE=onFocus onFocus=
[Link] = 0; "alert(‘onFocus sur la zone’) ">
for (i=0;i<3;i++) {
L’utilisateur clique sur une zone. <BR>
[Link][i+1].text=txt[i];
} [<I>cliquez sur onFocus</I>] </FORM>
}
Exemple 4.2

<FORM>
Exemple 3.3.
Nom <input type = ="text"" name ="nom "
onkeyPress ="passer_focus()"; > <BR>
Cet exemple est d'utiliser l'attribut VALUE de Prenom <input type = ="text"" name ="prenom"
l'élément OPTION pour accueillir l'adresse du lien. > <BR>
Dès qu'on clique sur une des options de la liste, la </FORM>
fonction Lien() consulte cette valeur et l'envoie au
navigateur pour qu'il charge la page. Javascript
function passer_focus()
Le formulaire : {
if( ( [Link] == 13) || ([Link] == 13 ) )
Le code HTML du formulaire doit être placé dans {
le corps du document (quelque part entre les [Link][0].[Link]();
balises <BODY> et </BODY>). Ce formulaire ne [Link]=0 ;
contient qu'un seul élément (SELECT). La }
validation du formulaire est automatiquement }
générée par le choix d'une option, grâce à Exemple 5 de code :
l'événement onChange.

<FORM NAME="Choix"> Exemple 5.1.

<SELECT NAME="Liste" onChange="Lien()">
<OPTION VALUE="">Choisir une option <A HREF= "#ex5 " onMouseOver= "alert(‘souris
<OPTION VALUE="../../[Link]">Les sur la zone’) "> onMouseOver </A>l’utilisateur
copains passe la souris sur la zone<BR [<I>passez la
<OPTION VALUE="../../plongee/[Link]">La souris sur onMouseOver</I>]
plongée

26
Exemple 5.2. Cet exemple permet de modifier le <body>
contenu de la zone multiligne au passage <a href="#"
de la souris onMouseOver="document.img_1.src='[Link]';
"
<FORM NAME="Info"><BR>
onMouseOut="document.img_1.src='[Link]';">
<TEXTAREA NAME="Texte"
<img name="img_1" src="[Link]"> </a>
ROWS="8"
</body>
COLS="40"
</html>
WRAP="physical"">Passez la
souris...</TEXTAREA>
2. Clignotement du texte
</FORM>
Et pour chaque lien :
<html>
<A HREF="[Link]"
<head>
onMouseOver="[Link] ='Bla,
<title>Clignotement</title>
bla, bla...">
<script language="JavaScript">
Texte du lien</a>
i=0;
function couleur()
Exemple 6 Evénement clavier
{
tabColoris = new Array
Exemple 6.1. Un alert lorqu’on appuie sur la
("#ffffff","#CE5852");// Vous pouvez changer les
touche Enter
couleurs ou en rajouter
if (i+1 == [Link]) i=0;
<FORM>
else i++;
Enter ENTER <input type = ="text"" name ="x1"
onkeyPress ="if ([Link] == 13)
[Link]("bienvenue").setAttribu
alert('Enter');" > <BR>
te('color',tabColoris[i]);
</FORM>
setTimeout("couleur()",500);
}
Exemple 6.2. N’autorise que la saisie de
</script>
nombres
</head>
<body topmargin="0" leftmargin="0"
function validerNombre()
onload="couleur()">
{
<p align="center"><font id="bienvenue"
If ( [Link] <45 || [Link] >45 )
size="8">Bienvenue</font></b></p>
// if( ( [Link] <45 || [Link] >45 ) )
</form>
{
</body>
[Link]=false ;
</html>
// return false
}
3. Clignotement d’image
}
Dans un formulaire, on a
ce petit script va vous permettre de faire clignoter
une ou plusieurs images dans une page web.
<FORM>Entrer un nombre
Remplacer les valeurs "500" par toute autre durée
<input type ="text" name = ="nombre "
en millisecondes pour déterminer la vitesse de
onkeyPress = ="return validerNombre() ;"
clignotement et utiliser les images de votre choix
>
en tenant compte de leur position dans le
</FORM>
document. Il s'agit ici de la première image
affichée puisque le numéro d'indice est "0".
L'image nommée "blank" est une image est soit
15. LES AUTRES EXEMPLES
transparente soit de 1 pixel X 1 pixel pour donner
l'impression qu'il n' y a rien.
1. Modification d'une image lors du passage
de la souris
<html>
<head>
<html>
<title>IMAGE CLIGNOTANTE</title>
<head>
<meta http-equiv="Content-Type"
<title>Modification d'une image lors du passage
content="text/html; charset=utf-8" />
de la souris</title>
<script type="text/javascript">
</head>
control=true;
</head>
27
function clignote()
{ for (count=0; count<10;count=count+1)
[Link][0].src="[Link]"; { msg=msg+""+msg; }
[Link]("clignote2();",500);
} function banniere() {
[Link]=[Link](po
function clignote2() sition,position+100);
{
if (control!=false) position = position+1;
{
[Link][0].src="[Link]"; if (position==100) position=0;
[Link]("clignote();",500); setTimeout("banniere()",100); }
}
} </script>
</head>
function stopit() <body OnLoad="banniere()">
{
control=false; <form name="affichage"> <input type="text"
} name="texte" size=30 value="" />
</form>
function doit() </body>
{ </html>
control=true;
clignote(); 5. Raffraichissement d’une page
}
</script>
- En HTML, pour auto-Reactualisation d'une
</head>
page HTML avec la balise meta
<body onLoad="clignote();">
<center>
<head>
<img src="[Link]" />
<meta http-equiv="refresh"
<br />
content="0;url=chemain_de_t_as_page.html" /
<input type="button" value="arrêter le
>
clignotement" onClick="stopit();" />
</head>
<br /> <br />
<input type="button" value="reprendre le
Le "0" indiquant un temps en seconde avant de
clignotement" onClick="doit();" />
rafraichir la page au moyen de l'URL fourni.
</center>
</body>
Par exemple pour rafraichir la page chaque
</html>
10 sec
4. Défilement de texte en javascript
<META HTTP-EQUIV="Refresh" CONTENT="10;
URL=[Link]
Ce script permet de faire défiler du texte dans une
boîte (à l'aide des balises form et input). A noter
que vous pouver changer la vitesse de défilement - En javascript,
en modifiant la ligne (valeur 100 à modifier : <A HREF="#"
setTimeout("banniere()",100);). Ci dessous la onclick="[Link]();return(false)"
boîte où va apparaître le message défilant. ><B>Rafraîchir</B></A>
<input type="button"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD OnClick="javascript:[Link]()"
HTML 4.01 TRANSITIONAL//EN"> value="Actualiser">
<html>
<head> <FORM ACTION="" METHOD=POST>
<title>IMAGE CLIGNOTANTE</title> <P><INPUT TYPE=button NAME=Bouton
<meta http-equiv="Content-Type" VALUE="Actualiser maintenant"
content="text/html; charset=utf-8" /> onclick='[Link]="javascript:[Link]
()"'>
<script language="javascript"> </FORM></P>
var position=0;
var msg="Votre message ici";
28
16. LES FORMULAIRES Et grâce au JavaScript, il est possible de les
rendre très pratiques.
Introduction aux formulaires
Le javascript associé aux formulaire permet :
Les formulaires sont la base des échanges entre • d'assister et de guider le visiteur,
le site et le visiteur. • de contrôler la saisie,
JavaScript ne peut pas échanger d'information à • de faire des traitements (calcul,
partir de fichier texte ou de base de données. manipulation de chaînes de caractères),
Pour permettre au visiteur de transmettre des • d'envoyer les résultats au serveur.
informations, les formulaires sont indispensables.

Tous les éléments de formulaires

Vue d'ensemble
Pour intégrer des éléments de formulaire, il faut encadrer les balises par <FORM> et </FORM>. .
La balise FORM, création de formulaire
La balise INPUT, la plus courante et tous ses types
type = TEXT, BUTTON, RADIO, CHECKBOX, HIDDEN, PASSWORD, SUBMIT et RESET.
La balise SELECT, la balise de liste
La balise TEXTAREA, la balise de zone de texte multi-lignes.

La balise FORM
La balise FORM a besoin de la balise de fin. Elles sont nécessaires pour afficher des éléments de
formulaire.

Liste des propriétés :

name Nom du formulaire
action Adresse du script de serveur à exécuter
method Méthode d'appel du script (get ou post)
enctype Type d'encodage du formulaire
target Destination du retour du formulaire

Liste des méthodes :

submit Déclenche l'action du formulaire
reset Réinitialise les données du formulaire avec les valeurs par défaut

Liste des événements :

onSubmit Détecte la soumission du formulaire
onReset Détecte la réinitialisation

Voyons maintenant en détail les différents éléments de formulaire.

L'élément INPUT

L'objet INPUT est le plus utilisé de tous. Il permet d'afficher :

• des champs texte

• des boutons
• des radio-boutons Choix 1 - Choix 2
• des cases à cocher Choix 1 - Case 2
• le champ caché
29
• le champ password
• les boutons spéciaux RESET et SUBMIT

Liste des propriétés :

name Nom du champ
type type du champ text, button, radio, checkbox, submit, reset
Value Libellé texte
defaultvalue Valeur par défaut du champ (utile avec reset)
size Taille du champ
maxlength Taille maximale du champ de type texte
checked Case à cocher ou radio bouton coché ou non
disabled Grisé (modification impossible par le visiteur)
readOnly Lecture seule
class Nom de la classe de style
style Chaîne de caractères pour le style
Cette liste est générique, des particularités surviennent avec le type.

Liste des méthodes :

focus Donne le focus (ou le curseur ou la main)
blur Enlève le focus
click Simule un clic (sur un bouton)

Liste des événements :

onFocus Détecte la prise de focus
onBlur Détecte la perte de focus
onClick Détecte le clic souris (sur un bouton)
onChange Détecte les changements

Les zones de texte INPUT type="text"

Une zone de texte est définie par la balise INPUT avec un type "text".
<INPUT type="text">

Les boutons INPUT type="button"

Un bouton est défini par la balise INPUT avec un type "button".

30
Méthodes acceptées:
focus | blur | click
Evénements acceptés:
onFocus | onBlur | onClick
L'événement le plus utilisé est onClick car il détecte le clic utilisateur.

Les radio-boutons INPUT type="radio"

Un groupe de radio-boutons est défini par la balise INPUT avec un type "radio".
Pour définir un groupe, il faut donner le même nom à tous les champs. Ainsi, la sélection sera unique pour
l'ensemble du groupe.
Ici, le groupe s'appelle "sexe". A l'origine, Homme est coché. Homme et Femme sont des états opposés.
Les radios-boutons sont adaptés.

Homme - Femme
<INPUT type="radio" name="sexe" value="homme" checked>Homme -
<INPUT type="radio" name="sexe" value="femme">Femme

Les radio-boutons INPUT type="checkbox"

Une case à cocher est définie par la balise INPUT avec un type "checkbox".
Contrairement aux cases à cocher, il n'y a pas d'exclusion entre les propositions.
Ici, Majeur et Etudiant sont coché à l'origine. Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des
deux.

Majeur
Etudiant
<INPUT type="checkbox" name="majeur" checked>Majeur
<INPUT type="checkbox" name="etudiant">Etudiant

L'élément password

Password se présente comme un champ texte, mais affiche des * pour cacher le contenu du champ. Il est
aussi impossible de copier le contenu (CTRL+C). Il est donc adapté à la saisie de mot de passe.

<INPUT type="password" name="passe" value="azerty" size=10>

A part cette différence d'affichage, il possède les mêmes propriétés que le champ texte.

L'élément caché

Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en
aperçoivent.
Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information.
31
Naturellement, le champ n'apparaît pas : voici sa syntaxe.
<INPUT type="hidden" value="contenu caché" name="cache">

Propriétés acceptées :
name | value | defaultvalue

Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont
sans effet.
REMARQUE : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en javascript.
Les boutons spéciaux RESET et SUBMIT

Ces boutons existent et il faut les décrire (Je préconise de les éviter).
Dans le formulaire suivant, changer les valeurs saisies et cliquez sur "RESET" :
Cochez moi !

<FORM name="formspe" action="javascript:alert('Formulaire soumis')">

<INPUT type="text" name="texte" value="Contenu">
<INPUT type="checkbox" checked>Cochez moi !
<BR>
<INPUT type="reset" value="RESET">
<INPUT type="submit" value="SUBMIT">
</FORM>

Les listes

Les listes sont définies par la balise <SELECT>. Cette balise définie la zone de la liste. Les lignes de
contenu de la liste sont alimentées par la balises <OPTION>.
Voici la syntaxe générale pour créer une liste contenant des lignes :
<SELECT name="mono" size=1>
<OPTION value="1">ligne 1</OPTION>
<OPTION value="2">ligne 2</OPTION>
<OPTION value="3">ligne 3</OPTION>
<OPTION value="4">ligne 4</OPTION>
</SELECT>

Les listes peuvent se présenter de plusieurs manières, selon leur propriété.

Sur plusieurs lignes Sur plusieurs lignes
Sur une ligne
mono-sélection multi-sélection
size=1
size=4 size=4 multiple

L'élément OPTION
L'objet OPTION est assez simple. Il peut avoir comme attributs : name, value, selected.
selected force la sélection de cette occurence dans la liste.

Liste des propriétés de l'élément SELECT :

name Nom de la liste
size Nombre de lignes à afficher
multiple Sélection multiple autorisée
disabled Grisage de la liste
class Classe de feuille de style
style Style de la liste

32
Liste des méthodes :
add Ajoute un ligne (objet OPTION)
remove Supprime une ligne
focus Donne le focus à la liste
blur Reprend le focus

Liste des événements :

onChange Détecte la sélection d'une nouvelle ligne
onFocus Détecte la prise de focus
onBlur Détecte la perte de focus
L'élément SELECT est assez complexe, en particulier dans sa manipulation en javascript (voir détails page
suivante).
Les zones de textes multi-lignes TEXTAREA
L'objet TEXTAREA est essentiellement utilisé pour permettre au visiteur de saisir un texte assez long
(message, descriptif...).
Voici la syntaxe classique pour définir une zone de texte :

<TEXTAREA name="texte" rows="5" cols="20">Ligne 1

Ligne 2
...
</TEXTAREA>
On remarque les 2 propriétés rows et cols qui indiquent le nombre de lignes et de colonnes de la zone.
Le texte contenu dans l'élément TEXTAREA apparaît tel que dans le code source : un retour à la ligne
dans le code source crée une nouvelle ligne dans la zone.

Liste des propriétés de l'élément TEXTAREA :

name Nom de la zone
rows Nombre de lignes
cols Nombre de colonnes
disabled Grisage de la zone
readOnly Lecture seule
class Classe de feuille de style
style Style de la liste

Liste des méthodes :

focus Donne le focus à la zone
blur Reprend le focus

Liste des événements :

onChange Détecte le changement de contenu
onScroll Détecte le défilement de la zone
onFocus Détecte la prise de focus
onFocus Détecte la perte de focus

33
Nous avons vu les éléments de formulaire, comment les déclarer, les attributs et les comportements
possibles.
La page suivante montre comment les manipuler en javascript.

MANIPULATION DES ELEMENTS DU FORMULAIRE PAR JAVASCRIPT

Principe général
Les éléments de formulaire sont des objets javascript .
Cette page présente l'accès par javascript aux objets du formulaire.
Supposons le formulaire suivant :
<FORM name="general">
<INPUT type="text" name="champ1" value="Valeur initiale">
</FORM>

1. Accéder au formulaire

Le formulaire est un élément de l'objet document. Pour accéder au formulaire general, il faut écrire :

• [Link]["general"]
ou
• [Link][0]
ou
• [Link]

forms est le tableau des formulaires de document. On peut accéder à un formulaire par son nom ou par son
indice (commençant à 0), via le tableau elements ou directement par son nom

2. Accéder à un élément

Pour accéder maintenant à la zone de texte, on écrit :

• [Link]["general"].elements["champ1"]
ou
• [Link]["general"].elements[0]
ou
• [Link]["general"].champ1

elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou
par son indice, ou directement par son nom.
Remarques :

1. Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de
l'organisation du formulaire.
2. Les tableaux forms et elements peuvent sembler inutiles dans les exemples ci-dessus. Observez ce
script pour vous convaincre du contraire :
var nom_du_champ="champ1";
[Link]["general"].elements[nom_du_champ]
Ici, on peut accéder à un élément de formulaire dont le nom est contenu dans une variable javascript.

3. Manipuler les propriétés d'un élément

Une fois que l'élément est atteint, il est possible de manipuler ces propriétés.
Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :

[Link]["general"].elements["champ1"].value="NOUVEAU"
Cliquez sur ce bouton et observez le premier formulaire
Appeler une méthode sur un élément
Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus() sur cet

34
élément.
[Link]["general"].elements["champ1"].focus()

<form name="FormTexte" method="" action="" >

4. Intégrer du javascript dans un événement

Un exemple d'événement
Un événement d'un élément de formulaire est déclenché par le navigateur en réaction à une action ou un
changement détecté.
L'événement le plus classique est le clic sur un bouton appelé onClick

Reprenons le même exemple, il s'agit de placer "NOUVEAU" dans la zone de texte du formulaire.

Voici le script correspondant :

Dans le bouton, on a rajouté l'événement onClick qui reçoit le code javascript à exécuter lors du clic sur le
bouton.
La syntaxe est :
onClick=' [Link]["changer"].elements["zonetexte"].value = "Encore nouveau" '>
Le code javascript doit se mettre entre " ou entre '. Il faut faire très attention à alterner les " et '. On peut
écrire :
onClick='alert("Bonjour")'>
ou
onClick="alert('Bonjour')">

5. L'objet this

Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne [Link]. Un objet
JavaScript this permet de raccourcir ce chemin d'accès.
this représente l'objet javascript en cours.

Donnez le focus à cette zone de texte, un message apparaît dans la barre de statut pour indiquer son nom.
Le message disparaît quand le champ perd le focus.
Voici le code source simplifié par this :

35
<FORM name="formfocus">
<INPUT type="text" name="champtexte" value="contenu" onFocus="[Link]=[Link]"
onBlur="[Link]=''">
</FORM>

La variable [Link] contient le message avec le nom du champ obtenu par :

[Link]
équivalent ici à
[Link]["formfocus"].elements["champtexte"].name

Encore un exemple avec this

Reprenons encore une fois notre champ texte qui peut voir son contenu changer lors du clic sur un bouton :

<FORM>
<INPUT type="text" name="zonedetexte" value="Valeur initiale">
<INPUT type="button" value="Changer le contenu"
onClick=' [Link]="NOUVEAU" '>
</FORM>
Grâce à [Link], on peut accéder au formulaire de l'élément en cours. Le chemin pour accéder à
zonedetexte est ensuite classique.

Un autre exemple

<form name="FormTexte2" method="" action="" >

6. L'accès aux éléments de type INPUT

Les zones de texte

La principale action en javascript sur une zone de texte est de manipuler son contenu.
Imaginons un formulaire appelé monform qui possède un champ texte appelé monchamp. On accède au
contenu du champ par :
[Link]["monform"].elements["monchamp"].value

Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

Les boutons
Un bouton sert principalement à déclencher une action javascript.
La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible.

Les cases à cocher

Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked
Majeur Etudiant

Voici le code de l'exemple :

<FORM>
<INPUT type="checkbox" name="majeur">Majeur
36
<INPUT type="checkbox" name="etudiant">Etudiant
<INPUT type="button" value="Tester" onClick="alert('Majeur : '+[Link]+'\nEtudiant :
'+[Link]);">
</FORM>
checked est de type booléen. Il contient true pour vrai et false pour faux.

Les radio-boutons
Imaginons ce sondage :
Vous utilisez comme système d'exploitation :
Windows 95 Windows 98 Windows NT Linux Autre

La gestion des radio-boutons est assez complexe. Voici le code HTML de ce sondage :
<FORM>
<INPUT type="radio" name="os" value="Windows 95" checked>Windows 95
<INPUT type="radio" name="os" value="Windows 98">Windows 98
<INPUT type="radio" name="os" value="Windows NT">Windows NT
<INPUT type="radio" name="os" value="Linux">Linux
<INPUT type="radio" name="os" value="Autre">Autre
<INPUT type="button" value="Tester"
onClick="testerRadio([Link])">

<SCRIPT language="javascript">
function testerRadio(radio) {
for (var i=0; i<[Link];i++) {
if (radio[i].checked) {
alert("Système = "+radio[i].value)
}
}
}
</SCRIPT>

La déclaration du formulaire crée un groupe de radio-boutons liés : le nom du groupe est os.
La fonction javascript a comme paramètre le groupe des radio-boutons.
Une boucle parcourt la liste des boutons du groupe. On repère le bouton qui a la propriété checked à true et
on affiche alors la valeur correspondante.

7. L'accès aux éléments de type SELECT

<SELECT name="liste" size=1>

<OPTION value="valeur ligne 1">Libellé ligne 1</OPTION>
<OPTION value="valeur ligne 2">Libellé ligne 2</OPTION>
<OPTION value="valeur ligne 3">Libellé ligne 3</OPTION>
<OPTION value="valeur ligne 4">Libellé ligne 4</OPTION>
</SELECT>

En JavaScript, la structure d'un élément de type SELECT reprend ce schéma :

name Nom de la liste
Indice de la ligne sélectionnée
selectedIndex
(ligne 1 : indice=0)
options Tableau des lignes
length Nombre de lignes
value Valeur d'une ligne
text Libellé d'une ligne

Voici le code des événements des boutons.

37
Pour récupérer l'indice la ligne sélectionnée :
[Link]['liste'].selectedIndex
Pour récupérer le nombre de lignes :
[Link]['liste'].[Link]
Pour récupérer la valeur de la ligne sélectionnée :
[Link]['liste'].options[[Link]['liste'].selectedIndex].value

Exemple 1 : Choix unique

<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
<option value="Choix 2"> Choix 2 </option>
<option value="Choix 3"> Choix 3 </option>
</select>

<a href="#" onClick=" alert([Link][2].value) ">Avant</a>

<a href="#" onClick="[Link][2].value ='cmd';
alert([Link][2].value)">Après</a>

</form>

Exemple 2 Choix multiple

<select name="nom" multiple >

Récupérer les options séléctionnées

Vous pouvez récupérer les options sélectionnées :

Par exemple, sélectionnez plusieurs options :
Evaluer le nombre de sélections
<form name="f" multiple size="5>
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select>
<a href="#" onClick=evaluation();">Evaluer.</a>
</form>

38
8.L'accès aux éléments de type TEXTAREA

Une zone de texte multi-lignes a comme propriété principale value qui contient le texte de la zone.
Contenu brut Contenu traité

Pour récupérer le contenu de la zone, on utilise le classique :

[Link]["nom"].elements["zone"].value
Le "contenu traité" est obtenu par l'appel de la fonction escape() qui convertit tous les caractères spéciaux et
non visibles (tabulations, retour à la ligne, ...).
Dans notre exemple, quand "Contenu traité" est coché, on affiche :
escape([Link]["nom"].elements["zone"].value)
La fonction inverse est unescape().

Nous avons vu dans cette page comment manipuler les éléments de formulaires avec le javascript.
La page suivante montre les Trucs et astuces de formulaires qui facilitent la saisie dans les formulaires.

ASTUCES DE FORMULAIRE
2 - Changer le libellé d'un bouton
Cette page montre de nombreuses astuces pour Cliquez le bouton pour changer son libellé.
rendre un formulaire dynamique et attractif, en
réaction aux événements générés par l'utilisateur. Le script
Il est nécessaire de bien connaître le principe des <FORM name="form2">
formulaires HTML pour tirer partie de ces astuces. <INPUT type="button" name="bouton"
value='Cliquez-moi !'
1 - Donner le focus (curseur) à un élément de onClick="[Link]='Touché !'">
formulaire </FORM>
Le premier champ texte a le focus au chargement
de la page. 3 - Ne permettre qu'un seul clic sur un bouton
Cliquez sur les boutons pour donner le focus aux Accepte le premier clic sur le bouton et empêche
autres éléments. La prise de focus est possible les suivants.
pour tous les types d'objets. Utile pour éviter de recevoir 3 fois le même
message quand un visiteur s'excite sur le bouton
"Envoyer" !
Le script
Le script Dans l'entête de la page
<SCRIPT language="javascript">
<FORM name="form1"> var nbclic=0 // Initialisation à 0 du nombre de
<INPUT type="texte" name="champ1"> clic
<INPUT type="button" value="<- Donne le function CompteClic(formulaire) { // Fonction
focus" onClick="[Link]()"> appelée par le bouton
<SELECT name="champ2" > nbclic++; // nbclic+1
<OPTION>Ceci est la ligne n° 1</OPTION> if (nbclic>1) { // Plus de 1 clic
<OPTION>Ceci est la ligne n° 2</OPTION> alert("Vous avez déjà cliqué ce bouton.\nLe
</SELECT> formulaire est en cours de traitement... Patience");
<INPUT type="button" value="<- Donne le } else { // 1 seul clic
focus" onClick="[Link]()"> alert("Premier Clic.");
<TEXTAREA rows="2" cols="15" }
name="champ3"> }
<INPUT type="button" value="<- Donne le </SCRIPT>
focus" onClick="[Link]()">
</FORM> Dans le corps
<FORM name="form3">
Pour donner le focus à un champ de formulaire à <INPUT type="button" name="bouton"
l'ouverture de la page, il faut ajouter cette ligne value="Cliquez-moi aussi !"
dans la balise BODY : onClick="CompteClic([Link])">
onLoad="[Link]['nomduform'].elements[' </FORM>
nomchamp'].focus()"
39
4 - Valider un formulaire par JavaScript
Il est souvent utile de vérifier la saisie d'un L'appui sur [Entrée] déclenche la soumission du
formulaire avant de le valider. formulaire qu'il est possible de détecter avec
L'idéal est de créer un bouton (de type "button" et l'événement onSubmit.
pas "submit") qui appelle une fonction javascript La balise FORM peut donc s'écrire :
qui contrôle la saisie et soumet ou non le <FORM name="formulaire"
formulaire. onSubmit="maFonction()">
Voyons un exemple simple de test de saisie d'un
email.

Saisissez une adresse mail valide (du type 7 - Empêcher la saisie dans un champ
nom@[Link]) Dès que la curseur souris arrive sur ce champ, il
est enlevé. Cela rend impossible la saisie ou la
Le script modification de son contenu.
Dans l'entête de la page
<SCRIPT language="javascript"> L'astuce est d'utiliser l'événement onFocus qui
function ValiderMail(formulaire) { détecte l'arrivée du curseur dans le champ.
if ([Link]("@",0)<0) Voici la ligne décrivant la zone :
{alert("Adresse mail saisie invalide.\nLe formulaire <INPUT type="text" value="Non modifiable"
ne sera pas validé.")} name="champ" onFocus="[Link]()">
else { La méthode focus() appliquée au champ retire le
alert("Formulaire validé.\nPour valider un curseur.
formulaire : [Link]()");
// Pour valider le formulaire en javascript : Avec cette ligne, il est possible de rediriger le
// [Link]() curseur vers un autre champ du formulaire :
} <INPUT type="text" value="Non modifiable"
} name="champ"
</SCRIPT> onFocus="[Link]()">
Dans le corps de la page La méthode focus() appliquée à champ2 active le
<FORM name="form4" action=""> curseur.
Saisissez une adresse mail valide (du type
nom@[Link])
;<INPUT type="texte" name="mail">
<INPUT type="button" name="bouton" 8
value="Valider" onClick="ValiderMail([Link])"> - Alimenter un champ texte au passage de la
</FORM> souris
Pour alimenter un champ texte au passage de la
5 - Vider un champ à la prise de focus souris sur un objet (ici une cellule d'un tableau),
Par exemple, un champ de saisie de login avec à jbvillier, propose cette solution :
l'origine "Votre login". <script language=javascript>
Si vous cliquez sur le champ, "Votre login" /* ti script by jbvillier@[Link] */
disparaît. function focusOn() {
[Link]["form11"].[Link] =
Le script "Hé hop" ;
<FORM name="form5"> }
<INPUT type="texte" name="login" value='Votre </script>
login' onFocus="if ([Link]=='Votre login')
{[Link]=''}"> <form name="form11"> <table width="66%"
</FORM> height="28%" border="1">
<tr>
6 - Détecter la touche [Entrée] sur un <td width="57%" height="26"
formulaire onMouseOver="focusOn()">passez la souris
Utile dans les formulaires de recherche, où la ici</td>
plupart des utilisateurs tapent [Entrée] pour valider <td width="43%"><input type="text"
la recherche, sans cliquer sur le bouton name="champtexte"></td>
"Rechercher". </tr>
</table>
Entrez un mot : </form>

40
var d2=new Date(a,m-1,j);
Ce qui donne j2=[Link]();
m2=[Link]()+1;
passez la souris ici a2=[Link]();
if (a2<=100) {a2=1900+a2}
if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
Voir des exemples de contrôles de saisies dans alert("La date "+d+" n'existe pas !");
un formulaire ok=0;
}
CONTROLES DE SAISIE DANS UN }
FORMULAIRE return ok;
}
Cette page montre comment contrôler la bonne
saisie dans un formulaire. Il est utile de lire l'article 3 - Est-ce un mail ?
sur les chaînes de caractères pour comprendre Pour vérifier qu'un mail est valide, il suffit de tester
les fonctions utilisées. la présence de @ et du point.
function verifiermail(mail) {
1 - Est-ce un nombre ? if
Il peut être utile de vérifier que la saisie dans un (([Link]("@")>=0)&&([Link](".")>=0))
champ de formulaire est bien un nombre : saisie {
de quantités, de prix... return true
Saisir ici : : } else {
Soit nb le champ à tester. Si !(isNaN(nb)) retourne alert("Mail invalide !");
true, alors nb est un nombre. return false
}
2 - Est-ce une date ? }
Cette fonction vérifie la saisie d'une date au Cette fonction vérifie la présence du caractère @
format jour/mois/année. et du . pour vérifier la validité. Si ces 2 caractères
Entrez une date au format JJ/MM/AAAA sont trouvés, la fonction retourne true sinon, elle
Voici la fonction CheckDate(d), où d est une affiche un message et retourne false.
chaîne de caractères. Entrez une adresse mail
function CheckDate(d) {
// Cette fonction vérifie le format JJ/MM/AAAA Informations
saisi et la validité de la date.
// Le séparateur est défini dans la variable Nous allons étudier les propriétés Javascript de la
separateur balise HTML :
var amin=1999; // année mini <input type="reset">, qui permet de réinitialiser
var amax=2005; // année maxi le formulaire HTML.
var separateur="/"; // separateur entre <input type="submit">, qui permet d'envoyer le
jour/mois/annee formulaire HTML.
var j=([Link](0,2)); <input type="image">, qui permet d'envoyer le
var m=([Link](3,5)); formulaire HTML mais à la place du bouton on
var a=([Link](6)); spécifie une image.
var ok=1; <input type="button"> qui permet d'afficher un
if ( ((isNaN(j))||(j<1)||(j>31)) && (ok==1) ) { bouton de formulaire n'a aucune action.
alert("Le jour n'est pas correct."); ok=0;
} reset()
if ( ((isNaN(m))||(m<1)||(m>12)) && (ok==1) ) {
alert("Le mois n'est pas correct."); ok=0;
Pour remettre à jour un formulaire via le
}
javascript, il ne faut plus utiliser la balise HTML
if ( ((isNaN(a))||(a<amin)||(a>amax)) &&
<input type="reset"> mais la balise HTML
(ok==1) ) {
<input type="button">.
alert("L'année n'est pas correcte."); ok=0;
A cette dernière nous lui associerons un
}
événement, généralement un "onclick" avec la
if ( (([Link](2,3)!=separateur)||
méthode reset().
([Link](5,6)!=separateur)) && (ok==1) ) {
<input type="button"
alert("Les séparateurs doivent être des
onClick="[Link]()">
"+separateur); ok=0;
}
if (ok==1) {
41
Méthode : [Link]()
Par exemple :
Taper du texte dans le champ. Réinitialise un formulaire

<form name="f"> Exemple reset

<input type="text" name="textfield">
<input type="button" <FORM>
onClick="[Link]()">
</form> Champ 1 : <INPUT TYPE="text"
NAME="champ1" VALUE="défaut 1"><BR>
submit()
Champ 2 : <INPUT TYPE="text"
Pour envoyer un formulaire via le javascript, il ne NAME="champ2" VALUE="défaut 2"><BR>
faut plus utiliser la balise HTML <input
type="submit"> mais la balise HTML <input <INPUT TYPE="button" VALUE="Rétablir les
type="button">. valeurs par défaut" onClick="[Link]();">
A cette dernière nous lui associerons un
événement, généralement un "onclick" avec la </FORM>
méthode submit().
<input type="button" Méthode : [Link]()
onClick="[Link]()">
Par exemple : Soumet un formulaire

<form name="f"> Exemple submit

<input type="text" name="champ">
<FORM ACTION="[Link]
<input type="button"
onClick="[Link]()"> TARGET="_blank" METHOD="post">
</form>
Champ 1 : <INPUT TYPE="text"
image NAME="champ1" VALUE="défaut 1"><BR>

Champ 2 : <INPUT TYPE="text"

Pour renvoyer un formulaire via le javascript, il ne
faut plus utiliser la balise HTML <input NAME="champ2" VALUE="défaut 2"><BR>
type="image"> mais une image avec un lien <a
<INPUT TYPE="button" VALUE="Soumettre ce
href="#">.
A ce dernier, nous lui associerons un événement, formulaire à [Link]
généralement un "onclick" avec la methode onClick="[Link]()">
submit().
<a href="#" onClick = </FORM>
"[Link]()"> <img
src="[Link]"> </a> Méthode :
[Link]()
Par exemple :
Retourne un objet HTML à partir de son nom
<form name="f">
<input type="text" name="champ"> Exemple Case à cocher
</form>
<FORM name="form_fruit">
<a href="#"
<INPUT type="checkbox" name="fruit"
onClick="[Link]()"><img
src="[Link]"></a> value="Fraise"> Fraise <BR>

L'image avec le lien peut être dans ou en dehors <INPUT type="checkbox" name="fruit"
du formulaire. value="Banane"> Banane <BR>
Vous pouvez aussi mettre une image pour la
méthode reset(), voiçi une autre manière d'écrire : <INPUT type="checkbox" name="fruit"
<a href = "javascript:[Link]()"> value="Pomme"> Pomme <BR>
<img src="[Link]"> </a>
</FORM>
42
<SCRIPT language=javascript> var argc=[Link];
var expires=(argc > 2) ? argv[2] : null;
[Link]("fruit")[0].checked var path=(argc > 3) ? argv[3] : null;
= true; var domain=(argc > 4) ? argv[4] : null;
var secure=(argc > 5) ? argv[5] : false;
[Link]("fruit")[1].checked [Link]=name+"="+escape(value)+
= true; ((expires==null) ? "" : (";
expires="+[Link]()))+
[Link]("fruit")[2].checked ((path==null) ? "" : ("; path="+path))+
= true; ((domain==null) ? "" : ("; domain="+domain))+
((secure==true) ? "; secure" : "");
</script> }
La valeur à stocker est associée à un nom de
cookie.
17. JAVASCRIPT ET LES COOKIES La date d'expiration permet de définir la longévité
du cookie. Si elle est omise, le cookie est détruit à
Avec JavaScript, il est possible de programmer la fermeture du navigateur.
les célèbres cookies. Le path indique simplement d'où vient le cookie.
Nous allons voir ici à quoi servent les cookies et Le nom de domaine permet d'identifier le cookie
comment stocker et récupérer des informations parmi tous ceux stockés sur la machine.
grâce à eux. La variable secure indique si l'accès au cookie est
En bas de cette page, vous trouverez des protégé.
exemples de programmation de cookies. Donc pour stocker la valeur Arthur dans la
variable prenom il suffit d'appeler la fonction
1 - A quoi servent les cookies ? comme ceci :
Les cookies sont très utilisés, par tous les sites var pathname=[Link];
commerciaux et par de plus en plus de sites var
perso. La raison est simple. Un cookie permet de myDomain=[Link](0,[Link]
stocker de manière permanente des informations ndexOf('/')) +'/';
sur le poste du visiteur, qui pourront être var date_exp = new Date();
récupérées lors des futures visites. date_exp.setTime(date_exp.getTime()
Voyons quelques unes des principales +(365*24*3600*1000));
informations stockées dans les cookies : // Ici on définit une durée de vie de 365 jours
• Le nombre de visites, la date de la SetCookie("prenom","Arthur",date_exp,myDomain
dernière visite,... (Exemple : Tout );
[Link])
• Un identifiant et un mot de passe pour une
reconnaissance automatique du visiteur 3 - Comment RECUPERER les informations ?
(Exemple : CDNow) Voyons un cookie qui contiendrait les informations
• Une liste de mots-clés utilisés dans les suivantes :
moteurs de recherche pour cibler les • prenom = Arthur
publicités à afficher (Exemple : beaucoup • nb_visite = 3
de moteurs de recherche) Pour récupérer l'information prenom, il faut
• Une liste de paramètres de préférences de extraire, de la chaîne de caractères composant le
navigation pour personnaliser la page cookie, le nom de la variable soit prenom. La
présentée (Exemple : Mon Yahoo !) valeur de prenom est la chaine de caractères
• Des informations à transférer d'une page à située immédiatement après et séparée par ';' et
l'autre du site. par ' '.
Voici le code des fonctions nécessaires à la
2 - Comment STOCKER des informations ? récupération d'une information :
function getCookieVal(offset) {
Le type d'informations à stocker n'a aucune var endstr=[Link] (";", offset);
influence sur le code. Un cookie est un fichier de if (endstr==-1)
texte qui contient une chaîne de caractères
contenant les informations concaténées. endstr=[Link];
Voici la fonction qui permet de stocker une return
information dans un cookie unescape([Link](offset,
function SetCookie (name, value) { endstr));
var argv=[Link]; }
function GetCookie (name) {
43
var arg=name+"="; documentation est riche dans ce domaine.
var alen=[Link];
var clen=[Link]; 2 - Le JavaScript dans les frames
var i=0;
while (i<clen) { La première application qui vient à l'esprit avec
var j=i+alen; les frames est la création de menu. C'est en effet
if ([Link](i, j)==arg) la principale utilité des frames - nous verrons qu'il
return getCookieVal (j); y en a d'autres.
i=[Link](" ",i)+1; En HTML, pour créer un lien qui charge une page
if (i==0) break;} dans une frame, il faut écrire :
return null; <A HREF="[Link]"
} target="nom_frame">Le Lien</A>
Si la variable demandée n'est pas contenue dans Dans la balise A, target contient le nom de la
le cookie, elle est considérée comme valant null. frame à charger avec le fichier (ici [Link]).
Pour récupérer la variable prenom, il suffit En JavaScript, pour charger une page dans une
d'appeler la fonction : frame, on utilise une des instructions suivantes :
le_prenom=GetCookie("prenom");
[Link][nu_frame].[Link]="page.h
tml"
18. JAVASCRIPT ET LES FRAMES Ici, on fait appel au tableau frames indicé par
nu_frame. Ici la frame numéro nu_frame contient
Les frames sont de plus en plus rejetées par le [Link].
monde de l'internet. La plupart des grands sites
les ont abandonnées et ont choisi de recopier sur [Link]["frame1"].[Link]="[Link]
chaque page le menu et tous les liens de leur ml"
navigation. Nous allons tout de même aborder la Maintenant, on accède au tableau des frames par
mise en place des frames et surtout leur intérêt son nom. Le résultat est identique avec
dans la programmation JavaScript. l'instruction suivante :

1 - Comment intégrer des frames ? [Link]="[Link]"

Si vous souhaitez charger 2 pages dans 2 frames
Pour créer une page séparée en plusieurs frames, différentes avec 1 seul clic, JavaScript le permet.
il faut à l'origine une page principale qui remplace On commence par déclarer une fonction charger
la zone BODY par la déclaration et le avec en paramètre les noms des pages à charger
positionnement des frames. dans les 2 frames :
La structure classique d'une page découpée en function
frames est celle-ci. charger(nom_page1,nom_page2) {
<HTML> [Link]["frame1"].[Link]=nom_pa
<HEAD> ge1;
<TITLE>Titre de page</TITLE> [Link]["frame2"].[Link]=nom_pa
</HEAD> ge2;
}
<FRAMESET cols="140,*"> On suppose dans cet exemple que les frames
<FRAMESET rows="*,50" frameborder=0> s'appellent frame1 et frame2.
<FRAME name="FRAME1" src="[Link]"> On crée ensuite un lien qui appelle la fonction
<FRAME name="FRAME2" src="[Link]"> JavaScript charger :
</FRAMESET> <A
<FRAME name="FRAME3" src="[Link]"> HREF="JavaScript:charger('[Link]','[Link]
</FRAMESET> ml')">1 Clic et 2 pages chargées</A>
Cette déclaration crée une page découpée de la
sorte : Il est possible aussi d’écrire un script permettant
FRAME 1 d’afficher un message dans un frame :

FRAME 3 var user= [Link](0).[Link];

message="<BR>"+"vous n avez pas d adresse
electronique" + user;
FRAME 2
[Link][1].[Link](messa
ge)
Nous n'allons pas voir en détail comment créer
des frames, c'est là du langage HTML et la
44
<SCRIPT
La seconde application est la sauvegarde language="javascript">[Link]()
d'informations tout au long d'une session de <SCRIPT>
navigation. Les frames remplacent L'intérêt est évidemment la facilité de mise à jour
avantageusement les cookies s'il s'agit de stocker sur toutes les pages du site de cette note de
des informations juste pendant la navigation du copyright. Il suffit de changer la fonction dans la
visiteur. Les informations stockées sont perdues page parent et les modifications se reportent
dès que le visiteur ferme son navigateur ou s'il automatiquement dans toutes les pages du site
remplace votre page par une autre. où la fonction est intégrée.
Pour stocker des informations, il suffit de déclarer
une variable dans l'entête de la fenêtre mère Les frames sont très utiles dans la conception de
(celle qui contient la déclaration des frames grâce sites :
aux balises <FRAMESET>). Cette variable peut • Elles facilitent la création et la mise à jour
être juste une valeur (nombre, chaîne, ...) ou un de la navigation
objet complexe. • Elles offrent des possibilités de
programmation en javascript (sauvegarde
Exemple de stockage de l'heure d'ouverture de la d'informations)
session
Dans l'entête (entre les balises <HEAD> et 19. FONCTIONS MATHEMATIQUES
</HEAD>) de la fenêtre parent, on déclare :
<SCRIPT language="javascript"> JavaScript est tout à fait adapté pour les calculs
var heure=new Date(); sur le poste du visiteur, de nombreuses fonctions
heure=[Link]() // mathématiques ont été implémentées.
transformation de la date en millisecondes
</SCRIPT> 1. La conversion de chaînes de caractères
Rappel : la fenêtre parent est celle qui contient la en nombres
déclaration des frames
Les fonctions de conversion
Dans la frame1, on a accès à cette variable en
codant : En JavaScript, les variables ne sont pas
<SCRIPT language="javascript"> typées, mais il est utile de savoir transformer
var h=[Link]; une chaîne en un entier ou un réel (nombre à
<SCRIPT> virgule).
Imaginons ce script :
var chaine="3.14";
Cette possibilité peut être étendue aux fonctions. var entier=parseInt(chaine);
De la même façon que la fenêtre parente peut var reel=parseFloat(chaine);
sauver des variables, il est possible de coder des
fonctions dans son entête et de les récupérer A l'issue de ce script, entier contient 3 et reel
ensuite dans toutes les frames. contient 3.14

Exemple de déclaration d'une fonction dans la Est-ce un nombre ?

page parente Supposons maintenant que la variable chaine
soit initialisée avec "azerty"
On souhaite utiliser dans toutes les frames une var chaine="azerty";
fonction qui affiche une ligne de copyright. var entier=parseInt(chaine);
On commence par déclarer dans l'entête de la var reel=parseFloat(chaine);
fenêtre parente la fonction AffCopyright(). var rate=isNaN(entier);

<SCRIPT language="javascript"> A l'issue du script, entier et reel contiennent

function AffCopyright() { NaN, car "azerty" ne peut pas se convertir en
[Link]("<CENTER>Copyright 2000 - nombre.
Tous droits réservés</CENTER>"); Pour détecter que chaine a bien le format d'un
} nombre, il existe une fonction isNaN(valeur)
<SCRIPT> qui renvoie :
- true si valeur n'est pas un nombre
Dans toutes les frames du site, il suffit, pour - false si valeur est un nombre
afficher cette note de copyright, d'appeler la Dans ce cas, rate est à vrai car la conversion
fonction ainsi : a échoué.

45
très utiles pour manipuler des variables en étant
ATTENTION, isNaN(valeur) retourne vrai si sur d'avoir affaire à des nombres. Cela permet par
valeur N'est PAS un nombre exemple de convertir une saisie dans un
Pour bien comprendre formulaire et de vérifier que le visiteur a bien entré
Vous pouvez tester ces fonctions grâce à ce un nombre (prix, quantité, âge, année, ...)
formulaire (essayez avec un nombre et avec une
chaîne comme "azerty") : 2. L'objet Math
chaine contient
entier contient isNaN(entier)= Le tableau suivant décrit les méthodes de l'objet
reel contient isNaN(reel) = Math.

Ces trois fonctions (attention aux majuscules) sont

Méthode description Exemple

• x = [Link](3.26) donne x =
Retourne la valeur absolue d'un nombre, il 3.26
Abs() renvoie donc le nombre s'il est positif, son
opposé (positif) s'il est négatif • x = [Link](-3.26) donne x =
3.26
• x = [Link](6.01) donne x = 7
Retourne l'entier supérieur ou égal à la valeur
ceil()
donnée en paramètre
• x = [Link](3.99) donne x = 4
• x = [Link](6.01) donne x = 6
Retourne l'entier inférieur ou égal à la valeur
floor()
donnée en paramètre
• x = [Link](3.99) donne x = 3
• x = [Link](6.01) donne x =
6
Arrondit à l'entier le plus proche la valeur donnée
round() • x = [Link](3.8) donne x = 4
en paramètre
• x = [Link](3.5) donne x = 4
• x = [Link](6,7.25) donne x
= 7.25
max(Nombre1, Retourne le plus grand des deux entiers donnés • x = [Link](-8.21,-3.65)
Nombre2) en paramètre donne x = -3.65

• x = [Link](5,5) donne x = 5
• x = [Link](6,7.25) donne x =
7.25
min(Nombre1, Retourne le plus petit des deux entiers donnés en • x = [Link](-8.21,-3.65)
Nombre2) paramètre donne x = -3.65

• x = [Link](5,5) donne x = 5
• x = [Link](6,7.25) donne x =
6
min(Nombre1, Retourne le plus petit des deux entiers donnés en • x = [Link](-8.21,-3.65) donne
Nombre2) paramètre x = -8.21

• x = [Link](5,5) donne x = 5
• x = [Link](3,3) donne x = 27
pow(Valeur1, Retourne le nombre Valeur1 à la puissance
Valeur2) Valeur2 • x = [Link](9,0.5) (racine
carrée) donne x = 3
Retourne un nombre aléatoire compris entre 0 et • x = [Link]() donne x =
random()
1 0.6489534931546957
Retourne la racine carrée du nombre passé en • x = [Link]() donne x =
sqrt(Valeur)
paramètre 0.6489534931546957

46
Logarithmes et exponentielle
Méthode description
Math.E Propriété qui retourne le nombre d'Euler (environ 2.718)
[Link](valeur)Retourne l'exponentielle de la valeur entrée en paramètre
Math.LN2 Retourne le logarithme népérien de 2
Math.LN10 Retourne le logarithme népérien de 10
[Link](valeur) Retourne le logarithme de la valeur entrée en paramètre
Math.LOG2E Propriété qui retourne la valeur du logarithme du nombre d'Euler en base 2
Math.SQRT1_2 Propriété qui retourne la valeur de 1 sur racine de 2 (0.707)
Math.SQRT2 Racine de 2 (1.414)
Trigonométrie
Méthode description
[Link] Retourne la valeur du nombre PI, soit environ 3.1415927
[Link](valeur) Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians)
[Link](valeur) Retourne l'arcsinus de la valeur entrée en paramètre (doit être donnée en radians)
[Link](valeur) Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians)
[Link](valeur)Retourne l'arccosinus de la valeur entrée en paramètre (doit être donnée en radians)
[Link](valeur) Retourne la tangente de la valeur entrée en paramètre (doit être donnée en radians)
[Link](valeur) Retourne l'arctangente de la valeur entrée en paramètre (doit être donnée en radians)

20. L'OBJET DATE janvier 1970 fournira une valeur erronée. Si

jamais on veut manipuler des dates antérieures il
L'objet Date permet de travailler avec toutes les s'agit de créer vous-même un objet date
variables qui concernent les dates et la gestion du spécifique...
temps. Il s'agit d'un objet inclus de façon native
dans Javascript, et que l'on peut toujours utiliser. Les méthodes de l'objet Date

La syntaxe pour créer un objet-date peut être une La date est stockée dans une variable sous la
des suivantes: forme d'une chaîne qui contient le jour, le mois,
l'année, l'heure, les minutes, et les secondes. Il
1. Nom_de_l_objet = new Date() est donc difficile d'accéder à un seul élément d'un
cette syntaxe permet de stocker la date et objet date, étant donné que chacun des éléments
l'heure actuelle peut avoir une taille variable. Heureusement, les
2. Nom_de_l_objet = new Date("mois jour, méthodes de l'objet Date fournissent un moyen
année heures:minutes:secondes") simple d'accéder à un seul élément, ou bien de le
les paramètres sont une chaîne de modifier.
caractère sous cette notation Leur syntaxe est la suivante:
3. Nom_de_l_objet = new Date(year, Objet_Date.Methode()
month, day)
les paramètres sont trois entiers séparés Connaître la date
par des virgules.
Les paramètres omis sont mis à zéro par Les méthodes dont le nom commence par le
défaut radical get (mot anglais qui signifie récupérer)
4. Nom_de_l_objet = new Date(year, permettent de récupérer une valeur:
month, day, hours, minutes, seconds)
les paramètres sont six entiers séparés
par des virgules.
Les paramètres omis sont mis à zéro par
défaut

Les dates en Javascript sont stockées de la

même manière que dans le langage Java, c'est-à-
dire qu'il s'agit du nombre de secondes depuis le
1er janvier 1970. Ainsi, toute date antérieure au 1er

47
Méthode Description Type de valeurs retournée
Permet de récupérer la valeur du L'objet retourné est un entier (entre 1 et 31) qui
getDate()
jour du mois correspond au jour du mois:
L'objet retourné est un entier qui correspond au jour
de la semaine:
Permet de récupérer la valeur du
getDay() jour de la semaine pour la date
• 0: dimanche
spécifiée
• 1: lundi ...
Permet de récupérer la valeur de L'objet retourné est un entier (entre 0 et 23) qui
getHour()
l'heure correspond à l'heure
Permet de récupérer la valeur des L'objet retourné est un entier (entre 0 et 59) qui
getMinutes()
minutes correspond aux minutes
L'objet retourné est un entier (entre 0 et 11) qui
correspond au mois:
Permet de récupérer le numéro du
getMonth()
mois • 0: janvier

• 1: février ...
L'objet retourné est un entier. Cette méthode est
Permet de récupérer le nombre de
getTime() très utile pour passer d'une date à une autre,
secondes depuis le 1er janvier 1970
soustraire ou ajouter deux dates, ...
Retourne la différence entre l'heure
L'objet retourné est un entier, il représente le
getTimezoneOffset()locale et l'heure GMT (Greenwich
nombre de minutes de décalage
Mean Time)

Modifier le format de la date

Les deux méthodes suivantes ne permettent de travailler que sur l'heure actuelle (objet Date()) leur syntaxe
est donc figée:

Méthode Description Type de valeurs retournée

L'objet retourné est une chaîne de caractère du
Permet de convertir une date en une
toGMTString() type:
chaîne de caractères au format GMT
Wed, 28 Jul 1999 15:15:20 GMT
L'objet retourné est une chaîne de caractère dont
Permet de convertir une date en une
toLocaleString() la syntaxe dépend du système, par exemple:
chaîne de carctères au format local
28/07/99 15:15:20

Modifier la date

Les méthodes dont le nom commence par le radical set (mot anglais qui signifie règler) permettent de
modifier une valeur:

Méthode Description Type de valeur en paramètre

Permet de fixer la valeur du jour Le paramètre est un entier (entre 1 et 31) qui correspond au
setDate(X)
du mois jour du mois
Le paramètre est un entier qui correspond au jour de la
semaine:
Permet de fixer la valeur du jour
setDay(X)
de la semaine • 0: dimanche

• 1: lundi ...
Permet de fixer la valeur de Le paramètre est un entier (entre 0 et 23) qui correspond à
setHour(X)
l'heure l'heure
Permet de fixer la valeur des Le paramètre est un entier (entre 0 et 59) qui correspond aux
setMinutes(X)
minutes minutes
48
Le paramètre est un entier (entre 0 et 11) qui correspond au
mois:
Permet de fixer le numéro du
setMonth(X)
mois • 0: janvier

•
1: février ...
Le paramètre est un entier représentant le nombre de
setTime(X) Permet d'assigner la date
secondes depuis le 1er janvier 1970

Attention!
Les méthodes getTime() et setTime() ne sont pas en secondes mais en millisecondes.
Si vous voulez attribuer un timestamp récupérer par exemple avec PHP, vous devez le multiplier par 1000.

22. FONCTIONS D’ENCODAGE La méthode encodeURIComponent remplace

toutes les caractères. Elle compatible avec
escape() Internet Explorer 5.5, Netscape6+, FireFox.
Une url doit être au format ASCII (hexadécimal).
transformer une chaîne de caractères en ASCII, Exemple :
vous devez utiliser la fonction javascript escape(). alert(encodeURIComponent("le lien 5;?#"));
ce qui vous donne : le%20lien%205%3B%3F%23
decodeURIComponent
Exemple : La méthode javascript decodeURIComponent()
[Link][n].href=escape("le lien 5"); vous permettra de faire l'inverse.
ce qui vous donne : le%20lien%205
Exemple :
Cependant, les méthode escape et unescape ne decodeURIComponent("le%20lien%205%3B%3F
fonctionnent pas correctement pour les caractères %23");
non-ASCII et sont donc déconseillées Ce qui vous donne : le lien 5;?#

unescape() 23. LES EXPRESSIONS REGULIERES

La méthode javascript unescape() vous permettra
de faire l'inverse. Les expressions régulières sont des objets qui
existent dans la plupart des langages de
Exemple : programmation, mais qui sont mal connus, car
unescape("le%20lien%205"); relativement complexes.
Ce qui vous donne : le lien Les expressions régulières permettent de réaliser
des traitements sur des chaînes de caractères,
encodeURI traitements qui peuvent être assez complexes à
La méthode encodeURI remplace la méthode réaliser sans l'aide de ces fameuses expressions.
escape dans le javascript 1.5 compatible avec
Internet Explorer 5.5, Netscape6+, FireFox 1er exemple : Trouver des mots dans un texte
Comment savoir si un mot est présent dans un
Exemple : texte.
alert(encodeURI("le lien 5/;?#")); Voici le texte :
ce qui vous donne : le%20lien%205/;?#
Mot à recherche :
Attention encodeURI n'encode pas les caratères
suivant " : ", " / ", " ; " et " ? ". Utilisez à la méthode Voici le code correspondant :
encodeURIComponent function SearchRegExp1(f) {
var lemot = [Link]
decodeURI var exp=new RegExp(lemot,"g");
La méthode javascript decodeURI() vous if ( [Link]([Link]) ) {alert("Le mot
permettra de faire l'inverse. ["+lemot+"] a été trouvé :)"); }
else {alert(" E R R E U R !\n\nLe mot ["+lemot+"]
Exemple : n'est pas présent !!!!"); }
decodeURI("le%20lien%205/;?#"); }
Ce qui vous donne : le lien 5/;?#
encodeURIComponent
49
2ème exemple : Est-ce un login valide ? }
La principale utilité des expressions régulières en
javascript est de vérifier la saisie dans un
formulaire.
Cette fonction vérifie que le login saisi est bien
formaté : de 3 à 8 caractères et sans caractères
spéciaux (uniquement des chiffres et des lettres).

Saisissez un login :
Saisissez un login :
Voici le code correspondant :
function VerifLogin(login) {
var exp=new RegExp("^[a-zA-Z0-9]{3,8}$","g");
if ( [Link](login) ) {alert("Le login ["+login+"] est
valide :)"); }
else {alert(" E R R E U R !\n\nLe login ["+login+"]
n'est pas valide !!!!"); }

Déclarer un objet RegExp

Il existe 2 manières pour déclarer un objet RegExp. La plus lisible est d'utiliser le constructeur RegExp :
var reg=new RegExp(pattern, option);
Ici, reg est devenu un objet de type RegExp.
pattern est le motif associé, ce qui permet de faire le traitement. Son format est défini dans le paragraphe
suivant.
option est une chaîne de caractère qui peut prendre les valeurs :
"", vide, aucune option,
"g", recherche globale sur toute la chaîne,
"i", ne pas faire la distinction majuscule/minuscule,
"gi", association de g et i.
Une autre notation, plus compacte, mais moins lisible est utilisée :
var exp=/pattern/option; Les 2 notations sont exactement équivalentes.

La syntaxe du motif pattern

C'est bien l'écriture du motif qui va faire toute la puissance de votre expression régulière. Voici les principales
syntaxes possibles :
Motif Signification
^ Début de ligne ou de chaîne
$ Fin de ligne ou de chaîne
. N'importe quel caractère
x|y Caractère x ou y
[abc] Groupe de caractères : n'importe lequel de ceux entre crochets
[a-z] Groupe de caractères : n'importe lequel de a à z
[^0-9] Groupe de caractères : tous sauf ceux entre crochets
(x) Expression parenthésée (mémorisée)
* Caractère précédent de 0 à X fois
+ Caractère précédent de 1 à X fois
? Caractère précédent de 0 à 1 fois
{n} Caractère précédent exactement n fois
{n,} Caractère précédent au moins n fois
{n,m} Caractère précédent entre n et m fois
\ N'est pas un caractère, sert de caractère d'échappement

50
\\ Caractère \
\d Chiffres (équivalent à [0-9])
\D Sauf chiffres (équivalent à [^0-9])
\b Frontière de mot (espace, alinéa, ...)
\s Caractère d'espacement (espace, tabulation, saut de page, ...) équivalent à [ \f\n\r\t\v]
\S Un seul caractère sauf un espacement
\w N'importe quel caractère alphanumérique, y compris undescore (_) équivalent à [A-Za-z0-9_]
\W Tout sauf un caractère alphanumérique équivalent à [^A-Za-z0-9_]

Exemples de motif
Si on reprend l'exemple du contrôle de login, le pattern valait : ^[a-zA-Z0-9]{3,8}$
La signification est :
^ : pour montrer le début de la chaine,
[a-zA-Z0-9] : pour les caractères alphanumérique de a à z, de A à Z et de 0 à 9,
{3,8} : pour indiquer qu'il faut une longueure de 3 à 8 caractères alphanumériques,
$ : pour interdire tout caractère après.

Pour tester qu'une saisie est un mail valide, voici la chaîne pattern à utiliser :
^[a-zA-Z0-9\-_]+[a-zA-Z0-9\.\-_]*@[a-zA-Z0-9\-_]+\.[a-zA-Z\.\-_]{1,}[a-zA-Z\-_]+
La signification de cette chaîne est logique également :
^ : début du mail
[a-zA-Z0-9\-_]+ : Au moins un caractère alphanumérique en début de mail
[a-zA-Z0-9\.\-_]* : Tous les caractères alphanumériques plus ., - et _ au moins 1 fois
@ : une fois arobase
[a-zA-Z0-9\-_]+ : Tous les caractères alphanumériques plus ., - et _ au moins 1 fois
\. : 1 fois le caractère .
[a-zA-Z0-9\.\-_]{1,} : Tous les caractères alphanumériques plus ., - et _ au moins 2 fois
[a-zA-Z0-9\-_]+ : Au moins un caractère alphanumérique en fin de mail

Les différentes actions des RegExp Exemple d'utilisation de split() et match()

L'objet RegExp possède plusieurs méthodes qui Supposons une liste de noms séparés par des
ont différents effets. virgules, des espaces ou des points-virgules, mais
Nous avons déjà vu la méthode test() qui valide dont le format n'est pas uniforme.
une chaîne de caractères en fonction d'un motif. Les expressions régulières vont nous permettre
La méthode exec() retourne un tableau des de créer un tableau avec tous les noms
occurences répondant aux critères du motif. correctement isolés.
Sur l'objet string, il existe également des
méthodes qui attendent en paramètres une Listes des noms :
expression régulière.
La méthode search() permet de trouver des
occurences répondant aux critères du motif. Pour l'extraction par split(), cette fonction est
La méthode replace() permet de trouver et de utilisée :
remplacer des occurences répondant aux critères function ExtraireNom(chaine) {
du motif. var exp=new RegExp("[, ;]+","g");
La méthode match() permet de trouver des var tabNom=[Link](exp);
occurences répondant aux critères du motif. if (tabNom==null) {alert("Problème dans
l'expression !");}

51
else { passés dans une url pour les traiter en javascript.
var affichage="Nombre de noms trouvés = " + Cette fonction crée un tableau associatif avec tous
[Link] + "\n"; les paramètres de l'url et leur valeur. Il est donc
for (var i=0;i<[Link];i++){ possible de passer des paramètres de page en
affichage=affichage + " ["+ tabNom[i] + "]\n"; page en javascript.
}
alert(affichage);
} Le bouton ouvre un popup pour afficher le résultat
} Voici la fonction qui crée le tableau de paramètres
La méthode split() créé un tableau qui contient :
tous les éléments trouvés entre le séparateur function TJS_ExtractURL(url) {
défini par l'expression régulière. var regexp=new RegExp("[?&]");
var tab=[Link](regexp);
Pour l'extraction par match(), cette fonction est tabparam=new Array;
utilisée : for (var i=1;i<[Link];i++){
function ExtraireNom2(chaine) { tabparam[tab[i].substring(0,tab[i].indexOf("="))]=
var exp=new RegExp("[a-zA-Z\-]+","g"); tab[i].substring(tab[i].indexOf("=")+1)
var tabNom=[Link](exp); }
if (tabNom==null) {alert("Problème dans }
l'expression !");}
else {
var affichage="Nombre de noms trouvés = " +
[Link] + "\n"; Remplacer des caractères
for (var i=0;i<[Link];i++){
affichage=affichage + " ["+ tabNom[i] + "]\n"; Les expressions régulières permettent également
} de remplacer des caractères dans une chaîne.
alert(affichage); Chaine AVEC les accents :
}
} Chaine SANS les accents :
La méthode match() créé un tableau qui contient Ici, on remplace tous les "e" accentés par un "e".
tous les éléments qui correspondent à chaine=[Link](/[éèêë]/g,"e");
l'expression régulière.
Rendre un mail cliquable
Extraction d'adresse mails dans un texte

Texte à traiter :
La fonction remplace permet également de retenir
Encore une utilisation de la méthode match() : des valeurs trouvées dans l'expression et de les
function ExtraireMail(chaine) { réutiliser dans la chaîne de remplacement.
var exp=new RegExp("[a-zA-Z0-9\-_]+[a-zA-Z0- Par exemple pour la chaîne de texte suivante :
9\.\-_]*@[a-zA-Z0-9\-_]+\.[a-zA-Z\.\-_]{1,}[a-zA-Z\-
_]+","g"); Bonjour, vous pouvez nous joindre sur
var tabMail=[Link](exp); monsite@[Link] ou info@[Link]
if (tabMail==null) {alert("Problème dans
l'expression !");} A bientôt.
else {
var affichage="Nombre de mails trouvés = " + Après traitement, la chaîne de texte devient :
[Link] + "\n"; Bonjour, vous pouvez nous joindre sur
for (var i=0;i<[Link];i++){ monsite@[Link] ou info@[Link]
affichage=affichage + " ["+ tabMail[i] + "]\n"; A bientôt.
}
alert(affichage);
} function TJS_EmailCliquable(email) {
} var exp=new RegExp("([a-zA-Z0-9\.\-_]+@[a-zA-
Z0-9\-_]+\.[a-zA-Z0-9]{2,})","g");
Extraire les paramètres d'une url return [Link](exp,"<A href='mailto:
$1'>$1</A>");
Grâce aux expressions régulières, on peut }
également extraire simplement les paramètres

52
 De même, il n'est pas possible de lister les
Rendre une adresse url cliquable logiciels copiés et non enregistrés.
Impossible aussi de détruire des fichiers
indispensables ou d'introduire un virus sur
Je vous invite à visiter le site de mon partenaire le poste d'un visiteur.
[Link] !  Certains diront que JavaScript possède
des fonctions pour lire des fichiers texte.
En fait, javascript permet d'intégrer des
Après traitement, la chaîne de texte devient : applets Java ou ActiveX qui elles sont
Je vous invite à visiter le site de mon partenaire capables d'agir sur le disque dur. Il ne
[Link] s'agit pourtant pas de javascript pur : si
vous désactivez Java et ActiveX, rien ne se
function TJS_UrlCliquable(url) { passera.
var exp1=new RegExp("((ht|f)tps?://.*)[\\s]+","gi"); JavaScript seul ne peut pas non plus récupérer
l'adresse IP d'un visiteur. Il est indispensable
également de passer par des appels à Java ou
return [Link](exp1,"<A href='$1'>$1</A>"); à ActiveX.
}
3 - Les limites de JavaScript

LIMITES JAVASCRIPT  La principale limite de JavaScript est qu'il

ne permet pas de lire et d'écrire sur le
1 - Ce que permet JavaScript disque dur du visiteur (en dehors des
Le language JavaScript est parfaitement adapté cookies) et du serveur.
pour des traitements sur le poste du navigateur.  Il est donc impossible en javascript de
Voici quelques exemples de cas où JavaScript est générer par exemple un fichier de
efficace (voire irremplaçable) : connexions sur le serveur, ou un compteur
de visites sur une page donnée.
• Vérification de saisie dans des formulaires  De même, JavaScript ne peut pas
(Adresse, email) s'interfacer avec une base de données.
• Calculs simples suite à des saisies de Impossible alors de concevoir un forum de
formulaire (Tarifs, calculatrice) discussion, un script de sondage ou de
• Moteur de recherche (base de recherche vote, dont les données sont stockées, soit
définie par le webmaster) dans un fichier, soit en base sur le serveur.
• Gestion des dates et des heures (Date du Impossible aussi de lier un catalogue en
jour, Date de mise à jour, Calendriers) base sur le serveur à votre boutique en
• Gestion des cookies (Sauvegarde ligne.
d'information : nombre de visites, caddie
virtuel) 4 - Les alternatives
• Gestion de la navigation (Menus Il existe une multitude de technologies
dynamique, popup) actuellement qui permettent de combler les
• Animations graphiques (Dynamic HTML, lacunes de javascript. On peut les séparer en 2
MouseOver, bannières rotatives, jeux) catégories :
• etc...
• Celles dont le code est exécuté sur le
2 - JavaScript et la sécurité poste du visiteur (Flash , Java etc)
• Celles dont le code est exécuté par le
JavaScript a été conçu pour limiter (presque) serveur qui renvoie une page au format
complètement les risques pour le visiteur. HTML ( PHP, JSP,ASP , CGI etc)
En ce sens,
 on peut dire que exécuter un javascript sur
son navigateur ne comporte aucun risque
pour les données et le matériel.
 JavaScript ne permet pas d'écrire ou de
lire un fichier sur le disque dur du visiteur
ou sur le serveur.
 Ainsi, vous ne risquez pas de voir des
données confidentielles récupérées à votre
insu.

Vous aimerez peut-être aussi

Cours Javascript Partie 1 Moro
Pas encore d'évaluation
Cours Javascript Partie 1 Moro
50 pages
Intégration de JavaScript en HTML
Pas encore d'évaluation
Intégration de JavaScript en HTML
58 pages
Java Script
Pas encore d'évaluation
Java Script
51 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
52 pages
Formation JavaScript : Concepts Clés
Pas encore d'évaluation
Formation JavaScript : Concepts Clés
52 pages
Création de JavaScript en 1995
Pas encore d'évaluation
Création de JavaScript en 1995
70 pages
Introduction à JavaScript et variables
Pas encore d'évaluation
Introduction à JavaScript et variables
22 pages
JavaScript pour le Web Dynamique
100% (1)
JavaScript pour le Web Dynamique
73 pages
Cours de Programmation Web en JavaScript
Pas encore d'évaluation
Cours de Programmation Web en JavaScript
70 pages
Introduction au JavaScript pour débutants
Pas encore d'évaluation
Introduction au JavaScript pour débutants
54 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
73 pages
Introduction à JavaScript pour M2 ATE
Pas encore d'évaluation
Introduction à JavaScript pour M2 ATE
12 pages
Introduction à JavaScript et ses concepts
Pas encore d'évaluation
Introduction à JavaScript et ses concepts
86 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
53 pages
Cours Javascript Partie 1 Moro
Pas encore d'évaluation
Cours Javascript Partie 1 Moro
50 pages
Cours Javascript Partie 1 Moro
Pas encore d'évaluation
Cours Javascript Partie 1 Moro
50 pages
Introduction au JavaScript 7
Pas encore d'évaluation
Introduction au JavaScript 7
57 pages
Introduction au JavaScript en HTML
Pas encore d'évaluation
Introduction au JavaScript en HTML
31 pages
Introduction au JavaScript et ses fonctionnalités
Pas encore d'évaluation
Introduction au JavaScript et ses fonctionnalités
36 pages
Cours de Programmation JavaScript
100% (1)
Cours de Programmation JavaScript
88 pages
Cour Java
Pas encore d'évaluation
Cour Java
14 pages
Chapitre4 JS
Pas encore d'évaluation
Chapitre4 JS
46 pages
Introduction à JavaScript pour le Web
Pas encore d'évaluation
Introduction à JavaScript pour le Web
44 pages
Partie 3 Javascript
Pas encore d'évaluation
Partie 3 Javascript
37 pages
Introduction au module JavaScript
Pas encore d'évaluation
Introduction au module JavaScript
19 pages
Introduction au JavaScript et intégration HTML
Pas encore d'évaluation
Introduction au JavaScript et intégration HTML
58 pages
Introduction aux bases de JavaScript
Pas encore d'évaluation
Introduction aux bases de JavaScript
93 pages
Introduction à JavaScript pour le Web
Pas encore d'évaluation
Introduction à JavaScript pour le Web
51 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
33 pages
Introduction à la syntaxe JavaScript
Pas encore d'évaluation
Introduction à la syntaxe JavaScript
18 pages
Cours Complet de JavaScript PDF
Pas encore d'évaluation
Cours Complet de JavaScript PDF
52 pages
UA 5 Programmation Javascript
Pas encore d'évaluation
UA 5 Programmation Javascript
10 pages
Pratique de JavaScript pour Web
Pas encore d'évaluation
Pratique de JavaScript pour Web
10 pages
Introduction à JavaScript et HTML
100% (1)
Introduction à JavaScript et HTML
64 pages
Introduction à JavaScript et DOM
Pas encore d'évaluation
Introduction à JavaScript et DOM
48 pages
Introduction au JavaScript en Web
Pas encore d'évaluation
Introduction au JavaScript en Web
61 pages
Introduction à JavaScript et HTML5
Pas encore d'évaluation
Introduction à JavaScript et HTML5
32 pages
Introduction à JavaScript : Méthodes et Boucles
Pas encore d'évaluation
Introduction à JavaScript : Méthodes et Boucles
4 pages
Introduction au JavaScript et ses éléments
Pas encore d'évaluation
Introduction au JavaScript et ses éléments
19 pages
Introduction à JavaScript et ses fonctionnalités
Pas encore d'évaluation
Introduction à JavaScript et ses fonctionnalités
37 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
26 pages
Introduction à JavaScript et Cookies
Pas encore d'évaluation
Introduction à JavaScript et Cookies
131 pages
Javascript 20260305 212724 0000
Pas encore d'évaluation
Javascript 20260305 212724 0000
52 pages
Introduction à JavaScript 2024
Pas encore d'évaluation
Introduction à JavaScript 2024
37 pages
Cour Java Script
Pas encore d'évaluation
Cour Java Script
18 pages
Introduction au JavaScript et POO
Pas encore d'évaluation
Introduction au JavaScript et POO
122 pages
Révision de JavaScript Essentielle
100% (1)
Révision de JavaScript Essentielle
21 pages
Introduction au langage JavaScript
Pas encore d'évaluation
Introduction au langage JavaScript
38 pages
Introduction au JavaScript pour débutants
Pas encore d'évaluation
Introduction au JavaScript pour débutants
93 pages
Intégration de JavaScript dans HTML
Pas encore d'évaluation
Intégration de JavaScript dans HTML
73 pages
Guide complet sur JavaScript 2024-2025
Pas encore d'évaluation
Guide complet sur JavaScript 2024-2025
52 pages
Introduction à JavaScript 3
Pas encore d'évaluation
Introduction à JavaScript 3
57 pages
Introduction à JavaScript et HTML
Pas encore d'évaluation
Introduction à JavaScript et HTML
84 pages
Introduction au JavaScript en Web
Pas encore d'évaluation
Introduction au JavaScript en Web
66 pages
JavaScript : Langage Interprété et Dynamique
Pas encore d'évaluation
JavaScript : Langage Interprété et Dynamique
15 pages
Introduction au langage Javascript
Pas encore d'évaluation
Introduction au langage Javascript
77 pages
Introduction au JavaScript et DOM
Pas encore d'évaluation
Introduction au JavaScript et DOM
64 pages
Résultats académiques KAZAD KABWIK 2025
Pas encore d'évaluation
Résultats académiques KAZAD KABWIK 2025
1 page
Aero Gea Multimaxx NG
Pas encore d'évaluation
Aero Gea Multimaxx NG
32 pages
Production d'engrais organiques de qualité
Pas encore d'évaluation
Production d'engrais organiques de qualité
34 pages
Système de gestion des auberges universitaires
Pas encore d'évaluation
Système de gestion des auberges universitaires
32 pages
Rapport de stage à La Cave Simson Hôtel
Pas encore d'évaluation
Rapport de stage à La Cave Simson Hôtel
16 pages
Test de robustesse en CLHP pour timolol
100% (1)
Test de robustesse en CLHP pour timolol
18 pages
Réseau de Transmission CDMA par FH
100% (2)
Réseau de Transmission CDMA par FH
67 pages
Bilan des impacts et mesures d'atténuation
Pas encore d'évaluation
Bilan des impacts et mesures d'atténuation
28 pages
Devoir de Chimie : Thermodynamique et Alcènes
Pas encore d'évaluation
Devoir de Chimie : Thermodynamique et Alcènes
4 pages
Introduction au PHP pour débutants
Pas encore d'évaluation
Introduction au PHP pour débutants
2 pages
2330 Em24042017 PDF
Pas encore d'évaluation
2330 Em24042017 PDF
15 pages
Syndrome de Wiskott-Aldrich : Guide Complet
Pas encore d'évaluation
Syndrome de Wiskott-Aldrich : Guide Complet
5 pages
Comprendre le Droit Fiscal au Maroc
Pas encore d'évaluation
Comprendre le Droit Fiscal au Maroc
1 page
Guide de démarrage Infinix X 557
Pas encore d'évaluation
Guide de démarrage Infinix X 557
7 pages
Comprendre la Rugosité en Usinage
Pas encore d'évaluation
Comprendre la Rugosité en Usinage
3 pages
Fiv 64573888 BX-341-MZ 114667047
Pas encore d'évaluation
Fiv 64573888 BX-341-MZ 114667047
1 page
Répertoire des opérations en Afrique
Pas encore d'évaluation
Répertoire des opérations en Afrique
369 pages
Thèmes de gestion juridique et fiscale
Pas encore d'évaluation
Thèmes de gestion juridique et fiscale
2 pages
Gestion des déchets en Zambie : état et défis
Pas encore d'évaluation
Gestion des déchets en Zambie : état et défis
2 pages
C2 - Des Édifices Ordonnés, Les Cristaux
Pas encore d'évaluation
C2 - Des Édifices Ordonnés, Les Cristaux
25 pages
Billet électronique Royal Air Maroc
Pas encore d'évaluation
Billet électronique Royal Air Maroc
3 pages
Chapitre 6 - Les Applications, La Production Et La Distribution de L'énergie Électrique - 090311
Pas encore d'évaluation
Chapitre 6 - Les Applications, La Production Et La Distribution de L'énergie Électrique - 090311
2 pages
Butée Réglable en Dessin Technique
100% (2)
Butée Réglable en Dessin Technique
4 pages
Le Genre Du Capital by Céline Bessière, Sibylle Gollac
Pas encore d'évaluation
Le Genre Du Capital by Céline Bessière, Sibylle Gollac
355 pages
Glossaire de la Logistique Automobile
Pas encore d'évaluation
Glossaire de la Logistique Automobile
13 pages
DROIT Société Anonyme
100% (2)
DROIT Société Anonyme
31 pages
TP 1 Note de Musique
Pas encore d'évaluation
TP 1 Note de Musique
2 pages
Communication entre postes IP et réseaux
Pas encore d'évaluation
Communication entre postes IP et réseaux
5 pages
Planification réseau UMTS avec Atoll
Pas encore d'évaluation
Planification réseau UMTS avec Atoll
10 pages
Organigramme du Pôle Services Publics
Pas encore d'évaluation
Organigramme du Pôle Services Publics
1 page