TP Si Tic Js

TP N4 (Introduction au J S):
Objectifs :
Savoir insrer du code JS dans une page Web.
Savoir accder aux objets formant une page Web en crivant de code JS.
I- Quest ce que le Javascript :

Javascript est un langage de scripts qui incorpor aux balises Html, permet d'amliorer la prsentation
et l'interactivit des pages Web.
Javascript est donc une extension du code Html des pages Web. Les scripts, qui s'ajoutent ici aux
balises Html, peuvent en quelque sorte tre compars aux macros d'un traitement de texte.
Ces scripts vont tre grs et excuts par le browser lui-mme sans devoir faire appel aux ressources
du serveur. Ces instructions seront donc traites en direct et surtout sans retard par le navigateur.
Javascript a t initialement dvelopp par Netscape et s'appelait alors LiveScript. Adopt la fin de
l'anne 1995, par la firme Sun (qui a aussi dvelopp Java), il prit alors son nom de Javascript.
Javascript n'est donc pas propre aux navigateurs de Netscape (bien que cette firme en soit un fervent
dfenseur). Microsoft l'a d'ailleurs aussi adopt partir de son Internet Explorer 3. On le retrouve, de
faon amliore, dans Explorer 4.
II- Comment Insrer un code Javascript :
Pour crire et tester des codes Javascript il vaut faut un navigateur Web qui reconnat Javascript (IE,
Netscape, Mozilla Firefox,), un diteur de traitement de texte (Notepad++, bloc note,Word pad) et
une solide reconnaissance du langage HTML.
Le code du javascript a la forme suivante :
<script language=javascript>
. Instruction 1 ;
. Instruction 2 ;
. Instruction 3 ;
.
.
.
. Instruction n ;
</script>
La question qui se pose o on va insrer ce code JS dans la page HTML ?
Il existe 4 manires dinsrer le code Javascript dans une page HTML

1- Insertion pour excution directe :
C'est--dire le code sexcute automatiquement lors de chargement de la page HTML au niveau du
navigateur. Le code javascript est plac dans le corps de la page html c'est--dire entre
<body></body>.
Exemple1 : Taper le code JS suivant:

<html>
<head><title>Exemple1</title></head>
<body>
<center><b>Exemple dexcution directe du code javascript</b></center><br>
alert(Ce message est affich automatiquement);
</script>
</body></html>
2- Excution en fonction dun vnement :
Le code est dabord lu par le navigateur (exemple : IE), stock en mmoire pour ne sexcut que sur
demande. Dans ce cas, le code JS est plac dans le page HTML entre <HEAD> .</HEAD>, le code
sexcute seulement lors dun vnement gnr par intervention de lutilisateur.
<html>
<head><title>Exemple2</title>
function affiche(){
alert(Ce message ne saffiche que lorsque vous avez cliqu sur le bouton );}
</script>
</head>
<body>
<form name=f1>
<input type=button name=evenement value=cliquer ici onclick=affiche()>
</form>
</body></html>
Commentaire : Lappel de la fonction affiche() nest possible que lorsque

lvnement clic ralis par lutilisateur est dclench, cest la raison pour
laquelle le langage JS est un langage vnementiel.
3- Insertion du code JS lintrieur dune balise html :
Certaines balises HTML acceptent de ragir des vnement soit provoqu par lintervention
dutilisateur soit provoqu par lintervention du navigateur lui-mme (chargement dune page
HTML par exemple). Dans ce cas le code Javascript peut tre insrer directement au niveau de la
balise comme suit :
<html><head><title>Exemple3</title></head>
<BODY onLoad=javascript: alert(Bienvenue cette page) ; onUnload=javascript: alert(Au
revoir); >
<b><u>Insertion du code JS lintrieur dune balise html</u></b>
</BODY>
</HTML>
Commentaire :
onload est un vnement qui sexcute lorsque la page est charge par
le navigateur.
Unload de mme que onload mais sexcute lorsque lutilisateur quitte la
page
4- Appel du code JS partir dun fichier dextension .js :

On peut faire appel aux codes JS crits dans des fichiers qui portent lextension .js dans notre page
HTML. Intrt de cette procdure est de rutiliser ces codes dans dautres pages HTML autant de fois
que vous voulez.
Exemple : Voir exemple livre page 83
III- Les objets et leur hirarchie
Javascript va diviser une page en objets et surtout va vous permettre d'accder ces objets, d'en
retirer des informations et de les manipuler.
Voyons d'abord une illustration des diffrents objets qu'une page peut contenir.
Vous avez charg la page suivante :
Javascript va diviser cette page en objets et

surtout va vous permettre d'accder ces
objets, d'en retirer des
informations et de les manipuler.
Voyons d'abord une illustration des
diffrents objets qu'une page peut contenir.
Vous avez charg la page suivante :
Cette page s'affiche dans une fentre. C'est

l'objet fentre.
Dans cette fentre, il y a un document

Html. C'est l'objet document. Autrement
dit (et c'est l que l'on voit
apparatre la notion de la hirarchie des
objets Javacript), l'objet fentre contient
l'objet document.
Dans ce document, on trouve un formulaire au sens

Html. C'est l'objet formulaire. Autrement dit, l'objet
fentre
contient un objet document qui lui contient un objet
formulaire.
Dans ce document, on trouve trois objets. Des

