Cours Javascript

D .Mailliet

DEUST TIC-RM

Cours Javascript.......................................................................................................................................................................4
I. Introduction .....................................................................................................................................................................4
II.
Diffrents langages de script........................................................................................................................................4
III.
Javascript pour excuter des commandes systme.......................................................................................................5
IV.
Javascript Dans une page html ou hta..........................................................................................................................6
A.
Gnralits ...............................................................................................................................................................6
B.
Erreur dans un javascript .........................................................................................................................................6
1. Erreur simple ...........................................................................................................................................................6
2. ErreurGrave .............................................................................................................................................................6
C.
Commentaires ..........................................................................................................................................................7
D.
Constantes, Variables, types ....................................................................................................................................7
1. Variables ..................................................................................................................................................................7
2. Constantes................................................................................................................................................................8
3. La valeur sans valeur ...............................................................................................................................................8
4. oprateurs divers......................................................................................................................................................8
a) Oprateurs dassignement :..................................................................................................................................8
b)
Oprateurs de comparaison :............................................................................................................................8
c) Oprateurs affectation conditionnelle.................................................................................................................8
E.
Types .......................................................................................................................................................................9
1. Gnralits ...............................................................................................................................................................9
a) Syntaxe objet .......................................................................................................................................................9
b)
Syntaxe Classe .................................................................................................................................................9
c) Syntaxe imprative ..............................................................................................................................................9
2. Boolens ..................................................................................................................................................................9
a) Oprateurs logiques : ...........................................................................................................................................9
3. Les nombres.............................................................................................................................................................9
a) Les entiers:...........................................................................................................................................................9
b)
Les nombres dcimaux: .................................................................................................................................10
c) Les oprateurs ....................................................................................................................................................10
d)
Les constantes mathmatiques .......................................................................................................................10
e) Les fonctions......................................................................................................................................................10
4. Les chaines: ...........................................................................................................................................................10
a) Loprateur de Concatnation............................................................................................................................11
b)
Les fonctions..................................................................................................................................................11
5. Les tableaux:..........................................................................................................................................................11
a) Tableaux simples ...............................................................................................................................................11
b)
Tableaux associatifs .......................................................................................................................................12
c) Tableaux multidimentionnels.............................................................................................................................12
d)
fonctions ........................................................................................................................................................13
6. Les dates: ...............................................................................................................................................................14
a) Fonctions............................................................................................................................................................14
F.
Les structures de contrle ......................................................................................................................................14
1. Conditionnelle........................................................................................................................................................14
a) Le Si...................................................................................................................................................................14
b)
Le Cas ............................................................................................................................................................15
2. Boucles ..................................................................................................................................................................15
a) Boucle pour........................................................................................................................................................15
b)
Pour dans .......................................................................................................................................................16
c) Boucle tant que ..................................................................................................................................................16
3. Rupture et continuit de boucle .............................................................................................................................17
G.
Les fonctions..........................................................................................................................................................17
1. Passage des arguments par valeur..........................................................................................................................17
2. Passage des arguments par adresse (par variable)..................................................................................................18
3. Arit variable .........................................................................................................................................................18
H.
Les procdures .......................................................................................................................................................18
I. Porte des variables ...................................................................................................................................................19
Technologies Internet

Table des matires

D. Mailliet

DEUST TIC-RM

J.
K.

Classes et Objets........................................................................................................................................................ 19
Entres/Sorties....................................................................................................................................................... 20
1. sorties .................................................................................................................................................................... 20
2. entres ................................................................................................................................................................... 20
L.
Fichiers.................................................................................................................................................................. 21
M.
Inclusion de fichiers .............................................................................................................................................. 21
N.
Evnements : traitement ........................................................................................................................................ 21
O.
Evnements : simulation ....................................................................................................................................... 22
Dans les 2 exemples suivants on envoie automatiquement le formulaire ci-dessus.............................................................. 22
P.
Objets prdfinis ................................................................................................................................................... 23
1. Exemple trs important : ....................................................................................................................................... 23
2. Les tableaux prdfinis.......................................................................................................................................... 24
3. Exemple : communication entre frames ................................................................................................................ 25
4. Exercice :............................................................................................................................................................... 26
Cours Javascript .................................................................................................................................................................... 29

Technologies Internet

Table des matires

D. Mailliet

Cours Javascript

I.

Introduction

Javascript est comme son nom lindique un langage de scripts don la syntaxe ressemble celle du
langage jave. Il ne sagit l que dune ressemblance Car le Java est un langage compil (en langage
intermdiaire) alors que le javascript est interprt. Le Java est un langage orient objet alors que le
javascript est partiellement impratif et partiellement objet.
Le javascript est utilis dans 2 cas :

Rendre ractives des pages html

Raliser des programmes de toutes sortes permettant de faire des calculs, classements,
traitements divers et automatisation des commandes systmes

Les balises html permettent la mise en forme de pages de textes qui apparaissent dans les fentres des
navigateurs tels Internet Explorer Mozilla Firefox Google Chrome Opra
Cette mise en page est purement statique. Si on souhaite la dynamiser, faire en sorte quelle ragisse
aux actions de lutilisateur, il faut y adjoindre des scripts.
Il est possible de faire excuter des instructions par le systme dexploitation : on peut automatiser des
taches que lon fait habituellement en ligne de commande dans une console ou terminal (menu
dmarrer/Excuter cmd ) ou en cliquant dand diffrentes fentres.
Il est enfin possible dcrire des programmes de traitements divers le langage interprt nest pas le
plus adapt, cest nanmoins possible.

II.

Diffrents langages de script

Windows (langage de script) et Internet Explorer (page html) interprtent diffrents langages
de script Visual basic, Javascript et Perl par exemple le fichier coucou2.wsf :
<job id="coucou">
<script language="vbscript">
wscript.echo "coucou(vbscript)"
</script>
<script language="javascript">
// affiche coucou
wscript.echo ("coucou(javascript)");
</script>
<script language="perlscript">
#affiche coucou
$WScript->echo ("coucou(perlsript)");
</script>
</job>

Contient des instructions dans les 3 langages.

Seul le Javascript est interprt par tous les navigateurs

Technologies Internet

JS : Javascript

D. Mailliet

DEUST TIC-RM

III. Javascript pour excuter des commandes systme

