Vous êtes sur la page 1sur 160

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

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

Annexes Annexes

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

Les tableaux Les tableaux

Le modle obet JS Le modle obet JS

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


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

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


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

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


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

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


I#- %"&L et Ja$aScript
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

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


I#- %"&L et Ja$aScript
I#- %"&L et Ja$aScript
<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

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


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

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


I#1 2ariables 5 6xemple
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

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


I#1 2ariables 5 6xemple
I#1 2ariables 5 6xemple

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

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


<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>
I#1 2ariables 5 6xemple
I#1 2ariables 5 6xemple

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


<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>
I#1 2ariables 5 6xemple
I#1 2ariables 5 6xemple

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


<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

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


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

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


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

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


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

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


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

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


I#A Bonctions 5 6xemple
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

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


I#A Bonctions 5 6xemple
I#A Bonctions 5 6xemple
<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

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


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

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


II#- Dcrire un commentaire
II#- Dcrire un commentaire

Indispensable les commentaires


Indispensable les commentaires
en programmation#
en programmation#

Pour mettre en commentaire


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

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


II#- Dcrire un commentaire
II#- Dcrire un commentaire

Pour mettre en commentaire


Pour mettre en commentaire
plusieurs lignes de code
plusieurs lignes de code
/* Ceci est en commentaire
Ligne 1
Ligne 2
Dernire ligne */

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


II#1 Erouper les instructions
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

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


II#1 Erouper les instructions
II#1 Erouper les instructions

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

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


II#: "est *onditionnel
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

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


II#: "est *onditionnel
II#: "est *onditionnel

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

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


II#: "est *onditionnel
II#: "est *onditionnel

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

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


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

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


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

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


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

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


II#G Houcle
II#G Houcle
for
for
5 6xemples
5 6xemples

Baire une boucle pour i $ariant


Baire une boucle pour i $ariant
de I -II inclus par pas de -
de I -II inclus par pas de -

Baire une boucle pour i $ariant


Baire une boucle pour i $ariant
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

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


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

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


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

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


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

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


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

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


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

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


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

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



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

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



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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

A la fin de ce script(
A la fin de ce script(
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

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


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

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


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

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


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

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


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

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

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


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

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


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

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


(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

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


:'"*. 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

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


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

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


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

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


I2#1#: Les RadioCHoutons
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

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


I2#1#: Les RadioCHoutons
I2#1#: Les RadioCHoutons

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

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


I2#1#G les *ases *ocher
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

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


I2#1#G les *ases *ocher
I2#1#G les *ases *ocher

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

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


I2#1#G les *ases *ocher
I2#1#G les *ases *ocher

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

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


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

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


I2#1#M La $aleur cache
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

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


I2#1#M La $aleur cache
I2#1#M La $aleur cache

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

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


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

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


I2#: Les menus de slection
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 >
<option value="2">ligne 2</option >
<option value="3">ligne 3</option >
<option value="4">ligne 4</option >
</select>

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


I2#: Les menus de slection
I2#: Les menus de slection

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

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


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

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


(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
'(?'"*. tecte la prise de focus
'(Bl*# tecte la perte de focus

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



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

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


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 prise de focus
'(?'"*. tecte la perte de focus

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


2#A Intgrer du Ja$aScript
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

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


2#A Intgrer du Ja$aScript
2#A Intgrer du Ja$aScript
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

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


2#A Intgrer du Ja$aScript
2#A Intgrer du Ja$aScript
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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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
2II#: L)obet &ath et
ses mthodes
ses mthodes

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


2II#: L)obet &ath et
2II#: L)obet &ath et
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

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


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

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



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

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


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

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


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

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


A#G Autoriser un seul clic
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

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


A#G Autoriser un seul clic
A#G Autoriser un seul clic
<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

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


A#A 2alider un formulaire
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

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


A#A 2alider un formulaire
A#A 2alider un formulaire

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


I#G "ableaux 5 6xemple
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

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


I#G "ableaux 5 6xemple
I#G "ableaux 5 6xemple
<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

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


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

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


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

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


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

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


<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

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


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

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


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

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


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

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


,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

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


.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

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


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

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


:*("%$'( #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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


2I#1 >claration 5 6xemple
2I#1 >claration 5 6xemple

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

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


<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>
2I#1 >claration 5 6xemple
2I#1 >claration 5 6xemple

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


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

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


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

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


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

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


2III#1 *omment stoc!er
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

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


2III#1 *omment stoc!er
2III#1 *omment stoc!er
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

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


2III#1 *omment stoc!er
2III#1 *omment stoc!er
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

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


"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

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


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

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


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

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


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

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


-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

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


$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

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


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

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


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

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


?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

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


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

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


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

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


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