Javascript

Programmation
Programmation
JavaScript
JavaScript
cours inspir du cours de R. Vivian cours inspir du cours de R. Vivian
Intro JS Intro JS
Structure dun script Structure dun script
Les chanes de caractres Les chanes de caractres
Les formulaires Les formulaires
Accder aux lments Accder aux lments
JS et les maths JS et les maths
Annexes Annexes
Trucs et astuces des Trucs et astuces des

formulaires formulaires
Les tableaux Les tableaux
Le modle objet JS Le modle objet JS

Plan
Plan
Introduction JS Introduction JS
Le langage obet JS Le langage obet JS
JS et les coo!ies JS et les coo!ies
JS et les popup JS et les popup
Annexes Annexes
"rucs et astuces des formulaires "rucs et astuces des formulaires
Le modle obet JS Le modle obet JS
Intro JS Intro JS
Annexes Annexes


I# Prsentation
I# Prsentation
Ja$aScript est un langage de

Ja$aScript est un langage de
programmation compltement li au
programmation compltement li au
langage %"&L#
langage %"&L#
Le d$eloppeur Internet code ses

Le d$eloppeur Internet code ses
pages %"&L en ' intgrant des
pages %"&L en ' intgrant des
sources Ja$aScript#
sources Ja$aScript#
Le $isiteur( par l)intermdiaire de son

Le $isiteur( par l)intermdiaire de son
na$igateur(
na$igateur(
charge
charge
le code des
le code des
pages#
pages#
Intro JS Intro JS
Annexes Annexes


I# Prsentation
I# Prsentation
*)est le na$igateur +ui interprte le

*)est le na$igateur +ui interprte le
code %"&L et Ja$aScript
code %"&L et Ja$aScript
L)interprtation dpend
L)interprtation dpend
naturellement du t'pe de na$igateur
naturellement du t'pe de na$igateur
utilis et de sa $ersion
utilis et de sa $ersion
Ja$aScript est un langage

Ja$aScript est un langage
obet
obet
et
et
$nementiel
$nementiel
Intro JS Intro JS
Annexes Annexes


I# Prsentation
I# Prsentation
Le d$eloppeur cre et utilise des obets Le d$eloppeur cre et utilise des obets
a'ant des a'ant des proprits proprits et des et des mthodes mthodes# #
L)interprte grant $otre page dtecte L)interprte grant $otre page dtecte
automati+uement tous les automati+uement tous les $nements $nements
dclenchs par le $isiteur dclenchs par le $isiteur
passage de souris passage de souris
clic clic
saisie cla$ier### saisie cla$ier###
, ces $nements sont associes des , ces $nements sont associes des
actions actions
Par exemple Par exemple onClick onClick permet de spcifier permet de spcifier
des actions lors d)un clic de souris sur un des actions lors d)un clic de souris sur un
obet donn obet donn
Intro JS Intro JS
Annexes Annexes


I#- %"&L et Ja$aScript
Il ' a plusieurs endroits dans

Il ' a plusieurs endroits dans
une page .eb o/ il est possible
une page .eb o/ il est possible
d)intgrer du code Ja$aScript
d)intgrer du code Ja$aScript
dans le corps de la page(

dans le corps de la page(
en ent0te de page(
en ent0te de page(
dans un $nement d)un obet de

dans un $nement d)un obet de
la page#
la page#
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD>
<TITLE> Titre de page </TITLE>
<SCRIPT language="JavaSript">
<!"" // Ca#e e $ui %uit au& navigateur% ne %upp'rtant
pa% JavaSript

//""> // (in de la partie a#)e
</SCRIPT>
</HEAD>

<*+D,>
<SCRIPT t-pe="te&t/JavaSript">
<!"" // Ca#e e $ui %uit au& navigateur% ne %upp'rtant
pa% JavaSript

//""> // (in de la partie a#)e
</SCRIPT>
</*+D,>
</HTML>
Intro JS Intro JS
Annexes Annexes


I#1 2ariables
I#1 2ariables
Ja$aScript utilise l)instruction

Ja$aScript utilise l)instruction
var
var

pour la dclaration#
pour la dclaration#
Pour
Pour
dclarer une variable
dclarer une variable

basique
basique
3
3cd de type entier, numrique, cd de type entier, numrique,
chane de caractres chane de caractres
4( il ne faut pas
4( il ne faut pas
dclarer le t'pe# Le na$igateur le
dclarer le t'pe# Le na$igateur le
dtecte tout seul#
dtecte tout seul#
Par contre toute nou$elle $ariable

Par contre toute nou$elle $ariable
doit 0tre initialise#
doit 0tre initialise#
Intro JS Intro JS
Annexes Annexes


I#1 2ariables 5 6xemple
7n remar+ue la prsence du point $irgule 7n remar+ue la prsence du point $irgule

3 38 84 la fin de cha+ue instruction# 4 la fin de cha+ue instruction#
Il est possible de placer sur une m0me Il est possible de placer sur une m0me
ligne plusieurs instructions spares par ligne plusieurs instructions spares par
des points $irgules# des points $irgules#
var prenom_visiteur="Marcel";
var nom_visiteur="Dupond";
var age_visiteur=29;
Intro JS Intro JS
Annexes Annexes


9ne $ariable d dclare

9ne $ariable d dclare
s)utilise ensuite normalement
s)utilise ensuite normalement
var accueil="Bonjour " + prenom + " " + nom;
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD> <TITLE> Exemple 1 </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="J!S"#$p%">
!# &'()'*# = "B'()'*# +",
!# -*e.%$'( = "C'mme(% lle/ !'*. ",
!# p0#.e = &'()'*# 1 "<BR>" 1 -*e.%$'(,
2$(3'243'"*me(%42#$%e5 p0#.e6 "*)'*#370*$ 8" 9,
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD> <SCRIPT> :*("%$'( .l*e#59 ; le#%5"B'()'*# %'*% le m'(3e
+"9, <</SCRIPT>
</HEAD>
<BODY>
<H=>Ex>"*%$'( $mm>3$%e</H=>
<SCRIPT> le#%5"B'()'*# %'*% le m'(3e +"9, </SCRIPT>
<H=>Ex>"*%$'( .*# >!>(eme(% onClick</H=>
<?ORM>
<INPUT %@pe="&*%%'(" (me="B'*%'(1"
!l*e="Sl*%" '(Cl$"A=".l*e#59">
</?ORM>
<H=>Ex>"*%$'( .*# p#'%'"'le javascript:</H=>
<A HRE? = ")!."#$p%B.l*e#59"> p'*# .l*e# </A>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


I#: 7bets
I#: 7bets
Les lments manipuls par

Les lments manipuls par
Ja$aScript et affichs dans $otre
Ja$aScript et affichs dans $otre
na$igateur sont des
na$igateur sont des
obets
obets
*d des lments
*d des lments
*lasss selon une

*lasss selon une
hirarchie
hirarchie
pour
pour
pou$oir les dsigner prcisment
pou$oir les dsigner prcisment
Aux+uels on associe des

Aux+uels on associe des
proprits
proprits
et des
et des
mthodes
mthodes
Intro JS Intro JS
Annexes Annexes


I#: 7bets
I#: 7bets
*ette notion est importante mais nous

*ette notion est importante mais nous
allons en aborder +ue le strict
allons en aborder +ue le strict
ncessaire pour ce cours;
ncessaire pour ce cours;
2o'ons cela sur un exemple concret

2o'ons cela sur un exemple concret
Imagine< un un ardin dans le+uel on

Imagine< un un ardin dans le+uel on
trou$e
trou$e
une branche sur la+uelle se trou$e un nid une branche sur la+uelle se trou$e un nid
une balan=oire a$ec un trap<e( une une balan=oire a$ec un trap<e( une
corde et un autre nid corde et un autre nid
9ne salade 3ce sont des marachers 9ne salade 3ce sont des marachers
d)occa<4 d)occa<4
Intro JS Intro JS
Annexes Annexes


arbre
branche
feuille
nid
tronc
racine
Largeur 20
Color jaune
Hauteur 4
salade
balanoire
jardin
trapze
corde
nid
Largeur 15
Color maron
Hauteur
Intro JS Intro JS
Annexes Annexes


I#: 7bets
I#: 7bets
Le nid sur l)arbre est donc dsign par Le nid sur l)arbre est donc dsign par
*ontrairement au nid situ sur la balan=oire *ontrairement au nid situ sur la balan=oire
Imagine< maintenant +ue l)on $euille Imagine< maintenant +ue l)on $euille
changer la couleur du nid 3dans l)arbre4 pour changer la couleur du nid 3dans l)arbre4 pour
le peindre en $ert le peindre en $ert
il suffirait de taper une commande du genre il suffirait de taper une commande du genre
*)est donc ainsi +ue l)on reprsente les *)est donc ainsi +ue l)on reprsente les
obets en Ja$aScript( la seule diffrence obets en Ja$aScript( la seule diffrence
+ue ce n)est pas un ardin +ui est reprsent +ue ce n)est pas un ardin +ui est reprsent
sous forme d)obets mais la fen0tre de $otre sous forme d)obets mais la fen0tre de $otre
na$igateur### na$igateur###
jardin.arbre.branche.nid.couleur= vert;
jardin.balanoire.nid
jardin.arbre.branche.nid
Intro JS Intro JS
Annexes Annexes


I#: 7bets
I#: 7bets
Ja$aScript intgre d)origine plusieurs

Ja$aScript intgre d)origine plusieurs
t'pe d)obets#
t'pe d)obets#
L)obet le plus grand est la fen0tre

L)obet le plus grand est la fen0tre
window
window
>ans la fen0tre s)affiche une page

>ans la fen0tre s)affiche une page

document
document
A""6?"I7?
A""6?"I7?
(
(
le respect des
le respect des
mauscules@minuscules est
mauscules@minuscules est
indispensable et source de
indispensable et source de
nombreuses erreurs
nombreuses erreurs
#
#
Intro JS Intro JS
Annexes Annexes


!our acc"der # cet "l"ment$ on utilise la notation point"e
window.document.form.textarea
Intro JS Intro JS
Annexes Annexes


I#: 7bets 5 6xemple
I#: 7bets 5 6xemple
2o'ons en dtail l)obet

2o'ons en dtail l)obet
Date
Date
( trs
( trs
utile dans un en$ironnement
utile dans un en$ironnement
Internet#
Internet#
La dclaration se fait touours a$ec La dclaration se fait touours a$ec var var# #
Pour crer un obet( il faut utiliser le mot Pour crer un obet( il faut utiliser le mot
cl cl new new sui$i du t'pe d)obet8 ici sui$i du t'pe d)obet8 ici date date# #
%% cr"e un objet date contenant la date du jour&
var date_jour=new date();
%% cr"e un objet date a'ec une date param"trable&
var une_date=new date(annee,mois-
1,jour,heure,min) ;
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD> </HEAD>
<BODY>
<SCRIPT>
!# 3%eC)'*# = (e2 D%e59,
2$(3'243'"*me(%42#$%e5 3%eC)'*# 9,
</SCRIPT>
</BODY>
</HTML>
I#: 7bets
I#: 7bets
Affichage de la date
Affichage de la date
Intro JS Intro JS
Annexes Annexes


I#A Bonctions
I#A Bonctions
Les fonctions sont dclares et

Les fonctions sont dclares et
codes dans
codes dans
l'entte de la
l'entte de la
page
page
et peu$ent 0tre appeles
et peu$ent 0tre appeles
ensuite n)importe +uel endroit
ensuite n)importe +uel endroit
de la page#
de la page#
Intro JS Intro JS
Annexes Annexes


I#A Bonctions
I#A Bonctions
Pour dclarer une fonction on

Pour dclarer une fonction on
utilise le motCcl
utilise le motCcl
function
function
( sui$i
( sui$i
de son nom et des
de son nom et des
ventuels
ventuels
paramtres
paramtres
#
#
function ma_fonction(param1, param2)
{ ... }
function mon_autre_fonction()
{ ... }
Intro JS Intro JS
Annexes Annexes


I#A Bonctions
I#A Bonctions
Le corps des fonctions est dlimit

Le corps des fonctions est dlimit
par
par
{
{
et
et
}
}
dans le+uel on place la
dans le+uel on place la
dclaration des $ariables locales(
dclaration des $ariables locales(
propres la fonction( ainsi +ue
propres la fonction( ainsi +ue
l)ensemble des traitements#
l)ensemble des traitements#
Remarue
Remarue
non prcde de $ar( une $ariable a une non prcde de $ar( une $ariable a une
$isibilit globale# $isibilit globale#
Prcde de $ar( une $ariable a une Prcde de $ar( une $ariable a une
$isibilit limite la fonction ou elle a $isibilit limite la fonction ou elle a
t dfinie# t dfinie#
Intro JS Intro JS
Annexes Annexes


I#A Bonctions
I#A Bonctions
9ne fonction aura dans son

9ne fonction aura dans son
corps une ou plusieurs
corps une ou plusieurs
instructions
instructions
return
return
+ui
+ui
permet3tent4 de ren$o'er une
permet3tent4 de ren$o'er une
$aleur ou un obet#
$aleur ou un obet#
9ne fonction sans instruction

9ne fonction sans instruction
return est une
return est une
procdure
procdure
#
#
Intro JS Intro JS
Annexes Annexes


I#A Bonctions 5 6xemple
<HTML>
<HEAD>
<SCRIPT>
function bonjour(prenom) {
// dclaration de la procdure
document.write("Bonjour, comment vas-tu ",prenom,"?<br>");
}
function volumeSphere(rayon) {
// dclaration de fonctions
return 4/3*Math.PI*Math.pow(rayon,3);
}
function calculerPrix(PrixUnitaire, NbArticles) {
// Facturation
return PrixUnitaire* NbArticles;
}
</SCRIPT>
</HEAD>
Lentte
Lentte
Intro JS Intro JS
Annexes Annexes


<BODY>
<SCRIPT>
// appel de la procdure
bonjour("Toto") ;
//appels des fonctions
var montant=calculerPrix( 150 , 4) ;
document.write("Tu dois ",montant,"F.<BR>");
document.write( "Tu dois ", calculerPrix( 150, 4), "F.<BR>");
document.write( "Volume de la sphre unit : ",
volumeSphere(1)," ?<BR>" );
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


II Structure d)un Script
II Structure d)un Script
Le Ja$aScript a une structure de

Le Ja$aScript a une structure de
programmation proche du
programmation proche du
langage
langage
C
C
8 moins riche
8 moins riche
naturellement
naturellement
Intro JS Intro JS
Annexes Annexes


II#- Dcrire un commentaire
Indispensable les commentaires

Indispensable les commentaires
en programmation#
en programmation#
Pour mettre en commentaire

une partie de code( us+u)au
une partie de code( us+u)au
prochain retour la ligne
prochain retour la ligne
var age=25; // Ceci est en commentaire
Intro JS Intro JS
Annexes Annexes



plusieurs lignes de code
plusieurs lignes de code
/* Ceci est en commentaire
Ligne 1
Ligne 2
Dernire ligne */
Intro JS Intro JS
Annexes Annexes


II#1 Erouper les instructions
Les instructions sont

Les instructions sont
regroupes par les accolades
regroupes par les accolades
{
{
et
et
}
}
#
#
Il doit ' a$oir autant d)accolades

Il doit ' a$oir autant d)accolades
ou$ertes +ue d)accolades
ou$ertes +ue d)accolades
fermes#
fermes#
Le groupement d)instructions
Le groupement d)instructions
est utile#
est utile#
Intro JS Intro JS
Annexes Annexes