Prenons un exemple, dans un diteur de texte (pas un traitement de texte) on crit le texte :
WScript.Echo("bonjour") ;

Et sauvegardons le dans un fichier nomm salut.js

Dans lexemple ci-dessous, ce fichier a t sauvegard dans le rpertoire
D:\Documents\Enseignement\Prog\javascript Ouvrons une console dans ce rpertoire

Examinons les effets des commandes :

cscript salut.js
cscript salut.js //B
cscript salut.js //Nologo
font apparatre la phrase dans la console
salut.js
start salut.js
wscript salut.js
ainsi quun double clic sur salut.js dans lexplorateur
font apparatre une petite fentre Windows Script Host contenant la phrase
type salut.js permet de voir le contenu du fichier
Les commandes wscript /? et cscript /? prcisent les paramtres que lon peut ajouter (comme //B et
//Nologo)

Technologies Internet

Table des matires

D. Mailliet

DEUST TIC-RM

IV. Javascript Dans une page html ou hta

Une page html (HyperText Markup Language) contient du texte mis en page par des balises elle
peut tre locale, mais en gnral provient dun serveur. Pour des raisons de scurit les scripts ne
peuvent intervenir sur les fichiers locaux (pas plus quexuter des commandes systme), sinon,
certains sites malveillants pourraient, lorsque lon irait les consulter, dtruire ou modifier des fichiers
sur notre ordinateur grace aux scripts quils contiendraient.
Les fichiers Html+Script sont distants sexcutent dans un navigateur et ne peuvent exuter des
commandes systme. Les fichiers hta (HTML Application) contiennent la mme chose que les html
mais sont locaux, sexcutent dans une fentre windows et peuvent exuter des commandes systme

A.

Gnralits

Dans un fichier HTML:

< script type="text/javascript" >
...
</script>

Lancienne norme est encore quelquefois utilise :

<script language="javascript">
...
</script>

Il est aussi possible dcrire tout simplement :

<script >
...
</script>

Selon la norme en vigueur, seule la premire cirture est autorise

Exemple:
<html>
<body>
<script type="text/javascript" >
<!-document.write(bonjour);
//-->
</script>
</body>
</html>

< script type="text/javascript" >

<!-document.write(<html> /n);
document.write(<body> /n);
document.write(bonjour /n);
document.write(</body>/n);
document.write(</html>
//-->
</script >

est quivalent

mais ne prsente aucun intert

B.

Erreur dans un javascript

En Javascript, il y a 2 types d'erreurs :

1.

Erreur simple

Le script (programme) sexcute de < script type="text/javascript" > jusqu lapparition de la

premire erreur puis rien ne se passe entre la premire erreur et </ script >
2.

ErreurGrave

Rien ne s'excute entre < script type="text/javascript" > et </ script >
Technologies Internet

Table des matires

D. Mailliet

DEUST TIC-RM

C.

Commentaires

Un script javascript se commente comme en C:

Exemple :
< script type="text/javascript" >
<!-// commentaire de fin de ligne
/* commentaire
sur plusieurs
lignes */
//-->
</ script >

Tout ce qui se trouve dans un commentaire est ignor. Il est conseill, comme toujours, de commenter
largement ses scripts.

D.

Constantes, Variables, types

Le code javascript scrit dans une page Html entre les balises :
< script type="text/javascript" >
<!-
//-->
</SCRIPT>

Ce code est interprt par le navigateur.

Les balises
<!-- //-->
sont l au cas ou le navigateur (trop ancien) ninterprterait pas le javascript et serait interprt par le
navigateur comme un commentaire html
1.

Variables

Le typage des variables est implicite en javascript. Il nest donc pas ncessaire de dclarer leur type au
pralable ni mme de les dclarer avant leur utilisation.
Le nom des variables est sensible la casse (ie : x != X).
Les noms de variables suivent les mmes rgles de nommage que les autres entits javascript. Un nom
de variable valide doit commencer par une lettre ou un soulign (_), suivi de lettres, chiffres ou
souligns.
Une lettre peut tre une des lettres minuscules (a z) ou majuscules (A Z), et les caractres ASCII
de 127 255 (0x7f-0xff).
Exemple . Validit des noms de variables
< script type="text/javascript" >
var MaVar ; // Dclaration seule
var mavar = "Jean"; // dclaration avec affectation initiale
MaVar = "Paul"; // affectation
document.write(mavar+', '+MaVar);
// affiche "Jean, Paul"
// 4site = 'pas encore'; // invalide : commence par un nombre
_4site = 'pas encore'; // valide : commence par un soulign&eacute;
mas = 'jaune';
// valide : le code ASCII de est 239.
document.write( mas );
document.write( _4site );
Technologies Internet

JS : Javascript

D. Mailliet

DEUST TIC-RM

</SCRIPT>

Les variables peuvent tre de type entier (integer), rel (double), chane de caractres (string) ,
boolen (boolean)., tableau (array), objet (object)
Il est possible de convertir une variable en un type primitif grce au cast (comme en C, java ou
delphi).
Le cast est une conversion de type. Laction de caster (transtyper) consiste convertir une variable
dun type en un autre.
Exemple :
chn= "12";
nbr = parseInt(chn);

// chn vaut la chane 12

// nbr vaut le nombre entier 12

Quelques fonctions :
2.

Constantes

Lutilisateur ne peut dfinir des constantes dont la valeur est fixe une fois pour toute !
3.

La valeur sans valeur

La valeur spciale null reprsente l'absence de valeur. Une variable avec la valeur NULL n'a pas de
valeur. La constante null est sensible la casse.
var mavar= null;

Par exemple prompt() renvoie null quand lutilisateur appuie sur annuler.
4.

oprateurs divers
a)

Oprateurs dassignement :

Pour laffectation on utilise = (pour la comparaison = =)

, *= /=, +=, -=, %= ; .=
a=3 ;
x*=y // quivalent x=x*y,
b)

Oprateurs de comparaison :

,= = (galit), < (infrieur strict), <= (infrieur large), >, >=, != (diffrence)
c)

Oprateurs affectation conditionnelle

