732587539-cours-tp-JavaScript-3SffffffffffffffffffffffffffffffffffffffffffffffffffffffTI.pdf

Prof. : A. Hanen & S. @krem Page 1

I
In
nt
tr
ro
od
du
uc
ct
ti
io
on
n
D’après les connaissances acquises précédemment, le langage HTML présente plusieurs
insuffisances :
 Pas de structures de contrôle algorithmiques (conditionnelles et itératives).
 Pas de variables, ni d’opérateurs, ni de procédures.
 Pas d’événement (sauf le click)
 Pas d’accès aux bases de données.
 LE LANGAGE JAVASCRIPT : C’est un langage de script incorporé (introduit, inséré) aux
balises HTML permettant d’améliorer la présentation et l’interactivité des pages web.

S
St
tr
ru
uc
ct
tu
ur
re
e g
gé
én
né
ér
ra
al
le
e o
ou
u (
(s
sq
qu
ue
el
le
et
tt
te
e)
) d
d’
’u
un
n f
fi
ic
ch
hi
ie
er
r J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t
Dans la partie en-tête Dans le corps du fichier HTML
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
</SCRIPT>
</BODY>
</HTML>

L
Le
es
s o
ob
bj
je
et
ts
s J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t
Les objets JavaScript peuvent être classés en deux catégories :
o Les objets prédéfinis (Array, Date, String, Math: Librairie de fonction mathématique.)
o Les objets d’interface (Button, Radio, Text,…)

 L
Le
es
s o
ob
bj
je
et
ts
s d
d’
’i
in
nt
te
er
rf
fa
ac
ce
e e
et
t l
le
eu
ur
rs
s h
hi
ié
ér
ra
ar
rc
ch
hi
ie
es
s
JavaScript divise une page
Web en objets pour
pouvoir les manipuler.
Développement WEB
Niveau : 3
ème
SI - STI
Langage JavaScript

La hiérarchie des objets de notre exemple est la suivante :

A
Ac
cc
cè
ès
s a
au
ux
x o
ob
bj
je
et
ts
s
Pour accéder aux objets, il faudra donner le chemin complet, on utilise la syntaxe suivant :
(window).document.Nom formulaire.Nom_de_l’objet
Exemple : pour la zone de texte "nom" dans un formulaire "f "  window.document.f.nom

L
Le
es
s p
pr
ro
op
pr
ri
ié
ét
té
és
s d
de
es
s o
ob
bj
je
et
ts
s
Pour accéder aux propriétés des objets, on utilise la syntaxe suivant :
(window).document. Nom formulaire.Nom_de_l’objet.Nom_de_la_propriété
Exemple : pour récupérer le contenu (value) de la zone de texte (nom) dans un formulaire (f)
 window.document.f.nom.value

L
Le
es
s m
mé
ét
th
ho
od
de
es
s d
de
es
s o
ob
bj
je
et
ts
s
Pour chaque objet JavaScript on a prévu ces propres méthodes (fonctions).
Exemples :
 Alert() de l’objet window pour afficher un message dans une boite de dialogue,
 write(“texte”) pour écrire dans le document,
 abs() qui renvoie la valeur absolue d’un nombre pour l’objet Math…


D
Dé
éc
cl
la
ar
ra
at
ti
io
on
n d
de
es
s v
va
ar
ri
ia
ab
bl
le
es
s
Les variables peuvent être déclarés comme suit :
 Variable locale a une fonction Avec Var (exple : var Prenom= "Ali" ;)
 Variable globale, décrire directement par son nom (exple : Prenom= "Ali" ;)
JavaScript utilise 4 types de variables :
 Des nombres (entier et réel)
 Des chaînes de caractères
 Des booléens : (True pour vrai et False pour faux)
 Le mot null : Mot spécial qui indique une variable vide.

C
Co
on
nv
ve
er
rs
si
io
on
n d
de
e t
ty
yp
pe
es
s
Fonction de vérification Rôle
IsNaN() : Is Not a Number fonction booléenne permettant de vérifier si le contenu
d’une variable donnée est numérique ou non
Fonction de conversion Rôle Exemple
String et Number
Conversion de
numérique en chaîne et
inversement
var a = String (21.34)  a = "21.34"
var a = Number ("10.5")  a = 10.5
Eval
Evalue une chaîne de
caractères sous forme
de valeur numérique
ch="5+10" ;
x=Eval (ch)  x=15

