Cours TP JavaScript 3STI

Développement WEB
ème
Niveau : 3 SI - STI
Langage JavaScript
Introduction
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.
Structure générale ou (squelette) d’un fichier JavaScript

Dans la partie en-tête Dans le corps du fichier HTML
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT LANGUAGE="javascript"> </HEAD>
<BODY>
</SCRIPT> <SCRIPT LANGUAGE="javascript">
</HEAD>
<BODY> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
Les objets JavaScript

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,…)
 Les objets d’interface et leurs hiérarchies

JavaScript divise une page
Web en objets pour
pouvoir les manipuler.
Prof. : A. Hanen & S. @krem Page 1

La hiérarchie des objets de notre exemple est la suivante :
Accès aux objets

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
Les propriétés des objets

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
Les méthodes des objets

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éclaration des variables
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.
Conversion de types
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
Conversion de
String et Number numérique en chaîne et var a = String (21.34)  a = "21.34"
inversement var a = Number ("10.5")  a = 10.5
Evalue une chaîne de ch="5+10" ;
Eval caractères sous forme x=Eval (ch)  x=15
de valeur numérique
Les opérateurs utilisables en JavaScript

Les Entrées/Sorties en JavaScript
Entrée (Lecture)
Fonction Syntaxe Exemple
s = prompt("Saisissez votre texte :", "Texte par
défaut")
nom_variable=prompt("texte
prompt de la boite d’invite","valeur
par défaut") ;
Sortie (Affichage)
Fonction Syntaxe Exemple
Alert ("Hello world") ;
Alert Alert("message"+nom_variable) ;
document.write ("Hello world")
write document.write("message"+nom_variable) ;
(Voir Activité1/TP JavaScript)

(A faire à la maison)
Les structures de contrôle conditionnelles

Structure Syntaxe Remarques/exemples
if (condition) Autre syntaxe :
IF {Traitement 1 ;} (Condition)?Traitement1:Traitement2;
else Exemple :
{Traitement 2 ;} (a%2==0)? alert("Nbr pair"): alert("Nbr impair");

switch (expression) Exemple :
{ Switch (mois)
case V1: bloc 1; break; { case12 :case1 :case2 : alert(" hiver"); break;
switch case V2: bloc 2; break ; Case3 :case4 :case5 : alert(" printemps"); break;
… Case6 :case7 :case8 : alert(" été"); break;
case Vn: bloc n; break ; Case9 :case10 :case11 : alert(" automne"); break;
default: bloc n+1; break ; Default: alert("numéro de mois erroné") ; break ;
} }

Les structures itératives

Syntaxe Exemple
for (initialisation ; condition de For (i=0 ; i<10 ; i++)
bouclage ; progression) { document.write(i+ "<BR>")}
{ Instructions ; }
do do
{ Instructions ; } {N= Number(window.prompt("saisir un entier positif : ")) ;}
while (conditions) ; While (N<=0) ;
Compt=0;
while (conditions) While(compt<5)
{ Instructions ; } { document.write("ligne :" +compt + "<BR>") ;
Compt++ ; }

Les Fonctions
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)  Appel d’une fonction en utilisant la clause
{ return :
Instructions ; Variable = Nom_fonction(arguments) ;
[return nom_variable]  Appel d’une fonction sans utiliser la clause
} return (procédure): Nom_fonction(arguments) ;

La gestion des événements

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.
Se déclenche lorsque un élément de formulaire perd le focus c-à-d que
Onblur 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.
Cet événement s'apparente à l'événement onBlur mais avec une petite
Onchange 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 L'événement Load survient lorsque la page a fini de se charger. A l'inverse,
Onunload Unload survient lorsque l'utilisateur quitte la page.
Onmouseover Ces évènements se déclenchent lorsque le pointeur de la souris passe au
Onmouseout dessus (sans cliquer) d'un lien ou d'une image (infobulle) (onmouseover) ou
bien quitte l'élément (onmouseout)

Gestionnaires d'événement disponibles en Javascript
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 OnClick

Radio, Bouton Submit/ Reset
Liste de sélection OnBlur, OnChange, OnFocus
Les formulaires
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 :

Liste des méthodes :
name Nom du formulaire
submit Envoyer les données du
action Adresse du script de serveur à exécuter
formulaire
method Méthode d'appel du script (get ou post)
reset Réinitialise le formulaire
target Destination du retour du formulaire
Voyons maintenant en détail quelques éléments de formulaire :

Elément Opération Syntaxe
Récupérer le contenu d'une zone de
Les zones de texte saisie (zone de texte/zone de texte NomVariable=document.NomFormulaire.NomZone.value
multiple et même un champ password)
Modifier le contenu d’une zone de saisie document.NomFormulaire.NomZone.value = expression
Les boutons radio (groupe de cases Vérifier si une case d’option est cochée NomVariable=document.NomF.NomGroupe[indice].checked
d’options) ou non
Récupérer la valeur d'un bouton radio NomVariable=document.NomF. NomGroupe [indice].value
 Un seul choix
 Indice des boutons commence par 0 Connaître le nombre d'options NomVariable=document.NomF. NomGroupe.length
vérifier si une case est cochée ou non NomVariable=document.NomF.NomCase. checked

Les cases à cocher
Récupérer la valeur d'une case à cocher NomVariable=document.NomF.NomCase. value

 Un ou plusieurs choix
Les listes de sélection NomVariable=new Option (texte, valeur)
Ajouter une nouvelle option à la liste document.NomF.NomListe.options[position]=NomVariable
 texte : le texte de l’élément à ajouter

 Gérées à travers un tableau nommé  Valeur : la valeur de l’élément à ajouter
Options contenant les éléments de la liste)
 Length donne le nbre d’éléments d’une
