Javascript

JAVASCRIPT
1 Le langage Javascript
1.1 Ecriture de code Javascript . . . . . . . . . . . . . . . . . . . . . . . . .
1.1.1 Format gnral dun programme . . . . . . . . . . . . . . . . .
1.1.2 Intgration dans une page HTML . . . . . . . . . . . . . . . .
1.1.2.1 Intgration pour excution directe . . . . . . . . . . .
1.1.2.2 Excution diffre . . . . . . . . . . . . . . . . . . . .
1.1.2.3 Insertion de code JavaScript lintrieur dune balise
1.1.3 Les premiers programmes Javascript . . . . . . . . . . . . . . .
1.1.3.1 Insertion de code Javascript excution directe . . .
1.1.3.2 Insertion de code javascript excution diffre . . .
1.1.3.3 Insertion du code Javascript lintrieur dune balise
1.1.4 Insertion de code par appel de module externe . . . . . . . . .
1.1.4.1 Rdaction du module externe . . . . . . . . . . . . .
1.1.4.2 Appel du module externe . . . . . . . . . . . . . . . .
1.2 Structure du langage . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.1 Blocs et instructions . . . . . . . . . . . . . . . . . . . . . . . .
1.2.2 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.2.1 Dclaration et affectation de variables . . . . . . . .
1.2.2.2 Type de variables . . . . . . . . . . . . . . . . . . . .
1.2.2.3 Porte dune variable . . . . . . . . . . . . . . . . . .
1.2.3 Oprateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.3.1 Oprateurs arithmtiques . . . . . . . . . . . . . . . .
1.2.3.2 Oprateurs de comparaison . . . . . . . . . . . . . .
1.2.3.3 Oprateurs logique . . . . . . . . . . . . . . . . . . .
1.2.4 Structures conditionnelles . . . . . . . . . . . . . . . . . . . . .
1.2.5 Structures rptitives . . . . . . . . . . . . . . . . . . . . . . . .
1.2.5.1 Instruction for . . . . . . . . . . . . . . . . . . . . . .
1.2.5.2 Instruction While . . . . . . . . . . . . . . . . . . . .
1.2.6 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.6.1 Dclaration dune fonction . . . . . . . . . . . . . . .
1.2.6.2 Appel dune fonction . . . . . . . . . . . . . . . . . .
1.2.6.3 Exemple de fonction . . . . . . . . . . . . . . . . . . .
1.2.7 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
HTML
. . . . .
. . . . .
. . . . .
HTML
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
1
1
2
2
2
3
3
3
4
4
5
5
5
5
5
6
6
6
6
6
6
7
7
7
7
8
8
8
8
8
9
2 Le modle objet du navigateur

2.1 Le modle objet du navigateur . . . . . . . . . . . . . . . .
2.1.1 Les diffrents objets . . . . . . . . . . . . . . . . . .
2.1.1.1 Lorganisation des objets du navigateur .
2.1.1.2 Les classes de bases de lobjet navigateur .
2.1.1.3 Proprits et mthodes . . . . . . . . . . .
2.1.2 Les vnements . . . . . . . . . . . . . . . . . . . . .
2.1.3 Exemples . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
11
11
11
11
12
12
13
14
3 Application au contrle de saisie des donnes

3.1 Validation des donnes . . . . . . . . . . . . . . . . . . . . . .
3.1.1 Les objets du formulaires . . . . . . . . . . . . . . . .
3.1.1.1 Les zones de saisies de texte . . . . . . . . .
3.1.1.2 Les boutons . . . . . . . . . . . . . . . . . . .
3.1.1.3 Les cases cocher . . . . . . . . . . . . . . .
3.1.1.4 Lobjet form : exemple . . . . . . . . . . . . .
3.1.2 Traitement des chaines de caractres et des nombres .
3.1.2.1 Traitements des chanes de caractres . . . .
3.1.2.2 Traitements des nombres . . . . . . . . . . .
3.2 Trouver des scripts sur Internet . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
15
15
15
15
15
15
16
17
17
17
17
Chapter 1
Le langage Javascript
Ce langage, initialement cr par la socit Netscape, permet de rendre une page HTML bien plus interactive, en y insrant du code ragissant, par exemple, aux vnements de lutilisateur, ou encore
valider les donnes saisies dans un formulaire HTML. Dans ce premier chapitre, nous allons nous intresser la syntaxe du langage, mais aussi son organisation, en relation avec ce que vous avez vu en
cours dalgorithmique. Nous verrons ensuite les diffrents objets du navigateurs, et les manires de les
programmer.
1.1
Ecriture de code Javascript
1.1.1 Format gnral dun programme

La particularit du langage Javascript par rapport dautres langage de programmation (tels que Java
ou C++), est sa facult dintgration dans une page HTML. Ainsi, le code crit dans une page HTML est
directement interprt par le navigateur, qui excute les instructions Javascript.
Un "programme" Javascript est compos dune srie dintructions que le navigateur va excuter
squentiellement, cest dire lune aprs lautre. Chaque instruction est termin par un point virgule.
Example 1.1 Hello World
Ce premier exemple nous montre deux instructions en Javascript, la premire affichant "Hello", et la
deuxime affichant "World".
printf("hello");
printf("World");
Attention, le langage est dit "case sensitive", cest dire que le langage est sensible aux majuscules et
minuscules.
1.1.2 Intgration dans une page HTML