Il permet par exemple de

Il permet par exemple de
regrouper les instructions d)une
regrouper les instructions d)une
fonction
fonction
function somme(a,b)
{
var sum=a+b;
return sum;
}
Intro JS Intro JS
Annexes Annexes


II#: "est *onditionnel
L)instruction
L)instruction
if
if
permet
permet
d)effectuer certaines actions
d)effectuer certaines actions
uni+uement +uand un test
uni+uement +uand un test
donn a pour $aleur
donn a pour $aleur
true
true
3
3
$rai 5 $aleur boolenne4

$rai 5 $aleur boolenne4
Intro JS Intro JS
Annexes Annexes


Il ' a 1 mo'ens d)utiliser

Il ' a 1 mo'ens d)utiliser
if
if
Action raliser F une instruction

Action raliser F une instruction
Action F plusieurs instructions

Action F plusieurs instructions
// si l'ge est inf 18 ans, un message est affich et
// le visiteur est redirig vers la page mineurp!p".
if #age$1%&
'
alert#()ous deve* +tre ma,eur(&;
-indo-location=(mineurp!p"(;
.
// /i l01ge est inf 2 1% ans3 un message est affic!
if ( age < 18 ) alert( "Vous devez tre majeur" );
Intro JS Intro JS
Annexes Annexes


L)instruction
L)instruction
if
if
peut tre
peut tre

complte par l)instruction
complte par l)instruction
el!e
el!e
pour grer les actions
pour grer les actions
associer la $aleur
associer la $aleur
fal!e
fal!e
du
du
test
test
Intro JS Intro JS
Annexes Annexes


II#: "est *onditionnel 6xemple
II#: "est *onditionnel 6xemple
<HTML>
<HEAD> </HEAD>
<BODY>
<SCRIPT>
var age=15;
var wl = "mineur.php3";
if (age < 18)
alert(" encore un peu jeune petit");
else
{
alert( "c'est bon tu peux entrer");
wl = "majeur.php3";
}
window.location = wl ;
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
9ne boucle
9ne boucle
for
for
rpte
rpte
un
un
groupe d)instructions
groupe d)instructions
tant que
tant que
la
la
partie condition est $raie#
partie condition est $raie#
9ne ou plusieurs $ariables

9ne ou plusieurs $ariables
dfinissent le nombre
dfinissent le nombre
d)itrations
d)itrations
for # initialisation; condition; incrment &
'
// )os instructions
.
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
*es $ariables sont initialises au

*es $ariables sont initialises au
"
"
er er

pa!!age
pa!!age
puis la condition est
puis la condition est
$alue
$alue
6nsuite(
6nsuite(
# c$aue dbut d'itration
# c$aue dbut d'itration

les instructions de la partie
les instructions de la partie
incrment
incrment
sont excutes
sont excutes
6n gnrale elles modifient les $ariables 6n gnrale elles modifient les $ariables
d)itration d)itration
Aprs la partie
Aprs la partie
incrment
incrment
faite( la
faite( la
condition est r$alue
condition est r$alue
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
5 6xemples
5 6xemples
Baire une boucle pour i $ariant

de I -II inclus par pas de -
de I -II inclus par pas de -

de -I I inclus par pas de C-
de -I I inclus par pas de C-
for #var i=4;i$=144;i=i51&
for #var i=14;i64;i=i71&
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
5 6xemple
5 6xemple
2oici une application

2oici une application
mathmati+ue#
mathmati+ue#
Il s)agit de calculer la somme

Il s)agit de calculer la somme
des nombres de - ?#
des nombres de - ?#
function somme#8&
'
var sum=4;
for #var i=1;i$=8;i=i51&
'
sum=sum5i;
.
alert#(/omme de 1 2 (585( = (5sum&;
.
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
5 Astuces
5 Astuces
Dcrire
Dcrire
a++
a++
est +ui$alent
est +ui$alent
a=a+1
a=a+1
6t
6t
a--
a--
est +ui$alent
est +ui$alent
a=a-1
a=a-1

>ans la m0me ide( on peut

>ans la m0me ide( on peut
aussi remplacer
aussi remplacer
a=a+5
a=a+5
par
par
a+=5
a+=5
2ous trou$ere< donc sou$ent les

2ous trou$ere< donc sou$ent les
boucles for a$ec cette s'ntaxe
boucles for a$ec cette s'ntaxe
for#var i=4;i$144;i55&
Intro JS Intro JS
Annexes Annexes


II#G Houcle
II#G Houcle
for
for
5 6xemple
5 6xemple
<HTML>
<HEAD> </HEAD>
<BODY>
<SCRIPT>
for(var i=0;i<10;i++)
{
alert(" message " + i);
}
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


III *hanes de caractres
III *hanes de caractres
"ous les langages de

"ous les langages de
programmation pr$oient une
programmation pr$oient une
gestion des chanes de
gestion des chanes de
caractres
caractres
Ja$aScript est particulirement

Ja$aScript est particulirement
bien adapt pour le traitement
bien adapt pour le traitement
des chanes
des chanes
Intro JS Intro JS
Annexes Annexes


III#- >claration
III#- >claration
Pour dclarer une chane de

Pour dclarer une chane de
caractres( $ous pou$e< utiliser
caractres( $ous pou$e< utiliser
les guillemets J ou l)apostrophe )
les guillemets J ou l)apostrophe )
var chaine1="Bonjour";
var chaine2='Bonjour';
// Ces deux lignes ont le mme effet
Intro JS Intro JS
Annexes Annexes


III#- >claration
III#- >claration
*ela se corse +uand il s)agit d)initialiser

*ela se corse +uand il s)agit d)initialiser
une chane a$ec un de ces caractres
une chane a$ec un de ces caractres
Le secret est d)alterner les guillemets et

Le secret est d)alterner les guillemets et
les apostrophes selon les caractres
les apostrophes selon les caractres
spciaux afficher
spciaux afficher
Il faut $eille< ne pas fermer la chane

Il faut $eille< ne pas fermer la chane
de caractres a$ant sa fin normale pour
de caractres a$ant sa fin normale pour
$iter les erreurs Ja$aScript
$iter les erreurs Ja$aScript
var chaine1="Bonjour l'ami";
var chaine2='Je vous dis "Bonjour " ';
Intro JS Intro JS
Annexes Annexes


6xemple de dclaration incorrecte
6xemple de dclaration incorrecte
Il existe aussi une autre solution

Il existe aussi une autre solution
La $ariable chaine- contient

La $ariable chaine- contient
Je lui
Je lui
dis "Bonjour l'ami"
dis "Bonjour l'ami"
#
#
Ja$ascript a interprt
Ja$ascript a interprt
KJ
KJ
comme
comme
un guillemet#
un guillemet#
III#- >claration
III#- >claration
var chaine1="Je vous dis "Bonjour"";
// ici, le " indique la fin de chane
var chaine1="Je lui dis \"Bonjour l'ami\" ";
Intro JS Intro JS
Annexes Annexes


9ne $ariable peut 0tre transforme en
9ne $ariable peut 0tre transforme en
une chane de caractres tout
une chane de caractres tout
moment
moment
Il est possible de modifier

Il est possible de modifier
d'nami+uement le t'pe de la $ariable
d'nami+uement le t'pe de la $ariable
A la fin de ce script(
c$aine
c$aine
est un
est un
nombre +ui $aut :#-G-AL 8
nombre +ui $aut :#-G-AL 8
pi
pi
est une
est une
chane
chane
+ui contient J:#-G-A1MAGJ#
+ui contient J:#-G-A1MAGJ#
III#- >claration
III#- >claration
var chaine="azerty";
var pi=3.14159;
chaine=pi;
pi=pi+"2654";
Intro JS Intro JS
Annexes Annexes


III#- >claration
III#- >claration
La diffrence peut sembler sans

La diffrence peut sembler sans
importance#
importance#
Il n)en est rien;
Il n)en est rien;
Nuand une $ariable est un nombre(

Nuand une $ariable est un nombre(
il est possible de lui appli+uer des
il est possible de lui appli+uer des
oprations 3addition(
oprations 3addition(
multiplication( ###4
multiplication( ###4
Nuand une $ariable est de t'pe

Nuand une $ariable est de t'pe
chane de caractres( on peut lui
chane de caractres( on peut lui
appli+uer les mthodes propres aux
appli+uer les mthodes propres aux
obets chanes
obets chanes
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
L)opration de base est la

L)opration de base est la
concatnation
concatnation
de chanes
de chanes
6lle consiste assembler deux chanes 6lle consiste assembler deux chanes
en une en une
L)oprateur est le L)oprateur est le % %( ne pas confondre ( ne pas confondre

a$ec l)oprateur addition +ui s)appli+ue a$ec l)oprateur addition +ui s)appli+ue
aux nombres aux nombres
La $ariable La $ariable c$aine c$aine contient aprs ce contient aprs ce

script script "ive le Java!cript" "ive le Java!cript"# La # La
concatnation est une opration simple concatnation est une opration simple
et trs utile et trs utile
var chaine1="Vive le ";
var chaine2="JavaScript";
var chaine=chaine1+chaine2;
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
9ne chane de caractres en

9ne chane de caractres en
Ja$aScript est un obet
Ja$aScript est un obet
!tring
!tring
sur
sur
le+uel s)appli+uent des proprits
le+uel s)appli+uent des proprits
et des mthodes#
et des mthodes#
La proprit
La proprit
lengt$
lengt$
indi+ue le
indi+ue le
nombre de caractres de la chane
nombre de caractres de la chane
c$aine&lengt$
c$aine&lengt$
retourne le nombre
retourne le nombre
de caractres( ici M caractres
de caractres( ici M caractres
var chaine="azerty";
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
La mthode
La mthode
c$ar't(n)
c$ar't(n)
rcupre
rcupre
le nime caractre
le nime caractre
Attention
Attention
( le premier caractre a
( le premier caractre a
comme indice I
comme indice I
c$aine&c$ar't(")
c$aine&c$ar't(")
retourne J<J
retourne J<J
var chaine="azerty"
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
Il est utile de pou$oir extraire un

Il est utile de pou$oir extraire un
morceau d)une chane
morceau d)une chane
La +uestion est de rcuprer le

La +uestion est de rcuprer le
our( le mois et l)anne dans :
our( le mois et l)anne dans :
$ariables diffrentes
$ariables diffrentes
var date="15/08/2000";
var jour = date.substring(0,2);
var mois = date.substring(3,5);
var annee = date.substring(6,10);
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
!ub!tring
!ub!tring
attend 1 paramtres
attend 1 paramtres
l)indice du premier caractre 3inclus4( l)indice du premier caractre 3inclus4(
l)indice du dernier caractre 3exclus4# l)indice du dernier caractre 3exclus4#
Si les deux paramtres sont in$erss(

Si les deux paramtres sont in$erss(
a$ascript rtablit l)ordre logi+ue
a$ascript rtablit l)ordre logi+ue
c$aine&!ub!tring(*+",) c$aine&!ub!tring(*+",) et et
c$aine&!ub!tring(",+*) c$aine&!ub!tring(",+*) sont identi+ues sont identi+ues
Si le deuxime paramtre est omis( la

Si le deuxime paramtre est omis( la
chane retourne commence l)indice
chane retourne commence l)indice
indi+u et se termine la fin de la
indi+u et se termine la fin de la
chane#
chane#
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
>eux mthodes permettent de

>eux mthodes permettent de
retrou$er une sousCchane d)une
retrou$er une sousCchane d)une
chane
chane
*es mthodes retrou$ent la position