Signalons un oprateur trs spcial qui quivaut une structure conditionnelle complexe if then else
la diffrence quil renvoie un rsultat de valeur pouvant ne pas tre un boolen : loprateur ternaire.
Syntaxe :
(condition)?(expression1):(expression2);
Si la condition est vrai alors value et renvoie lexpression1 sinon value et renvoie lexpression2.
Exemple :
nbr = (toto>10)?(toto):(toto%10);

Dans cet exemple, la variable nbr prend toto pour valeur si toto est strictement suprieur 10, sinon
vaut le reste de la division entire de toto par 10.

Technologies Internet

JS : Javascript

D. Mailliet

DEUST TIC-RM

E.

Types
1.

Gnralits

Mme si les variables n'ont pas tre explicitement dclares, javascript n'en conserve pas moins la
notion de type, plus exactement la notion de classe et dobjet.
Une connaissance de la POO (programmation oriente objet) facilite la comprhension de ce qui va
suivre. Nanmoins, en premire approche, mais vraiment en toute premire approche (les puriste vont
pousser les haut cris !!), on peut dire voix basse (et de faon peine audible) que, au niveau syntaxe,
le paramtre principal de la fonction, au lieu de le mettre derrire le nom de la fonction, on lcrit
devant et on met un point comme sparateur.
Selon les fonctions, on utilise lune des 3 formes :
a)

Syntaxe objet

Dans un langage de programmation impratif pour obtenir une sous-chaine extraite de la chaine chn
entre les rangs deb et fin , on crirait : substring(chn,deb,fin), en javascript, on crit :
chn.substring(deb,fin),

pour la longueur du mot bonjour , on crirait :length("bonjour"), ici

"bonjour".length
b)

Syntaxe Classe

Certaines fonctions ont comme syntaxe celle de la mthode de classe : le nom de la classe (attention
la casse) est suivi du nom de la mthode ou de lattribut.
a = Math.sqrt(Math.sin(Math.PI / 3))

Que lon peut crire en mettant Math en facteur

With (Math){ a=sqrt(sin(PI / 3)) }

0.9306048591020996
c)

Syntaxe imprative

Contrairement ce qui est crit plus haut, on ncrira pas "12".parseInt();

nbr = parseInt("12");
2.

// nbr vaut le nombre entier 12

Boolens

C'est le type le plus simple. Un boolen prend les valeurs de TRUE ou FALSE.
a)

Oprateurs logiques :

, && (et), , || (ou), ! (non)

3.

Les nombres
a)

Les entiers:

Les entiers sont de nombres dont la plage dpend des plate-formes, mais reste quivalente la porte
du type long en C.
On pourra exprimer un entier en dcimal, hexadcimal ou encore en octal.
decimal = 10;
hexa = 0x0F;
octal = 020;

Technologies Internet

JS : Javascript

D. Mailliet

DEUST TIC-RM

b)

Les nombres dcimaux:

. On peut exprimer ce type sous forme de nombre normal avec un point dcimal, ou en notation
scientifique.
normal = 0.017;
scientifique = 17.0E-3;
c)

Les oprateurs

+ (addition), - (soustraction), * (multipli), / (divis), % (modulo), ++ (incrment), --(dcrment). Ces

deux derniers peuvent tre pr ou post fixs
i=5;
i++ ; // i vaut 6 equivalent i+=1 ou encore i=i+1
document.write( i++) ; // affiche 6 et ensuite donne i la valeur 7
document.write( ++i) ; // donne i la valeur 8 et ensuite affiche 8
d)

Les constantes mathmatiques

Math.PI (avec des majuscules M P I) la valeur de soit 3.141592653589793

e)
syntaxe
Math.abs(nombre)
Math.acos(nombre)
Math.asin(nombre)
Math.atan(nombre)
Math.ceil(nombre)
Math.cos(nombre)
Math.exp(nombre)
floor(nombre)
Math.log(nombre)
max(nombre1, nombre2)
min(nombre1, nombre2)
pow(base, exposant)
Math.random()
round(nombre)
Math.sin(angle)
Math.sqrt(nombre)
Math.tan(nombre)

4.

Les fonctions
description
la valeur absolue d'un nombre
l'arc cosinus en radian d'un nombre entre -1 et 1 (0 sinon)
l'arc-sinus en radian d'un nombre compris entre -1 et 1 (0 sinon)
l'arc tangente en radian d'un nombre entre -pi/2 et pi/2
l'entier le plus proche par valeur suprieure
le cosinus d'un angle en radian
la valeur exponentielle d'une valeur
l'entier le plus proche par valeur infrieure
le log de nombre
le maximum entre deux nombres
le minimum entre deux nombres
base puissance exposant
une valeur alatoire entre 0 et 1
l'entier le plus proche de la valeur donne en argument
le sinus de l'angle donn en radian
la racine carre de Math.sqrt(number)
la tangente du nombre donn en radian

Les chaines:

Une chaine est une suite de caractres. Elle peut tre dlimite par des guillements simples ou
doubles.
titi = "toto";
titi = toto;
document.write( "Je m'appelle " + titi);
document.write( 'Je m\'appelle ' + 'titi ');

Le premier appel document.write( va afficher je mappelle toto tandis que le deuxime va

afficher je mappelle titi .(indpendamment des guillemets ou apostrophes)
Les squences d'chappement de javascript:
\n: Nouvelle ligne
\t: Tabulation
Technologies Internet

JS : Javascript

10

D. Mailliet

DEUST TIC-RM

\r: Retour chariot

\\: Anti slash
\: Signe dollar
\ : lapostrophe
\" : le guillemet
a)

Loprateur de Concatnation

le + (plus) .
document.write( 'Je m+ "appelle "+titi); // va afficher je mappelle toto si la variable titi contient
a = "Bonjour " ;
a .+= "monde" ; // quivalent a = a + "monde" ; a contient Bonjour monde
b)

Les fonctions

syntaxe
text.anchor(nom)
chaine.big()
chaine.blink()
chaine.bold()
chane.charAt(index)
escape(chaine)
chaine.fixed()
chaine.fontcolor(couleur)
chaine.fontsize(taille)
chaine1.indexOf(chaine2,[depuis])
chaine.italics()
chaine1.lastIndexOf(chaine2, [depuis])
texte.link(URL)
chaine.small()
chaine.strike()
chaine.sub()
chaine.substring(position1, position2)
chaine.sup()
chaine.toLowerCase()
chaine.toUpperCase()

5.