L
Le
es
s o
op
pé
ér
ra
at
te
eu
ur
rs
s u
ut
ti
il
li
is
sa
ab
bl
le
es
s e
en
n J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t


L
Le
es
s E
En
nt
tr
ré
ée
es
s/
/S
So
or
rt
ti
ie
es
s e
en
n J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t
Entrée (Lecture)
Fonction Syntaxe Exemple
prompt
nom_variable=prompt("texte
de la boite d’invite","valeur
par défaut") ;
s = prompt("Saisissez votre texte :", "Texte par
défaut")
Sortie (Affichage)
Fonction Syntaxe Exemple
Alert Alert("message"+nom_variable) ;
Alert ("Hello world") ;
write document.write("message"+nom_variable) ;
document.write ("Hello world")
(Voir Activité1/TP JavaScript)
(A faire à la maison)

L
Le
es
s s
st
tr
ru
uc
ct
tu
ur
re
es
s d
de
e c
co
on
nt
tr
rô
ôl
le
e c
co
on
nd
di
it
ti
io
on
nn
ne
el
ll
le
es
s
Structure Syntaxe Remarques/exemples
IF
if (condition)
{Traitement 1 ;}
else
{Traitement 2 ;}
Autre syntaxe :
(Condition)?Traitement1:Traitement2;
Exemple :
(a%2==0)? alert("Nbr pair"): alert("Nbr impair");

switch
switch (expression)
{
case V1: bloc 1; break;
case V2: bloc 2; break ;
…
case Vn: bloc n; break ;
default: bloc n+1; break ;
}
Exemple :
Switch (mois)
{ case12 :case1 :case2 : alert(" hiver"); break;
Case3 :case4 :case5 : alert(" printemps"); break;
Case6 :case7 :case8 : alert(" été"); break;
Case9 :case10 :case11 : alert(" automne"); break;
Default: alert("numéro de mois erroné") ; break ;
}

L
Le
es
s s
st
tr
ru
uc
ct
tu
ur
re
es
s i
it
té
ér
ra
at
ti
iv
ve
es
s
Syntaxe Exemple
for (initialisation ; condition de
bouclage ; progression)
{ Instructions ; }
For (i=0 ; i<10 ; i++)
{ document.write(i+ "<BR>")}
do
{ Instructions ; }
while (conditions) ;
do
{N= Number(window.prompt("saisir un entier positif : ")) ;}
While (N<=0) ;
while (conditions)
{ Instructions ; }
Compt=0;
While(compt<5)
{ document.write("ligne :" +compt + "<BR>") ;
Compt++ ; }

L
Le
es
s F
Fo
on
nc
ct
ti
io
on
ns
s
Une fonction va vous permettre de faire un script qui ne s'exécutera que si on le désire, elle
est activée grâce au gestionnaire d'événement ou par un appel direct de la fonction.
 La définition de la fonction est faite dans la partie entête (HEAD), son appel est fait
dans la partie corps (BODY) !!!

Syntaxe de déclaration Syntaxe d’appel
function nom_de_la_fonction (arguments)
{
Instructions ;
[return nom_variable]
}
 Appel d’une fonction en utilisant la clause
return :
Variable = Nom_fonction(arguments) ;
 Appel d’une fonction sans utiliser la clause
return (procédure): Nom_fonction(arguments) ;

L
La
a g
ge
es
st
ti
io
on
n d
de
es
s é
év
vé
én
ne
em
me
en
nt
ts
s
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une
interactivité à travers des fonctions, des méthodes à des événements.
Syntaxe : OnEvenement = "Action JavaScript ou fonction ( )"
Liste des évènements les plus utilisés
Onclick Se déclenche lorsque l'utilisateur clique sur un bouton, un lien ou tout autre
élément.
Onselect Cet événement se produit lorsque l'utilisateur a sélectionné tout ou partie
d'une zone de texte ou textarea.
Onblur
Se déclenche lorsque un élément de formulaire perd le focus c-à-d que
l'utilisateur clique hors du champ et que la zone d'entrée n'est plus active.
Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire.
Onchange
Cet événement s'apparente à l'événement onBlur mais avec une petite
différence. Non seulement la case du formulaire doit avoir perdu le focus
mais aussi son contenu doit avoir été modifié par l'utilisateur.
Onfocus Se déclenche lorsque l'élément est sélectionné, C'est souvent la
conséquence d'un clic de souris ou de l'usage de la touche "Tab"
Onsubmit S’exécute lorsque l'utilisateur clique sur le bouton Submit pour envoyer un
formulaire
Onreset Permet de réinitialiser les champs d'un formulaire
Onload
Onunload
L'événement Load survient lorsque la page a fini de se charger. A l'inverse,
Unload survient lorsque l'utilisateur quitte la page.
Onmouseover
Onmouseout
Ces évènements se déclenchent lorsque le pointeur de la souris passe au
dessus (sans cliquer) d'un lien ou d'une image (infobulle) (onmouseover) ou
bien quitte l'élément (onmouseout)

Liste des méthodes :
submit Envoyer les données du
formulaire
reset Réinitialise le formulaire

G
Ge
es
st
ti
io
on
nn
na
ai
ir
re
es
s d
d'
'é
év
vé
én
ne
em
me
en
nt
t d
di
is
sp
po
on
ni
ib
bl
le
es
s e
en
n J
Ja
av
va
as
sc
cr
ri
ip
pt
t
Objets Gestionnaires d'événement disponibles
Fenêtre OnLoad, OnUnload
Lien hypertexte OnClick, OnmouseOver, OnmouseOut
Elément de zone de texte OnBlur, OnChange, OnFocus, OnSelect
Elément bouton, Case à cocher, Bouton
Radio, Bouton Submit/ Reset
OnClick
Liste de sélection OnBlur, OnChange, OnFocus

L
Le
es
s f
fo
or
rm
mu
ul
la
ai
ir
re
es
s
Ici commence l'interaction avec l'utilisateur grâce aux nombreuses propriétés et méthodes
dont sont dotés les éléments HTML utilisés dans les formulaires.
Les formulaires sont simples à utiliser, cependant il faut d'abord mémoriser quelques
propriétés de base :
Liste des propriétés :
Voyons maintenant en détail quelques éléments de formulaire :
name Nom du formulaire
action Adresse du script de serveur à exécuter
method Méthode d'appel du script (get ou post)
target Destination du retour du formulaire

Elément Opération Syntaxe
Les zones de texte
Récupérer le contenu d'une zone de
saisie (zone de texte/zone de texte
multiple et même un champ password)
NomVariable=document.NomFormulaire.NomZone.value
Modifier le contenu d’une zone de saisie document.NomFormulaire.NomZone.value = expression
Les boutons radio (groupe de cases
d’options)
 Un seul choix
 Indice des boutons commence par 0
Vérifier si une case d’option est cochée
ou non
NomVariable=document.NomF.NomGroupe[indice].checked
Récupérer la valeur d'un bouton radio NomVariable=document.NomF. NomGroupe [indice].value
Connaître le nombre d'options NomVariable=document.NomF. NomGroupe.length
Les cases à cocher
 Un ou plusieurs choix
vérifier si une case est cochée ou non NomVariable=document.NomF.NomCase. checked
Récupérer la valeur d'une case à cocher NomVariable=document.NomF.NomCase. value
Les listes de sélection
 Gérées à travers un tableau nommé
Options contenant les éléments de la liste)
 Length donne le nbre d’éléments d’une
liste
 SelectedIndex donne l’indice de
l’élément sélectionné (liste à sélection
unique) commencant par 0
Ajouter une nouvelle option à la liste
NomVariable=new Option (texte, valeur)
document.NomF.NomListe.options[position]=NomVariable
 texte : le texte de l’élément à ajouter
 Valeur : la valeur de l’élément à ajouter
Supprimer une option de la liste document.NomF.NomListe.options[i]=null
 i : la position de l’élément à supprimer de la liste

9

A
Ac
ct
ti
iv
vi
it
té
é1
1:
: (
(L
Le
es
s e
en
nt
tr
ré
ée
es
s/
/s
so
or
rt
ti
ie
es
s.
..
. l
le
es
s s
st
tr
ru
uc
ct
tu
ur
re
es
s c
co
on
nd
di
it
ti
io
on
nn
ne
el
ll
le
es
s)
)
1) Créer une page HTML nommée Activité1.html contenant le code ci-dessous.
2) Compléter le script donné pour échanger deux entiers donnés a et b.
<!DOCTYPE html>
<HTML>
<HEAD> <meta "charset = UTF-8">
<TITLE> Activité1: Les entrée/sortie(s) </TITLE>
</HEAD>
<BODY>
<h1> Permutation de deux valeurs </h1>
<SCRIPT ………………………………………= "……………………………………………">
a=……………………………………………………………………………… ;
b=……………………………………………………………………………… ;
a=a+b; b=a-b; a=a-b;
…………………("après la permutation a="…………………… et …………………… );
</SCRIPT>
</BODY>
</HTML>
3) Modifier le script précédent en ajoutant un contrôle de saisie des valeurs a et b.
<!DOCTYPE html>
<HTML>
<HEAD>
<meta "charset = UTF-8">
<TITLE> les structures conditionnelles </TITLE>
</HEAD>
<BODY>
<SCRIPT language= "javascript">
a=prompt("a=",""); b=prompt("b=","");
if ………………………………………………………………………………………………………………………………………………………… ;
{ alert("vous devez saisir des valeurs numériques!!"); }
else
{ a=……………………………………………………… ; ……………………………………………………………;
a=a+b; b=a-b; a=a-b;
alert("a="+a);
alert("b="+b); }
</SCRIPT>
</BODY>
</HTML
Développement WEB
Niveau : 3
ème
SI - STI
T
TP
P J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t