*es mthodes retrou$ent la position
d)une chane et retourne son indice
d)une chane et retourne son indice
La mthode La mthode la!tinde-of(!ou!c$aine) la!tinde-of(!ou!c$aine)

retourne l)indice de la dernire occurrence retourne l)indice de la dernire occurrence
de souschaine de souschaine
Si la sousCchane n)est pas trou$( Si la sousCchane n)est pas trou$(

la!tinde-of la!tinde-of retourne C- retourne C-
var dom = "www.toutjavascript.com";
var ext = domaine.substring(domaine.lastindexof("."));
Intro JS Intro JS
Annexes Annexes


III#1 7prations
III#1 7prations
Ja$aScript offre deux mthodes

Ja$aScript offre deux mthodes
pour transformer les lettres 3et
pour transformer les lettres 3et
des lettres uni+uement4 d)un mot
des lettres uni+uement4 d)un mot
en mauscules ou en minuscules
en mauscules ou en minuscules
ma.
ma.
contient
contient
"#"$ #!% &' %#(%#
"#"$ #!% &' %#(%#
et
et
min
min

contient
contient
ceci est un te)te
ceci est un te)te
var chaine="Ceci est un texte";
var maj=chaine.toUpperCase();
var min=chaine.toLowerCase();
Intro JS Intro JS
Annexes Annexes


I2 Bormulaires
I2 Bormulaires
Les formulaires sont la base des

Les formulaires sont la base des
changes entre le site et le
changes entre le site et le
$isiteur#
$isiteur#
Ja$aScript ne peut pas

Ja$aScript ne peut pas
changer d)information partir
changer d)information partir
de fichier texte ou de base de
de fichier texte ou de base de
donnes#
donnes#
Intro JS Intro JS
Annexes Annexes


I2 Bormulaires
I2 Bormulaires
Ja$aScript associ aux