description
Cre un signet dans la page HTML
positionne le couple de balises BIG (gros caractres) autour du texte
positionne le couple de balises BLINK (clignotant) autour du texte
positione le couple de balises BOLD (gras)
le caractre index de la chane (commenant 0)
en caractres ASCII des caractres ISO Latin-1 (& devient %26)
positionne le couple de balises TT (fixe) autour du texte
la couleur donne la chane de caractres concerne (quivalent
&tl;FONT COLOR=couleur>)
la taille de police donne la chane de caractres concerne
(quivalent &tl;FONT size=taille>)
la position de chane2 recherche dans chaine1 partir de la position
depuis(-1 si pas trouv)
positionne le couple de balises I (italique) autour du texte
retourne la dernire occurrence de chaine2 dans chaine1 partir de la
position depuis
cre un lien hypertexte vers URL partir de texte
positionne le couple de balises SMALL (petites lettres) autour du texte
positionne le couple de balises STRIKE (biff) autour du texte
positionne le couple de balises SUB(indice) autour du texte
la chaine de caractres commenant la position1 et finissant la
position2
positionne le couple de balises SUP (exposant) autour du texte
convertit la chaine concerne en minuscule
convertit la chaine concerne en majuscule

Les tableaux:
a)

Tableaux simples

Un tableau est un type de donnes pouvant contenir plusieurs valeurs, indexes numriquement
partir de ZERO.
Il est possible de prciser ou non le nombre dlments
var tableau = new Array(4) ;

tout comme :
var tableau = new Array() ;
Technologies Internet

JS : Javascript

11

D. Mailliet

DEUST TIC-RM

puis :
tableau[0] = "titi";
tableau[1] = "toto!";
tableau[3]="tata";

Remarquons
le A majuscule Array
Une chane de caractres nest pas un tableau de caractres.
jours = new array("Lundi","Mardi","Mercredi","Jeudi", "Vendredi","Samedi","Dimanche");
b)

Tableaux associatifs

La cl (index) est forcment numrique commenant 0. Lindexation ne peut se faire autrement

c)

Tableaux multidimentionnels

Il sagit de tableaux de tableaux. Exemple :

var toto = new Array( new Array(1,2,3), new Array(4,5,6)) ;
document.write( toto[1][2]); // affiche 6 ; les indices (cl) commencent 0 !
var tata = new Array();
tata [1]=new Array(1,2,3);
tata [2]=new Array(4,5,6) ;
//
document.write( tata[2][2]);

// affiche 6 ; ici les indices (cl) commencent toujours 0 mais la

// ligne 0 nest pas dfinie ni dclare

//document.write( tata[0][0]); // provoque une erreur

//var tata[0]=new Array();
// provoque une erreur grave
tata[0]=new Array();
// maintenant, dclar mais non dfini
document.write( tata[0][0]); // affiche undefined

Technologies Internet

JS : Javascript

12

D. Mailliet

DEUST TIC-RM

d)
Mthode

fonctions
Description

Exemplse

concat(valeur,...)

concatne des tableaux.

var tableau = new

Array('un','deux','trois','quatre','cinq');
var tableau2 = new Array('six','sept','huit','neuf','dix');
tableau1.concat('tableau2')

join(sparateur)

forme une chane de caractre

partir du tableau.

var tableau = new Array('push','pop','reverse','shift');

tableau.join(', ');

supprime et retourne le dernier

lment du tableau.

var tableau = new Array('o','ko','Mo','Go','To');

tableau.pop();

push(valeur,...)

ajoute des lments un tableau

(NE 4).

var tableau = new Array('0');

tableau.push('1','2','3','4');

reverse()

permute les lments du tableau.

var tableau = new Array('0','1','2','3');

tableau.reverse();

shift()

dcale les lments du tableau.

var tableau = new

Array('fvrier','mars','avril','mai','juin');
tableau.shift();

slice(dbut, fin)

retourne une partie du tableau.

var tableau = new Array(45,77,20,87,10,32);

tableau.slice(1, 2);

sort(fonction_tri)

trie les lments du tableau.

var tableau = new

Array('Marc','Anglique','Edith','Annick','Isabelle');
tableau.sort();

splice (dbut,
nb_lt__effacer,
valeur, ...)

insre, supprime ou remplace

des lments du tableau.

var tableau = new Array('a','1','2','&','\?','f','g');

tableau.splice(1, 4, 'b', 'c', 'd', 'e');

toString()

convertit un tableau en une

chane de caractres.

var tableau = new

Array('Ceci','est','un','programme','javascript','.')
tableau.toString()

unshift()

ajoute des lments au dbut

d'un tableau.

var tableau = new

Array('Mardi','Mercredi','Jeudi','Vendredi','Samedi','Di
manche')
tableau.unshift('lundi')

Technologies Internet

JS : Javascript

13

D. Mailliet

DEUST TIC-RM

6.

Les dates:
a)

Fonctions

syntaxe
date.getDate()
date.getDay()
date.getHours()
date.getMinutes()
date.getMonth()
date.getSeconds()
date.getTime()
date.getTimezoneOffset()
date.getYear()
Date.parse(chainedate)
date.setDate(valeur)
date.setDay(valeur)
date.setHours(valeur)
date.setMinutes(valeur)
date.setMonth(valeur)
date.setSeconds(valeur)
date.setTime(valeur)
date.setYear(valeur)
chainedate.toGMTString()

description
le jour du mois de la date concerne (entier de 1 31)
le jour de la semaine de la date concerne (0=dimanche)
l'heure de la journe de la date concerne (0 23)
la minute de l'heure de la date concerne (0 59)
le mois de la date concerne (0 11)
la seconde de la minute de la date concerne (0 59)
l'heure dans la valeur numrique correspondante
la diffrence (en minutes) entre l'heure courante et l'heure GMT
le nombre d'annes coules depuis 1900
le nombre de millisecondes depuis le 01/01/1970
positionne le jour du mois de la date concerne (entier de 1 31)
positionne le jour de la semaine de la date concerne (0=dimanche)
positionne l'heure de la journe de la date concerne (0 23)
positionne la minute de l'heure de la date concerne (0 59)
positionne le mois de la date concerne (0 11)
positionne la seconde de la minute de la date concerne (0 59)
positionne l'heure dans la valeur numrique correspondante
positionne le nombre d'annes coules depuis 1900
convertit une date en chane de caractres en suivant les conventions
GMT (Mar, 01 Mar 1996 20:00:00 GMT)
convertit une date en chane de caractres en suivant les conventions
locales (03/01/96 20:00:00)
le nombre de secondes coules depuis le 01/01/1970 0h0mn