10

A
Ac
ct
ti
iv
vi
it
té
é2
2:
: (
(s
st
tr
ru
uc
ct
tu
ur
re
e c
co
on
nd
di
it
ti
io
on
nn
ne
el
ll
le
e à
à c
ch
ho
oi
ix
x)
)
1) Créer une page HTML nommée Activité2.html contenant le code ci-dessous.
2) Compléter le script donné pour changer la couleur d’arrière plan du document selon le
choix saisi par l’utilisateur.
<!DOCTYPE html>
<HTML>
<TITLE> structure conditionnelle à choix </TITLE></HEAD>
<BODY>
var couleur;
………………………=…………………………………("Choisissez parmi ces couleurs : jaune, gris
rouge"," ");
switch(……………………………)
{case "……………………" : ……………………………………………………………………………="red"; break;
case "jaune" : ……………………………………………………………………………="yellow"; break;
case "gris" : ……………………………………………………………………………="gray"; break;
default :alert("Cette couleur n’existe pas !!");
</SCRIPT>
</BODY>
</HTML>

A
Ac
ct
ti
iv
vi
it
té
é3
3:
: (
(L
Le
es
s s
st
tr
ru
uc
ct
tu
ur
re
es
s i
it
té
ér
ra
at
ti
iv
ve
es
s)
)
1) Créer une page HTML nommée Activité3.html contenant le code ci-dessous :
<!DOCTYPE html>
<HTML>
<TITLE> Les structures iterative </TITLE></HEAD>
<BODY>
do {
nb= prompt('Entrez votre valeur numérique','');
test=isNaN(nb);
}
WHILE(test==true || nb>7 || nb<1);
document.write('le nombre que vous avez choisi est' +nb);
</SCRIPT>
</BODY>
</HTML>
2) Déduire le rôle du script ci dessus ?...............................................................................................
3) Ajouter le script suivant dans la partie BODY et déduire son rôle :
var i=1;
var s=0;
while (i<=nb)
{ s=s+i;
i=i+1; }
document.write('<BR>la somme des' +nb+ 'premiers nombres est' +s+
'<BR>');