Comme nous lavons dj soulign, le langage Javascript a t cre pour tre excut sur un navigateur
Internet. Il doit donc sintgrer dans le code HTML. Nous avons notre disposition une balise HTML
particulire :
<script language = "javascript">
.....
.....
</script>
Il existe trois manire dintgrer le code Javascript dans le code HTML :
1.1. ECRITURE
CHAPTERDE
1. CODE
LE LANGAGE
JAVASCRIPT
JAVASCRIPT
CHAPTER
1.1.1. ECRITURE
LE LANGAGE
DE CODE
JAVASCRIPT
JAVASCRIPT
1.1.2.1 Intgration pour excution directe

Par cette mthode, le code est directement excut au chargement de la page. La balise <script></script>
est plac entre les balises <body></body>, et le navigateur excute le programme, avant mme laffichage
de la page HTML.
<html>
<head>
<title> .......... </title>
</head>
<body>
<script language="JavaScript">
place du code JavaScript
</script>
</body>
</html>
1.1.2.2 Excution diffre

Cette fois ci, le code est dabord lu par le navigateur, et stock en mmoire. Il ne sexcutera que sur
demande, cest dire lors dun vnement gnr par lintervention de lutilisateur.
Nous reviendrons plus tard sur ces vnements et la manire de les grer.
html>
<head>
<title> .......... </title>
place du code JavaScript
</script>
</head>
<body>
place du code vnement
</body>
</html>
1.1.2.3 Insertion de code JavaScript lintrieur dune balise HTML

Nous verrons dans la partie suivante de ce cours que certaines balises HTML acceptent de ragir
des vnements, provoqus soit par lintervention de lutilisateur, soit par une action du navigateur lui
mme, comme le chargement de la page HTML (vnement onLoad) ou la fermeture de la page HTML
en cours (vnement onUnload).
Dans ce cas, le code JavaScript peut tre aussi insr directement au niveau de la balise en question.
Le squelette de la page HTML est alors :
<html>
<head>
<title> .......... </title>
(cet emplacement peut tre vide, le code est dans la balise. Mais il est indispensable, car il indique au navigateur quil va devoir interprter du
code JavaScript.)
</script>
</head>
<body>
<balise html vnement=javascript:place du code vnement
1.1. ECRITURE
CHAPTERDE
1. CODE
LE LANGAGE
JAVASCRIPT
JAVASCRIPT
CHAPTER
1.1.1. ECRITURE
LE LANGAGE
DE CODE
JAVASCRIPT
JAVASCRIPT
</body>
</html>
1.1.3 Les premiers programmes Javascript