Ja$aScript associ aux
formulaires permet
formulaires permet
d)assister et de guider le $isiteur(

d)assister et de guider le $isiteur(
de contrOler la saisie(
de contrOler la saisie(
de faire des traitements

de faire des traitements
3
3calcul( manipulation de chanes de calcul( manipulation de chanes de
caractres caractres
4(
4(
d)en$o'er les rsultats

d)en$o'er les rsultats
au serveur
au serveur
#
#
Intro JS Intro JS
Annexes Annexes


I2 Bormulaires
I2 Bormulaires
Pour intgrer des lments de

Pour intgrer des lments de
formulaire( il faut encadrer les
formulaire( il faut encadrer les
balises par
balises par
/form0
/form0
et
et
/1form0
/1form0
#
#
>ans la suite de ce document(

>ans la suite de ce document(
sont prsents tous les
sont prsents tous les
lments de formulaire a$ec les
lments de formulaire a$ec les
proprits( les mthodes et les
proprits( les mthodes et les
$nements associs#
$nements associs#
Intro JS Intro JS
Annexes Annexes


I2 Bormulaires
I2 Bormulaires
Cr"ation de
formulaire
Case # cocher
(adio)bouton
*e+t
!ass,ord
*e+tarea
-outon
-outon (eset
-outon .ubmit
/aleur cach"e
Intro JS Intro JS
Annexes Annexes

Le modle objet JS Le modle objet JS (me Nom du formulaire

"%$'( Adresse du script de serveur excuter
me%0'3 Mthode d'appel du script (get ou post)
e("%@pe Type d'encodage du formulaire
%#De% estination du retour du formulaire
I2#- La balise
I2#- La balise
/form0
/form0
proprits( mthodes(
proprits( mthodes(
$nements
$nements
.*&m$% clenche l'action du formulaire
#e.e% !initialise avec les valeurs par dfaut
'(S*&m$% tecte la soumission du formulaire
'(Re.e% tecte la rinitialisation
Intro JS Intro JS
Annexes Annexes


I2#- dfinitions des
I2#- dfinitions des
mthodes
mthodes

et
et
$nements
$nements
9ne 9ne mt$ode mt$ode est une fonction 3ou est une fonction 3ou
procdure4 de procdure4 de traitement de donnes traitement de donnes
associe un obet associe un obet
9n 9n vnement vnement est une fonction 3pas une est une fonction 3pas une
procdure;4 touours associe un obet procdure;4 touours associe un obet
mais +ui mais +ui ra*it en +onction des interventions ra*it en +onction des interventions
de l'utilisateur de l'utilisateur
Il utilise le cla$ier pour fournir des infos Il utilise le cla$ier pour fournir des infos
Il slectionne l)obet a$ec la souris Il slectionne l)obet a$ec la souris
Il spcifie des $aleurs de l)obet a$ec la souris Il spcifie des $aleurs de l)obet a$ec la souris
*ette notion d)$nement est *ette notion d)$nement est cruciale cruciale car car
elle est la base du fonctionnement des pgms elle est la base du fonctionnement des pgms
Inter?et Inter?et
Intro JS Intro JS
Annexes Annexes


I2#1 L)lment
I2#1 L)lment
input
input
L)obet
L)obet
input
input
est le plus utilis de
est le plus utilis de
tous#
tous#
Il permet d)afficher
Il permet d)afficher
des champs texte(

des champs texte(
des boutons(
des boutons(
des radioCboutons(
des radioCboutons(
des cases cocher(

des cases cocher(
le champ cach(
le champ cach(
les boutons spciaux

les boutons spciaux
re!et
re!et
et
et
!ubmit
!ubmit
#
#
Intro JS Intro JS
Annexes Annexes


(me Nom du champ
%@pe type du champ text, button, radio, checkbox, submit, reset
!l*e "i#ell texte
3e:*l%!l*e $aleur par dfaut du champ (utile avec reset)
.$/e Taille du champ
mxle(D%0 Taille maximale du champ de type texte
"0e"Ae3 %ase cocher ou radio #outon coch ou non
3$.&le3 &ris (modification impossi#le par le visiteur)
#e3O(l@ "ecture seule
"l.. Nom de la classe de style
.%@le %ha'ne de caract(res pour le style
I2#1 L)lment
I2#1 L)lment
input
input

proprits
proprits
Intro JS Intro JS
Annexes Annexes


:'"*. onne le focus (ou le curseur ou la main)
&l*# )nl(ve le focus
"l$"A *imule un clic (sur un #outon)
'(?'"*. tecte la prise de focus
'(Bl*# tecte la perte de focus
'(Cl$"A tecte le clic souris (sur un #outon)
'(C0(De tecte les changements
I2#1 L)lment
I2#1 L)lment
input
input

mthodes et $nements
mthodes et $nements
Intro JS Intro JS
Annexes Annexes


I2#1#- Les Pones de "extes
I2#1#- Les Pones de "extes
9ne <one de texte est dfinie par la

9ne <one de texte est dfinie par la
balise
balise
input
input
a$ec un t'pe
a$ec un t'pe
text
text
Proprits acceptes
Proprits acceptes
name name Q Q value value Q Q defaultvalue defaultvalue Q Q !i2e !i2e Q Q

ma-lengt$ ma-lengt$ Q Q di!abled di!abled Q Q read3nl4 read3nl4 Q Q cla!! cla!!
Q Q !t4le !t4le
&thodes acceptes
&thodes acceptes
focu! focu!( ( blur blur
6$nements accepts
6$nements accepts
on5ocu! on5ocu!( ( on6lur on6lur( ( onC$ange onC$ange

<input type="text">
Intro JS Intro JS
Annexes Annexes


I2#1#1 Les Houtons
I2#1#1 Les Houtons
9n bouton est dfini par la balise 9n bouton est dfini par la balise input input
a$ec un t'pe a$ec un t'pe button button
Proprits acceptes Proprits acceptes
name name Q Q value value Q Q defaultvalue defaultvalue Q Q !i2e !i2e Q Q ma-lengt$ ma-lengt$
Q Q di!abled di!abled Q Q read3nl4 read3nl4 Q Q cla!! cla!! Q Q !t4le !t4le
&thodes acceptes &thodes acceptes
focu! focu! Q Q blur blur Q Q click click
D$nements accepts D$nements accepts
on5ocu! on5ocu! Q Q on6lur on6lur Q Q onClick onClick
L)$nement le plus utilis est L)$nement le plus utilis est onClick onClick car car
il dtecte le clic utilisateur# il dtecte le clic utilisateur#
<input type="button" value="Ceci est un bouton">
Intro JS Intro JS
Annexes Annexes


I2#1#: Les RadioCHoutons
9n
9n
radio,boutons
radio,boutons
est dfini par
est dfini par
la balise I?P9" a$ec un t'pe
la balise I?P9" a$ec un t'pe
JradioJ
JradioJ
Pour dfinir un groupe( il faut

Pour dfinir un groupe( il faut
donner le m0me nom 3champs
donner le m0me nom 3champs
name
name
4 tous les radios#
4 tous les radios#
Ainsi( la slection sera uni+ue

Ainsi( la slection sera uni+ue
pour l)ensemble du groupe#
pour l)ensemble du groupe#
<input type="radio" name="sexe" value="homme"> Homme
<input type="radio" name="sexe" value="femme" checked>Femme
Intro JS Intro JS
Annexes Annexes


Proprits acceptes
Proprits acceptes
name
name
Q
Q
value
value
Q
Q
c$ecked
c$ecked
Q
Q
di!abled
di!abled
Q
Q
read3nl4
read3nl4
Q
Q
cla!!
cla!!
Q
Q
!t4le
!t4le

&thodes acceptes
&thodes acceptes
focu!
focu!
Q
Q
blur
blur
Q
Q
click
click
6$nements accepts
6$nements accepts
on5ocu!
on5ocu!
Q
Q
on6lur
on6lur
Q
Q
onClick
onClick
Intro JS Intro JS
Annexes Annexes


I2#1#G les *ases *ocher
9ne case cocher est dfinie

9ne case cocher est dfinie
par la balise I?P9" a$ec un
par la balise I?P9" a$ec un
t'pe
t'pe
c$eckbo-
c$eckbo-
#
#
*ontrairement aux cases

*ontrairement aux cases
cocher( il n)' a pas d)exclusion
cocher( il n)' a pas d)exclusion
entre les propositions#
entre les propositions#
Intro JS Intro JS
Annexes Annexes


Ici( &aeur et 6tudiant sont

Ici( &aeur et 6tudiant sont
dcochs l)origine#
dcochs l)origine#
&ais il est possible de n)0tre ni

&ais il est possible de n)0tre ni
l)un( ni l)autre( ou l)un des deux#
l)un( ni l)autre( ou l)un des deux#
<input type="checkbox" name="majeur">Majeur
<input type="checkbox" name="etudiant">Etudiant
Intro JS Intro JS
Annexes Annexes


Proprits acceptes
Proprits acceptes
name
name
Q
Q
c$ecked
c$ecked
Q
Q
di!abled
di!abled
Q
Q
read3nl4
read3nl4
Q
Q
cla!!
cla!!
Q
Q
!t4le
!t4le

&thodes acceptes
&thodes acceptes
focu!
focu!
Q
Q
blur
blur
Q
Q
click
click
D$nements accepts
D$nements accepts
on5ocu!
on5ocu!
Q
Q
on6lur
on6lur
Q
Q
onClick
onClick
Intro JS Intro JS
Annexes Annexes


I2#1#A Le pass.ord
I2#1#A Le pass.ord
Pa!!word
Pa!!word
se prsente comme une
se prsente comme une
<one de texte#
<one de texte#
&ais il affiche des S pour cacher le

&ais il affiche des S pour cacher le
contenu du champ#
contenu du champ#
Il est aussi impossible de copier le

Il est aussi impossible de copier le
contenu 3*"RLT*4#
contenu 3*"RLT*4#
Il est donc adapt la saisie de mot

Il est donc adapt la saisie de mot
de passe#
de passe#
<input type="password" name="passe" value="azerty" size=10>
Intro JS Intro JS
Annexes Annexes


I2#1#M La $aleur cache
9n champ cach est destin

9n champ cach est destin
transmettre des informations dans le
transmettre des informations dans le
formulaire( sans +ue le $isiteur ne
formulaire( sans +ue le $isiteur ne
s)en aper=oi$ent#
s)en aper=oi$ent#
*ela peut 0tre une adresse mail( un

*ela peut 0tre une adresse mail( un
rsultat de traitement( l)heure( un
rsultat de traitement( l)heure( un
cookie
cookie
ou toute autre information#
ou toute autre information#
?aturellement( le champ n)apparat

?aturellement( le champ n)apparat
pas;
pas;
<input type="hidden" value="contenu cach" name="cache">
Intro JS Intro JS
Annexes Annexes


Proprits acceptes
Proprits acceptes
name
name
Q
Q
value
value
Q
Q
defaultvalue
defaultvalue

?aturellement( toutes les

?aturellement( toutes les
proprits et les $nements
proprits et les $nements
concernant son affichage et son
concernant son affichage et son
apparence sont sans effet#
apparence sont sans effet#
-emarque
-emarque
5
5
.me s'il n'apparat
.me s'il n'apparat
pas l'cran, son contenu reste
pas l'cran, son contenu reste
manipulable en Java!cript/
manipulable en Java!cript/
Intro JS Intro JS
Annexes Annexes


I2#1#U Les boutons spciaux
I2#1#U Les boutons spciaux
Les boutons
Les boutons
re!et
re!et
et
et
!ubmit
!ubmit

existent bien;
existent bien;
Il faut les dcrire 3Je prconise

Il faut les dcrire 3Je prconise
de les $iter4VVV
de les $iter4VVV
<form name="formspe" action="javascript:alert('Soumis')">
<input type="text" name="texte" value="Contenu">
< input type="checkbox" checked>Cochez moi !<BR>
< input type="reset" value="RESET">
< input type="submit" value="SUBMIT">
</form>
Intro JS Intro JS
Annexes Annexes


I2#: Les menus de slection
Les listes sont dfinies par les

Les listes sont dfinies par les
balises
balises
/!elect0/1!elect0
/!elect0/1!elect0
*ette balise dfinie la <one de la

*ette balise dfinie la <one de la
liste# Les lignes de contenu de la
liste# Les lignes de contenu de la
liste sont alimentes par les balises
liste sont alimentes par les balises
/option0/1option 0
/option0/1option 0
<select name="mono" size=1>
<option value="1">ligne 1</option >
</select>
Intro JS Intro JS
Annexes Annexes


Les listes peu$ent se prsenter

Les listes peu$ent se prsenter
de plusieurs manires( selon
de plusieurs manires( selon
leur proprit#
leur proprit#
Sur une ligne 5

Sur une ligne 5
!i2e7"
!i2e7"
Sur plusieurs lignes monoC

Sur plusieurs lignes monoC
slection 5
slection 5
!i2e78
!i2e78
Sur plusieurs lignes multiC

Sur plusieurs lignes multiC
slection
slection
multiple
multiple

!i2e78
!i2e78
Intro JS Intro JS
Annexes Annexes


I2#: L)lment
I2#: L)lment
option
option
L)obet
L)obet
option
option
est asse< simple
est asse< simple
Il peut a$oir comme attributs

Il peut a$oir comme attributs
name
name
(
(
value
value
(
(
!elected
!elected
!elected
!elected
force la slection de
force la slection de
cette occurrence dans la liste
cette occurrence dans la liste
Intro JS Intro JS
Annexes Annexes


(me Nom de la liste
.$/e Nom#re de lignes afficher
m*l%$ple *lection multiple autorise
3$.&le3 &risage de la liste
"l.. %lasse de feuille de style
.%@le *tyle de la liste
I2#: L)lment
I2#: L)lment
option
option
proprits( mthodes(
proprits( mthodes(
$nements
$nements
33 A+oute un ligne (o#+et ,-T.,N)
#em'!e *upprime une ligne
:'"*. onne le focus la liste
&l*# !eprend le focus
'(C0(De tecte la slection d'une nouvelle ligne
'(Bl*# tecte la perte de focus
Intro JS Intro JS
Annexes Annexes


I2#G les <ones de textes multi
I2#G les <ones de textes multi
lignes
lignes
te-tarea
te-tarea
L)obet
L)obet
te-tarea
te-tarea
est
est
essentiellement utilis pour
essentiellement utilis pour
permettre au $isiteur de saisir
permettre au $isiteur de saisir
un texte asse< long 3message(
un texte asse< long 3message(
descriptif###4
descriptif###4
<textarea name="texte" rows="5" cols="20">
Ligne 1
Ligne 2
...
</ textarea >
Intro JS Intro JS
Annexes Annexes


I2#G L)lment
I2#G L)lment
te-tarea
te-tarea
proprits( mthodes(
proprits( mthodes(
$nements
$nements
(me Nom de la /one
#'2. Nom#re de lignes
"'l. Nom#re de colonnes
3$.&le3 &risage de la /one
#e3O(l@ "ecture seule
"l.. %lasse de feuille de style
.%@le *tyle de la liste
:'"*. onne le focus la /one
&l*# !eprend le focus
'(C0(De tecte le changement de contenu
'(S"#'ll tecte le dfilement de la /one
'(?'"*. tecte la perte de focus
Intro JS Intro JS
Annexes Annexes


I2#G L)lment
I2#G L)lment
te-tarea
te-tarea
proprits( mthodes(
proprits( mthodes(
$nements
$nements
Les 1 proprits
Les 1 proprits
row!
row!
et
et
col!
col!
+ui
+ui
indi+uent respecti$ement le
indi+uent respecti$ement le
nombre de lignes et de colonnes
nombre de lignes et de colonnes
de la <one
de la <one
Le texte contenu dans l)lment

Le texte contenu dans l)lment
te-tarea
te-tarea
apparat tel +ue dans le
apparat tel +ue dans le
code source
code source
9n retour la ligne dans le code

9n retour la ligne dans le code
source cre une nou$elle ligne
source cre une nou$elle ligne
dans la <one
dans la <one
Intro JS Intro JS
Annexes Annexes


2 L)accs aux lments
2 L)accs aux lments
Les lments de formulaire sont

Les lments de formulaire sont
des obets Ja$aScript
des obets Ja$aScript
2o'ons comment accder $ia

2o'ons comment accder $ia
Ja$aScript aux obets d)un
Ja$aScript aux obets d)un
formulaire
formulaire
Supposons le formulaire sui$ant

Supposons le formulaire sui$ant
<form name="general">
<input type="text" name="champ1"
value="Valeur initiale">
</form>
Intro JS Intro JS
Annexes Annexes


2 L)accs aux lments
2 L)accs aux lments
general
champ1
/alue 0 1'aleur initiale1
2ame 0 1champ11
*3pe 0 te+t
Pour accder un objet il faut suivre sa hirarchie.
On peut comparer cela un jeu de poupes russes .
Intro JS Intro JS
Annexes Annexes


2#- Accder au formulaire
2#- Accder au formulaire
Le formulaire est un lment de l)obet Le formulaire est un lment de l)obet

document document
Pour accder au formulaire gnral( il faut crire Pour accder au formulaire gnral( il faut crire
form! form! est le tableau des formulaires de est le tableau des formulaires de
document document
7n peut accder un formulaire par 7n peut accder un formulaire par
son nom comme indice dans son nom comme indice dans form! form! ou ou
son entier comme indice dans son entier comme indice dans form! form! ou ou
Les indices des tableaux commence I Les indices des tableaux commence I
son nom tout simplement son nom tout simplement

document&forms[0] ou
document&general
Intro JS Intro JS
Annexes Annexes


2#1 Accder un lment
2#1 Accder un lment
Pour accder maintenant la <one de

Pour accder maintenant la <one de
texte( on crit
texte( on crit
element!
element!
est le tableau de tous les
est le tableau de tous les
lments du formulaire
lments du formulaire
7n peut accder un lment par

7n peut accder un lment par
son nom comme indice dans son nom comme indice dans element! element! ou ou
son entier comme indice dans son entier comme indice dans element! element!
ou ou
son nom tout simplement son nom tout simplement

document&general&elements[0] ou
document&general&champ1
Intro JS Intro JS
Annexes Annexes


2#: &anipuler les proprits
2#: &anipuler les proprits
d)un lment
d)un lment
Par exemple( pour placer dans

Par exemple( pour placer dans
la <one de texte le mot
la <one de texte le mot
J?7926A9J( il faut crire
J?7926A9J( il faut crire
document&general&champ1&value01245/67518
Intro JS Intro JS
Annexes Annexes


2#G Appeler une mthode d)un
2#G Appeler une mthode d)un
lment
lment
Pour donner le
Pour donner le
focu!
focu!
au champ
au champ
texte du haut de cette page( il
texte du haut de cette page( il
faut appeler la mthode focus34
faut appeler la mthode focus34
sur cet lment
sur cet lment
document&general& champ1&focus()
Intro JS Intro JS
Annexes Annexes


2#A Intgrer du Ja$aScript
dans un $nement
dans un $nement
9n $nement est dclench

9n $nement est dclench
par le na$igateur en raction
par le na$igateur en raction
une action de l)utilisateur ou
une action de l)utilisateur ou
d)un changement +uelcon+ue
d)un changement +uelcon+ue
dtect
dtect
L)$nement le plus classi+ue(

L)$nement le plus classi+ue(
appel
appel
onClick
onClick
( estW le clic sur
( estW le clic sur
un bouton
un bouton
Intro JS Intro JS
Annexes Annexes


dans un $nement
dans un $nement
Reprenons l)exemple prcdent(

Reprenons l)exemple prcdent(
et pla=ons J?7926A9J dans la
et pla=ons J?7926A9J dans la
<one de texte du formulaire
<one de texte du formulaire
l)aide d)un bouton
l)aide d)un bouton
9form name0:CH;1<
9input t3pe01te+t1 name0:=*: 'alue01/aleur initiale1<
9input t3pe01button1 'alue01Changer la zone de te+te:
onClick='document. CHG.ZT.value = "new" '<
9%form<
Intro JS Intro JS
Annexes Annexes


dans un $nement
dans un $nement
>ans le bouton( on a raout

>ans le bouton( on a raout
l)$nement
l)$nement
onClick
onClick
+ui re=oit le
+ui re=oit le
code Ja$aScript excuter lors du
code Ja$aScript excuter lors du
clic sur le bouton
clic sur le bouton
Le code a$ascript doit se mettre

Le code a$ascript doit se mettre
entre J ou entre )
entre J ou entre )
Il faut faire trs attention alterner les J Il faut faire trs attention alterner les J
et ) et )
7n peut crire 7n peut crire

onClick7'alert(96on.our9)' onClick7'alert(96on.our9)' ou ou
onClick79alert('6on.our')9 onClick79alert('6on.our')9
onClick=' document. CHG. ZT.value = "Still new" '
Intro JS Intro JS
Annexes Annexes


2#M L)obet
2#M L)obet
t$i!
t$i!
Il est fastidieux d)accder aux

Il est fastidieux d)accder aux
lments de formulaire par
lments de formulaire par
toute la chane
toute la chane
document&form!&element!
document&form!&element!
9n obet Ja$aScript
9n obet Ja$aScript
t$i!
t$i!

permet de raccourcir ce
permet de raccourcir ce
chemin d)accs
chemin d)accs
t$i!
t$i!
reprsente l)obet
reprsente l)obet
Ja$aScript
Ja$aScript
en cours
en cours
d'utilisation
d'utilisation
Intro JS Intro JS
Annexes Annexes


2#M L)obet
2#M L)obet
t$i!
t$i!
exemple
exemple
Nuand un <one de texte re=oit l)attention Nuand un <one de texte re=oit l)attention
3le focus4( un message apparat dans la 3le focus4( un message apparat dans la
barre de statut pour indi+uer son nom8 le barre de statut pour indi+uer son nom8 le
message disparat +uand le champ perd le message disparat +uand le champ perd le
focus focus
9form name01formfocus1<
9input t3pe01te+t1
name01champte+te1 'alue01contenu1
onFocus="window.status=this.name"
onBlur="window.status=''"<
9%form<
>La !ariable window.status contient le messa"e
a!ec le nom du champ obtenu par this.name
#ui!alent ici
document.formfocus.champtexte.name
Intro JS Intro JS
Annexes Annexes


2#M L)obet
2#M L)obet
t$i!
t$i!
exemple
exemple
Reprenons encore une fois notre

Reprenons encore une fois notre
champ texte +ui peut $oir son
champ texte +ui peut $oir son
contenu changer lors du clic sur un
contenu changer lors du clic sur un
bouton
bouton
ErXce
ErXce
t$i!&form
t$i!&form
( on peut accder
( on peut accder
au formulaire de l)lment en cours
au formulaire de l)lment en cours
Le chemin pour accder

Le chemin pour accder
2onedete-te
2onedete-te
est ensuite classi+ue
est ensuite classi+ue
9form name01mine1<
9input t3pe01te+t1 name01zonedete+te1
'alue01/aleur initiale1<
9input t3pe01button1 'alue01Changer le contenu1
onClick=' this.form.zonedetexte.value="NOUVEAU" '<
9%form<
Intro JS Intro JS
Annexes Annexes


2#M L)obet
2#M L)obet
t$i!
t$i!
exemple
exemple
0n #outon sert principalement dclencher une action 1ava*cript2 0n #outon sert principalement dclencher une action 1ava*cript2
Nous avons d+ vu dans le paragraphe Nous avons d+ vu dans le paragraphe Intgrer du JavaScript Intgrer du JavaScript
dans un vnement dans un vnement comment dtecter le clic3 sur un #outon comment dtecter le clic3 sur un #outon
"a proprit "a proprit !l*e !l*e contient le li#ell du #outon2 contient le li#ell du #outon2
%omme pour une /one de texte4 ce li#ell est accessi#le %omme pour une /one de texte4 ce li#ell est accessi#le
"0e"Ae3 "0e"Ae3 est de type #oolen est de type #oolen

5
.l contient .l contient %#*e %#*e si l'o#+et est si l'o#+et est "'"0> "'"0> et et :l.e :l.e sinon2 sinon2
<form> <form>
<input tpe="c!ec"#o$" name="majeur">Majeur <input tpe="c!ec"#o$" name="majeur">Majeur
<input tpe="c!ec"#o$" name="etudiant">%tudiant <input tpe="c!ec"#o$" name="etudiant">%tudiant
<input tpe="#utton" value="&ester" <input tpe="#utton" value="&ester"
onClic9=(alert#0:a,eur ; 0 5 onClic9=(alert#0:a,eur ; 0 5
t!isformma,eurc!ec9ed 5 t!isformma,eurc!ec9ed 5
0<n=tudiant ; 0 5 0<n=tudiant ; 0 5
t!isformetudiantc!ec9ed&;( 6 t!isformetudiantc!ec9ed&;( 6
<'form> <'form>
Intro JS Intro JS
Annexes Annexes


2#U Accder aux
2#U Accder aux
<ones de texte
<ones de texte
La principale action en Ja$aScript sur

La principale action en Ja$aScript sur
une <one de texte est de manipuler son
une <one de texte est de manipuler son
contenu
contenu
Imaginons un formulaire appel m'form

Imaginons un formulaire appel m'form
+ui possde un champ texte appel
+ui possde un champ texte appel
m'field
m'field
7n accde au contenu du champ par

7n accde au contenu du champ par
Il faut bien penser aouter la proprit

Il faut bien penser aouter la proprit
value
value
pour accder au contenu
pour accder au contenu
document. myform. myfield.value
Intro JS Intro JS
Annexes Annexes


2#Y Accder aux
2#Y Accder aux
radioCboutons
radioCboutons
<form>
<input tpe="radio" name="os" value="()*" c!ec"ed> (ind)*
< input tpe="radio" name="os" value="+inu$"> +inu$
< input tpe="radio" name="os" value=",utre"> ,utre
'' le #outon d-fini pr-c-demment
< input tpe="#utton" value="&ester.
on/lic"="tester0adio1t!is2form2os3">
'' une fct de consultation du groupe 4radio4 de radio5#outons
<script language="javascript">
function tester0adio1radio3 6
for 1var i=7; i<radiolengt!;i++3 6
if 1radio>i?c!ec9ed3 6
alert1"8st9me = "+radio>i?value3
:
:
:
<'script>
<'form>
Intro JS Intro JS
Annexes Annexes


2#L Accder aux
2#L Accder aux
menus de slection
menus de slection
<select name="liste" si;e=<>
<option value="valeur ligne <">+i#ell- ligne < <'option>
<option value="valeur ligne 2">+i#ell- ligne 2 <'option>
<option value="valeur ligne =">+i#ell- ligne = <'option>
<option value="valeur ligne >">+i#ell- ligne > <'option>
<'select>
(me Nom de la liste
.ele"%e3I(3ex .ndice de la ligne slectionne
(ligne 6 7 indice89)
'p%$'(. Ta#leau des lignes
le(D%0 Nom#re de lignes
!l*e $aleur d'une ligne
%ex% "i#ell d'une ligne
Intro JS Intro JS
Annexes Annexes


2#L Accder aux
2#L Accder aux
menus de slection
menus de slection
Pour rcuprer l)indice la ligne

Pour rcuprer l)indice la ligne
slectionne
slectionne
t$i!&form& li!te&!elected:nde- t$i!&form& li!te&!elected:nde-

Pour rcuprer le nombre de

Pour rcuprer le nombre de
lignes
lignes
t$i!&form&li!te&option!&lengt$ t$i!&form&li!te&option!&lengt$
Pour rcuprer la $aleur de la

Pour rcuprer la $aleur de la
ligne slectionne
ligne slectionne
this.form.liste.options[this.form.liste.selectedIndex].value
Intro JS Intro JS
Annexes Annexes


2#-I Accder aux
2#-I Accder aux
textarea
textarea
9ne <one de texte multiClignes a comme 9ne <one de texte multiClignes a comme
proprit principale proprit principale value value +ui contient le texte +ui contient le texte
de la <one de la <one
Pour rcuprer le contenu de la <one( on utilise Pour rcuprer le contenu de la <one( on utilise
document&nom& 2one&value document&nom& 2one&value
Afin de pou$oir traiter la chane rsultante( il Afin de pou$oir traiter la chane rsultante( il
faut traduire l)ensemble de scaractres faut traduire l)ensemble de scaractres
spciaux 3R*( Z( LB( W4 en un spciaux 3R*( Z( LB( W4 en un code code
comprhensible comprhensible
La fonction La fonction e!cape(car) e!cape(car) retourne le code retourne le code

correspondant correspondant car car
La fonction La fonction une!cape(code) une!cape(code) retourne le caractre retourne le caractre

correspondant correspondant
Par exemple Par exemple e!cape(9;9) e!cape(9;9) retourne retourne 9<=>9 9<=>9 et et
une!cape(9<=>9) une!cape(9<=>9) retourne retourne 9;9 9;9
Intro JS Intro JS
Annexes Annexes


2II#- *on$ersion chane de
2II#- *on$ersion chane de
caractres en nombres
caractres en nombres
Les $ariables ne sont pas

Les $ariables ne sont pas
t'pes
t'pes
&ais il est utile de sa$oir

&ais il est utile de sa$oir
transformer une chane en un
transformer une chane en un
entier ou un rel 3nombre
entier ou un rel 3nombre
$irgule4
$irgule4
Imaginons ce script
Imaginons ce script
'ar chaine01?&1418
'ar entier0parseInt@chaineA8
'ar reel0parseFloat@chaineA8
Intro JS Intro JS
Annexes Annexes


2II#1 L)obet
2II#1 L)obet
?at$
?at$
La plupart des fonctions

La plupart des fonctions
mathmati+ues sont des
mathmati+ues sont des
mthodes de l)obet
mthodes de l)obet
?at$
?at$
Retourne une $aleur entre I et -

Retourne une $aleur entre I et -
var nb=Math.random();
Intro JS Intro JS
Annexes Annexes


M%04&.59 !etourne la valeur a#solue de a
M%04#'*(359 !etourne l'entier arrondi le plus proche de a
M%04"e$l59 !etourne l'entier immdiatement suprieur (ou gal) a
M%04:l''#59 !etourne l'entier immdiatement infrieur (ou gal) a
M%04.-#%59 !etourne la racine carre de a
M%04l'D59 !etourne le logarithme de a
M%04l(59 !etourne le logarithme nprien de a
M%04exp59 !etourne l'exponentielle de a
M%04p'256&9 !etourne a la puissance #
M%04m$(56&9 !etourne le plus petit des param(tres a ou #
M%04mx56&9 !etourne le plus grand des param(tres a ou #
2II#: L)obet &ath et
ses mthodes
ses mthodes
Intro JS Intro JS
Annexes Annexes


ses mthodes
ses mthodes
M%04"'.59 !etourne le cosinus d'un angle en radians
M%04.$(59 !etourne le sinus d'un angle en radians
M%04%(59 !etourne la tangente d'un angle en radians
M%04"'.59 !etourne l'arc cosinus en radians
M%04.$(59 !etourne l'arc sinus en radians
M%04%(59 !etourne l'arc tangente en radians
Intro JS Intro JS
Annexes Annexes


A#- Introduction
?ous allons $oir de nombreuses

?ous allons $oir de nombreuses
astuces pour rendre un formulaire
astuces pour rendre un formulaire
d'nami+ue et attractif( en raction
d'nami+ue et attractif( en raction
aux $nements gnrs par
aux $nements gnrs par
l)utilisateur
l)utilisateur
Il est ncessaire de bien connatre

Il est ncessaire de bien connatre
le principe des formulaires %"&L
le principe des formulaires %"&L
pour tirer partie de ces astuces#
pour tirer partie de ces astuces#
Intro JS Intro JS
Annexes Annexes


A#1 >onner le focus
un lment
Le premier champ texte a le

Le premier champ texte a le
focus au chargement de la page
focus au chargement de la page
*li+ue< sur les boutons pour

*li+ue< sur les boutons pour
donner le focus aux autres
donner le focus aux autres
lments
lments
La prise de focus est possible

La prise de focus est possible
pour tous les t'pes d)obets
pour tous les t'pes d)obets
Intro JS Intro JS
Annexes Annexes


A#1 >onner le focus
un lment
<BODY onLoad="document.form1.champ1.focus();">
<FORM name="form1">
<INPUT type="texte" name="champ1">
<INPUT type="button" value="suivant"
onClick="this.form.champ2.focus()"><p>
<SELECT name="champ2" >
<OPTION>Ceci est la ligne n 1</OPTION>
<OPTION>Ceci est la ligne n 2</OPTION>
</SELECT>
<INPUT type="button" value="suivant"
onClick="this.form.champ3.focus()"><p>
<TEXTAREA rows="2" cols="15" name="champ3"></textarea>
<INPUT type="button" value="valider">
</FORM>
</BODY>
Intro JS Intro JS
Annexes Annexes


A#: *hanger le libell
A#: *hanger le libell
<FORM name="form2">
<INPUT type="button" name="bouton" value='Cliquez-moi !'
onClick="this.value='Touch !'">
</FORM>
Intro JS Intro JS
Annexes Annexes


A#G Autoriser un seul clic
Accepte le premier clic sur le

Accepte le premier clic sur le
bouton et emp0che les sui$ants
bouton et emp0che les sui$ants
9tile pour $iter de rece$oir :

9tile pour $iter de rece$oir :
fois le m0me message +uand
fois le m0me message +uand
un $isiteur
un $isiteur
b*aie
b*aie
sur le bouton
sur le bouton
J6n$o'erJ ;
J6n$o'erJ ;
Intro JS Intro JS
Annexes Annexes


<SCRIPT language="javascript">
var nbclic=0 // Initialisation 0 du nombre de clic
function CompteClic(formulaire)
{ // Fonction appele par le bouton
nbclic++; // nbclic+1
if (nbclic>1)
{ // Plus de 1 clic
alert("Vous avez dj cliqu");
}
else { alert("Premier Clic."); } // 1 seul clic
}
</SCRIPT>
<INPUT type="button" name="bouton" value="Cliquez"
onClick="CompteClic(this.form)">
Intro JS Intro JS
Annexes Annexes


A#A 2alider un formulaire
Il est sou$ent utile de $rifier la

Il est sou$ent utile de $rifier la
saisie d)un formulaire a$ant de le
saisie d)un formulaire a$ant de le
$alider
$alider
L)idal est de crer un bouton

L)idal est de crer un bouton
3de t'pe JbuttonJ et pas JsubmitJ4
3de t'pe JbuttonJ et pas JsubmitJ4
+ui appelle une fonction
+ui appelle une fonction
a$ascript +ui contrOle la saisie et
a$ascript +ui contrOle la saisie et
soumet ou non le formulaire
soumet ou non le formulaire
Intro JS Intro JS
Annexes Annexes


2o'ons un exple de saisie d)un

2o'ons un exple de saisie d)un
email
email
<FORM name="form4" action="mailto:paris@lita.univ-metz.fr" method="post">
<SCRIPT language="javascript">
function ValiderMail(formulaire)
{
if( formulaire.mail.value.indexOf( "@", 0 ) < 0 )
{ alert("Adresse mail saisie invalide.\nLe formulaire ne sera pas valid.") ; }
else
{
alert("Formulaire valid.\nPour valider un formulaire : formulaire.submit()");
formulaire.submit(); // Pour valider le formulaire en javascript
}
}
</SCRIPT>

<INPUT type="texte" name="mail">
<INPUT type="button" name="bouton" value="Valider"
onClick="ValiderMail(this.form)">
</FORM>
Intro JS Intro JS
Annexes Annexes


A#M 2ider un champ
A#M 2ider un champ
la prise de focus
la prise de focus
<FORM name="form5">
<INPUT type="texte" name="login" value='Votre login'
onFocus='this.value=""; ' >
</FORM>
Intro JS Intro JS
Annexes Annexes


A#U >tecter
A#U >tecter
la touche 6ntre
la touche 6ntre
9tile dans les formulaires de

9tile dans les formulaires de
recherche( o/ la plupart des
recherche( o/ la plupart des
utilisateurs tapent [6ntre\ pour
utilisateurs tapent [6ntre\ pour
$alider la recherche( sans cli+uer sur
$alider la recherche( sans cli+uer sur
le bouton JRechercherJ
le bouton JRechercherJ
L)appui sur [6ntre\ dclenche la

L)appui sur [6ntre\ dclenche la
soumission du formulaire +u)il est
soumission du formulaire +u)il est
possible de dtecter a$ec
possible de dtecter a$ec
l)$nement onSubmit
l)$nement onSubmit
<FORM name="formulaire" onSubmit="maFonction()">
Intro JS Intro JS
Annexes Annexes


A#Y 6mp0cher la saisie
A#Y 6mp0cher la saisie
d)un champ
d)un champ
>s +ue la curseur souris arri$e sur

>s +ue la curseur souris arri$e sur
ce champ( il est enle$
ce champ( il est enle$
*ela rend impossible la saisie ou la

*ela rend impossible la saisie ou la
modification de son contenu
modification de son contenu
L)astuce est d)utiliser l)$nement

L)astuce est d)utiliser l)$nement
on5ocu!
on5ocu!
+ui dtecte l)arri$e du
+ui dtecte l)arri$e du
curseur dans le champ
curseur dans le champ
<INPUT type="text" value="Non modifiable" name="champ"
onFocus="this.blur()">
<INPUT type="text" value="Non modifiable" name="champ"
onFocus="this.form.champ2.focus()">
Intro JS Intro JS
Annexes Annexes


I#G "ableaux
I#G "ableaux
6n Ja$aScript( les tableaux sont

6n Ja$aScript( les tableaux sont
des obets#
des obets#
Leurs dclarations sont identi+ues

Leurs dclarations sont identi+ues
celles $ues prcdemment#
celles $ues prcdemment#
// tableau de 10 lments de type basique
//(rel, entier, chane de caractres).
var un_tableau = new Array( 10) ;
Intro JS Intro JS
Annexes Annexes


I#G "ableaux
I#G "ableaux
6n Ja$aScript( le premier
6n Ja$aScript( le premier
lment d)un tableau est index
lment d)un tableau est index

I
I
Il est possible de dclarer un

Il est possible de dclarer un
tableau sans fixer sa dimension
tableau sans fixer sa dimension
Alors la taille du tableau

Alors la taille du tableau
s)adapte au fur et mesure
s)adapte au fur et mesure
son contenu
son contenu
var un_autre_tableau=new Array;
Intro JS Intro JS
Annexes Annexes


I#G "ableaux
I#G "ableaux
Pour accder aux lments du

Pour accder aux lments du
tableau( on utilise les crochets
tableau( on utilise les crochets
@
@
et
et
A
A
un_tableau[0]=10;
un_tableau[9]=5;
un_tableau[9]=un_tableau[0]-5 ;
Intro JS Intro JS
Annexes Annexes


I#G "ableaux
I#G "ableaux
>es
>es
mthodes
mthodes
associes
associes
l)obet permettent d)effectuer
l)obet permettent d)effectuer
des traitements ou d)accder
des traitements ou d)accder
des proprits#
des proprits#
7n utilise la
7n utilise la
notation pointe
notation pointe

pour appli+uer une mthode sur
pour appli+uer une mthode sur
un obet ou pour accder une
un obet ou pour accder une
proprit#
proprit#
// Le nbre d'lments de l'objet Array un@taAleau
var dimension = un_tableau.length;
Intro JS Intro JS
Annexes Annexes


I#G "ableaux 5 6xemple
<HTML>
<HEAD> </HEAD>
<BODY>
<SCRIPT>
var un_tableau=new Array(10) ;
var dimension=un_tableau.length;
document.write(dimension);
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD> <H1> Tableau des 4 saisons </H1> </HEAD>
<BODY>
<SCRIPT>
var Les4saisons =
new Array("printemps", "t", "automne", "hiver");
document.write("<BR>", "Voici les 4 saisons : <OL>");
for (i=0 ; i<4 ; i++) {
document.write("<LI>", Les4saisons[i] );
}
document.write("</OL>");
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


1ava*cript a une gestion particuli(re des ta#leaux2 0n ta#leau est un o#+et Array2
E Le. %&le*x J!."#$p%
E41 L 3>"l#%$'( 3e %&le*x
C7e.% -*'$ *( %&le* 8
"es ta#leaux sont des lments indispensa#les de la programmation2 0n ta#leau est
une structure ordonne permettant de recevoir des informations2 "es +ours de la
semaine peuvent :tre stoc3s en mmoire dans un ta#leau2 "e ta#leau en mmoire
peut :tre compar au ta#leau rel7
I(3$"e 6 ; < = > ? @
C'(%e(* "undi Mardi Mercredi 1eudi $endredi *amedi imanche
"'intr:t premier du ta#leau est de permettre un acc(s une information par son
indice2 -ar exemple4 le premier lment de ce ta#leau contient A"undiA2 "e
paragraphe suivant montre comment remplir un ta#leau2
Intro JS Intro JS
Annexes Annexes


D>"l#%$'( 3e &.e
0n ta#leau est un o#+et Array2 -our dclarer un ta#leau4 il faut utiliser
l'instruction neB 7
($ar) ta#8neB ArrayC
"a varia#le ta# a maintenant la structure d'un ta#leau2 )lle poss(de les proprits
et les mthodes des ta#leaux et est pr:te recevoir le contenu du ta#leau2 )n
+avascript4 comme dans la plupart des langages de programmation4 le premier
lment du ta#leau commence l'indice 9 (comme en %)2 %'est un peu g:nant4
mais on commence a avoir lDha#itude2
-our alimenter le ta#leau avec les +ours de la semaine4 on crit le code suivant 7
ta#8neB ArrayC
ta#E9F8A"undiAC
ta#E6F8AMardiAC
ta#E;F8AMercrediAC
ta#E<F8A1eudiAC
ta#E=F8A$endrediAC
ta#E>F8A*amediAC
ta#E?F8AimancheAC
var longueur 8 ta#2lengthC
Intro JS Intro JS
Annexes Annexes


Maintenant4 le ta#leau est initialis avec les +ours de la semaine2 "a varia#le
longueur contient @ 7 il y a @ lments dans le ta#leau de l'indice 9 l'indice ? (soit
@G6)2 *i on acc(de un lment dont l'indice n'existe pas4 +avascript retourne
undefined2 -ar exemple4 ta#E69F n'existe pas4 cet lment vaut undefined2
Exe#"$"e 7 Hcrire un programme Iui trie un ta#leau contenant des noms
dDanimaux2 .l est possi#le de comparer les contenus de cellule par un simple test de
supriorit comme sur des valeurs numriIues2
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD>
<TITLE>T#$ 37*( %&le* p# *(e m>%0'3e pe* .%*"$e*.e</TITLE> </HEAD>
<BODY>
<."#$p% l(D*De="J!S"#$p%">
($m*x= (e2 A##@5F9
($m*xGHI = ""0$e("
($m*xG1I = "*%#*"0e ", ($m*xGJI = "2p$%$"
($m*xGEI = "3#'m3$#e ", ($m*xG=I = "l@(x"
($m*xGKI = "&ele%%e" , ($m*xGLI = "lp$("
3'"*me(%42#$%e5"<HE>T#$ 37*( %&le*</HE>"9
:'# 5$=H, $<L, $119
:'# 5)=$11, )<F, )119
$: 5($m*xG)I < ($m*xG$I9
; p#'!$.'$#e = ($m*xG$I
($m*xG$I = ($m*xG)I
($m*xG)I = p#'!$.'$#e
<
:'# 5$=H, $<F,9
3'"*me(%42#$%e5($m*xG$11I 1 "<BR>"9
</."#$p%>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


E4J Le. %&le*x .p>"$*x
Nous avons vu comment crer un ta#leau simple une seule dimension2 %'est la
#ase de tous les ta#leaux possi#les en +avascript2
ans certains cas4 un indice numriIue est moins pratiIue ou moins explicite
Iu'un indice sous forme de texte2 -ar exemple4 imaginons Iue pour chaIue
+our de la semaine on ait une page spciale charger 7
G
samedi et dimanche 8 Bee3end2html
G
mercredi 8 enfant2html
G
les autres +ours 8 travail2html

.
l pourrait :tre intressant d'avoir un ta#leau de ce type 7
Intro JS Intro JS
Annexes Annexes


I(3$"e "undi Mardi Mercredi 1eudi $endredi *amedi imanche
C'(%e(
*
travail travail enfant travail travail Bee3end Bee3end
Jui serait dclar ainsi en +avascript 7
var ta#8neB ArrayC
ta#EA"undiAF8A travail AC
ta#EAMardiAF8A travail AC
ta#EAMercrediAF8AenfantAC
ta#EA1eudiAF8A travail AC
ta#EA$endrediAF8A travail AC
ta#EA*amediAF8ABee3endAC
ta#EAimancheAF8ABee3endAC

&rKce cette dclaration un peu spciale4 on acc(de aux lments du ta#leau par le
+our de la semaine2
Intro JS Intro JS
Annexes Annexes


Le. %&le*x 37'&)e%.

-our l'instant4 les ta#leaux Iue nous avons vus contenaient des valeurs #asiIues
(cha'nes de caract(res ou nom#res)2 .l est possi#le d'associer un lment de
ta#leau un o#+et +avascript complexe2 .maginons un ta#leau contenant tous vos
animaux domestiIues2 0n animal domestiIue est dcrit par 7
G son nom
G son esp(ce
G son Kge

$oici la fonction Iui construit un animal en mmoire 7
function Animal(unLnom4uneLespece4unLage) M
this2nom8unLnomC
this2espece8uneLespeceC
this2age8unLageC
N
Intro JS Intro JS
Annexes Annexes


,n peut crer les animaux en appelant la fonction Animal 7
var milou8neB Animal(AMilouA4A%hienA4A=A)
var titi8neB Animal(ATitiA4A%anariA4A6A)
var rominet8neB Animal(A!ominetA4A%hatA4A;A)

,n a maintenant en mmoire < varia#les correspondant nos < animaux7 milou4
titi et rominet

Attention 7 il ne faut pas confondre les varia#les en minuscules avec le nom de
l'animal Iui est une cha'ne de caract(res et Iui comporte une ma+uscule O
.l ne reste Iu' crer le ta#leau animaux 7
var animaux8neB ArrayC
animauxE9F8milouC
animauxE6F8titiC
animauxE;F8rominetC
Intro JS Intro JS
Annexes Annexes


.ci4 le premier lment du ta#leau animaux contient un o#+et4 la varia#le milou2 .l
ne faut pas mettre de guillemet autour de milou 7 ce n'est pas une cha'ne de
caract(res4 mais un nom de varia#le2

-our accder l'o#+et premier animal (indice 9)4 on crit 7 animauxE9F
-our accder ses proprits4 on utilise la notion pointe 7
animauxE9F2nom
animauxE9F2espece
animauxE9F2age
Intro JS Intro JS
Annexes Annexes


PQTM"R
PQ)AR
PT.T")R-etite /oologie portativePST.T")R
Pscript language8A1ava*criptAR
function AN.MA"(genre4 ordre4 famille)
M this2genre 8 genreC this2ordre 8 ordreC this2famille 8 famille
N
animal 8 neB Array()
animalEAratAF 8 neB AN.MA"(AMammif(resA4 A!ongeursA4 A,mnivoresA)
animalEAporcAF 8 neB AN.MA"(AMammif(resA4 A-achydermesA4 A*uidsA)
animalEAchatAF 8 neB AN.MA"(AMammif(resA4 A%arnassiersA4 A%arnivoresA)
animalEAaigleAF 8 neB AN.MA"(A,iseauxA4 A!apacesA4 ATauconsA)
animalEAcarpeAF 8 neB AN.MA"(A%yprinsA4 AMalacoptrygiensA4
A%yprinoUdesA)
animalEAcanardAF8 neB AN.MA"(A,iseauxA4 A-almip(desA4 A"amellirostresA)
animalEAoursAF 8 neB AN.MA"(AMammif(resA4 A%arnassiersA4 A%arnivoresA)
animalEAgrenouilleAF 8 neB AN.MA"(AVatraciensA4 AAnouresA4 A!ainettesA)
&ros exemple
Intro JS Intro JS
Annexes Annexes


:*("%$'( #e"0e#"0e5&e%e9
; &e%e = &e%e4%'L'2e#C.e59 // P'*# me%%#e le. "#"%M#e. e( m$(*."*le
$: 5%@pe': ($mlG&e%eI == "*(3e:$(e3"9 // O( !>#$:$e -*e l7'( e.% &$e( 3(. le %&le*
; le#%5" A($ml ('( %#'*!> "9,
< // A::$"0De 3e. "#"%>#$.%$-*e.
3'"*me(%4:'#m.GHI4eleme(%.GJI4!l*e = ($mlG&e%eI4De(#e
3'"*me(%4:'#m.GHI4eleme(%.GEI4!l*e = ($mlG&e%eI4'#3#e
3'"*me(%4:'#m.GHI4eleme(%.G=I4!l*e = ($mlG&e%eI4:m$lle
<
</."#$p%>
Intro JS Intro JS
Annexes Annexes


</HEAD>
<BODY>
<HJ>Pe%$%e /''l'D$e p'#%%$!e</HJ>
<?ORM>
N'm 3e l7($ml B
<INPUT TYPE="%ex%" NALUE="" SIOE="1H">
<INPUT %@pe="&*%%'(" NALUE="A::$"0e#"
'(Cl$"A="#e"0e#"0e53'"*me(%4:'#m.GHI4eleme(%.GHI4!l*e9">
<P>
<PRE>
Ge(#e B <INPUT TYPE="%ex%" NALUE="" SIOE="JH">
O#3#e B <INPUT TYPE="%ex%" NALUE="" SIOE="JH">
?m$lle B <INPUT TYPE="%ex%" NALUE="" SIOE="JH">
</PRE>
</?ORM>
<HR>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


Le. %&le*x P pl*.$e*#. 3$me(.$'(.

,n vient de voir Iu'il est possi#le de crer des ta#leaux d'o#+ets2 ,r un ta#leau est
aussi un o#+et +avascript Array2 .l est donc possi#le de crer des ta#leaux de
ta#leaux4 ce Iui correspond des ta#leaux plusieurs dimensions2 "e nom#re de
dimensions d'un ta#leau n'est pas limitC mais nous allons traiter un exemple
simple et concret deux dimensions2 .maginons un +eu de morpion2 "a /one de
+eu est un plateau de < par <2 *upposons cette grille un moment donn de la
partie 7
2 1 0
2 B 4
1 4 B
0 B
%ette grille est #ien un ta#leau ; dimensions2 cidons4 par convention4
d'indicer d'a#ord la colonne puis la ligne2 Ainsi4 la caseE949F coin suprieur gauche
est vide4 la case E94;F coin infrieur gauche contient A,A4 la caseE;49F coin
suprieur droit contient AWA2
Intro JS Intro JS
Annexes Annexes


Comment faire pour crer un tableau javascript de ce type ?

,n va crer un ta#leau de < colonnes C une colonne tant un ta#leau de < cases2
'a#ord on cre les < colonnes 7
var col98neB ArrayC col9E9F8A AC col9E6F8AWAC col9E;F8A,AC
var col68neB ArrayC col6E9F8A AC col6E6F8A,AC col6E;F8AWAC
var col;8neB ArrayC col;E9F8AWAC col;E6F8A AC col;E;F8A AC

)nsuite le ta#leau morpion 7
var morpion8neB ArrayC
morpionE9F8col9C morpionE6F8col6C morpionE;F8col;C

-our accder l'lment E94;F4 on crit simplement 7
morpionE9FE;F
Afficher lexemple (trs modeste du morpion (v!vide
Intro JS Intro JS
Annexes Annexes


U( exemple *%$le

"es ta#leaux sont utiliss dans la plupart des scripts du site2 $oici IuelIues scripts
simples Iui montrent #ien l'emploi des ta#leaux2
?'#m%De 3e 3%e
"e formatage de dates est un #on exemple d'utilisation des ta#leaux2 "e
navigateur peut retourner le numro du +our et du mois en cours2 Avec ces indices4
on peut aller rechercher le li#ell en franXais du +our et du mois2
var dt8neB ateC
var +our8dt2getay( )C
var nu8dt2getate( )C
var mois8dt2getMonth( )C
$ar ta#+r8neB
Array(AimancheA4A"undiA4AMardiA4AMercrediA4A1eudiA4A$endrediA4A*amediA)C
var ta#mois8neB
Array(A1anvierA4ATvrierA4AMarsA4AAvrilA4AMaiA4A1uinA4A1uilletA4
AAoYtA4A*eptem#reA4ANovem#reA4Acem#reA)C
document2Brite(ANous sommes le AZta#+rE+ourFZA AZnuZA AZta#moisEmoisF)C

$oici le rsultat de ce script 7 N'*. .'mme. le 3%e 4
"a mthode getay() retourne le numro du +our de la semaine4 9 pour le
dimanche ? pour samedi2 "a mthode getMonth() retourne le numro du mois4 9
pour 1anvier 66 pour cem#re2 .ci4 on affiche le +our et le mois correspondant
aux indices retourns2
Intro JS Intro JS
Annexes Annexes


2I#- Introduction
2I#- Introduction
Ja$aScript est un langage 7bet

Ja$aScript est un langage 7bet
*ette approche permet de

*ette approche permet de
d$elopper des scritps
d$elopper des scritps
rutili!able! volutif! et
rutili!able! volutif! et
paramtrable!
paramtrable!
*e chapitre prsente les

*e chapitre prsente les
principes gnraux de la
principes gnraux de la
programmation obet
programmation obet
Intro JS Intro JS
Annexes Annexes


2I#1 >claration
2I#1 >claration
7n utilise l)instruction ne.

7n utilise l)instruction ne.
la+uelle on adoint
la+uelle on adoint
soit un t'pe d)obet prdfini

soit un t'pe d)obet prdfini
3>ate( Arra'( ###4
3>ate( Arra'( ###4
soit une instruction +ui permet de

soit une instruction +ui permet de
crer les proprits de cet obet
crer les proprits de cet obet
Intro JS Intro JS
Annexes Annexes


// l0oA,et Date est prdfine au sein de l0interprte
var fetnat=ne- Date#1B;4C;244"&;
// C!ein est un tDpe cr de toute pice
var mon@c!ien=ne- C!ien#(:ilou(3(FoE Ferrier(&;
function C!ien#le@nom3la@race& '
t!isnom=le@nom;
t!israce=la@race;
}
2I#1 >claration 5 6xemple
L)instruction L)instruction C$ien C$ien fait appel au mot fait appel au mot t$i! t$i! +ui +ui
reprsente l)obet en cours 3ici( reprsente l)obet en cours 3ici( monBc$ien monBc$ien4 4
Intro JS Intro JS
Annexes Annexes


La $ariable
La $ariable
monBc$ien
monBc$ien
est
est
maintenant un obet de t'pe
maintenant un obet de t'pe
chien +ui contient les proprits
chien +ui contient les proprits
nom et race
nom et race
?aturellement( il est possible de

?aturellement( il est possible de
raouter des proprits trs
raouter des proprits trs
facilement( sans se soucier des
facilement( sans se soucier des
+uestions d)indices +u)imposerait
+uestions d)indices +u)imposerait
un tableau du t'pe
un tableau du t'pe
Intro JS Intro JS
Annexes Annexes


<HTML>
<HEAD>
<TITLE> woua woua </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function Chien(le_nom,la_race) {
this.nom=le_nom;
this.race=la_race;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<SCRIPT LANGUAGE = "JavaScript">
var mon_chien =
new Chien("Milou","Fox Terrier");
document.write(mon_chien.nom +
" est un "+mon_chien.race);
</SCRIPT>
</BODY>
</HTML>
Intro JS Intro JS
Annexes Annexes


2I#: L)utilisation des mthodes
2I#: L)utilisation des mthodes
Lors de la cration d)un obet( Il est Lors de la cration d)un obet( Il est
galement possible d)associer des galement possible d)associer des
mthodes celuiCci mthodes celuiCci
La dclaration des mthodes se fait La dclaration des mthodes se fait

pendant la cration de l)obet pendant la cration de l)obet
function C!ien#le@nom3la@race&
'
t!isnom=le@nom;
t!israce=la@race;
t!isGffic!er=Gffic!erC!ien;
.
function Gffic!erC!ien#&
'
alert#(Ce c!ien s0appelle ( 5 t!isnom 5
(<n C0est un (5t!israce5((&;
.
Intro JS Intro JS
Annexes Annexes


2I#: le
2I#: le
wit$
wit$
7n remar+ue encore l)utilisation

7n remar+ue encore l)utilisation
de
de
t$i!
t$i!
+ui reprsente l)obet sur
+ui reprsente l)obet sur
le+uel est appli+ue la mthode
le+uel est appli+ue la mthode
Il est possible aussi de dclarer

Il est possible aussi de dclarer
la fonction a$ec le mot
la fonction a$ec le mot
wit$
wit$
function Gffic!erC!ien#& '
-it!# t!is &
alert#(Ce c!ien s0appelle ( 5 t!isnom 5
(<nC0est un (5t!israce5((&;
.
JavaScript et
JavaScript et
le! cookie!
le! cookie!
*hapitre 2III
*hapitre 2III
Intro JS Intro JS
Annexes Annexes


2III#- , +uoi ser$entCils V
2III#- , +uoi ser$entCils V
Les coo!ies sont trs utiliss( par tous les sites Les coo!ies sont trs utiliss( par tous les sites
commerciaux et par de plus en plus de sites personnels commerciaux et par de plus en plus de sites personnels
La raison est simple# 9n coo!ie permet de stoc!er de La raison est simple# 9n coo!ie permet de stoc!er de
manire permanente des informations sur le poste du manire permanente des informations sur le poste du
$isiteur( +ui pourront 0tre rcupres lors des futures $isiteur( +ui pourront 0tre rcupres lors des futures
$isites $isites
2o'ons +uel+ues unes des principales informations 2o'ons +uel+ues unes des principales informations
stoc!es dans les coo!ies stoc!es dans les coo!ies
Le nombre de $isites( la date de la dernire $isite( Le nombre de $isites( la date de la dernire $isite(
9n identifiant et un mot de passe pour une reconnaissance 9n identifiant et un mot de passe pour une reconnaissance
automati+ue du $isiteur# automati+ue du $isiteur#
9ne liste de motsCcls utiliss dans les moteurs de 9ne liste de motsCcls utiliss dans les moteurs de
recherche pour cibler les publicits afficher 36xemple 5 recherche pour cibler les publicits afficher 36xemple 5
beaucoup de moteurs de recherche4 beaucoup de moteurs de recherche4
9ne liste de paramtres de prfrences de na$igation pour 9ne liste de paramtres de prfrences de na$igation pour
personnaliser la page prsente 36xemple 5 &on ]ahoo ;4 personnaliser la page prsente 36xemple 5 &on ]ahoo ;4
>es informations transfrer d)une page l)autre du site# >es informations transfrer d)une page l)autre du site#
Intro JS Intro JS
Annexes Annexes


2III#1 *omment stoc!er
les informations V
les informations V
Le t'pe d)informations stoc!er

Le t'pe d)informations stoc!er
n)a aucune influence sur le code
n)a aucune influence sur le code
9n coo!ie est un fichier de texte

9n coo!ie est un fichier de texte
+ui contient une chane de
+ui contient une chane de
caractres reprsentant les
caractres reprsentant les
informations
informations
Intro JS Intro JS
Annexes Annexes


les informations V
les informations V
function SetCookie (name, value)
{
// rcuprer les paramtres
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(argc > 2) ? argv[2] : null; // date d'expir.
var path=(argc > 3) ? argv[3] : null; // le chemin
var domain=(argc > 4) ? argv[4] : null; // domain name
var secure=(argc > 5) ? argv[5] : false; // protection du cookies
document.cookie=name+"="+escape(value)+
((expires==null) ? "" : ("&expires="+expires.toGMTString()))+
((path==null) ? "" : ("&path="+path))+
((domain==null) ? "" : ("&domain="+domain))+
((secure==true) ? "&secure" : "");
}
Intro JS Intro JS
Annexes Annexes


les informations V
les informations V
var :DHat!name=locationpat!name;
var :DDomain=:DHat!namesuAstring#43pat!namelastIndeEJf#0/0&& 50/0;
var date@eEp = ne- Date#&;
date@eEpsetFime#date@eEpgetFime#&5#"K5*2B*"K44*1444&&;
// Ici on dfinit une dure de vie de "K5 ,ours
/etCoo9ie#(prenom(3(Grt!ur(3date@eEp3:DHatname3:DDomain&;
JavaScript et
JavaScript et
le! PopCp
le! PopCp
*hapitre I^
*hapitre I^
Intro JS Intro JS
Annexes Annexes


"a valeur stoc3er est associe un nom de coo3ie2 "a date d'expiration permet de dfinir la
longvit du coo3ie2 *i elle est omise4 le coo3ie est dtruit la fermeture du navigateur2 "e path
indiIue simplement d'o[ vient le coo3ie2 "e nom de domaine permet d'identifier le coo3ie parmi
tous ceux stoc3s sur la machine2 "a varia#le secure indiIue si l'acc(s au coo3ie est protg2
onc pour stoc3er la valeur Arthur dans la varia#le prenom il suffit d'appeler la fonction comme
ceci 7
Intro JS Intro JS
Annexes Annexes


Q4E C'mme(% RECUPERER le. $(:'#m%$'(. 8
$oyons un coo3ie Iui contiendrait les informations suivantes 7
\ prenom 8 Arthur
\ n#Lvisite 8 <
-our rcuprer l'information prenom4 il faut extraire4 de la cha'ne de caract(res composant le coo3ie4 le nom de la
varia#le soit prenom2 "a valeur de prenom est la chaine de caract(res situe immdiatement apr(s et spare par 'C' et par ' '2
$oici le code des fonctions ncessaires la rcupration d'une information 7
function getCookieVal(offset)
var endstr!document"cookie"index#f ($%$, offset)%

if (endstr!!&') endstr!document"cookie"length%
return unescape(document"cookie"substring(offset, endstr))%
(
Intro JS Intro JS
Annexes Annexes


function )etCookie (name)
var arg!name*$!$%
var alen!arg"length%
var clen!document"cookie"length%
var i!+%
,hile (i-clen)
var .!i*alen%
if (document"cookie"substring(i, .)!!arg)
return getCookieVal (.)%
i!document"cookie"index#f($ $,i)*'%
if (i!!+) break%(
return null%
(
*i la varia#le demande n'est pas contenue dans le coo3ie4 elle est considre comme valant null2 -our
rcuprer la varia#le prenom4 il suffit d'appeler la fonction 7
leLprenom8&et%oo3ie(AprenomA)C
Intro JS Intro JS
Annexes Annexes


1H41 C7e.% -*'$ *(e p'p*p 8
"e mot popup peut :tre traduit par fen:tre surgissante2 "'ouverture de cette fen:tre est dclenche
par un vnement utilisateur (clic4 ouverture de site4 minuterie4 222) via une seule ligne de code
+avascript2 0n popup est ouvert grKce la mthode (ou fonction) appele sur l'o#+et BindoB2
%ette fonction attend < param(tres 7 BindoB2open( page E4nomF E4optionsF )
1H Le. POPUP
"es trois param(tres sont des cha'nes de caract(res2
G page contient l'adresse de la page afficher2
G nom contient le nom du popup Iui va :tre ouvert2 Non o#ligatoire2
G options est une cha'ne de caract(res contenant les options de paramtrage du popup2 Non
o#ligatoire2
"es ; derniers param(tres ne sont pas indispensa#les2
Intro JS Intro JS
Annexes Annexes


-our ouvrir un popup sur un lien4 voici la syntaxe QTM" 7
PA href8A+avascript7popup('popup2html')AR,uverture popup #asiIuePSAR
avec comme dclaration la fonction popup() /
P*%!.-T language8A+avascriptAR
function popup(page) M BindoB2open(page)C N
PS*%!.-TR
1H4J Le. 'p%$'(. 37::$"0De
.l est possi#le grKce au second param(tre d'affecter un nom au popup ouvert2 Ainsi les autres popups
seront ouverts dans le m:me popup2 %ela vite d'envahir l'cran du visiteur avec de multiples fen:tres2
-our remettre le popup en premier plan4 voir la page AAller plus loinA2 *ans le param(tre nom4 un nouveau
popup est ouvert chaIue fois2
"e dernier param(tre contient une cha'ne d'options d'affichage2 %haIue option est spare par une
virgule ( ne pas confondre avec la syntaxe des feuilles de style Iui demande un pointGvirgule)2
Intro JS Intro JS
Annexes Annexes


$oici la liste des options 7
P#'p#$>%>. E::e%. Nle*#. p'..$&le.
directories Affichage de la #arre de liens yes ] no
menu#ar Affichage de la #arre de menu yes ] no
status Affichage de la #arre de statut yes ] no
location Affichage de la /one d'adresse yes ] no
scroll#ars Affichage des #arres de scrolling yes ] no ] auto
resi/a#le Autorise le redimensionnement du popup yes ] no
height Qauteur en pixels nom#re entier
Bidth "argeur en pixels nom#re entier
left -osition hori/ontale en pixels sur l'cran nom#re entier
top -osition verticale en pixels sur l'cran nom#re entier
fullscreen -opup en plein cran (version > et Z) yes ] no
Intro JS Intro JS
Annexes Annexes


R*el-*e. exemple. 3e "'m&$($.'(. 37'p%$'(. B
"osition fixe en haut # $auche
,uvrir-opup('popup2html'4''4'top8694left869')
"opup minimaliste
Aucune #arre de menu4 non redimensionna#le4 taille fixe
,uvrir-opup('popup2html'4 ''4 'resi/a#le8no4 location8no4 Bidth8;994 height86994 menu#ar8no4 status8no4 scroll#ars8no4
menu#ar8no')

"opup fullscreen
-age en plein ecran (version > et Z)2 Taire un A"T T= pour s'en sortir
,uvrir-opup('popup2html'4''4'fullscreen8yes')

%oici la fonction javascript &ui ouvre un popup pour tous ces exemples :
P*%!.-T language8+avascriptR
function ,uvrir-opup(page4nom4option) M BindoB2open(page4nom4option)C N
PS*%!.-TR

Intro JS Intro JS
Annexes Annexes


1H4E U%$l$.%$'( 3e. p'p*p.
P'p*p P l7'*!e#%*#e/?e#me%*#e 37*(e pDe
-our ouvrir un popup l'ouverture d'une page4 a+oute/ dans la #alise PV,^R l'vnement 7
PV,^ on"oad8A,uvrir-opup('page2html'4'nom'4'options222')AR
e la m:me mani(re4 pour ouvrir un popup la fermeture de la page4 remplacer l'vnement onload
par onunload2
C#>e# *( p'p*p %'*% e( )!."#$p%
.l est possi#le de crer un popup sans utiliser une page prGexistante mais simplement en la gnrant
depuis la page appelante4 via du +avascript2

Intro JS Intro JS
Annexes Annexes


?e#me# *(e p'p*p
.l peut :tre utile de pouvoir fermer une popup depuis la page Iui l'a gnr2 -our cela4 il est ncessaire
de conserver dans une varia#le glo#ale le resultat de l'ouverture du popup par BindoB2open2
"e code +avascript est ici 7
P*%!.-T language8A+avascriptAR
var BC
function ,uvrir() M B8BindoB2open(Apopup2htmlA4Apop6A4ABidth8;994height8;99A)C N
function Termer() M if (B2document) M B2close()C N N
PS*%!.-TR
"a premi(re ligne var B dclare la varia#le glo#ale2 ans la fonction ,uvrir4 B reXoit le rsultat de
BindoB2open2 ans la fonction Termer4 on teste si B est #ien un o#+et de type BindoBC si oui4 on
ferme le popup avec la mthode close()2
Intro JS Intro JS
Annexes Annexes


P'p*p. m*l%$ple. @(% le mSme ('m
$ous ave/ peut :tre remarIu Iu'une popup Iui s'ouvre dans un popup de m:me nom d+ ouvert
reste cach2 $oici la solution pour replacer la popup en premier plan2
$oici le code source 7
function ,uvrir$isi#le() M
var B8BindoB2open(Apopup2htmlA4Apop6A4ABidth8;994height8;99A)C
B2document2close()C
B2focus()C
N
"e principe est donc de rendre le focus la fen:tre apr(s son ouverture2
Intro JS Intro JS
Annexes Annexes


Ce(%#e# *(e p'p*p
$oici comment centrer un popup 7
+avascript7-opup%entrer('popup2html'4<9946>94'menu#ar8no4status8no')
P'p*p %'*)'*#. !$.$&le
-our forcer le popup a rester tou+ours visi#le4 il suffit d'a+outer ce code dans la #alise PV,^R de la page
du popup 7 on#lur8ABindoB2focus()A
"a seule solution pour s'en d#arrasser est de le fermer compl(tement2
+avascript7,uvrir-opup('popup;2html'4''4'Bidth8;994height8;994menu#ar8no4status8no')
Intro JS Intro JS
Annexes Annexes


C'mm*($-*e# !e" l :e(S%#e ppel(%e
epuis une popup il est possi#le d'atteindre l'o#+et BindoB de la fen:tre appelante grKce BindoB2opener2
,n peut ainsi modifier le contenu de la fen:tre appelante ou rcuprer des informations de la popup pour les
replacer dans un formulaire de la fen:tre appelante2
%et exemple permet de placer dans le champ choix du formulaire origine 7
,uvrir-opup('popchoix2html'4'popupchoix'4'Bidth8<994height86>94menu#ar8no4status8no')

0vec dans la page popchoix /
function !eporter(l) M
var choix8l2optionsEl2options2selected.ndexF2valueC
BindoB2opener2document2formsEAorigineAF2elementsEAchoixAF2value8choixC
N
P*)")%T name8AlisteA on%hange8A!eporter(this)AR

Javascript

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

Javascript

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Programmation

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

JS et les maths JS et les maths

Trucs et astuces des Trucs et astuces des

Les tableaux Les tableaux

Le modle objet JS Le modle objet JS

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

Le langage obet JS Le langage obet JS

JS et les maths JS et les maths

JS et les coo!ies JS et les coo!ies

JS et les popup JS et les popup

"rucs et astuces des formulaires "rucs et astuces des formulaires

Les tableaux Les tableaux

Le modle obet JS Le modle obet JS

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

JS et les maths JS et les maths

Trucs et astuces des Trucs et astuces des

Les tableaux Les tableaux

Le modle objet JS Le modle objet JS

Ja$aScript est un langage de

Le d$eloppeur Internet code ses

Le $isiteur( par l)intermdiaire de son

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

JS et les maths JS et les maths

Trucs et astuces des Trucs et astuces des

Les tableaux Les tableaux

Le modle objet JS Le modle objet JS

*)est le na$igateur +ui interprte le

Ja$aScript est un langage

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

JS et les maths JS et les maths

Trucs et astuces des Trucs et astuces des

Les tableaux Les tableaux

Le modle objet JS Le modle objet JS

passage de souris passage de souris

saisie cla$ier### saisie cla$ier###

Structure dun script Structure dun script

Les chanes de caractres Les chanes de caractres

Les formulaires Les formulaires

Accder aux lments Accder aux lments

JS et les maths JS et les maths

Trucs et astuces des Trucs et astuces des

Les tableaux Les tableaux

Le modle objet JS Le modle objet JS

Il ' a plusieurs endroits dans

dans le corps de la page(

dans un $nement d)un obet de