chainedate.toLocaleString()
Date.UTC(an, mois, jour [, h] [,
min] [, sec])

F.

Les structures de contrle

Elles ressemblent fortement celle de C, Java, Javascript. On se contente donc de donner ici une srie
dexemples
1.

Conditionnelle
a)

Le Si

Syntaxes : if (test1) instructions1 else instructions2

Elseif nexiste pas en javascript, il faut imbriquer les if. else est facultatif les parenthses autour des
tests sont obligatoires. Si les instructions sont multiples, il faut les mettre entre accolades {}.
Attention : coller else et if provoque une erreur grave.
a = 3;
b = 5;
if (a > b)
document.write( "a est plus grand que b");
else if (a == b)
document.write( "a est &eacute;gal &agrave; b");
else
document.write( "a est plus petit que b");

Technologies Internet

JS : Javascript

14

D. Mailliet

DEUST TIC-RM

dans lexemple ci-dessous, 2 instructions sont excutes si le test est valide, on les met donc entre
accolades {} et il ny a pas de clause elseif ni else.
if (a > b) {
document.write( "a est plus grand que b");
b = a;
}
if (a == 5){
document.write( "a &eacute;gale 5");
document.write( "...");
} else if (a == 6){
document.write( "a &eacute;gale 6");
document.write( "!!!");
} else
document.write( "a ne vaut ni 5 ni 6");
b)

Le Cas

switch (i) {
case 0:
document.write( "i &eacute;gale 0");
break;
case 1:
document.write( "i &eacute;gale 1");
break;
case 2:
document.write( "i &eacute;gale 2");
break;
}

est quivalent
if (i == 0) {
document.write( "i &eacute;gale 0");
}
if (i == 1) {
document.write( "i &eacute;gale 1");
}
if (i == 2) {
document.write( "i &eacute;gale 2");
}

le break est obligatoire,par exemple :

i=1;
switch (i) {
case 0:
document.write( "i &eacute;gale 0");
case 1:
document.write( "i &eacute;gale 1");
case 2:
document.write( "i &eacute;gale 2");
}

affiche
i gale 1i gale 2
2.

Boucles
a)

Boucle pour

Syntaxe : for (expr1; expr2; expr3) instruction

La premire expression (expr1) est value (excute), quoi qu'il arrive au dbut de la boucle.
Au dbut de chaque itration, l'expression expr2 est value. Si l'valuation vaut TRUE, la boucle
continue et l'instruction est excute. Si l'valuation vaut FALSE, l'excution de la boucle s'arrte.
Technologies Internet

JS : Javascript

15

D. Mailliet

DEUST TIC-RM

A la fin de chaque itration, l'expression expr3 est value (excute).

expr1; expr2; expr3 sont facultatifs
// exemple 1
for (i = 1; i <= 10; i++) {
document.write( i);
}
// exemple 2
for (i = 1;;i++) {
if (i > 10) {
break;
}
document.write( i);
}
// exemple 3
i = 1;
for (;;) { // boucle infinie
if (i > 10) {
break; // rupture de boucle
}
document.write( i);
i++;
}
/* exemple 4 : le mme que le 3 mais avec
contraction de 2 lignes */
i = 1;
for (;;) {
if (i > 10) {
break;
}
document.write( i++);
}
// exemple 5
for (i = 1; i <= 10; document.write(i++)) ;
// exemple 6
for (i = 0; i <= 9; document.write( ++i)) ;

Les 5 exemples affichent tous 12345678910

Attention : lexemple 1 est de loin le meilleur ! Il ne faut surtout pas abuser des contractions
comme dans les exemples 5 et 6 qui rendent les programmes illisibles et dificilement maintenables
b)

Pour dans

var toto = new Array(1,7,2,6,4,5,8,9);

for (var i in toto) document.write(i+" : "+ toto[i]+" , ");

Affiche : 0 : 1 , 1 : 7 , 2 : 2 , 3 : 6 , 4 : 4 , 5 : 5 , 6 : 8 , 7 : 9 ,

c)

Boucle tant que

Syntaxe :
While (test) instruction ;
La boucle nexcute quune seule instruction, pour en excuter plusieurs, il faut les mettre entre
accolades { }
Technologies Internet

JS : Javascript

16

D. Mailliet

DEUST TIC-RM

i = 1;
while (i <= 10) document.write( i++);

Affiche 12345678910
3.

Rupture et continuit de boucle

Break permet de quiter immdiatement une boucle :

for (;;) {
if (i > 10) {
break;
}
document.write( i++);
}

continue permet de passer litration suivante sans excuter le reste des instructions :
var toto = new Array(1,7,2,6,4,5,8,9);
for (var i in toto) {
if ( (toto[i] % 2) !=0 ) continue; // vite les valeurs paires
document.write( toto[i]+" , ");
}

Affiche : 2 , 6 , 4 , 8 ,
On obtient le mme rsultat avec :
var toto = new Array(1,7,2,6,4,5,8,9);
for (var i in toto) {
if ( (toto[i] % 2) = 0 ) document.write( toto[i]+" , ");
}

G.

Les fonctions

Syntaxe :
function nom (arg_1, arg_2, ..., arg_n) {
corps de fonction
return retval;
}
On peut dclarer les fonctions nimporte o dans le programme. Cependant une bonne rgle
consiste les dclarer avant de les utiliser (Ne pas suivre lexemple ci-dessous)
1.

Passage des arguments par valeur

La valeur des paramtres nest pas modifi :

<html>
<body>
<SCRIPT LANGAGE="JavaScript">
<!--

function incr(a,b){
a += b; // a = a + b
return a ;
}

c=2;
document.write( incr(c,3));
document.write(" , ");
document.write( c);

// -->
</SCRIPT>
</body>
</html>

Affiche: 5 , 2
Technologies Internet

JS : Javascript

17

D. Mailliet

DEUST TIC-RM

Il es prfrable de dclarer les fonctions dans la partie HEAD :