11
…………………………………………………………………………………………………………..………………………………………………………
4) Ajouter le script suivant dans la partie BODY et déduire son rôle :
for (i=1; i<=nb; i++)
{document.write("<font size="+i+"> 3STI <br>");}
…………………………………………………………………………………………………………..………………………………………………………

A
Ac
ct
ti
iv
vi
it
té
é4
4:
: (
(L
Le
es
s f
fo
on
nc
ct
ti
io
on
ns
s)
)
1) Créer une page HTML nommée Activité4.html contenant le code permettant ci-
dessous de déterminer la bonne réponse.
Avec :
 Nom du groupe de cases d’options est : choix.
 Nom du formulaire est : qcm
Script à ajouter dans l’entête (HEAD):
function qcm_radio()
{ var rep=false;
if(document.qcm.choix[2].checked) rep=true;
if(rep==true) {alert('Bonne réponse.');}
else {alert('Réponse fausse.');}
}
</SCRIPT>
Activation du bouton dans (BODY):
<Input type="button" value="Voir la réponse" Onclick="qcm_radio()">
 D’après ce code, déduire comment vérifier l’état de la case d’option (cochée ou non) ?
…………………………………………………………..…………………………………………………………………………………………….…………
2) Améliorer le formulaire créé
précédemment comme c’est indiqué à
droite :
Avec Nom du liste de selection est
ListeChoix
<Input type="button" value=" Voir la réponse "
Onclick = "if (document.qcm.listechoix.options[2].selected)
alert('Bonne réponse.');
else alert('Réponse fausse.');">