liste Supprimer une option de la liste document.NomF.NomListe.options[i]=null
 SelectedIndex donne l’indice de
l’élément sélectionné (liste à sélection  i : la position de l’élément à supprimer de la liste
unique) commencant par 0

Développement WEB
ème
Niveau : 3 SI - STI
TP JavaScript
Activité1: (Les entrées/sorties.. les structures conditionnelles)
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
9
Activité2: (structure conditionnelle à choix)
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>
<SCRIPT LANGUAGE="javascript">
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>
Activité3: (Les structures itératives)

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>
<SCRIPT LANGUAGE="javascript">
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>');
10
…………………………………………………………………………………………………………..………………………………………………………
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>");}
…………………………………………………………………………………………………………..………………………………………………………
Activité4: (Les fonctions)

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.');">
11
 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 ?

…………………………………………………………..………………………………………………
12
Activité5: (Gestion des événements)
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>
13

Cours TP JavaScript 3STI

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours TP JavaScript 3STI

Transféré par

Droits d'auteur :

Formats disponibles

Développement WEB

Structure générale ou (squelette) d’un fichier JavaScript

Les objets JavaScript

 Les objets d’interface et leurs hiérarchies

Prof. : A. Hanen & S. @krem Page 1

Accès aux objets

Les propriétés des objets

Les méthodes des objets

Prof. : A. Hanen & S. @krem Page 2

Les opérateurs utilisables en JavaScript

Prof. : A. Hanen & S. @krem Page 3

document.write ("Hello world")

(Voir Activité1/TP JavaScript)

Les structures de contrôle conditionnelles

Prof. : A. Hanen & S. @krem Page 4

(Voir Activité2/TP JavaScript)

Les structures itératives

(Voir Activité3/TP JavaScript)

Prof. : A. Hanen & S. @krem Page 5

(Voir Activité4/TP JavaScript)

La gestion des événements

(Voir Activité5/TP JavaScript)

Liste des évènements les plus utilisés

Prof. : A. Hanen & S. @krem Page 6

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 OnClick

Liste des propriétés :

Voyons maintenant en détail quelques éléments de formulaire :

Prof. : A. Hanen & S. @krem Page 7

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

 texte : le texte de l’élément à ajouter

Prof. : A. Hanen & S. @krem Page 8

3) Modifier le script précédent en ajoutant un contrôle de saisie des valeurs a et b.

Activité3: (Les structures itératives)

2) Déduire le rôle du script ci dessus ?...............................................................................................

4) Ajouter le script suivant dans la partie BODY et déduire son rôle :

Activité4: (Les fonctions)

Activation du bouton dans (BODY):

<Input type="button" value="Voir la réponse" Onclick="qcm_radio()">

2) Améliorer le formulaire créé

Activation du bouton dans (BODY):

<Input type="button" value=" Voir la réponse "

3) Créer à la suite le formulaire ci-dessous.

Ajouter le code JavaScript permettant de déterminer la bonne réponse.

Script à ajouter dans l’entête (HEAD):

Activation du bouton dans (BODY):

<Input type="button" value="Calculer la somme" Onclick=" qcm_case()">

 D’après ce code, déduire comment récupérer:

 La valeur d’une case à cocher ?

 Script à ajouter dans l’entête (HEAD):

 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>

Vous aimerez peut-être aussi