<html>
<head>
<SCRIPT LANGAGE="JavaScript">
<!-function incr(a,b){
a += b; // a = a + b
return a ;
}
// -->
</SCRIPT>
</head>
<body>
<SCRIPT LANGAGE="JavaScript">

<!-c=2;
document.write( incr(c,3));
document.write(" , ");
document.write( c);
// -->
</SCRIPT>
</body>
</html>

Remarque On aurait pu se contenter de mettre function incr(a,b){ return a+b ;}

2.

Passage des arguments par adresse (par variable)

Le passage par adresse nexiste pas en javascript

3.

Arit variable

Javascript dfinit la classe Fonction et les paramtres des fonctions sont rangs dans un tableau
arguments et le nombre dlments dans length
<html>
<head>
<SCRIPT LANGAGE="JavaScript">
<!--

<body>
<SCRIPT LANGAGE="JavaScript">
<!-c=2;
document.write( inc(c,3)+"<br />");
document.write( inc(c)+"<br />");
document.write( c +"<br />");
// -->
</SCRIPT>

function inc(){
if (inc.arguments.length==1)
return inc.arguments[0] +1 ;
else
return inc.arguments[1] + inc.arguments[0];
}// -->
</SCRIPT>
</head>

</body>
</html>

Remarquons que le transtypage entier chane est automatique.

Autre exemple :
function somme(){
var res = 0;
for (var i = 0; i < somme.arguments.length ; i++) res +=somme.arguments[i] ;
return res;
}// -->

H.

Les procdures

Cest la mme syntaxe que pour les fonctions on ne met pas de ligne return

Technologies Internet

JS : Javascript

18

D. Mailliet

DEUST TIC-RM

I.

Porte des variables