12
 D’après ce code, déduire comment vérifier si une option de la liste est sélectionnée ou
non ?……………………………..…………………………………………………………………………………….……………………………………
3) Créer à la suite le formulaire ci-dessous.
Ajouter le code JavaScript permettant de déterminer la bonne réponse.
Avec :
 Nom du groupe de cases à cocher est : cc.
 Nom du formulaire est : qcm
Script à ajouter dans l’entête (HEAD):
function qcm_case() {
var rep=true;
for (i=0; i< document.qcm.cc.length; i++)
{
if(document.qcm.cc[i].value==1 && document.qcm.cc[i].checked==false)
rep=false;
if (document.qcm.cc[i].value==0 && document.qcm.cc[i].checked==true)
rep=false;
}
if(rep==true) {alert('Bonne réponse');}
else {alert('Mauvaise Réponse !!');}
}
</SCRIPT>
<Input type="button" value="Calculer la somme" Onclick=" qcm_case()">
 D’après ce code, déduire comment récupérer:
 Le nombre d’options dans un groupe de cases à cocher ?
…………………………………………………………..………………………………………………
 La valeur d’une case à cocher ?
…………………………………………………………..………………………………………………

13

A
Ac
ct
ti
iv
vi
it
té
é5
5:
: (
(G
Ge
es
st
ti
io
on
n d
de
es
s é
év
vé
én
ne
em
me
en
nt
ts
s)
)
Créer une page HTML nommée Activité4.html
contenant le formulaire suivant 
Ajouter le code JavaScript permettant de calculer la
somme de deux entiers saisis dans les zones de texte
en cliquant sur un lien hypertexte ou un bouton.
 Script à ajouter dans l’entête (HEAD):
<SCRIPT language= "javascript" >
function somme( )
{ var a= ………………………………………………………………………………………;
var b= ………………………………………………………………………………………;
a=………………………………………………………; b=………………………………………………………;
s=a+b;
alert("la somme est:" +s); }
</SCRIPT>
 Activation du bouton dans (BODY):
<Input type="button" value="Calculer la somme" name="B1" Onclick="……………………">
 Activation du lien hypertexte dans (BODY):
<a href="#" Onclick="………………………………"> Calculer la somme </a>

732587539-cours-tp-JavaScript-3SffffffffffffffffffffffffffffffffffffffffffffffffffffffTI.pdf

Contenu connexe

Similaire à 732587539-cours-tp-JavaScript-3SffffffffffffffffffffffffffffffffffffffffffffffffffffffTI.pdf

732587539-cours-tp-JavaScript-3SffffffffffffffffffffffffffffffffffffffffffffffffffffffTI.pdf