Pour lensemble des exercices de ce cours, nous utiliserons comme titeur de code HTML et Javascript
XEmacs, et comme navigateur Internet, une version rcente de Netscape ou Mozilla. Comme vu dans
le cours HTML, nous crirons directement nos pages HTML dans XEmacs, et nous les ouvrirons par la
commande de Netscape "Fichiers -> ouvrir un fichier". Volontairements, nous purerons au maximum
le code HTML, de manire nous concentrer sur le code Javascript.
1.1.3.1 Insertion de code Javascript excution directe
Sous XEmacs, crire le code suivant, et enregistrer la page sous le nom "Exercice 1.3.1, dans le
rpertoire Javascript/Exercices/. Vous ouvrirez ensuite la page sous Netscape, en observant
soigneusement linterprtation du code et le comportement du navigateur.
<html>
<head>
<title>Exercice javascript 1.3.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
alert("Le message dalerte saffiche avant mme le contenu de la page.\nCliquez
sur OK pour que la page saffiche");
</script>
<h1>Exercice 1.3.1 : Code javascript a exécution directe</h1>
<p>Le script Javascript a été exécuté avant l affichage
de la page.
</body>
</html>
Nous voyons ici une seconde instructions Javascript, linstruction alert, qui permet douvrir une
boite de dialogue sur un navigateur. Nous aurons loccasion de revenir sur cette instructions.
A retenir : quand le code Javascript est plac juste aprs la balise <body>, il est excut avant laffichage de la
page.
1.1.3.2 Insertion de code javascript excution diffre
Selon le mme principe que dans lexercice prcdent, crire et affich la page suivante, enregistre sous
le nom Exercice 1.3.2.
<html>
<head>
</head>
function affiche()
{
alert("Le message dalerte saffiche suite un vnement.\nCliquez sur OK pour poursuivre");
}
</script>
<h1>Exercice 1.3.2 : Code javascript a exécution différée</ h1>
1.1. ECRITURE
CHAPTERDE
1. CODE
LE LANGAGE
JAVASCRIPT
JAVASCRIPT
CHAPTER
1.1.1. ECRITURE
LE LANGAGE
DE CODE
JAVASCRIPT
JAVASCRIPT
<p>Le script Javascript est exécuté suite à larrivée

dun évènement dans la page, ici quand lutilisateur clique sur
1.1. ECRITURE
CHAPTERDE
1. CODE
LE LANGAGE
JAVASCRIPT
JAVASCRIPT
CHAPTER
1.1.1. ECRITURE
LE LANGAGE
DE CODE
JAVASCRIPT
JAVASCRIPT
le bouton ci-dessous.
<form>
<center>
<input type = "button" name="evenement" value = "Cliquez ici pour gnrer un
vnement" onclick= "javascript:affiche()"
</center>
</form>
</body>
</html>
Le code contient cette fois ci une fonction Javascript. Nous reviendrons sur ce principe de programmation, mais nous pouvons dj remarquer que les instructions contenues dans cette fonction
(linstruction alert en locurence) sont excut lors de lappel affiche(). Cet appel de la fonction
est ralis quand lvnement onclick apparait sur le bouton du formulaire.
A retenir : pour une excution de code Javascript diffre, il est ncessaire denglober le bloc dinstruction dans
une fonction, qui est appele depuis le code HTML.
1.1.3.3 Insertion du code Javascript lintrieur dune balise HTML
Toujours sur le mme principe, crire la page HTML exercice1-3-3.html contenant le code suivant
:
<html>
<head>
</script>
</head>
<h1>Exercice 1.3.3 : Code javascript inséré dans une balise HTML</ h1>
<p>Le script Javascript est exécuté suite à larrivée
dun évènement dans la page, ici quand lutilisateur clique sur
le bouton ci-dessous.
<form>
<center>
<input type = "button" name="evenement" value = "Cliquez ici pour gnrer un vnement" onclick= "
javascript:alert(Ce est affich suite un vnement.\nCliquez sur OK pour poursuivre);"
</center>
</form>
</body>
</html>
Cette fois-ci, linstruction alert() est directement insre dans le code HTML, au niveau de lattribut
onclick de la balise button. Il est bien sr possible de cumuler plusieurs instructions Javascript la
suite, en les sparant par des points - virgules. Les balises (au contenu vide) <script></script> places
en entte de la page permettent de prciser au nvigateur quil aura du code interprter.
A retenir : dans le cas dune insertion de code lintrieur dune balise HTML, on place les instructions
prcdes du mot-clef javascript: directement dans la balise, spares de points-virgules. Il est ncessaire de
prciser au navigateur quil y aura du code interprter dans la page, en plaant en entte de document les balises
<script language = javascript></script>.
1.1.4 Insertion de code par appel de module externe

Dans les paragraphes prcdent, nous avons insr le code Javascript directement dans la page HTML.
Cest la mthode la plus simple et la plus frquemment utilise dans la cration de sites Internets.
5
1.1. ECRITURE
CHAPTERDE
1. CODE
LE LANGAGE
JAVASCRIPT
JAVASCRIPT
CHAPTER
1.1.1. ECRITURE
LE LANGAGE
DE CODE
JAVASCRIPT
JAVASCRIPT
Cependant, cette mthode trouve ses limites dans la rutilisation et la maintenance des fonctions. En
effet, si vous utilisez souvent une mme srie dintructions Javascript dans plusieurs pages HTML, et
1.2. STRUCTURE
CHAPTER 1.DULELANGAGE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
que vous souhaitez les modifier, vous devrez reprendre une par une lensemble des pages ... ce qui peut
rapidement devenir fastidieux.
Une solution ces problmes est de placer des fonctions Javascript dans un module externe. Ce
fichier contiendra le code source, et linsertion dans la page HTML deviendra :
<script src = "URL du module externe">
..
..
</script>
Ces balises indiquent au navigateur non plus la nature du code quil doit utiliser, mais lemplacement
auquel il trouvera ce code. Ainsi, en modifiant le contenu du module externe, on modifiera le comportement de lensemble des pages qui sy rfrent.
1.1.4.1 Rdaction du module externe
Le module externe doit tre crit au format texte simple, et portant lextension .txt. Il doit tre plac
son adresse dappel. Il contient le code source Javascript, gnralement crit sous forme de fonctions.
Travail faire : crer un module externe nomm mod_jvs1.txt, et le placer dans le rpertoire
/javascript/exercices/modules/. Y insrer le code de deux fonctions, similaires la fonction
affiche() vue dans les exercices prcdents :
affiche1() : ouvre une boite de dialogue affichant "Execution de la fonction 1"
affiche2() : ouvre une boite de dialogue affichant "Execution de la fonction 2"
1.1.4.2 Appel du module externe
Nous disposons donc dsormais des fonctions affiche1() et affiche2(), dont les code sont dcrits dans le
module externes. Nous souhaitons utiliser ces fonctions dans une page HTML.
Travail faire : selon le modle vu dans le paragraphe 1.3.2, crire la page HTML exercice-1.4.
2.html, contenant deux boutons, excutant chacun une des deux fonctions affiche() contenues dans le
module externe mod_jvs1.txt.
Note : afin dindiquer au navigateur o se trouve le module externe, il est ncessaire dinsrer en
entte du document la balise suivante, au contenu vide.
<script src = "URL du module externe">
</script>
"URL du module externe" contiendra le chemin relatif du module externe par rapport la page
HTML, savoir ici : /modules/mod_jvs1.txt. Par cette commande, le navigateur chargera en mmoire le contenu du module externe, et pourra excuter les fonctions qui y sont contenues.
1.2
Structure du langage
Nous avons vu dans les paragraphes prcdents quelques aperus du langage Javascript, comme les
fonctions, les instructions ou les blocs. Dans cette partie du cours, nous allons nous intresser plus
prcisment la syntaxe gnrale du langage, et quelques unes de ses instructions et fonctions clefs.
1.2.1 Blocs et instructions

Une instructions Javascript peut tre vue comme un ordre pass linterprteur du navigateur. Chaque
instruction se termine par un point-vrigule.
Un bloc dinstructions est une srie dinstructions excutes squentiellement, et encadr par des
accolades. Les blocs dinstructions permettent de dfinir par exemple les actions effectues par une
fonction, ou encore la srie dinstructions rptes dans une structure itrative, comme vous lavez vu
en algorithmique.
1.2.2 Variables
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
Vous avez vu en algorithmique la notion de variables, lments indispensables la programmation,

permettant de travailler sur des donnes informatiques.
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
1.2.2.1 Dclaration et affectation de variables

Toute variable utilise dans un programme javascript doit obligatoirement tre dclare, par linstructions
suivante :
var mon_nom_de_variable;
Concernant les noms de variables, il ny a pas de limitations particulire, si ce nest de ne pas utiliser
un des mots rservs du langage. Il est galement noter que le langage tant case sensitive, les majuscules et minuscules ont leur importance.
Une fois la variable dclare, il est alors possible de lui affecter une valeur, grce loprateur
daffectation :
mon_nom_de_variable = ma_valeur
1.2.2.2 Type de variables

Comme nous lavons soulign en introduction, le langage Javascript nous permet de dclarer les variables sans les typer, cest--dire sans spcifier le type de donnes quelles contiendront. Le type de la
variable dpendra dans ce cas-l de la nature de la valeur qui lui sera affecte en premier. Par exemple,
le programme suivant forcera la variable a tre de type entier :
var mon_age;
mon_age = 30;
Une autre solution pour typer les variables directement lors de leur dclaration est de leur affecter
directement une valeur :
var mon_age = 30, mon_prenom = "ivan", feminin = false;
Linstruction prcdente nous permet de passer en revue les trois types de variables principaux :
numrique (Number), chaine de caractre (String) et booleen (Boolean) :
Number : accepte tout nombre (y compris virgule)
String : accepte toute chaine de caractre, sans limitation de longeur
Booelan : prend les valeur True (vrai) ou false (faux)
1.2.2.3 Porte dune variable
Une fois la variable dclare, elle est directement utilisable dans le bloc dinstructions qui la contient,
et dans tous ceux qui lui sont infrieurs. Ainsi, une variable dclare juste aprs la balise <script> sera
utilisable dans tout le programme, y compris dans les fonctions qui le compose. Par contre, une variable
dclare dans une fonction ne sera pas accessible depuis une autre fonction. Nous reviendrons sur cet
aspect important de la porte des variables dans le paragraphe consacr aux fonctions.
1.2.3 Oprateurs
1.2.3.1 Oprateurs arithmtiques
Les oprateurs arithmtiques sappliquent sur une ou deux oprandes de types Number.
Les oprateur dincrmentation et de dcrmentation correspondant aux instructions suivantes :
i++ quivaut i=i+1
i-- quivaut i= i-1
1.2.3.2 Oprateurs de comparaison
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
Les oprateurs de comparaison sappliquent diffrents types de donnes, et renvoient un boolen en

fonction du rsultat de la comparaison.
1
0
10
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
Table 1.1 Oprateurs arithmtiques

Opration
Addition
Soustraction
Multiplication
Division
Modulo
Negation
Incrment
Dcrment
Signe
+
*
/
%
++
--
Table 1.2 Oprateurs de comparaison

Egalit
Diffrence
Infrieur, suprieur
Infrieur ou gal, suprieur ou gal
==
!=
<;>
<= ; >=
1.2.3.3 Oprateurs logique

Ces oprateurs sappliquent des boolens, et permettent dvaluer des expressions logiques :
1.2.4 Structures conditionnelles

Vous avez vu en algorithmique les structures conditionnelles. La traduction de linstruction algorithmique si ..alors ... sinon ... finsi se traduit en Javascript par :
if (condition)
{
liste dinstructions;
}
else
{
}
La "condition" doit tre une expression boolenne valuable. Si elle est VRAI, alors la premire srie
dinstructions est excute, si elle est FAUSSE, alors cest la seconde srie qui est excute.
1.2.5 Structures rptitives

Les structures itratives ou rptitives permettent dexcuter plusieurs fois un bloc dinstructions.
1.2.5.1 Instruction for
La boucle For est rapprocher de linstruction pour vu en algorithmique. Elle permet de rpter un
nombre de fois dfini le bloc dinstructions situ juste aprs :
for (initialisation;test;incrment)
{
}
Table 1.3 Oprateurs logiques

ET
OU
&&
||
1
1
11
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
NON
1
2
12
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
La boucle For utilise donc un compteur, initialis une certaine valeur, valeur modifie chaque
excution du bloc dinstructions, jusquau changement de valeur de la condition. Le compteur tant
une variable, il ne faut bien sr pas omettre de la dclarer.
Example 1.2 Hello World "puissance 10"
var i;
for (i=1;i<=10;i++)
{
printf("Hello world "+i+" <br>");
}
Cet exemple va donc crire 10 fois les mots "hello world", suivi des chiffres 1,2,3 .. jusqu 10. Au
premier passage dans la boucle, i se voit affect la valeur 1. A chaque passage dans la boucle, le programme crit la phrase, et incrmente i de 1. Quand i prend la valeur 11, la conditionnelle est fausse, et
le programme saute directement linstruction suivante.
1.2.5.2 Instruction While

La boucle Javascript while est rapprocher de la boucle tantque vue en algorithmique. Elle permet
dexcuter un bloc dinstructions tant quune expression boolenne est vraie.
while (condition)
{
}
1.2.6 Fonctions
1.2.6.1 Dclaration dune fonction
Nous avons tudi les fonctions en algorithmique, et aperu quelques exemples dans les paragraphes
prcdents de leur application en Javascript.
Une fonction en Javascript doit tre dclare selon le modle suivant :
function nom_fonction (para1, para1, ...)
{
Instruction;
Instruction;
...
return resultat;
}
Function est un mot rserv du langage Javascript. Para1, para2, ... contiennent des paramtres qui
vont pouvoir tre utiliss dans la fonction. Enfin, le mot rserv return permet de renvoyer une valeur
linstruction appelante. Quand ce mot nest pas prsent dans le corps de la fonction, la fonction se
comporte alors comme une procdure.
1.2.6.2 Appel dune fonction
Un appel une fonction est donc un ordre donn au navigateur pour excuter des lignes de codes
places hors du bloc de code appelant. Lappel se fait de deux manires :
soit directement en donnant le nom de la fonction et les arguments quelle accepte quand la fonction ne retourne pas de valeurs
soit en affectant le rsultat de la fonction une variable.
1.2.6.3 Exemple de fonction
1
3
13
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
Cet exemple est tir du site www.le-webmestre.net
1
4
14
1.2. STRUCTURE
LANGAGE JAVASCRIPT
CHAPTER 1. LE
1.2.LANGAGE
STRUCTURE
JAVASCRIPT
DU LANGAGE
function titre(police,couleur,taille,texte){
document.write("<font color=\"" + couleur + "\" size=\"" + taille + "\" face =\"" + police + "\">" + texte + "</font>");
}
titre("Comic Sans MS","red",4,"Je mclate faire des titres en JavaScript !");
document.write("<br>");
titre("Impact,Verdana,sans-ms","#FF8040",5,"Bien sr, JavaScript ne sert pas qu faire des titres !");
document.write("<br>");
titre("Arial","black",7,"Mais cela vous montre les fonctions et les arguments !") ;
1.2.7 Tableaux
Les tableaux permettent de stocker plusieurs valeurs dans une seule variable. La dclaration dune
variable de type tableau se fait en utilisant linstruction suivante :
var mon_tableau = new Array();
ou encore en prcisant la taille du tableau

var mon_tableau = new Array(10);
ou encore en spcifiant les valeurs insrer dans le tableau :

var mon_tableau = new Array("valeur1","valeur2", "valeur3", ...)
Laccs un lment du tableau se fait en spcifiant lindice (le rang) de llment :

mon_tableau[0]
Il est bien sr possible de donner plusieurs dimensions un tableau, comme en algorithmique :

var mon_tableau[10][10]
permet de dfinir un tableau de deux dimensions.

Enfin, pour obtenir la longueur dun tableau, nous pouvons utiliser la proprit length :
mon_tableau.length
1
5
15
Chapter 2
Le modle objet du navigateur

2.1
Le modle objet du navigateur
Nous avons vu dans les paragraphes prcdents la syntaxe du langage Javascript, et quelques unes de
ses principales fonctions et instructions. Nous allons maintenant aborder la mthode de programmation
du navigateur lui-mme. Nous allons en particulier nous intresser la notion dobjets et dvnements.
2.1.1 Les diffrents objets

Un objet est une entit appartenant au monde des navigateurs ou au langage lui-mme. Il sont soit
prdfinis, soit crs de toute pice par le programmeur. Un objet possde des proprits, qui le caractrisent, et des mthodes, qui lui permettent deffectuer des actions, et peuvent ragir des vnements.
2.1.1.1 Lorganisation des objets du navigateur
Lobjet qui nous intressera particulirement dans la programmation Javascript est lobjet Window, qui
modlise la fentre du navigateur. Les diffrents lments qui peuvent composer une page HTML sont
ainsi organiss de manire hirarchique partir de cet objet Window.
Figure 2.1 Hirarchie des objets du navigateur
11
11
2.1. LE MODLE OBJET DU NAVIGATEUR
CHAPTER 2. LE MODLE OBJET DU NAVIGATEUR
De la figure prcdente, on peut par exemple dduire quun formulaire (form) peut contenir un objet
Text, un objet Button, etc..
2.1.1.2 Les classes de bases de lobjet navigateur
Les objets sont automatiquement instancis chaque tape du fonctionnement du navigateur, par exemple lors de louverture dune fentre ou de frames, la cration des documents contenus dans chaque
fentre ou frame, et les divers lments (formulaires, images, liens ...) contenus dans chaque lment.
Les applications JavaScript peuvent alors dialoguer avec ces objets visuels et les manipuler. Le programmeur peut ainsi agir sur ltat du navigateur, de ses fentres et des documents et des composants qui y
sont inclus.
Quelques uns des objets souvent manipuls :
navigator : cest le logiciel client dont le nom est not dans navigator.appName
window : lobjet de plus haut niveau cr par le navigateur, cest sa fentre.
location : cest lobjet URL de la fentre courante.
history : ce sont les URL prcdemment visites.
document : il sagit du document courant, dont les proprits sontle titre, les couleurs (fond, texte,
lien ...), les formulaires, les images etc..
Pour accder un objet de la page HTML, nous pouvons utiliser lattribut name ou mieux encore,
lattribut id que nous aurons bien videmment appliqus lensemble de nos balises HTML.
Ainsi, laccs un champ du formulaire se fera par lappel suivant :
window.document.nom_du_fomulaire.nom_du_champ
Nous voyons dans linstruction prcdente quil est cependant ncessaire de bien spcifier le "chemin"
du formulaire : le formulaire faait bien partie de la fentre (window), qui contient un document HTML
(document), qui lui mme contient un formulaire, etc ...
2.1.1.3 Proprits et mthodes

Chaque lment du document HTML est donc accessible via son nom et la hirarchie des objets depuis
le langage Javascript. Il sagit maintenant de pouvoir manipuler ces objets en utilisant leurs proprits,
leurs mthodes et les vnements auxquels ils ragissent.
Nous avons vu quune mthode permet en programmation objet deffectuer des actions sur lobjet, et
quune proprit est une de ses caractristiques.
Globalement, on peut manipuler grce aux proprits, lensemble des attributs de chaque balise
HTML. Ainsi, si lon veut modifier la classe CSS dun objet de notre document, nous modifierons sa
proprit classname :
window.document.mom_element.classname = "nouvelle_classe";
Tous les attributs de toutes les balises sont ainsi manipulables avec le Javascript !
De la mme manire, il est possible de manipuler les vnements auxquels sont lis les lments
HTML, en utilisant leurs mthodes associes :
window.document.nom_element.methode();
Par exemple, lenvoi dun formulaire, qui correspond lvnement HTML onsubmit, se fera par
linstruction Javascript :
window.document.nom_formulaire.submit();
12
12
2.1.2 Les vnements

Nous avons vu dans les squences du cours HTML que les balises HTML sont associes des vnements auxquelles elles peuvent ragir. Ainsi, la balise <body> possde deux vnements intrinsques
souvent utiliss, onload et onunload.
A lintrieur de ces balises, il est donc possible dassocier du code javascript qui sera execut lorsque
lvnement sera dclench, soit par lutilisateur (envoi dun formulaire par exemple), soit par le navigateur lui-mme (chargement dune page par exemple).
Combin lutilisation des feuilles de style, les vnements et Javascript permettent galement
dobtenir des combinaisons graphiques intressantes. Les vnements accessibles pour chaque balise
HTML sont dcrits dans la spcification HTML 4.0.
Voici une liste des principaux vnements intrinsques :
Table 2.1 Listes des principaux vnements
Nom
Description
Quand linternaute arrte le chargement dune
image
Quand un objet HTML na plus le focus
Quand un objet HTML a t modifi et quil na
plus le focus
Quand linternaute clique sur un objet HTML
Quand linternaute double clique sur un objet
HTML
Quand le chargement de la page ou dune
image a entrain une erreur
Quand un objet HTML a le focus (cliquer dans
un champ par exemple)
Quand linternaute appuie sur une touche de
son clavier
Quand une touche du clavier est enfonce
(combinaison de onKeyDown et onKeyUp)
Quand linternaute "lche son doigt" dune
touche alors enfonce
Quand le changement de la page est fini
Quand linternaute appuie sur un bouton de la
souris
Quand linternaute dplace sa souris
Quand linternaute enlve sa souris sans
cliquer dun objet HTML
Quand linternaute met sa souris sans cliquer
sur un objet HTML
Quand linternaute "lche son doigt" dun
bouton de sa souris alors enfonc
Quand une fentre ou une frame est dplace
Quand un formulaire est remis zro (avec un
bouton [Reset])
Quand linternaute redimensionne sa fentre
de navigateur
Quand la position de la barre de dfilement est
modifie
Quand linternaute slectionne du texte dans
un objet HTML
Quand le formulaire est envoy, quand
linternaute clique sur un bouton [Envoyer]
Quand une page est quitte
onAbort
onBlur
onChange
onClick
onDbClick
onError
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onMouseDown
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onMove
onReset
onResize
onScroll
onSelect
onSubmit
onUnLoad
13
13
2.1.3 Exemples
Example 2.1 Changement de classe dun lien
<a href = "mon_url.html" class = "ma_classe1" on mouseover= "this.classname = ma_classe2"
onmouseout = "this.classname=ma_classe1">mon lien change de forme avec le passage de la souris</a>
Example 2.2 Ouverture dune nouvelle fentre

<a href = "javascript:window.open(mon_url.html, NouvFenetre, scrollbars=yes, status=yes,width=300,height=300)"">
une nouvelle fentre va souvrir : taille 300 x 300</a>
Example 2.3 Changement dimage au passage de la souris

<A HREF="" onMouseOver="img.src=mon_img2.jpg "
jpg ">
<IMG NAME="img" WIDTH=60 HEIGHT=61 BORDER=0
SRC="mon_img.jpg"></A>
14
14
onMouseOut="img.src=mon_img. -
Chapter 3
Application au contrle de saisie des

donnes
3.1
Validation des donnes
Dans le cours HTML, nous avons tudi les formulaires, permettant lutilisateur de rentrer des donnes
dans une page Web. Pour le bon fonctionnement dune application, une vrification des donnes est
souvent ncessaire. Par exemple, il vaut mieux vrifier quune date est bien valide avant de tenter de
linsrer dans une base de donnes. Cette validation des donnes peut se faire de deux manires :
du ct du serveur : les donnes sont envoyes travers le rseau, et un programme vrifie quelles
sont valides. Mais ce mode de traitement ncessite de surcharger le serveur et encombre le rseau.
du ct du client : avant de poster les donnes du formulaire, il est possible de programmer le navigateur pour quil effectue lui-mme ces vrifications. Cest donc au niveau de la page contenant
le formulaire quil faut crire un programme Javascript ralisant ces oprations de contrle .
3.1.1 Les objets du formulaires

Nous avons vu prcdemment les objets Javascript, et plus particulirement les objets du navigateur.
Nous allons maintenant dcrire avec prcision certains des objets des formulaires, de manire effectuer
certaines oprations de contrle et de formatage des donnes entres par lutilisateur.
3.1.1.1 Les zones de saisies de texte
Les zones de saisie de texte comporte les proprits et mthodes suivantes :
value : La valeur du champ (value en HTML)
name : Le nom du champ (name en HTML)
size : La taille du champ (size en HTML)
style : Feuilles de Styles JavaScript (JSSS)
focus() : Mthode qui donne le focus, cest dire que le curseur est dans le champ de saisie
3.1.1.2 Les boutons
Une seule mthode intressante pour les boutons : onclick()
3.1.1.3 Les cases cocher
Les cases cocher ont :
onclick() : vnement qui intervient quand lutilisateur clique dessus
checked : true pour valider la case cocher, false sinon.
15
15
3.1. VALIDATION DES DOC

NH
NAPETSER 3. APPLICATION AU CONTRLE DE SAISIE DES DONNES
3.1.1.4 Lobjet form : exemple
<html>
<head>
<title></title>
function verif_form(){ var temoin = 0;
if(document.formulaire.nom.value == ""){
alert("Le champ \"Nom\" est vide");
return false;
}
if(document.formulaire.prenom.value == ""){
alert("Le champ \"Prnom\" est vide");
return false;
}
if(document.formulaire.sexe.selectedIndex == 0){
alert("Vous navez pas choisi votre sexe");
return false;
}
for(i=0;i<document.formulaire.loisir.length;i++){
if(document.formulaire.loisir[i].checked){
++temoin;
}
}
if(temoin != 3){
alert("Vous devez choisir 3 loisirs !");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="monmail@greta.fr"
method="post" name="formulaire" onSubmit="return verif_form()">
Votre nom <input type="text" name="nom"><br>
Votre prnom <input type="text" name="prenom"><br>
Sexe :
<select name="sexe">
<option>Choisissez</option>
<option value="h">Homme</option>
<option value="f">Femme</option>
</select><br>
Vos loisirs : (3 choix)<br><hr>
<input type="checkbox" name="loisir" value="javascript">Le JavaScript<br>
<input type="checkbox" name="loisir" value="couture">La couture<br>
<input type="checkbox" name="loisir" value="cinma">Le cinma<br>
<input type="checkbox" name="loisir" value="tl">La tlvision<br>
<input type="checkbox" name="loisir" value="marche">La marche<br>
<input type="checkbox" name="loisir" value="sport">Le sport<br>
<input type="checkbox" name="loisir" value="lecture">La lecture<br>
<input type="checkbox" name="loisir" value="cheval">Le cheval<br>
<input type="checkbox" name="loisir" value="dormir">Dormir<br>
<hr>
<input type="submit">
</form>
</body>
</html>
16
16
CHAPTER 3. APPLICATION AU CONTRLE DE SAIS3I.E

2. DTERSODUOVN
EN
R DEESS SCRIPTS SUR INTERNET
3.1.2 Traitement des chaines de caractres et des nombres

3.1.2.1 Traitements des chanes de caractres
Lors de la validation des formulaires, il est souvent ncessaire de traiter les chanes de caractres.
Javascript met notre disposition quelques mthodes applicables aux string, dtailles dans le manuel
Javascript. En voici quelques unes :
indexOf(searchValue) : retourne la place de la premire occurence de la chane searchValue
substring(indexA, indexB) : retourne la chane de caractre comprise entre indexA et indexB
toLowerCase(), toUpperCase() : renvoie la chane passe respectivement en minuscule et en majuscule
3.1.2.2 Traitements des nombres
Outre les oprations classiques sur les nombres que nous avons vu en algorithmique, il peut galement
tre intressant de tester si une variable est bien de type Number, Javascript tant relativement souple
sur le typage des variables. Ainsi, la fonction isNan(testValue) nous renvoie la valeur false si testValue
nest pas un nombre, et la valeur true dans le cas contraire.
3.2
Trouver des scripts sur Internet
Vous lavez vu, Javascript est un langage trs complet, permettant de donner du dynamisme aux pages
en appliquant la programmation du ct client. Nous avons aussi la possibilit de dcharger le serveur
dune partie de son travail, en utilisant le contrle de saisie des champs des formulaires.
Javascript demande quand mme une certaine exprience en programmation, avant de pouvoir
raliser des menus droulants, des applications graphiques, etc.. mais reprsente une alternative srieuse
aux solutions propritaires telles que Flash ou autres Plug-Ins, dont la gratuit nest pas garantie dans
lavenir.
Un bon moyen de se familiariser avec Javascript est tout simplement daller chercher des exemples
de ralisation de scripts sur Internet. Un site en particulier recense de nombreux exemples, organiss
par catgorie :
http://javascript.internet.com/
Il existe galement de nombreuses ressources documentaires sur Javascript, telles que des cours et
des tutoriaux. Un bon portail vers des sites sur Javascript, et intgrant lui-mme un cours trs complet
sur ce langage est :
http://www.le-webmestre.net
17
17

Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JAVASCRIPT

2 Le modle objet du navigateur

3 Application au contrle de saisie des donnes

Ecriture de code Javascript

1.1.1 Format gnral dun programme

1.1.2 Intgration dans une page HTML

Il existe trois manire dintgrer le code Javascript dans le code HTML :

1.1.2.1 Intgration pour excution directe

1.1.2.2 Excution diffre

1.1.2.3 Insertion de code JavaScript lintrieur dune balise HTML

1.1.3 Les premiers programmes Javascript

<p>Le script Javascript est ex&eacute;cut&eacute; suite &agrave; larriv&eacute;e

1.1.4 Insertion de code par appel de module externe

1.2.1 Blocs et instructions

Vous avez vu en algorithmique la notion de variables, lments indispensables la programmation,

1.2.2.1 Dclaration et affectation de variables

1.2.2.2 Type de variables

1.2.3.2 Oprateurs de comparaison

Les oprateurs de comparaison sappliquent diffrents types de donnes, et renvoient un boolen en

Table 1.1 Oprateurs arithmtiques

Table 1.2 Oprateurs de comparaison

1.2.3.3 Oprateurs logique

1.2.4 Structures conditionnelles

1.2.5 Structures rptitives

Table 1.3 Oprateurs logiques

1.2.5.2 Instruction While

Cet exemple est tir du site www.le-webmestre.net

ou encore en prcisant la taille du tableau

ou encore en spcifiant les valeurs insrer dans le tableau :

Laccs un lment du tableau se fait en spcifiant lindice (le rang) de llment :

Il est bien sr possible de donner plusieurs dimensions un tableau, comme en algorithmique :

permet de dfinir un tableau de deux dimensions.

Le modle objet du navigateur

Le modle objet du navigateur

2.1.1 Les diffrents objets

2.1. LE MODLE OBJET DU NAVIGATEUR

CHAPTER 2. LE MODLE OBJET DU NAVIGATEUR

2.1.1.3 Proprits et mthodes

CHAPTER 2. LE MODLE OBJET DU NAVIGATEUR

2.1. LE MODLE OBJET DU NAVIGATEUR

2.1.2 Les vnements

2.1. LE MODLE OBJET DU NAVIGATEUR

CHAPTER 2. LE MODLE OBJET DU NAVIGATEUR

Example 2.2 Ouverture dune nouvelle fentre

Example 2.3 Changement dimage au passage de la souris

Application au contrle de saisie des

Validation des donnes

3.1.1 Les objets du formulaires

3.1. VALIDATION DES DOC

3.1.1.4 Lobjet form : exemple

CHAPTER 3. APPLICATION AU CONTRLE DE SAIS3I.E

3.1.2 Traitement des chaines de caractres et des nombres

Trouver des scripts sur Internet

Vous aimerez peut-être aussi

<p>Le script Javascript est exécuté suite à larrivée