La porte d'une variable dpend du contexte dans lequel la variable est dfinie. Pour la majorit des
variables, la porte concerne la totalit d'un script javascript. Mais, lorsque vous dfinissez une
fonction, la porte d'une variable dfinie dans cette fonction est locale la fonction. Par exemple:
var a = 1; // porte globale avec ou sans var
function test1() {
document.write( "test1, a vaut :"+a+"<br />");
}
function test2() {
a = 2; // porte globale
document.write( "test2, a vaut :"+a+"<br />");
}
function test3() {
var a = 3; // porte locale
document.write( "test3, a vaut :"+a+"<br />");
}
function test4() {
b = 4; // porte globale
document.write( "test4, b vaut :"+b+"<br />");
}
function test5() {
var c = 5; // porte locale
document.write( "test5, c vaut :"+c+"<br />");

}
document.write( "programme, a vaut :"+a+"<br
/>");
test1();
document.write( "programme, a vaut :"+a+"<br
/>");
test2();
document.write( "programme, a vaut :"+a+"<br
/>");
test3();
document.write( "programme, a vaut :"+a+"<br
/>");
test4();
document.write( "programme, b vaut :"+b+"<br
/>");
test5();
document.write( "programme, c vaut :"+c+"<br
/>"); // pas d'affichage jusqu' la fin ==> erreur

affiche le message :
programme, a vaut :1
test1, a vaut :1
programme, a vaut :1
test2, a vaut :2
programme, a vaut :2
test3, a vaut :3
programme, a vaut :2
test4, b vaut :4
programme, b vaut :4
test5, c vaut :5

J.

Classes et Objets

Javascript permet la poo (programmation oriente objet) comme java C++ php ou Delphi Il est
possible de dfinir des classes et dinstancier les objets correspondants
Cette partie suppose une connaissance des langages orients objet. On ne donnera que la syntaxe sur
lexemple trs classique des carrs et rectangles

Le constructeur porte le nom de la classe (function et non class)

Le mcanisme dhritage nexiste pas en javascript

This fait rfrence, dans une classe, lobjet correspondant linstance de cette classe

<html>
<head>
SCRIPT LANGAGE="JavaScript">
function rectangle(Long,larg){ // on dfinit ici
la classe
// dfinitions des fonctions et procdure
Technologies Internet

JS : Javascript

19

function perimetre(){
return 2*(this.Lng + this.larg) ;
}
function surface (){
return this.Lng * this.larg ;
}
D. Mailliet

DEUST TIC-RM

function double(){
this.Lng *= 2;
this.larg *= 2;
}
// affectation des attributs
this.Lng = Long;
this.larg = larg;
// affectations des mthodes
this.surf = surface;
this.dble =double;
this.perimetre=perimetre;
}
</SCRIPT>
</head>
<body>
<SCRIPT LANGAGE="JavaScript">

document.write(rect.larg); // 5
document.write("<br>");
document.write(rect.surf()); // 15
document.write("<br>");
document.write(rect.perimetre()); // 16
document.write("<br>");
rect.dble();
document.write(rect.Lng); // 6
document.write("<br>");
document.write(rect.larg); // 10
document.write("<br>");
document.write(rect.surf()); // 60
document.write("<br>");
document.write(rect.perimetre()); // 32
document.write("<br>");

var rect=new rectangle (3,5);

</SCRIPT>
</body>
</html>

document.write(rect.Lng); // 3
document.write("<br>");

K.

Entres/Sorties
1.

sorties

Pour obtenir un affichage dans le navigateur , on

utilise document.write() avec parenthses
obligatoires.
On peut aussi faire ouvrir une fentre :
alert('voil');
2.

entres

Pour que le JavaScript obtienne des informations de lutilisateur, on peut :

Soit rcuprer un lment quelquonque se trouvant dans la page y compris les lments dun
formulaire (voir plus loin)
faire ouvrir
fentre :

une

x=prompt('entier=',0);
alert(x);

dans ce cas, si lutilisateur clique sur :

ok, x reoit la valeur contenue dans la ligne, y compris undefined
Annuler, x reoit la valeur null
Technologies Internet

JS : Javascript

20

D. Mailliet

DEUST TIC-RM

Remarque prompt admet 1 ou 2 paramtres, le deuxime est facultatif et reprsente la valeur

affiche louverture de la fentre. En cas dabsence de ce paramtre le mot undefined apparat
Soit pour une rponse binaire :
alert(confirm("d'accord ?"));

confirm renvoie vrai ou faux selon que lutilisateur clique sur ok ou annuler

L.

Fichiers

La lecture et lcriture dans un fichier local ou distant poserait un srieux problme de scurit !!!!!
La seule chose quil est possible denregistrer ou de lire sur le disque de lutilisateur, ce sont des
Cookies

M.

Inclusion de fichiers

Pour inclure un fichier javascript dans une page html, on ajoute lattribut src suivi de lURL (relative
ou absolue) du fichier inclure. Ce fichier ne doit contenir que du code javascript.
<Script Language="JavaScript" src="xxx.js">
// description du fichier xxx
</script>

N.

Evnements : traitement

Lutilisateur du navigateur dclanche un Evenement en oprant soit un clic sur un bouton, un lien, une
option dune liste droulante ou cocher un bouton radio etc.. soit en dplaant la souris ,etc..
Voici les principaux vnements et quelques exemples de balises :
Evnement

Se produit lorsque ...

Exemples de balises HTML supportant

l'vnement

onBlur

un champ de saisie d'un formulaire perd le focus

<INPUT> <SELECT>
<TEXTAREA><TEXT>

onClick

<INPUT> <SELECT> <A>

onFocus

l'utilisateur clique avec la souris l'objet HTML

considr
l'utilisateur change le contenu d'un objet d'un
formulaire HTML
un champ de saisie d'un formulaire prend le focus

onLoad

le document HTML est compltement charg

<BODY>

onMouseOut

la souris quitte la zone d'un lien hypertexte

<A ... >

onMouseOver

la souris rentre dans la zone d'un lien hypertexte

<A ... >

onReset

Appui sur le bouton reset

<INPUT>

onSelect

un choix dans un liste est slectionn

<INPUT> <SELECT >

onSubmit

un formulaire est soumis au serveur HTTP

<FORM>

onUnload

on s'apprte changer de document HTML

<BODY>

onChange

<INPUT> <SELECT> <TEXTAREA>

<INPUT> <SELECT> <TEXTAREA>

Lvnement est capt par lobjet sur lequel il sest produit et si le programme indique ce quil faut
faire au cas o celui-ci se prsente, le code prvu cet effet seexcute.
<html>
Technologies Internet

JS : Javascript

21

D. Mailliet

DEUST TIC-RM

<head>
<TITLE>Question/rponse</TITLE>
<SCRIPT LANGAGE="JavaScript">
function reponse() {
alert('bonjour ' + document.maforme.leprenom.value);
return true
}
function tst() {
alert('bonjour ' + document.maforme.lenom.value);
return true
}
</SCRIPT>
</head>
<body>
<form name="maforme">
Votre nom : <INPUT type="text" name="lenom" value="" onBlur="tst();">
Votre prnom : <INPUT type="text" name="leprenom" value="">
<INPUT type="submit" value="Valider" onclick="reponse();">
</form>
</body>
</html>

O.

Evnements : simulation

Il est possible de simuler la gnration dun vnement.

En principe la mthode qui gnre lvnement porte le mme nom que celle qui la gre mais sans le
on , cest dire :
Blur() ; focus() ; click(); submit(); etc...
Dans lexemple suivant on simule laction de lutilisateur qui consiste placer le focus sur le champ
mdp
<html>
<head>
<TITLE>Vrification didentit</TITLE>
</head>
<body onLoad=window.document.maforme.mdp.focus();>
<form name="maforme">
Votre nom : <INPUT type="text" name="lenom" value="">
Votre mot de passe : <INPUT type="password" name="mdp" value="">
<INPUT type="submit" value="Valider" >
</form>
</body>
</html>

Dans les 2 exemples suivants on envoie automatiquement le formulaire ci-dessus

On simule lappui sur valider
<html>
<head>
<TITLE>Vrification didentit</TITLE>
</head>
<body onLoad=window.document.maforme.ok.click();>
Technologies Internet

JS : Javascript

22

D. Mailliet

DEUST TIC-RM

<form name="maforme">
Votre nom : <INPUT type="text" name="lenom" value="toto">
Votre mot de passe : <INPUT type="password" name="mdp" value="titi">
<INPUT name=ok type="submit" value="Valider" >
</form>
</body>
</html>

ou on simule lenvoi du formulaire, les champs napparaissent plus sur la page

<html>
<head>
<TITLE>Vrification didentit</TITLE>
</head>
<body onLoad=window.document.maforme.submit();>
<form name="maforme">
Votre nom : <INPUT type="hidden" name="lenom" value="toto">
Votre mot de passe : <INPUT type="hidden" name="mdp" value="titi">
</form>
</body>
</html>

Remarque : Dun point de vue scurit, ce nest pas une bonne ide que de mettre le mot de passe en
clair.

P.

Objets prdfinis

Le schma suivant, que l'on retrouve souvent dans la littrature, illustre la hirarchie des classes JS
pour le Navigateur :
window
|
+ --parent, frames, self, top
|
+ --location
|
+ --historique
|
+ --document
|
+ --formulaire (FORM)
|
|
|
+ --elements (text fields, textarea, checkbox, password
|
radio, select, button, submit, reset)
+ --links
|
+ -- URL
1.

Exemple trs important :

Le programme ci-dessous est une mine de renseignements, il dresse la liste des proprits des objets
de la feuille :
<html>
<body>
<form name="maforme">
Votre nom : <INPUT type="text" name="lenom" value="" onBlur="tst();">
<INPUT type="submit" value="Valider" onclick="reponse();">
</form>
<SCRIPT LANGAGE="JavaScript">
<!-function show_props(obj,obj_name){
Technologies Internet

JS : Javascript

23

D. Mailliet

DEUST TIC-RM

var result="";
for(var i in eval(obj)) result+= obj_name+"."+i+" = "+eval(obj)[i]+"<br />\n";
return result;

}
x=prompt("proprits de l'objet : ","window.document");
alert( show_props(x,x));
document.write( show_props(x,x));
// -->
</SCRIPT>
</body>
</html>

essayer avec la proposition du prompt window.document , reprer un object et ressayer avec lui par
exemple window.document.maforme puis window.document.maforme.lenom puis etc..
Remarque
le formulaire nest l que pour observer ses proprits
la fonction eval qui comme son nom lindique value lobjet pass en paramtre
e
x
e
m
p
l
e
:
eval("5 + 3")
2.

Les tableaux prdfinis

Les principaux objets d'une page HTML peuvent tre nomms mais ils sont aussi dfinis par des
tableaux que l'on retrouve dans la liste suivante :

Technologies Internet

JS : Javascript

24

D. Mailliet

DEUST TIC-RM

Array
anchors

Description
comprend toutes les balises <A> qui contiennent un argument NAME

applets

comprend toutes les balises <APPLET> du document

arguments

comprend tous les arguments d'une fonction

elements

comprend toutes les balises <FORM> dans l'ordre de leur dfinition

embeds

comprend toutes les balises <EMBED> dans l'ordre de leur dfinition

forms

comprend toutes les balises <FORM> du document

frames

comprend toutes les balises <FRAME> contenant un FRAMESET dans l'ordre de leur dfinition

history

comprend tous l'historique du navigateur

images

comprend toutes les balises <IMG> dans l'ordre de leur dfinition

links

comprend tous les liens <AREA HREF="...">, <A HREF=""> et les objets Link crs par la mthode
linkwith the link

mimeTypes

Comprend tous les types MIME supports par le navigateur (helpers ou plug-ins)

options

comprend tous les lments OPTION d'une balise SELECT

plugins

comprend tous les plug-ins installs sur votre navigateur

Ainsi dans le programme suivant :

<html>
<head> </head>
<body>
<form name="calc">
<input type="radio" name="monaie" > franc belge <br />
<input type="radio" name="monaie""> Deutch Mark <br />
<input type="radio" name="monaie" > Lire Italienne <br />
ff : <input type="text" name="franc""> <br />
euros : <input type="text" name="euro"> <br />
<input type="button" value="effacer">
</form>
</body>
</html>

pour accder
on a le choix : soit par indexation (la numrotation commence
zro !!) :
window.document.forms[0].elements[4].value

soit par nommage :

window.document.calc.euro.value

soit par combinaison

window.document.calc.elements[4].value
3.

Exemple : communication entre frames

Lexemple ci dessois montre la hirarchie entre les diffrents

documents.

Technologies Internet

JS : Javascript

25

D. Mailliet

DEUST TIC-RM

Le fichier suivant est le fichier principal et dfinit les frames :

<HTML>
<HEAD>
<TITLE> communication entre frames </TITLE>
</HEAD>
<FRAMESET rows="20%, 50%" border="5" frameborder="5" bordercolor="#000000">
<FRAME SRC="haut.html" name="haut">
<FRAME SRC="" name="bas">
<NOFRAMES>
Votre navigateur ne supporte pas les frames. Voici un acces a
<A
HREF="fichier3.html">notre site sans frames</A>
</NOFRAMES>
</FRAMESET>
</HTML>

ci-dessous le fichier haut.html et ci contre le rsultat :

<HTML>
<HEAD>
<TITLE>Mon site en frames</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-parent.bas.document.writeln('<form>');
parent.bas.document.writeln('<INPUT TYPE="text" >');
parent.bas.document.writeln('');
parent.bas.document.writeln('</form>');
parent.bas.document.close() ;
function recupere(){
alert(parent.bas.document.forms[0].elements[0].value)
}
//-->
</SCRIPT>
</HEAD>
<body bgcolor="#f0f0f0">
<INPUT TYPE="button" name="essai" onClick="recupere()" value="essai">
</body>
</HTML>

Lorsquon dfinit 2 cadres, il faut logiquement 3 fichiers (voir plus haut). Ici, le cadre du bas ne
contenent rien initialement, nest dfini par aucun fichier.
Ce qui apparat dans le cadre infrieur (nomm bas ) est cr par le script contenu dans le fichier du
cadre suprieur (nomm haut ) le bouton situ dans ce cadre rcupre le contenu de llment zone
texte du cadre bas

4.

Exercice :

Voici un convertisseur de monnaies nationales europenne :

<html>
<head>
<SCRIPT LANGAGE="JavaScript">
<!-var taux = 6.55957;
function eurofr(){
window.document.calc.franc.value =window.document.calc.euro.value * taux;
Technologies Internet

JS : Javascript

26

D. Mailliet

DEUST TIC-RM

}
function freuro(){
window.document.calc.euro.value =window.document.calc.franc.value / taux;
}
function modif(tx,ch){ // ch est une chaine de 2 caractres
taux = tx;
var chn =window.document.calc.outerHTML;
var pos = (chn.indexOf(window.document.calc.franc.outerHTML));
window.document.calc.outerHTML=chn.substring(1,pos - 5) +ch + chn.substring(pos3,chn.length);
eurofr();
}
// -->
</SCRIPT>
</head>
<body>
<form name="calc">
<input type="radio" name="monaie" checked onClick="modif(6.55957,'FF');"> franc franais <br />
<input type="radio" name="monaie" onClick="modif(40.3399,'FB');"> franc belge <br />
<input type="radio" name="monaie" onClick="modif(1.95583,'DM');"> Deutch Mark <br />
<input type="radio" name="monaie" onClick="modif(166.386,'Pt');"> pesetas espagnole <br />
<input type="radio" name="monaie" onClick="modif(1936.27,'LI');"> Lire Italienne <br />
ff : <input type="text" name="franc" onkeyup ="freuro()"> <br />
euros : <input type="text" name="euro" onkeyup ="eurofr()" )"> <br />
<input type="button" value="effacer"
onClick="window.document.calc.franc.value='';window.document.calc.euro.value='';">
</form>
</body>
</html>

Le tester, ltudier et le modifier de faon :

Le rendre plus esthtique
Admettre 3 caractres au lieu de 2 pour les monaies
augmenter le nombres de monaies convertibles :

Technologies Internet

DEMParEuros = 1.95583; allemagne

ESPParEuros = 166.386; espagne
FRFParEuros = 6.55957; france
IEPParEuros = 0.787564; Ireland
ITLParEuros = 1936.27; Italie
BEFParEuros = 40.3399; Belgique
NLGParEuros = 2.20371; Hollande
ATSParEuros = 13.7603; Autriche
PTEParEuros = 200.482; Portugal
FIMParEuros = 5.94573; Finlanded
GRDParEuros = 340.750; Grece
LUFParEuros = 40.3399;Luxambourg

JS : Javascript

27

D. Mailliet

Technologies Internet

Php / MySQL

28

D. Mailliet

Cours Javascript

D. Mailliet