boutons radio, un bouton classique et une zone de
texte. Ce sont
respectivement l'objet radio, l'objet bouton, l'objet
texte. Autrement dit l'objet fentre contient l'objet
document
qui contient l'objet formulaire qui contient son
tour l'objet radio, l'objet fentre contient l'objet
document qui
contient l'objet formulaire qui contient son tour
l'objet bouton et l'objet fentre contient l'objet
document qui
contient l'objet formulaire qui contient son tour
l'objet texte.
La hirarchie de lobjet bouton de cet exemple est donc
windows document formulaire bouton
Pour accder un objet (vous l'avez peut-tre dj devin), il faudra donner le chemin complet de l'objet en
allant du contenant le plus extrieur l'objet l'objet rfrenc.
Soit par exemple pour le bouton radio "semaine" : (window).document.form.radio[0].
Nous avons mis l'objet window entre parenthses car comme il occupe la premire place dans la hirarchie, il
est repris par dfaut par Javascript et devient donc facultatif.
Et enfin pour les puristes, Javascript n'est pas proprement parler un langage orient objet tel que C++ ou Java.
On dira plutt que Javascript est un langage bas sur les objets.
TP N5 (Afficher du texte):
Objectifs :
Savoir afficher du texte et des messages.
Savoir la notion dune mthode.
I- Les boites de dialogue :

Une bote de dialogue est une fentre qui s'affiche au premier plan suite un vnement, et qui
permet
Soit d'avertir l'utilisateur
Soit le confronter un choix
Soit lui demander de complter un champ pour rcuprer une information
I-1 : La mthode alert():
Alert() est une mthode de l'objet Window. Pour se conformer la notation classique
nom_de_l'objet.nom_de_la_proprit, on aurait pu noter window.alert(). Window venant en tte
des objets Javascript, celui-ci est repris par dfaut par l'interprteur et devient en quelque sorte
facultatif.
Si vous souhaitez que votre texte de la fentre alert() s'inscrive sur plusieurs lignes, il faudra utiliser le
caractre spcial /n pour crer une nouvelle ligne.
Voici sa syntaxe :
alert(nom_de_la_variable);
alert('Chane de caractres');
alert('Chane de caractres' + nom_de_la_variable);
Exemple1 : Taper le code suivant
<html><head><title>Exemple1</title>
function msg(){
alert(Attention!);}
</script></head>
<body>
<center><b><u>La mthode Alert()</u></b></center><br>
<form name= f1>

<input type=button value=Cliquer ici !!! onclick=msg() >
</form></body></html>
Rsultat du code
La chane de caractre peut (et doit dans certains cas) contenir des caractres
marqus d'un antislash (\). Par exemple, si vous voulez crire :
Remarque :
Message d'alerte :
Au feu!!
Il faudra crire le script suivant :
alert('Message d\'alerte \nAu feu!!');
I-2 : La mthode Confirm():
La mthode confirm() est similaire la mthode alert(), si ce n'est qu'elle permet un choix entre
"OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la mthode renvoie la valeur true. Elle
renvoie false dans le cas contraire...Elle admet comme alert() un seul paramtre: une chane de
caractres...
Sa syntaxe est :
confirm('Chane de caractres');
Exemple2 :
function choix(){
ok= Confirm(Voulez vous continuer?);
if(ok)
{alert(Vous aimez JS !!! ) ;}
else{ alert(Vous n\aimez pas JS !!! ) ;}
}
</script></head>
<body>
<center><b><u>La mthode confirm()</u></b></center><br>
<form name= f1>

<input type=button value=Cliquer ici !!! onclick=choix() >
Rsultat du code
I-3 : La mthode prompt():
La mthode prompt est un peu plus volue que les deux prcdentes puisqu'elle fournit un
moyen simple de rcuprer une information provenant de l'utilisateur, on parle alors de bote
d'invite. La mthode prompt() requiert deux arguments :
le texte d'invite
la chane de caractres par dfaut dans le champ de saisie
Sa syntaxe est donc la suivante :

prompt('Posez ici votre question','chane par dfaut');
Cette bote d'invite retourne la valeur de la chane saisie par l'utilisateur, elle retourne la valeur
null si jamais aucun texte n'est saisi...
Exemple3 :
function choix(){
ch= prompt(Question,rponse);
if(ch != null)
alert(ch) ;
}
</script></head>
<body>
<center><b><u>La mthode
prompt()</u></b></center><br>
<form name= f1>

<input type=button value=Cliquer ici !!!
onclick=choix() >
Rsultat du code
II : Quappelle-t-on une mthode ?
Une mthode est une fonction associe un objet, c'est--dire une action que l'on peut faire
excuter un objet. Les mthodes des objets du navigateur sont des fonctions dfinies l'avance
par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de crer une
mthode personnelle pour un objet que l'on a cr soi-mme. Prenons par exemple une page
HTML, elle est compose d'un objet appel document. L'objet document a par exemple la
mthode write() qui lui est associe et qui permet de modifier le contenu de la page HTML en
affichant du texte. Une mthode s'appelle un peu comme une proprit, c'est--dire de la manire
suivante :
window.objet1.objet2.methode()
Dans le cas de la mthode write(), l'appel se fait comme suit :

window.document.write()
Dans le cas de la mthode alert(), l'appel se fait comme suit :

window.alert() et puisque lobjet windows occupe la 1re place dans la
hirarchie il suffit dcrire alert() tout court.
II -1 : La mthode Write :
Une La mthode write() de l'objet document permet de modifier de faon dynamique le contenu
d'une page HTML. Voici la syntaxe de la mthode write() :
window.document.write(expression1, expression2, ...)
Cette mthode permet d'crire le rsultat des expressions passes en paramtre dans le document
dans lequel elle est utilise. Il est ainsi possible d'utiliserS la mthode write() de diffrentes
faons :
soit en passant directement le texte en paramtres :

document.write("bonjour");
qui aura pour effet de concatner la chane 'bonjour' l'endroit o est plac le script
soit en passant le texte par l'intermdiaire d'une variable :

Chaine='bonjour';
document.write(Chaine);
Ce qui aura pour effet de concatner la chane 'bonjour' (contenue dans la variable
Chaine) l'endroit o est plac le script
soit en utilisant les deux :

Chaine='bonjour';
document.write('je vous passe le ' + Chaine);
Ce qui aura pour effet de concatner la chane 'bonjour' (contenue dans la variable
Chaine) la suite de la chane de caractre 'je vous passe le' dans la page HTML
soit en insrant directement une expression, qui sera value dans un premier temps et
dont le rsultat sera ensuite affich:
Chaine='La racine carre de 2 vaut : ';
document.write(Chaine+Math.sqrt(2));
Il est notamment possible d'utiliser des balises HTML l'intrieur mme de la mthode write :
document.write('<font color="#FF0000">Bonjour</font>');
II -2: La mthode Writeln :
La mthode writeln() fonctionne exactement comme la mthode write() la seule diffrence

qu'elle ajoute un retour chariot la fin de la chane.
Or un retour chariot (en HTML) est ignor par le navigateur (Rappel: un retour la ligne se fait
avec la balise <BR>).
Exemple 4:
<HTML>
<head><title>Exemple4</title></head>
<BODY>
<H1>Ceci est du Html</H1>
<SCRIPT LANGUAGE="Javascript">
<
document.write("<H1>Et ceci du Javascript</H1>");
>
</SCRIPT>
</BODY>
</HTML>
Ce qui donnera comme rsultat :
Ceci est du Html

Et ceci du Javascript
TP N6 (Variables & oprateurs en JS):

Objectifs :
Savoir dclarer et manipuler des variables en JS.
Savoir les oprateurs utiliss en JS.
I- Les variables :
Une variable est un objet repr par son nom, pouvant contenir des donnes, qui pourront tre
modifies lors de l'excution du programme.
II-La dclaration de variables
Le Javascript tant trs souple au niveau de l'criture ( double tranchant car il laisse passer des
erreurs...), la dclaration des variables peut se faire de deux faons:
soit de faon explicite, en faisant prcder la variable du mot cl var qui permet
d'indiquer de faon rigoureuse qu'il s'agit d'une variable :
var chaine= "bonjour"
soit de faon implicite, en laissant le navigateur dterminer qu'il s'agit d'une dclaration
de variable. Pour dclarer implicitement une variable, il suffit d'crire le nom de la
variable suivie du caractre = et de la valeur affecter :
chaine= "bonjour"
Mme si une dclaration implicite est tout fait reconnue par le navigateur, il est plus rigoureux
de dclarer les variables de faon explicite avec le mot var.
Voici un exemple dans lequel deux variables sont dclares :
<html><head><SCRIPT language="Javascript">
function f(){
var MaVariable;
var MaVariable2 = 3;
MaVariable = 2;
document.write(MaVariable*MaVariable2);}</SCRIPT>
<body>
<form name="f1">
<input type="button" value="cliquer ici" onclick="f()"></form>
</body></html>
III-Porte (visibilit) des variables

Selon l'endroit o une variable est dclare, celle-ci pourra tre accessible (visible) de partout
dans le script ou bien uniquement dans une portion confine du code, on parle de porte
d'une variable.
Lorsqu'une variable est dclare sans le mot cl var, c'est--dire de faon implicite, elle est
accessible de partout dans le script (n'importe quelle fonction du script peut faire appel cette
variable). On parle alors de variable globale
La porte d'une variable dclare de faon explicite (prcde du mot-cl var), dpend de
l'endroit o elle est dclare.
Une variable dclare au dbut du script, avant toute fonction, sera globale. Elle peut tre
utilise n'importe o dans le script .
Une variable dclare explicitement dans une fonction aura une porte limite cette
seule fonction, c'est--dire qu'elle est inutilisable ailleurs. On parle alors de variable
locale .
Voici deux exemples permettant de l'illustrer :

<html><head>
<body>
<SCRIPT language="Javascript">
var a = 12;
var b = 4;
function MultipliePar2(b) {
var a = b * 2;
return a;
}
</SCRIPT><body>
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("<br>");
document.write("La valeur de a est ",a);
</script>
</body></html>
Dans l'exemple ci-dessus, la variable a est dclare explicitement en dbut de script, ainsi que
dans la fonction. Voici ce qu'affiche ce script :
Le double de 4 est 8
La valeur de a est 12
Voici un autre exemple dans lequel a est dclare implicitement dans la fonction :
<html><head>
<body>
<SCRIPT language="Javascript">
var a = 12;
var b = 4;
function MultipliePar2(b) {
a = b * 2;
return a;
}
</SCRIPT>
<body><script language=javascript>
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("<br>");
document.write("La valeur de a est ",a);
</script>v</body></html>
Voici ce qu'affiche ce script :

Le double de 4 est 8
La valeur de a est 8
IV-Les types de donnes dans les variables

En Javascript il n'est pas ncessaire de dclarer le type des variables, contrairement des
langages volus tels que le langage C ou le Java pour lesquels il faut prciser s'il s'agit d'entier
(int), de nombre virgule flottante (float) ou de caractres (char).
En fait, le Javascript n'autorise la manipulation que de 4 types de donnes:
des nombres: entiers ou virgules

des chanes de caractres (string): une suite de caractres
des boolens: des variables permettant de vrifier une condition. Les boolens peuvent
prendre deux tats :
o true : si le rsultat est vrai ;
o false : lors d'un rsultat faux.
des variables de type null: un mot caractristique pour indiquer que la variable ne
contient aucune donne.
Exemple : Faire les exemples de livre pages (84-86).

V- Qu'est-ce qu'un oprateur?
Les oprateurs sont des symboles qui permettent de manipuler des variables, c'est--dire effectuer
des oprations, les valuer, ...
On distingue plusieurs types d'oprateurs:
les
les
les
les
les
oprateurs
oprateurs
oprateurs
oprateurs
oprateurs
de calcul
d'affectation
d'incrmentation
de comparaison
logiques
V-1 :Les oprateurs de calcul

Les oprateurs de calcul permettent de modifier mathmatiquement la valeur d'une variable
Oprateur Dnomination
+
*
/
=
oprateur
d'addition
oprateur de
soustraction
oprateur de
multiplication
plus: oprateur de
division
oprateur
d'affectation
Effet
Exemple
Rsultat (avec x
valant 7)
Ajoute deux valeurs
x+3
10
Soustrait deux valeurs
x-3
Multiplie deux valeurs
x*3
21
Divise deux valeurs
x/3
2.3333333
Affecte une valeur une variable
x=3
Met la valeur 3
dans la variable x
Retourne le reste de la division

oprateur modulo entire de l'oprande de gauche par x % 2
celle de droite
V-2 :Les oprateurs d'affectation
%
Ces oprateurs permettent de simplifier des oprations telles que ajouter une valeur dans une
variable et stocker le rsultat dans la variable. Une telle oprations s'crirait habituellement de la
faon suivante par exemple: x=x+2
Avec les oprateurs d'assignation il est possible d'crire cette opration sous la forme suivante:
x+=2
Ainsi, si la valeur de x tait 7 avant opration, elle sera de 9 aprs...
Les oprateurs de ce type sont les suivants:
Oprateur
Effet
ajoute l'oprande de gauche par l'oprande de droite et stocke le rsultat dans
+=
l'oprande de gauche.
soustrait l'oprande de droite l'oprande de gauche et stocke le rsultat dans
-=
multiplie l'oprande de gauche par l'oprande de droite et stocke le rsultat dans
*=
divise l'oprande de gauche par l'oprande de droite et stocke le rsultat dans
/=
calcule le reste de la division entire de l'oprande de gauche par l'oprande de droite
%=
et stocke le rsultat dans l'oprande de gauche.
Les oprateurs d'incrmentation
Ce type d'oprateur permet de facilement augmenter ou diminuer d'une unit une variable. Ces
oprateurs sont trs utiles pour des structures telles que des boucles, qui ont besoin d'un compteur
(variable qui augmente de un en un).
Un oprateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien
x+=1
Effet
Syntaxe Rsultat (avec x valant 7)
Incrmentation Augmente d'une unit la variable x++
8
++
Dcrmentation Diminue d'une unit la variable x-6
--
V-3 :Les oprateurs de comparaison

Oprateur
Dnomination
==
A ne pas
oprateur
confondre avec le
d'galit
signe
d'affectation (=)!!
Effet
Compare deux valeurs et

vrifie leur galit
Exemple
x==3
===
oprateur
d'identit
Vrifie l'identit de valeur et

de type de deux valeurs
a===b
!=
oprateur de
diffrence
Vrifie qu'une variable est

diffrente d'une valeur
x!=3
!==
<
Vrifie la non identit de

valeur et de type de deux
oprateur de non valeurs, c'est--dire si les deux
a!==b
identit
valeurs n'ont pas la mme
valeur ou bien sont de types
diffrents.
oprateur
d'infriorit
strictement infrieure une
x<3
stricte
valeur
infrieure ou gale une
valeur
<=
oprateur
d'infriorit
>

oprateur de
strictement suprieure une
supriorit stricte
valeur
>=
oprateur de
supriorit

suprieure ou gale une
valeur
x<=3
x>3
x>=3
Rsultat (avec x
valant 7)
Retourne True si X
est gal 3, sinon
False
Retourne True si a
est gal b et est
de mme type,
sinon False
Retourne 1 si X est
diffrent de 3,
sinon 0
Retourne True si a
est diffrent de b
ou bien est de type
diffrent, sinon
False
Retourne True si X
est infrieur 3,
sinon False
Retourne True si X
est infrieur ou
gale 3, sinon
False
Retourne True si X
est suprieur 3,
sinon False
Retourne True si X
est suprieur ou
gal 3, sinon
False
V-4 :Les oprateurs logiques (boolens)

Ce type d'oprateur permet de vrifier si plusieurs conditions sont vraies:
||
&&
!
Effet
Syntaxe
Vrifie qu'une des conditions est
OU logique
((expression1)||(expression2))
ralise
Vrifie que toutes les conditions sont ((expression1)&&(expression2))
ET logique
ralises
Inverse l'tat d'une variable
NON logique boolenne (retourne la valeur 1 si la (!condition)
variable vaut 0, 0 si elle vaut 1)
TP N7 (Les structures de contrle & les fonctions en JS):

Objectifs :
Savoir utiliser les diffrentes structures de contrle.
Savoir Dclarer une fonction en JS.
I- La structure conditionnelle :
On appelle structure conditionnelle les instructions qui permettent de tester si une condition est
vraie ou non, ce qui permet notamment de donner de l'interactivit vos scripts.
La syntaxe de cette expression est la suivante :
if (condition ralise) {
liste d'instructions
}
Exemple : if (x==2) document.write("X vaut 2");
L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart

du temps on aimerait pouvoir choisir les instructions excuter en cas de non ralisation de la
condition...
L'expression if ... else permet d'excuter une autre srie d'instruction en cas de non ralisation de
la condition.
if (condition ralise) {
//liste d'instructions
}
else {
//autre srie d'instructions
}
II- La boucle For :
L'instruction for permet d'excuter plusieurs fois la mme srie d'instructions: c'est une boucle!
Dans sa syntaxe, il suffit de prciser le nom de la variable qui sert de compteur (et
ventuellement sa valeur de dpart, la condition sur la variable pour laquelle la boucle s'arrte
(basiquement une condition qui teste si la valeur du compteur dpasse une limite) et enfin une
instruction qui incrmente (ou dcrmente) le compteur.

for (compteur; condition; modification du compteur) {
}
Par exemple :
for (i=1; i<6; i++) {
Alert(i)
}
Cette boucle affiche 5 fois la valeur de i, c'est--dire 1, 2, 3, 4,5

Elle commence i=1, vrifie que i est bien infrieur 6, etc... jusqu' atteindre la valeur i=6,
pour laquelle la condition ne sera plus ralise, la boucle s'interrompra et le programme
continuera son cours.
il faudra toujours vrifier que la boucle a bien une condition de sortie (i.e le compteur
s'incrmente correctement)
une instruction Alert(i); dans votre boucle est un bon moyen pour vrifier la valeur du
compteur pas pas!
il faut bien compter le nombre de fois que l'on veut faire excuter la boucle:
o for(i=0;i<10;i++) excute 10 fois la boucle (i de 0 9)
o for(i=0;i<=10;i++) excute 11 fois la boucle (i de 0 10)
o for(i=1;i<10;i++) excute 9 fois la boucle (i de 1 9)
o for(i=1;i<=10;i++) excute 10 fois la boucle (i de 1 10)
III- La boucle While :
L'instruction while reprsente un autre moyen d'excuter plusieurs fois la mme srie
d'instructions.
while (condition ralise) {
}
Cette instruction excute la liste d'instructions tant que (while est un mot anglais qui signifie tant
que) la condition est ralise.
Remarque : Linstruction RpterJusqu en JS pour syntaxe :
do{
} while (condition ralise) ;
La condition de sortie pouvant tre n'importe quelle structure conditionnelle, les risques de
boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est--dire qu'elle risque
de provoquer un plantage du navigateur!
III- Linstruction Switchcase :
L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une mme variable.
Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une variable, car
cette opration aurait t complique (mais possible) avec des if imbriqus. Sa syntaxe est la
suivante :
switch (Variable) {
case Valeur1:
Liste d'instructions;
break;
case Valeur2:
break;
case ValeurX:
break;
default:
break;
}
Remarque : Il est essentiel de terminer chaque bloc d'instruction par l'instruction break !
Applications : Faire les applications des pages 89-94.
IV- Les fonctions en JS :
1. Dfinition dune fonction :

Une fonction est un groupe de ligne(s) de code de programmation destin excuter une tche bien
spcifique
et que l'on pourra, si besoin est, utiliser plusieurs reprises. De plus, l'usage des fonctions amliorera
grandement la lisibilit de votre script.
En Javascript, il existe deux types de fonctions :
les fonctions propres Javascript. On les appelle des "mthodes". Elles sont associes un objet bien
particulier comme c'tait le cas de la mthode Alert() avec l'objet window.
les fonctions crites par vous-mme pour les besoins de votre script. C'est celles-l que nous nous
intressons maintenant.
2.Dclaration dune fonction :
Pour dclarer ou dfinir une fonction, on utilise le mot (rserv) function.
La syntaxe d'une dclaration de fonction est la suivante :
function nom_de_la_fonction(arguments) {
... code des instructions ...
}
3.Application : page 95
TP N8 (Les formulaires et la gestion des vnements en JS):

Objectifs :
Savoir utiliser les formulaires en JS.
Savoir grer les vnements en JS.
I- Les vnements en JS :
Les vnements sont des actions de l'utilisateur, qui vont pouvoir donner lieu une interactivit.
L'vnement par excellence est le clic de souris, car c'est le seul que le HTML gre. Grce au
Javascript il est possible d'associer des fonctions, des mthodes des vnements tels que le
passage de la souris au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires d'vnements qui permettent d'associer une action un vnement. La
syntaxe d'un gestionnaire d'vnement est la suivante:
onEvenement="Action_Javascript_ou_Fonction();"
Lorsqu'il est utilis dans un lien hypertexte, par exemple, la syntaxe sera la suivante :
<A href="URL" "onEvenement='Action_Javascript_ou_Fonction();'">Lien</a>
Les gestionnaires d'vnements sont associs des objets, et leur code s'insrent dans la balise de
ceux-ci...
II- Liste des vnements:
Les gestionnaires d'vnements sont associs des objets, et leur code s'insrent dans la balise de
ceux-ci...
Evnement
Description
Abort
Cet vnement a lieu lorsque l'utilisateur interrompt le chargement de l'image
(onAbort)
Se produit lorsque l'lment perd le focus, c'est--dire que l'utilisateur clique hors
Blur
(onBlur)
de cet lment, celui-ci n'est alors plus slectionn comme tant l'lment actif.
Change
Se produit lorsque l'utilisateur modifie le contenu d'un champ de donnes.
(onChange)
Click
Se produit lorsque l'utilisateur clique sur l'lment associ l'vnement.
(onClick)
Se produit lorsque l'utilisateur double-clique sur l'lment associ l'vnement
dblclick
(onDblclick)
(un lien hypertexte ou un lment de formulaire). Cet vnement n'est support

que par les versions de Javascript 1.2 et suprieures
Se produit lorsque l'utilisateur effectue un glisser-dposer sur la fentre du
dragdrop
navigateur.
(onDragdrop)
Cet vnement n'est support que par les versions de Javascript 1.2 et suprieures
Se dclenche lorsqu'une erreur apparat durant le chargement de la page.
error
(onError)
Cet vnement fait partie du Javascript 1.1.
Se produit lorsque l'utilisateur donne le focus un lment, c'est--dire que cet
Focus
(onFocus)
lment est slectionn comme tant l'lment actif
Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
keydown
(onKeydown) Cet vnement n'est support que par les versions de Javascript 1.2 et suprieures
Se produit lorsque l'utilisateur maintient une touche de son clavier enfonce.
keypress
(onKeypress) Cet vnement n'est support que par les versions de Javascript 1.2 et suprieures
Se produit lorsque l'utilisateur relche une touche de son clavier pralablement
keyup
enfonce.
(onKeyup)
Cet vnement n'est support que par les versions de Javascript 1.2 et suprieures
Load
Se produit lorsque le navigateur de l'utilisateur charge la page en cours
(onLoad)
MouseOver Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un
(onMouseOver) lment
Se produit lorsque le curseur de la souris quitte un lment.
MouseOut
(onMouseOut) Cet vnement fait partie du Javascript 1.1.
Se produit lorsque l'utilisateur efface les donnes d'un formulaire l'aide du
Reset
(onReset)
bouton Reset.
Resize
Se produit lorsque l'utilisateur redimensionne la fentre du navigateur
(onResize)
Se produit lorsque l'utilisateur slectionne un texte (ou une partie d'un texte) dans
Select
(onSelect)
un champ de type "text" ou "textarea"
Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire
Submit
(onSubmit)
(le bouton qui permet d'envoyer le formulaire)
Unload
Se produit lorsque le navigateur de l'utilisateur quitte la page en cours
(onUnload)
III-
Association des vnements aux objets
Chaque vnement ne peut pas tre associ n'importe quel objet. Il est vident par exemple
qu'un vnement OnChange ne pourra pas s'appliquer un lien hypertexte. Voici un tableau
rcapitulant les objets auxquels peuvent tre associs chaque vnement :
Evnements
abort
blur
change
click
dblclick
dragdrop
error
focus
Objets concerns
Image
Button, Checkbox, FileUpload, Password, Radio, Reset, Select, Submit, Text,
TextArea, window
FileUpload, Select, Submit, Text, TextArea
Button, document, Checkbox, Link, Radio, Reset, Select, Submit
document, Link
window
Image, window
Button, Checkbox, FileUpload, Password, Radio, Reset, Select, Submit, Text,
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
move
reset
resize
select
submit
unload
TextArea, window
document, Image, Link, TextArea
Image, window
Button, document, Link
Aucun spcifiquement
Layer, Link
Area, Link
Button, document, Link
window
form
window
text, Textarea
Form
window
IV- Les vnements et les formulaires:
Avec Javascript, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en
Javascript, on peut accder chaque lment d'un formulaire pour, par exemple, y aller lire ou crire une
valeur, noter un choix auquel on pourra associer un gestionnaire d'vnement... Tous ces lments
renforceront grandement les capacits interactives de vos pages.
Exemple1 (Zone de texte) : Taper le code JS suivant:
La zone de texte est l'lment d'entre/sortie par excellence de Javascript. La syntaxe Html est <INPUT
TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de
longueur x et de longueur maximale de y.
L'objet text possde trois proprits :
name indique le nom du contrle par lequel on pourra accder.
Defaultvalue indique la valeur par dfaut qui sera affiche dans la zone de texte.
Value indique la valeur en cours de la zone de texte. Soit celle tape par l'utilisateur ou si celui-ci n'a rien
tap, la valeur par dfaut.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tap : " + test);
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Contrler"
onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Constatation : Lorsqu'on clique sur le bouton "contrler", Javascript appelle la fonction controle()
laquelle on passe le formulaire dont le nom est form1 comme argument. Cette fonction controle() dfinie
dans les balises <HEAD> prend sous la variable test, la valeur de la zone de texte. Pour accder cette
valeur, on note le chemin complet de celle-ci. Soit dans le document prsent, il y a l'objet formulaire appel
form1 qui contient le contrle de texte nomm input et qui a comme proprit l'lment de valeur value. Ce
qui donne document.form1.input.value.
Exemple2 (Ecrire une valeur dans une zone de texte) : Taper le code JS suivant:
<HTML>
<HEAD>
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE="">
Zone de texte d'entre <BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Afficher"
onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE="">
Zone de texte de sortie
</FORM>
</BODY>
</HTML>
Constatation : Lorsqu'on clique le bouton "Afficher", Javascript appelle la fonction

afficher() laquelle on passe le formulaire dont le nom est cette fois form2 comme
argument. Cette fonction afficher() dfinie dans les balises <HEAD> prend sous la
variable testin, la valeur de la zone de texte d'entre. A l'instruction suivante, on dit
Javascript que la valeur de la zone de texte output comprise dans le formulaire nomm
form2 est celle de la variable testin. A nouveau, on a utilis le chemin complet pour
arriver
la
proprit
valeur
de
l'objet
souhait
soit
en
Javascript
document.form2.output.value.
Exemple3 (Les boutons radio) : Taper le code JS suivant:
Les boutons radio sont utiliss pour noter un choix, et seulement un seul, parmi un ensemble de propositions.
Proprit Description :
name indique le nom du contrle. Tous les boutons portent le mme nom.
index l'index ou le rang du bouton radio en commenant par 0.
checked indique l'tat en cours de l'lment radio
defaultchecked indique l'tat du bouton slectionn par dfaut.
value indique la valeur de l'lment radio.
<HTML><HEAD><SCRIPT language="javascript">
function choixprop(form3) {
if (form3.choix[0].checked) alert("Vous avez choisi la proposition " +
form3.choix[0].value) ;
else if (form3.choix[1].checked) alert("Vous avez choisi la proposition
" + form3.choix[1].value) ;
else if (form3.choix[2].checked) alert("Vous avez choisi la proposition
" + form3.choix[2].value) ;
else alert("Vous navez rien choisi") ;
}</SCRIPT></HEAD>
<BODY>
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numro 1<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?"
onClick="choixprop(form3)">
</FORM></BODY></HTML>
Constatation : Dans le formulaire nomm form3, on dclare trois boutons radio.

Notez que l'on utilise le mme nom pour les trois boutons. Vient ensuite un bouton qui
dclenche la fonction choixprop(). Cette fonction teste quel bouton radio est coch.
On accde aux boutons sous forme d'indice par rapport au nom des boutons radio soit
choix[0], choix[1], choix[2]. On teste la proprit checked du bouton par
if(form3.choix[x].checked). Dans l'affirmative, une boite d'alerte s'affiche. Ce
message reprend la valeur attache chaque bouton par le chemin
form3.choix[x].value.
Exemple4 (Les boutons case cocher) : Taper le code JS suivant:
Les boutons case cocher sont utiliss pour noter un ou plusieurs choix (pour rappel avec les boutons radio un
seul choix) parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout fait semblable aux
boutons radio sauf en ce qui concerne l'attribut name.
Proprit Description
name indique le nom du contrle. Toutes les cases cocher portent un nom diffrent.
checked indique l'tat en cours de l'lment case cocher.
defaultchecked indique l'tat du bouton slectionn par dfaut.
value indique la valeur de l'lment case cocher.
<HTML>
<HEAD>
<script language="javascript">
function reponse(form4) {
if ( (form4.check1.checked) == true && (form4.check2.checked) ==
true && (form4.check3.checked) == false
&& (form4.check4.checked) == true)
{ alert("C'est la bonne rponse! ") }
else
{alert("Dsol, continuez chercher.")}
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :<br>
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix
numro 1<BR>
numro 2<BR>
numro 3<BR>
numro 4<BR>
<INPUT TYPE="button"NAME="but" VALUE="Corriger"
onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>
Constatation : Dans le formulaire nomm form4, on dclare quatre cases cocher.

Notez que l'on utilise un nom diffrent pour les quatre boutons. Vient ensuite un
bouton qui dclenche la fonction reponse(). Cette fonction teste quelles cases cocher
sont slectionnes. Pour avoir la bonne rponse, il faut que les cases 1, 2 et 4 soient
coches. On accde aux cases en utilisant chaque fois leur nom. On teste la proprit
checked du bouton par (form4.nom_de_la_case.checked). Dans l'affirmative (&& pour
et logique), une boite d'alerte s'affiche pour la bonne rponse. Dans la ngative, une
autre boite d'alerte vous invite recommencer.
Exemple5 (Liste de slection) : Taper le code JS suivant:

Le contrle liste de slection vous permet de proposer diverses options sous la forme d'une liste droulante dans
laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors affich.
La boite de la liste est cre par la balise <SELECT> et les lments de la liste par un ou plusieurs tags
<OPTION>. La balise </SELECT> termine la liste.
Proprit Description
name indique le nom de la liste droulante.
length indique le nombre d'lments de la liste. S'il est indiqu dans le tag <SELECT>, tous
les lments de la liste seront affichs. Si vous ne l'indiquez pas un seul apparatra dans la boite de la liste
droulante.
selectedIndex : indique le rang partir de 0 de l'lment de la liste qui a t slectionn par l'utilisateur.
defaultselected : indique l'lment de la liste slectionn par dfaut. C'est lui qui apparat alors dans la
petite boite.
<HTML>
<HEAD>
function liste(form5) {
alert("L'lment " + (form5.list.selectedIndex
+ 1)); }
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix : <FORM NAME="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elment 1</option>
</SELECT>
<INPUT TYPE="button"NAME="b"
VALUE="Quel est l'lment retenu?"
onClick="liste(form5)"> </FORM>
</BODY>
</HTML>
Constatation : Dans le formulaire nomm form5, on dclare une liste de slection

par la balise <SELECT></SELECT>. Entre ses deux balises, on dclare les diffrents
lments de la liste par autant de tags <OPTION>. Vient ensuite un bouton qui
dclenche la fonction liste(). Cette fonction teste quelle option a t slectionne. Le
chemin complet de l'lment slectionn est form5.nomdelaliste.selectedIndex.
Comme l'index commence 0, il ne faut pas oublier d'ajouter 1 pourretrouver le juste
rang de l'lment.
TP N9 (Les Objets de JS):

Objectifs :
Savoir Manipuler les diffrents Objets de JS.
Savoir utiliser les diffrentes mthodes des ces objets.
I- Lobjet string :
String est un mot anglais qui signifie "chane", L'objet String est un objet qui contient un certain
nombre de proprits et de mthodes permettant la manipulation de chanes de caractres.
I-1- Les proprits de lobjet string :
L'objet string a une seule proprit : la proprit length qui permet de retourner la longueur d'une
chane de caractres. Cette proprit est trs utile car lorsque l'on traite une chane de caractres
on aime gnralement savoir quel moment s'arrter.
La syntaxe de la proprit length est la suivante:
x = nom_de_la_chaine.length;
x = ('chaine de caracteres').length;
Exemple1 : (afficher la longueur dune chane)

<HTML>
<HEAD>
function long(form1) {
alert("La longueur de la chane : " + test.length);
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="button" NAME="bouton" VALUE="length" onClick="long(form1)">
</FORM>
</BODY>
</HTML>
I-2- Les mthodes de lobjet string :
1. Chaine.charAt(position) : Retourne le caractre situ la position donne en paramtre

<HTML>
<HEAD>
function controle(form1) {
for(i=0;i<test.lenght;i++)
alert("Le caractre : "+i+" est : "+ test.charAt(i));
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="button" NAME="bouton" VALUE="length" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
2. indexOf(sous-chane,position) & lastIndexOf(sous-chane,position) : Retourne respectivement la

1re et la dernire position d'une sous-chane (lettre ou groupe de lettres) dans une chane de
caractre, en effectuant la recherche de gauche droite (indexof) et de droite
gauche(lastIndexOf).
<HTML>
<HEAD>
function controle() {
var test = Javascript;
var v=a;
alert("La premire position de gauche droite : " + v+"est : "+ test.indexOf(v,0) );
alert("La premire position de droite gauche : " + v+"est : "+ test.lastIndexOf(v,9));
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="button" NAME="bouton" VALUE="indexOf&lastIndexOf" onClick="controle()">
</FORM>
</BODY>
</HTML>
3. Chaine.substring(position1,long) : La mthode retourne la sous chane (lettre ou groupe de

lettres) comprise entre les positions 1 et 2 donnes en paramtre.
<HTML>
<HEAD>
var test = Javascript;
alert("Entre 1 et 4 dans : " + test+" la sous chaine : "+ test.substring(0,4));
}</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="button" NAME="bouton" VALUE="Substring" onClick="controle()">
</FORM>
</BODY>
</HTML>
4. Chaine.toLowerCase() & chaine.toUpperCase() : Convertit respectivement tous les

caractres d'une chane en minuscule et majuscules.
II- Lobjet MATH :
L'objet Math est, comme vous l'imaginez, un objet qui a de nombreuses mthodes et proprits
permettant de manipuler des nombres et qui contient des fonctions mathmatiques courantes.
Quelque soit la mthode ou la proprit utilise, il est indispensable de le prfixer avec Math.
II-1- Les proprits de lobjet MATH :
Le tableau suivant dcrit les mthodes de l'objet Math.

Mthode
description
Exemple
abs()
Cette mthode renvoie la valeur absolue d'un nombre, il

renvoie donc le nombre s'il est positif, son oppos
(positif) s'il est ngatif
ceil()
Renvoie le plus petit entier suprieur ou gal la valeur

donne en paramtre
floor()
La mthode floor() retourne le plus grand entier infrieur

ou gal la valeur donne en paramtre.
round()
Arrondit l'entier le plus proche la valeur donne en

paramtre. Si la partie dcimale de la valeur entre en
paramtre vaut 0.5, la mthode Math() arrondi l'entier
suprieur.
max(Nombre1,
Nombre2)
max() renvoie le plus grand des deux nombres donns en

paramtre
x = Math.abs(3.26);
//donne x = 3.26
x = Math.abs(3.26);
//donne x = 3.26
x = Math.ceil(6.01);
//donne x = 7
x = Math.ceil(3.99);
//donne x = 4
x=
Math.floor(6.01);
//donne x = 6
x=
Math.floor(3.99);
//donne x = 3
x=
Math.round(6.01);
//donne x = 6
x=
Math.round(3.80);
//donne x = 4
x=
Math.round(3.50);
//donne x = 4
var x =
Math.max(6,7.25);
//donne x = 7.25
var x = Math.max(8.21,-3.65);
//donne x = -3.65
var x =
Math.max(5,5);
//donne x = 5
min(Nombre1,
Nombre2)
Retourne le plus petit des deux nombres donns en

paramtre
pow(Valeur1,
Valeur2)
Retourne le nombre Valeur1 la puissance Valeur2
random()
La mthode random() renevoie un nombre pseudoalatoire compris entre 0 et 1. La valeur est gnre
partir des donnes de l'horloge de l'ordinateur.
sqrt(Valeur)
Renvoie la racine carre du nombre pass en paramtre
x=
Math.min(6,7.25);
//donne x = 6
x = Math.min(8.21,-3.65);
//donne x = -8.21
x = Math.min(5,5);
//donne x = 5
x = Math.pow(3,3);
//donne x = 27
x=
Math.pow(9,0.5);
//(racine carre)
//donne x = 3
x = Math.random();
//donne x =
0.64895349315469
57
x = Math.sqrt(9);
//donne x = 3
Exemple :(Retourner le maximum de deux nombres)

<HTML>
<HEAD>
a = prompt("donner un entier ") ;
b = prompt("donner un entier ") ;
x = Number(a) ;
y = Number(b) ;
alert("le max entre " + x+" et : "+y+ " est : "+ Math.max(x,y));
}</SCRIPT>
</HEAD><BODY>
<FORM NAME="form1">
<INPUT TYPE="button" NAME="bouton" VALUE="Maximum" onClick="controle()">
</FORM>
</BODY>
</HTML>
Constatation :
-
Prompt est une mthode qui permet de retourner une chane de caractre.
Number est une mthode qui permet de convertir une chane en un nombre.
III- Lobjet DATE :
L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion
du temps. Il s'agit d'un objet inclus de faon native dans Javascript, et que l'on peut toujours
utiliser. La syntaxe pour crer un objet-date peut tre une des suivantes:
Nom_de_l_objet = new Date() ;

Exemples : (1) var now = new Date(); (2)var myDate = new Date("month dd, yyyy hh:mm:ss");
(3) var myDate = new Date("month dd, yyyy"); (4) var myDate = new Date(yy, mm, dd, hh, mm, ss);
(5) var myDate = new Date(yy, mm, dd); (6) var myDate = new Date(milliseconds);
La date est stocke dans une variable sous la forme d'une chane qui contient le jour, le mois, l'anne,
l'heure, les minutes, et les secondes. Il est donc difficile d'accder un seul lment d'un objet date avec
les fonctions de manipulation de chanes de caractres, tant donn que chacun des lments peut avoir
une taille variable. Heureusement, les mthodes de l'objet Date fournissent un moyen simple d'accder
un seul lment, ou bien de le modifier.
Leur syntaxe est la suivante: Objet_Date.Methode() Les mthodes dont le nom commence par le
radical get (mot anglais qui signifie rcuprer) permettent de renvoyer une partie de l'objet Date :
Mthode
getDate()
getDay()
getFullYear()
getHours()
Description
Permet de rcuprer la valeur de

l'anne sur 4 chiffres pour la date
passe en paramtre
l'heure
getMilliseconds()
Permet de rcuprer le nombre de

millisecondes
getMinutes()
Permet de rcuprer la valeur des

minutes
getMonth()
Permet de rcuprer le numro du

mois
getSeconds()

secondes

millisecondes depuis le 1er janvier
1970
Retourne la diffrence entre l'heure
getTimezoneOffset() locale et l'heure GMT (Greenwich
Mean Time)
getYear()
l'ann sur 2 chiffres pour l'objet
Date.
getTime()
Type de valeurs retourne
Permet de rcuprer la valeur du jour L'objet retourn est un entier (entre 1 et 31) qui
du mois
correspond au jour du mois:
L'objet retourn est un entier qui correspond au
jour de la semaine:
Permet de rcuprer la valeur du jour
de la semaine pour la date spcifie
0: dimanche
1: lundi ...
L'objet retourn est un entier qui correspond
l'anne (XXXX) :
2007
L'objet retourn est un entier (entre 0 et 23) qui
correspond l'objet Date.
L'objet retourn est un entier (entre 0 et 999)
qui correspond aux millisecondes de l'objet
pass en paramtre.
correspond aux minutes de l'objet Date.
correspond au mois :
0: janvier
1: fvrier ...

correspond aux secondes de l'objet pass en
paramtre.
L'objet retourn est un entier. Cette mthode
est trs utile pour convertir des dates, soustraire
ou ajouter deux dates, etc.
L'objet retourn est un entier, il reprsente le
nombre de minutes de dcalage
L'objet retourn est un entier qui correspond
l'ann (XX) :
Exemple1 :(Un script qui donne simplement l'heure.)

<<HTML>
<HEAD>
function getDt(){
dt=new Date();
cal=""+ dt.getDate()+"/"+(dt.getMonth()+1) + "/20" +dt.getYear();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
tm=" "+((hrs<10)?"0":"") +hrs+":";
tm+=((min<10)?"0":"")+min+":";
tm+=((sec<10)?"0":"")+sec+" ";
document.write(cal+tm);
}
</SCRIPT>
</HEAD>
<BODY >
getDt();
</SCRIPT>
</BODY>
</HTML>
Exemple2 :(Un script avec une trotteuse)

<HTML>
<HEAD>
function getDt(){
dt=new Date();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
tm=" "+((hrs<10)?"0":"") +hrs+":";
tm+=((min<10)?"0":"")+min+":";
tm+=((sec<10)?"0":"")+sec+" ";
document.horloge.display.value=tm;
setTimeout("getDt()",1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="getDt()">
<FORM name="horloge">
<INPUT TYPE="text" NAME="display" SIZE=15 VALUE ="">
</FORM>
</BODY>
</HTML>
Constatation : Vous souhaitez peut-tre que votre affichage de l'heure change toutes les secondes.
Rappeler vous la minuterie setTimeOut [Un peu de tout... Avanc]. Il suffit d'ajouter au script un
setTimeOut qui affiche l'heure toutes les secondes. La fonction qui affiche l'heure tant getDt(),
l'instruction ajouter est donc setTimeOut("getDt()",1000); Et le tour est jou.
TP N10 (L Objet Window):

Objectifs :
Savoir lObjet Windows.
Savoir utiliser les diffrentes mthodes de lobjet Windows.
I- Lobjet window :
L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui
compose la page web.
Les mthodes de l'objet window
L'objet window possde des mthodes relatives l'ouverture et la fermeture des fentres.
Les mthodes alert(), confirm() et prompt()
Les mthodes alert(), confirm() et prompt() sont des mthodes qui font apparatre une bote de
dialogue, elles sont expliques en dtail dans le chapitre Bote de dialogue.
Les mthodes open(), et close()
Les mthodes open() et close() sont bien videmment destines permettre l'ouverture et la
fermeture de fentres. Toutefois la syntaxe de la mthode open() est longue car elle admet un
nombre important de paramtres:
La mthode open() permet d'ouvrir une fentre, voici sa syntaxe:
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
Si vous utilisez cette instruction dans un lien hypertexte, veillez remplacer les guillemets
doubles par des guillemets simples :
<A href="javascript:window.open('URL',
'nom_de_la_fenetre',
'options_de_la_fenetre')">Lien vers URL</A>
URL dsigne l'url de la page qui sera affiche dans la nouvelle fentre, c'est--dire l'emplacement
physique de celle-ci.
Les options de la fentre sont les suivantes:
option
description
directories = yes/no
Affiche ou non les boutons de navigation
location = yes/no
Affiche ou non la barre d'adresse
menubar = yes/no
Affiche ou non la barre de menu (fichier, edition, ...)
resizable = yes/no
Dfinit si la taille de la fentre est modifiable ou non
scrollbars = yes/no
Affiche ou non les ascenceurs (barres de dfilement)
status = yes/no
Affiche ou non la barre d'tat
toolbar = yes/no
Affiche ou non la barre d'outils
width = largeur (en pixels) Dfinit la largeur
height = hauteur (en pixels) Dfinit la hauteur
Ainsi, il est possible d'utiliser cette mthode avec n'importe quel gestionnaire d'vnement,
directement dans le code excuter ou bien dans une fonction.
les options doivent tre saisies les unes aprs les autres, spares par des virgules,
sans espace
l'ensemble des options doit tre encadr par les guillemets
Chacune des fentres doit cependant tre ferme, il faut donc se servir de la mthode close() qui
permet de fermer une fentre.
La mthode close() requiert le nom de la fentre comme argument, il suffit donc de crer un
bouton (image, hypertexte, ou bouton de formulaire) qui permettra de fermer cette fentre.
Exemple1 : (Crer les deux pages suivantes)
Fichier test.htm :
<HTML>
<BODY>
<H1>Ceci est un test<HI>
<FORM>
<INPUT TYPE="button" value= " Continuer " onClick="window.close()">
</FORM>
</BODY>
</HTML>
Dans la page de dpart (depart.html) :
<HTML>
<BODY>
<H1>Page de dpart<H1>
<FORM name=f1>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fentre"
onClick="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
</FORM></body></html>
Exemple2 : (Ouverture par un bouton)

<HTML>
function new_window() {
xyz="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
// sans espaces ni passage la ligne
}
</SCRIPT>
<body>
<FORM>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fentre"onClick="new_window()">
Exemple3 : (Fermeture automatique dune fentre aprs x secondes)

<HTML>
<BODY onLoad='compt=setTimeout("self.close()",4000);'>
<H1>Ceci est un test</H1>
<FORM>
<INPUT TYPE="button" value=" Continuer " onClick="clearTimeout(compt);self.close();">
</FORM>
</BODY>
</HTML>
Dans la page de dpart :
<HTML>
<BODY>
<H1>Page de dpart<H1>
<body>
<FORM>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fentre"
onClick="open('testc.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
(sans espaces ni passage la ligne)
Constatation:
ki b
Avec ce script, sans intervention de l'utilisateur, la nouvelle fentre se ferme de faon

automatique aprs 4 secondes. En cliquant sur le bouton, l'utilisateur interrompt
prmaturment le compteur et ferme la fentre. Avec ce systme, on est certain que le
nouvelle fentre sera ferme.
Exemple5 : (Ouverture en cliquant sur un lien)

Dans la page de dpart, on a :
<HTML>
<BODY>
<A HREF="#" onClick="open('test.htm', '',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">lien de test</A>
</body></html>
Exemple6 : (On passe par l'ouverture d'un nouvelle fentre par l'appel d'une fonction.)
Dans la page de dpart :
function opnw(){
msg=window.open("","","width=300,height=50,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no");
msg.document.write('<HTML> <BODY>' +
'<CENTER><H1>Ceci est un test<H1></CENTER>' +
'</BODY></HTML>')
// sans espaces ni passage la ligne
}
</SCRIPT>
TP N11 (LObjet ARRAY):

Objectifs :
Savoir l Objet ARRAY de JS.
Savoir utiliser les diffrentes mthodes de lobjet ARRAY et ses proprits.
I- Lobjet ARRAY :
L'objet Array est un objet du noyau Javascript permettant de crer et de manipuler des tableaux.
Voici la syntaxe utiliser pour crer une variable tableau :
var
var
var
var
myArray
myArray
myArray
myArray
=
=
=
=
new Array(element1[, element2, ...]);

new Array();
new Array(sizeInteger);
[element0, element1, ..., elementN];
Si aucun lment n'est prcis en paramtre, le tableau est vide la cration. Dans le cas
contraire, il sera initialis avec les valeurs des lments passs en paramtres.
II- Les proprits et les mthodes standards de lobjet ARRAY :
Le tableau suivant dcrit les mthodes de l'objet Array.

Mthode
Tableau.join()
Tableau.pop()
Tableau.push(valeur1[, valeur2,
...])
Tableau.reverse()
Tableau.shift()
Tableau.lenght
Tableau.sort()
Tableau.unshift(valeur1[,
valeur2, ...])
description
Cette mthode renvoie une chane de caractres contenant
tous les lments du tableau.
Cette mthode supprime le dernier lment du tableau et
retourne sa valeur.
Cette mthode ajoute un ou plusieurs lments au tableau la
fin du tableau.
Cette mthode inverse l'ordre des lments du tableau.
Cette mthode supprime le premier lment du tableau et
retourne sa valeur.
Cette proprit contient le nombre d'lments du tableau..
Cette mthode permet de trier les lments d'un tableau.
Cette mthode permet dajouter un ou plusieurs lments au
dbut du tableau.
Exemple1 : (Tableau multidimensional)
Fichier test.htm :
<HTML>
<BODY>
<H2>Exploitation dun Tableau unidimensionnel<H2>
var mois=new Array ( "janvier" ,"fevrier" ,"mars" ,"avril" ,"mai"
,"juin","juillet","aout","septembre","octobre","novembre","decembre") ;
document.write("<table bgcolor='white' align=center>") ;
for (i=0;i<12;i++)
{
document.write("<tr><td bgcolor='#8f8fbd'><font face='verdana'
color='white'><center>") ;
document.write(mois[i]) ;
document.write("</center></font></td></tr>") ;
}
document.write("</table>") ;
</script></body></html>
Rsultat
Exercice 9 page 116 : (Tableau multidimensional)

<HTML><head>
nom = new Array(3);
nom[0] = new Array(3);
nom[0][0]="1200"; nom[0][1]="1250";
nom[0][2]="1300";
nom[1][0]="800"; nom[1][1]="850"; nom[1][2]="900";
nom[2][0]="500"; nom[2][1]="520"; nom[2][2]="540";
function affi() {
i = document.form.liste.selectedIndex;
j= document.form.taille.selectedIndex
document.form.txt.value=nom[i][j];
}
</script></head>
<BODY>
<H2>Exploitation dun Tableau multidimensional</H2>
<FORM name="form" >
<SELECT NAME="liste">
<OPTION>Chemises</option>
<OPTION>Polos </option>
<OPTION>T-shirts </option>
</SELECT>
<SELECT NAME="taille">
<OPTION>T. Small </option>
<OPTION>T. Mdium </option>
<OPTION>T. Large </option>
</SELECT>
<INPUT TYPE="button" VALUE="Donner le prix"
onClick="affi()">
<INPUT TYPE="TEXT" NAME="txt">
Rsultat

TP Si Tic Js

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

TP Si Tic Js

Transféré par

Droits d'auteur :

Formats disponibles

TP N4 (Introduction au J S):

I- Quest ce que le Javascript :

Il existe 4 manires dinsrer le code Javascript dans une page HTML

Exemple1 : Taper le code JS suivant:

Exemple2 : Taper le code JS suivant:

Commentaire : Lappel de la fonction affiche() nest possible que lorsque

3- Insertion du code JS lintrieur dune balise html :

4- Appel du code JS partir dun fichier dextension .js :

Javascript va diviser cette page en objets et

Cette page s'affiche dans une fentre. C'est

Dans cette fentre, il y a un document

Dans ce document, on trouve un formulaire au sens

Dans ce document, on trouve trois objets. Des

I- Les boites de dialogue :

Exemple1 : Taper le code suivant

<form name= f1>

I-2 : La mthode Confirm():

<form name= f1>

I-3 : La mthode prompt():

Sa syntaxe est donc la suivante :

<form name= f1>

II : Quappelle-t-on une mthode ?

Dans le cas de la mthode write(), l'appel se fait comme suit :

Dans le cas de la mthode alert(), l'appel se fait comme suit :

soit en passant directement le texte en paramtres :

soit en passant le texte par l'intermdiaire d'une variable :

soit en utilisant les deux :

La mthode writeln() fonctionne exactement comme la mthode write() la seule diffrence

Ce qui donnera comme rsultat :

Ceci est du Html

TP N6 (Variables & oprateurs en JS):

Savoir les oprateurs utiliss en JS.

III-Porte (visibilit) des variables

Voici deux exemples permettant de l'illustrer :

Voici ce qu'affiche ce script :

IV-Les types de donnes dans les variables

des nombres: entiers ou virgules

Exemple : Faire les exemples de livre pages (84-86).

V-1 :Les oprateurs de calcul

Ajoute deux valeurs

Soustrait deux valeurs

Multiplie deux valeurs

Divise deux valeurs

Affecte une valeur une variable

Retourne le reste de la division

V-3 :Les oprateurs de comparaison

Compare deux valeurs et

Vrifie l'identit de valeur et

Vrifie qu'une variable est

Vrifie la non identit de

Vrifie qu'une variable est

Vrifie qu'une variable est

V-4 :Les oprateurs logiques (boolens)

TP N7 (Les structures de contrle & les fonctions en JS):

Savoir Dclarer une fonction en JS.

L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart

La syntaxe de cette expression est la suivante :

Cette boucle affiche 5 fois la valeur de i, c'est--dire 1, 2, 3, 4,5

III- La boucle While :

III- Linstruction Switchcase :

IV- Les fonctions en JS :

1. Dfinition dune fonction :

TP N8 (Les formulaires et la gestion des vnements en JS):