Cours JavaScript

Cour
sJav
aScr
ipt
LogoCour
s-Gr
atui
t
Cour
sgr at
uit
s»Coursinf
ormat
ique»Cour
sdév
eloppementweb»Cour
sJAVASCRI
PT»Cour
s
CompletdeJavaScr
ipt
Cour
sCompl
etdeJav
aScr
ipt
For
mat
ionCompl
etJav
aScr
ipt
Cour
sdeJav
aScr
iptcompl
et
I
ntr
oduct
ionàJav
ascr
iptcour
s
Cour
sCompl
etdeJav
aScr
ipt
LeJav
aScr
iptcour
s
LeJav
aScr
iptcour
scompl
et
Cour
sJav
aScr
iptCompl
et:
evenement
,met
hodesetoper
ateur
s
Suppor
tdef
ormat
ioncompl
etdul
angageJav
aScr
ipt
Exer
ciceHTML:
For
mul
air
eHt
mlav
ecFonct
ionJav
ascr
ipt
Exer
cicecompt
abi
l
ité:
mét
hodescoûtcompl
et,
sect
ionshomogènes
Exer
ciceHTML:
Choi
xd'
I
mage
Of
fred'
empl
oi:
Webdesi
gnerenFr
eel
ance
Cour
spar
ti
cul
i
ers:
unenouv
ell
eécol
einf
ormel
l
e?
Commentcr
éeretconv
ert
irv
osv
idéospourv
oscour
senl
i
gne?
Quest
ionsdecour
sar
chi
tecect
uredesr
éseauxi
nfor
mat
iques
Exer
ciceanal
ysedest
ramesTCPetUDP
Cour
sCompl
etdeJav
aScr
ipt
3.
8ét
oil
essur5apar
ti
rde51v
otes.
Vot
ezcedocument
:☆☆☆☆☆
JAVASCRI
PT-COURS
I
vanKURZWEG
Febr
uar
y15,
2011
JAVASCRI
PT-COURSbyI
vanKURZWEG
i
i
Cont
ent
s
Li
stofFi
gur
es
2 Lemodèl
eobj
etdunav
igat
eur
2.
1 Hi
érar
chi
edesobj
etsdunav
igat
eur ...............................
11
Li
stofTabl
es
1 Lel
angageJav
ascr
ipt
1.
1 Opér
ateur
sar
it
hmét
iques .....................................7
1.
2 Opér
ateur
sdecompar
aison.................................... 7
1.
3 Opér
ateur
slogi
ques........................................ 7
2 Lemodèl
eobj
etdunav
igat
eur
2.
1 Li
stesdespr
inci
pauxév
ènement
s.................................13
Chapt
er1
Celangage,initi
alementcr ééparl
asoci ét
éNet scape,permetderendr
eunepageHTMLbi en
pl
usinteracti
v e,
enyi nsérantducoder éagi
ssant ,parexempl
e,auxévènement sdel’ut
il
isateur,
ouencor eàv ali
derlesdonnéessaisiesdansunf ormulair
eHTML.Danscepr emierchapitr
e,
nousallonsnousi ntéresseràlasyntaxedul angage,maisaussiàsonorganisati
on,enrelation
aveccequev ousav ezv uencoursd’algor
ithmique.Nousv er
ronsensui
telesdiff
érentsobjet s
dunavigateurs,etlesmani èresdelesprogrammer .
Laparti
cul
ari
tédul
angageJav
ascriptparrapportàd’
aut
reslangagedeprogrammat i
on(tel
s
queJavaouC++),estsaf
acul
téd’i
ntégrati
ondansunepageHTML.Ai nsi
,l
ecodeécr i
tdans
unepageHTMLestdi r
ect
ementint
erprétéparlenavi
gat
eur,
qui exécutel
esinst
ruct
ions
Javascr
ipt
.
Un"programme"Javascr
iptestcomposéd’
uneséri
ed’i
ntruct
ionsquel
enavi
gat
eurvaexécut
er
séquenti
ell
ement
,c’
estàdirel’
uneaprèsl
’
autr
e.Chaqueinstr
ucti
onestt
ermi
néparunpoint
vi
rgul
e.
Exampl
e1.
1Hel
l
oWor
ld
Cepremi
erexempl
enousmontr
edeuxi
nst
ruct
ionsenJav
ascr
ipt
,lapr
emi
èreaf
fi
chant"
Hel
l
o",
etl
adeuxi
èmeaffi
chant"
Wor
ld"
.
pr
int
f("
hel
l
o")
;
pr
int
f("
Wor
ld"
);
At
tenti
on,l
elangageestdi
t"casesensi
ti
ve"
,c’
estàdi
requel
elangageestsensi
bleaux
majuscul
esetminuscul
es.
Commenousl ’
avonsdéj
àsoul
igné,lel
angageJavascr
iptaét
écr
éepourêt
reexécut
ésurun
nav
igat
eurI
nternet
.Il
doi
tdoncs’i
ntégr
erdanslecodeHTML.Nousavonsànotr
edisposi
ti
on
unebal
i
seHTMLpar
ti
cul
i
ère:
<scr
iptl
anguage="
jav
ascr
ipt
">.
.
.
.
</
scr
ipt
>
I
lex
ist
etr
oismani
èred’
i
ntégr
erl
ecodeJav
ascr
iptdansl
ecodeHTML:
1.
1.ECRI
TUREDECODEJAVASCRI
PT
Parcetteméthode,l
ecodeestdirect
ementexécut
éauchargementdelapage.Labali
se
<scri
pt></
scr
ipt>estpl
acéentrelesbal
i
ses<body></
body>,etl
enavi
gateurexécut
ele
progr
amme, avantmêmel ’
aff
ichagedelapageHTML.
<ht
ml>
<head>
<t
it
le>.</
ti
tl
e>
</
head>
<body
>
<scr
iptl
anguage="
Jav
aScr
ipt
">pl
aceducodeJav
aScr
ipt</
scr
ipt
>
</
body
>
</
html
>
Cett
efoi
sci,l
ecodeestd’
abordl
uparlenavi
gateur
,etstockéenmémoire.Il
nes’exécut
eraque
surdemande,c’
estàdi
rel
orsd’
unévènementgénéréparl’
int
erv
ent
iondel’ut
il
isat
eur.
Nousr
evi
endr
onspl
ust
ardsurcesév
ènement
setl
amani
èredel
esgér
er.
ht
ml><head>
<t
it
le>.</
ti
tl
e>
<scr
iptl
anguage="
Jav
aScr
ipt
">pl
aceducodeJav
aScr
ipt
</
scr
ipt
>
</
head><body
>pl
aceducodeév
énement
</
body
>
</
html
>
Nousv
err
onsdansl
apar
ti
esui
vant
edececour
squecer
tai
nesbal
i
sesHTMLaccept
entde
réagiràdesévénements,
prov
oquéssoitparl
’
int
erv
enti
ondel’
uti
l
isat
eur
,soi
tparuneacti
ondu
navigateurl
uimême,commel echar
gementdelapageHTML(événementonLoad)oul
a
fermeturedelapageHTMLencour s(év
énementonUnl
oad)
.
Danscecas,lecodeJav
aScri
ptpeutêt
reaussi
insér
édi
rect
ementauni
veaudel
abal
i
seen
quest
ion.Lesquel
ett
edelapageHTMLestalors:
<ht
ml>
<head>
<t
it
le>.</
ti
tl
e>
<scr
iptl
anguage="
Jav
aScr
ipt
">
(
cetempl
acementpeutêtr
evi
de,l
ecodeestdansl
abali
se.Maisilest?
indi
spensabl
e,cari
l
i
ndi
queaunavi
gateurqu’
i
lvadev
oiri
nter
prét
erducodeJavaScr
ipt
.)
</
scr
ipt
>
</
head>
<body
>
<bal
i
seht
mlév
énement
=jav
ascr
ipt
:pl
aceducodeév
énement
?
-
1.
1.ECRI
TUREDECODEJAVASCRI
PT
</
body
>
</
html
>
Pourl’
ensembl edesexerci
cesdececour
s, nousut il
iseronscommeét it
eurdecodeHTMLet
Javascr
iptXEmacs, etcommenav i
gat
eurInternet,unev ersi
onrécent
edeNet scapeouMozil
la.
Commev udansl ecoursHTML,nousécr
ir
onsdi r
ectementnospagesHTMLdansXEmacs, et
nouslesouv r
ir
onsparlacommandedeNet scape" Fi
chiers->ouvri
runfichi
er"
.Volont
air
ements,
nousépureronsaumaxi mum lecodeHTML, demani èreànousconcent r
ersurlecode
Javascr
ipt.
SousXEmacs, écr
irel
ecodesuivant
,etenr
egist
rerl
apagesouslenom "Exerci
ce1.3.
1,dansl
e
répert
oir
eJavascri
pt/
Exerci
ces/
.Vousouvri
rezensui
tel
apagesousNet scape,enobserv
ant
soigneusementl
’i
nter
prét
ati
onducodeetlecompor t
ementdunavi
gateur.
<ht
ml>
<head>
<t
it
le>Exer
cicej
avascr
ipt1.
3.1</
ti
tl
e>
<met
aht
tp-
equi
v="
Cont
ent
-Ty
pe"cont
ent
="t
ext
/ht
ml;
char
set
=iso-
8859-
1"></
head>
<bodybgcol
or="
#FFFFFF"t
ext
="#000000"><scr
iptl
anguage="j
avascr
ipt
">al
ert
("
Lemessage
d’
aler
tes’
affi
cheav
antmêmel econtenudelapage.
\nCli
quezsurOKpourquelapage
s’
affi
che"
);
</
scr
ipt
>
<h1>Ex
erci
ce1.
3.1:
Codej
avascr
iptaex&eacut
e;cut
iondi
rect
e</
h1>
Lescr
iptJav
ascr
ipta&eacut
e;t
&eacut
e;ex&eacut
e;cut
&eacut
e;av
antl
’?af
fi
chage
del
apage.
</
body
>
?
-
Nousvoyonsici
unesecondei
nstr
ucti
onsJavascr
ipt,
l’
instr
uct
ionaler
t,quiper
metd’ouvri
rune
boi
tededial
oguesurunnavi
gat
eur.Nousaur
onsl’occasionderev
enirsurcett
einst
ruct
ions.
Aret
enir:quandlecodeJav
ascr
iptestpl
acéj
ust
eapr
èsl
abal
i
se<body
>,i
lestexécut
éav
ant
l
’
affi
chagedel apage.
Sel
onl
emêmepr i
nci
pequedansl
’exer
cicepr
écédent
,écr
ir
eetaf
fi
chél
apagesui
vant
e,
enr
egi
str
éesousl
enom Ex
erci
ce1.3.
2.
<ht
ml>
<head>
<t
it
le>Exer
cicej
avascr
ipt1.
3.2</
ti
tl
e>
<met
aht
tp-
equi
v="
Cont
ent
-Ty
pe"cont
ent
="t
ext
/ht
ml;
char
set
=iso-
8859-
1"></
head>
<bodybgcol
or="
#FFFFFF"t
ext
="#000000"
><scr
iptl
anguage="
jav
ascr
ipt
">f
unct
ionaf
fi
che(
)
{al
ert
("
Lemessaged’
al
ert
es’
aff
ichesui
teàunév
ènement
.\nCl
i
quezsurOK?
pourpour
sui
vre"
);
</
scr
ipt
>
<h1>Ex
erci
ce1.
3.2:
Codej
avascr
iptaex&eacut
e;cut
iondi
ff
&eacut
e;r
&eacut
e;e</?
h1>
Lescr
iptJav
ascri
ptestex&eacut
e;cut&eacut
e;sui
te&agrav
e;l’
arr
iv&eacut
e;ed’
un
&eacut
e;v
è
nementdanslapage, i
ciquandl’
uti
l
isat
eurcl
iquesur
1.
1.ECRI
TUREDECODEJAVASCRI
PT
l
ebout
onci
-dessous.
<f
orm>
<cent
er>

</
for
m>
</
body
>
</
html
>
?
-
Lecodecontientcettef
oisciunefoncti
onJav ascr
ipt
.Nousr evi
endronssurcepr inci
pede
progr
ammat ion,maisnouspouvonsdéj àremarquerquelesinstr
ucti
onscontenuesdanscet t
e
fonct
ion(l
’
instruct
ional
ertenl’
ocurence)sontexécutélorsdel’
appelàaffi
che(
) .Cetappel
dela
fonct
ionestréali
séquandl’év
ènementoncl i
ckapparaitsurleboutonduformulair
e.
Touj
our
ssurl
emêmepr
inci
pe,
écr
ir
elapageHTMLcont
enantl
ecodesui
vant
<ht
ml>
<head>
<t
it
le>Exer
cicej
avascr
ipt1.
3.3</
ti
tl
e>
<met
aht
tp-
equi
v="
Cont
ent
-Ty
pe"cont
ent
="t
ext
/ht
ml;
char
set
=iso-
8859-
1">
<scr
iptl
anguage="
jav
ascr
ipt
">
</
scr
ipt
>
</
head>
<bodybgcol
or="
#FFFFFF"t
ext
="#000000"
>
<h1>Ex
erci
ce1.
3.3:
Codej
avascr
ipti
ns&eacut
e;r
&eacut
e;dansunebal
i
seHTML</?
h1>
Lescr
iptJav
ascri
ptestex&eacut
e;cut&eacut
e;sui
te&agrav
e;l’
arr
iv&eacut
e;ed’
un
&eacut
e;v
è
nementdanslapage, i
ciquandl’
uti
l
isat
eurcl
iquesurleboutonci
-dessous.
<f
orm>
<cent
er>
<i
nputt
ype="
but
ton"name="
evenement
"val
ue="
Cli
quezi
cipourgénér
erun?
évènement
"
oncl
i
ck="
j
avascr
ipt
:al
ert
(’
Ceestaf
fi
chésui
teàunév
ènement
.\nCl
i
quezsurOKpour?
pour
sui
vre’
);
"
</
cent
er>
</
for
m>
</
body
>
</
html
>
Cettefoi
s-ci
,l’
instr
uct i
onalert
()estdi
rectementinsér
éedansl ecodeHTML, auniveaude
l
’att
ri
butonclickdel abalisebutt
on.Ilestbi
ensûrpossibledecumul erpl
usieursinstr
ucti
ons
Javascri
ptàlasui t
e, enlesséparantpardespoints-vi
rgules.Lesbali
ses(aucont enuvi
de)
<scri
pt></
script>placéesenent êtedelapageper mett
entdepr éci
seraunév i
gateurqu’i
laur
a
ducodeài nterprét
er.
Aretenir:dansl
ecasd’ unei
nserti
ondecodeàl ’i
ntéri
eurd’
unebaliseHTML, onpl aceles
i
nstructi
onsprécédéesdumot -
clefjavascr
ipt
:di
rectementdanslabali
se,sépar éesdepoints-
vi
rgules.I
lestnécessai
redepréciseraunav i
gat
eurqu’i
lyauraducodeài nterpréterdansla
page,enplaçantenentêtededocumentl esbali
ses<scri
ptlanguage=jav
ascr ipt></scr
ipt
>.
Cependant,cet
teméthodetr
ouvesesli
mit
esdansl
aréut
il
isat
ionetl
amai nt
enancedes
fonct
ions.Eneffet
,si
vousuti
li
sezsouv
entunemêmeséri
ed’int
ruct
ionsJavascr
iptdans
plusi
eurspagesHTML, et
quevoussouhai
tezl
esmodi
fi
er,vousdev
rezr
epr
endr
euneparunel
’
ensembl
edespagesce
quipeutr
api
dementdev
eni
rfast
idieux
.
Unesol
uti
onàcespr obl
èmesestdeplacerdesfonct
ionsJavascr
iptdansunmodul
eext
erne.
Cefi
chi
ercont
iendr
al ecodesour
ce,
etl’
inser
ti
ondansl apageHTMLdev iendr
a:
<scr
iptsr
c="
URLdumodul
eext
erne"
>..
.
.
</
scr
ipt
>
Cesbali
sesi
ndi
quentaunavigateurnonpl
uslanatur
educodequ’ il
doitut
il
iser
,mai
s
l
’empl
acementauqueli
ltr
ouveracecode.Ainsi
,enmodi
fiantlecontenudumoduleext
erne,
on
modif
ier
alecomportementdel’
ensembledespagesquis’yréfèr
ent.
Lemoduleexternedoi
têtr
eécritauformattext
esimple,etpor
tantl
’ext
ension.
txt
.Il
doitêt
re
placéàsonadressed’
appel.I
lconti
entlecodesourceJavascr
ipt
,général
ementécri
tsous
formedefoncti
ons.
Travai
làfai
re:créerunmodul eexter
nenommé, etl
epl
acerdansleréper
toi
re
/j
avascri
pt/
exerci
ces/modules/.Yinsér
erlecodededeuxfonct
ions,
simil
air
esàl
afonct
ion
af
f i
che(
)vuedansl esexer
cicesprécédent
s:
•af
fi
che1(
):ouv
r euneboit
ededialogueaf
fi
chant"Execut
iondel
afonct
ion1"af
fi
che2(
):ouv
re
uneboi
tededi
alogueaff
ichant"
Executi
ondelafoncti
on2"
Nousdisposonsdoncdésormaisdesfonct
ionsaff
iche1()etaf
fi
che2()
,dontl
escodesont
décr
it
sdansl emoduleext
ernes.Noussouhait
onsutil
isercesf
oncti
onsdansunepageHTML.
Trav
ailàfai
re:sel
onlemodèlev
udansleparagraphe1.
3.2,
écr
ir
elapageHTMLexerci
ce-1.
4.
2.
html,cont
enantdeuxbout
ons,
exécut
antchacununedesdeuxfonct
ionsaf
fi
che(
)cont
enues
danslemoduleexter
ne.
<scr
iptsr
c="
URLdumodul
eext
erne"
>
</
scr
ipt
>
"
URLdumodul eexter
ne"conti
endralecheminrel
ati
fdumodul eexterneparr
apportàlapage
HTML,àsavoiri
ci:
.Parcettecommande, lenavi
gat
eurchargeraenmémoi relecont
enudu
modul
eexterne,
etpourr
aexécuterlesfoncti
onsquiysontcontenues.
NousavonsvudanslesparagraphesprécédentsquelquesaperçusdulangageJavascri
pt,
commel esf
oncti
ons,lesi
nstr
ucti
onsoul esblocs.Danscettepart
ieducours,nousall
onsnous
i
ntér
esserpl
uspréci
sémentàl asyntaxegénéral
edul angage,etàquel
quesunesdeses
i
nstr
ucti
onsetfonct
ionscl
efs.
Uneinst
ruct
ionsJavascr
iptpeutêt
revuecommeunordr
epasséàl
’
int
erpr
éteurdunav
igat
eur
.
Chaqueinst
ruct
ionseter
mi neparunpoint
-vr
igul
e.
Unblocd’ i
nst
ructi
onsestunesér ied’i
nstruct
ionsexécutéesséquenti
ell
ement,
etencadr
épar
desaccolades.Lesblocsd’instr
ucti
onsper mettentdedéfini
rparexemplel
esacti
ons
eff
ectuéesparunef oncti
on, ouencorelaséri
ed’ i
nstr
uct
ionsrépétéesdansunestr
uctur
e
i
térat
ive,commev ousl’avezv uenalgori
thmique.
Vousavezv
uenalgor
it
hmiquel
anoti
ondev ari
abl
es,él
émentsindi
spensabl
esàl
a
pr
ogrammati
on,
permett
antdet
rav
ail
lersurdesdonnéesi
nfor
mat i
ques.
1.
2.STRUCTUREDULANGAGE
Tout
ev ar
iabl
eut
il
iséedansunpr
ogr
ammej
avascr
iptdoi
tobl
i
gat
oir
ementêt
redécl
arée,
par
l
’i
nst
ructi
onssui
vante:
v
armon_
nom_
de_
var
iabl
e;
Concernantlesnomsdev ar
iables,i
ln’
yapasdel i
mitati
onspar
ti
cul
ièr
e,sicen’estdenepas
uti
li
serundesmot sréser
vésdul angage.I
lestégal
ementànoterquelelangageétantcase
sensit
ive,
lesmajuscul
esetmi nuscul
esontleuri
mpor t
ance.
Unefoi
slavar
iabl
edécl
arée,
ilestal
orspossi
bledel
uiaf
fect
erunev
aleur
,gr
âceàl
’
opér
ateur
d’
aff
ect
ati
on:
mon_
nom_
de_
var
iabl
e=ma_
val
eur
v
armon_
age;
mon_
age=30;
Uneautr
esoluti
onpourty
perlesv
ari
abl
esdi
rect
ementl
orsdel
eurdécl
arat
ionestdel
eur
af
fect
erdir
ectementuneval
eur:
v
armon_
age=30,
mon_
prenom ="
ivan"
,femi
nin=f
alse;
L’
i
nst
ruct
ionpr
écédent
enousper
metdepasserenr
evuel
est
roi
sty
pesdev
ari
abl
espr
inci
paux:
numér
ique(
Number
),chai
nedecar
act
ère(
Str
ing)etbool
een(
Bool
ean):
• Number:
accept
etoutnombr
e(ycompr
isàv
irgul
e)
• St
ri
ng:
accept
etout
echai
nedecar
act
ère,
sansl
i
mit
ati
ondel
ongeur
• Booel
an:
prendl
esv
aleurTr
ue(
vrai
)ouf
alse(
faux)
Unef
oisl
avar
iabl
edécl
arée,
ell
eestdi
rect
ementut
il
isabl
edansl
ebl
ocd’
i
nst
ruct
ionsqui
la
conti
ent
,etdanst ousceuxquiluisontinfér
ieur
s.Ai
nsi
,unev ar
iabl
edéclaréejust eaprèsla
bal
ise<scri
pt>serauti
li
sabl
edanst outlepr ogr
amme,ycompr isdanslesfonctionsqui l
e
compose.Parcont r
e,unevar
iabledéclaréedansunefonct
ionneser apasaccessi bledepui
s
uneautr
ef onct
ion.Nousrevi
endronssurcetaspectimportantdelaportéedesv ariabl
esdans
l
eparagrapheconsacréauxfonctions.
Lesopér
ateur
sar
it
hmét
iquess’
appl
i
quentsuruneoudeuxopér
andesdet
ypesNumber
.
Lesopér
ateurd’
i
ncr
ément
ati
onetdedécr
ément
ati
oncor
respondantauxi
nst
ruct
ionssui
vant
es:
i
++équi
vautài
=i+1i
--équi
vautài
=i-
1
Lesopér
ateur
sdecomparai
sons’appl
i
quentàdif
fér
ent
sty
pesdedonnées,
etr
env
oientun
bool
éenenfonct
iondur
ésul
tatdelacomparai
son.
Tabl
e1.
1Opér
ateur
sar
it
hmét
iques
Opér
ati
on
Si
gne
Addi
ti
on
Soust
ract
ion
-
Mul
ti
pli
cat
ion
Di
vi
sion
Modul
o
Negat
ion
I
ncr
ément
++
Décr
ément
-
-
Tabl
e1.
2Opér
ateur
sdecompar
aison
Egal
i
té
==
Di
ff
érence
!
=
I
nfér
ieur
,supér
ieur
<;
>
I
nfér
ieurouégal
,supér
ieurouégal
<=;
>=
Vousavezvuenal gor
it
hmiquelesstr
uctur
escondit
ionnell
es.Lat
raduct
iondel
’
inst
ruct
ion
al
gori
thmiquesi
..alor
ssinonf
insisetr
aduitenJav
ascriptpar:
i
f(condi
ti
on)
{l
i
sted’
i
nst
ruct
ions;
}el
se
{l
i
sted’
i
nst
ruct
ions;
La"condi
ti
on"doitêt
reuneexpressi
onbooléenneév
aluabl
e.Siell
eestVRAI,al
orsl
apremi
ère
séri
ed’i
nst
ruct
ionsestexécut
ée,siel
leestFAUSSE,al
orsc’
estlasecondeséri
equiest
exécut
ée.
Lesstruct
uresi
tér
ati
vesour
épét
it
ivesper
met
tentd’
exécut
erpl
usi
eur
sfoi
sunbl
oc
d’
inst
ructi
ons.
Laboucl
eForestàr
approcherdel
’i
nstr
ucti
onpourv
uenalgori
thmi
que.El
l
eper
metder
épét
er
unnombredefoi
sdéfi
nil
eblocd’i
nstr
ucti
onssi
tuéj
ust
eaprès:
f
or(
ini
ti
ali
sat
ion;
test
;i
ncr
ément
)
{l
i
sted’
i
nst
ruct
ions;
Tabl
e1.
3Opér
ateur
slogi
ques
ET
&&
OU
|
|
NON
1.
2.STRUCTUREDULANGAGE
LaboucleForuti
li
sedoncuncompt eur,i
nit
ial
i
séàunecert
aineval
eur,v
aleurmodifi
éeàchaque
exécuti
ondublocd’i
nst
ructi
ons,j
usqu’auchangementdev
aleurdelacondit
ion.Lecompt
eur
étantunevar
iabl
e,i
lnefautbiensûrpasomet t
redel
adécl
arer.
Exampl
e1.
2Hel
l
oWor
ld"
pui
ssance10"
v
ari
;for(
i=1;
i
<=10;
i
++)
{pr
int
f("
Hel
l
owor
ld"
+i+" ")
;
Cetexemplevadoncécr i
re10foi
slesmot s"hell
owor l
d",
suivideschif
fres1,2,3..j
usqu’à10.
Aupremierpassagedanslaboucle,isevoi
taffectélaval
eur1.Achaquepassagedansl a
boucl
e,l
eprogrammeécr itl
aphrase,eti
ncrémentei de1.Quandi pr
endl avaleur11,la
condi
ti
onnell
eestfausse,etl
eprogrammesaut edirect
ementàl ’i
nst
ructi
onsui vant
e.
Laboucl
eJav ascri
ptwhi
leestàrapprocherdelaboucl
et ant
quevueenalgori
thmique.El
l
e
per
metd’exécuterunbl
ocd’i
nstr
uctionstantqu’
uneexpressi
onbooléenneestvr
aie.
whi
l
e(condi
ti
on)
{l
i
sted’
i
nst
ruct
ions;
}
Unef
onct
ionenJav
ascr
iptdoi
têt
redécl
aréesel
onl
emodèl
esui
vant:
f
unct
ionnom_
fonct
ion(
par
a1,
par
a1,
)
I
nst
ruct
ion;
I
nst
ruct
ion;
r
etur
nresul
tat
;
Functionestunmotr éservédulangageJavascri
pt.Para1,para2,cont
iennentdespar
amètr
es
quivontpouv oirêtr
eutil
isésdanslafonct
ion.Enfi
n, l
emotr éservéret
urnpermetderenv
oyer
unev aleuràl
’instr
ucti
onappelante.Quandcemotn’ estpasprésentdanslecorpsdelaf
oncti
on,
l
af onctionsecompor tealorscommeunepr océdure.
Unappelàunefonct
ionestdoncunordr
edonnéaunavigat
eurpourexécuterdesl
i
gnesde
codespl
acéeshorsdublocdecodeappel
ant
.L’
appelsefai
tdedeuxmani ères:
• soi
tdi
rect
ementendonnantl
enom del
afonct
ionetl
esar
gument
squ’
el
leaccept
equandl
a
f
oncti
onneretour
nepasdeval
eurs
• soi
tenaf
fect
antl
erésul
tatdel
afonct
ionàunev
ari
abl
e.
Cetexempl
eestt
ir
édusi
te
f
uncti
ont
it
re(pol
i
ce,
coul
eur
,t
ail
l
e,t
exte)
{document
.wr
it
e("
<fontcol
or=\
""+coul
eur+"
\"si
ze=\
""
+tai
l
le+"
\"face?=\
""+pol
i
ce+" \
">"+text
e+"</f
ont
>")
;
}ti
tr
e("
ComicSansMS" ,
"red",
4,
"Jem’
éclateàfair
edest
it
resenJavaScr
ipt!
")
;
document
.wri
te(
" ");
titr
e("I
mpact
,Verdana,
sans-
ms"
,"
#FF8040"
,5,
"Bi
ensûr,Jav
aScr
iptneser
t
pasqu’
à?fai
redesti
tres!");
document.
writ
e("
 ")
;ti
tr
e("
Ari
al"
,"
black"
,7,
"Mai
scel
avousmont
rel
esf
onct
ionsetl
es
argument
s!")?;
Lest
ableauxper
met t
entdestockerplusi
eursval
eur
sdansuneseulevar
iabl
e.Ladécl
arat
ion
d’
unevari
abledety
pet abl
eausefaitenutil
i
santl
’i
nst
ruct
ionsui
vant
e:
v
armon_
tabl
eau=newAr
ray
();
ouencor
eenpr
éci
santl
atai
l
ledut
abl
eau
v
armon_
tabl
eau=newAr
ray
(10)
;
ouencor
eenspéci
fi
antl
esv
aleur
sài
nsér
erdansl
etabl
eau:
v
armon_
tabl
eau=newAr
ray
("v
aleur
1",
"val
eur
2",
"val
eur
3",
)
mon_
tabl
eau[
0]
I
lestbi
ensûrpossi
blededonnerpl
usi
eur
sdi
mensi
onsàunt
abl
eau,
commeenal
gor
it
hmi
que:
v
armon_
tabl
eau[
10]
[10]
per
metdedéf
ini
runt
abl
eaudedeuxdi
mensi
ons.
Enf
in,
pourobt
eni
rlal
ongueurd’
unt
abl
eau,
nouspouv
onsut
il
iserl
apr
opr
iét
élengt
h:
mon_
tabl
eau.
lengt
h
Chapt
er2
Nousavonsvudanslesparagraphesprécédent
slasyntaxedulangageJavascri
pt,etquelques
unesdesespri
ncipal
esfonct
ionsetinstr
ucti
ons.Nousallonsmaint
enantaborderlamét hode
deprogr
ammat i
ondunav i
gateurl
ui-
même.Nousal lonsenparti
culi
ernousint
éresseràla
noti
ond’
objet
setd’évènements.
Unobj
etestuneent
it
éappart
enantaumondedesnavi
gat
eursouaul
angagelui
-même.I
lsont
soi
tpr
édéfi
nis,
soi
tcréésdet
outepi
èceparl
eprogr
ammeur.Unobj
etpossèdedespr
opri
étés,
quilecar
act
éri
sent
,etdesmét
hodes,
qui
lui
per
met
tentd’
eff
ect
uerdesact
ions,
etpeuv
ent
réagi
ràdesévènements.
L’
objetqui
nousint
éresseraparti
cul
ièr
ementdanslaprogr ammati
onJavascri
ptestl’
objet
Window,quimodél
iselafenêtredunavi
gat
eur.Lesdif
férentsél
émentsquipeuventcomposer
unepageHTMLsontai nsiorgani
sésdemanièrehiér
archiqueàparti
rdecetobjetWindow.
2.
1.LEMODÈLEOBJETDUNAVI
GATEUR CHAPTER2.LEMODÈLEOBJETDU
NAVIGATEUR
Delafi
gur
eprécédente,onpeutparexempl
edédui
requ’
unf
ormul
air
e(f
orm)peutcont
eni
run
obj
etText
,unobjetButt
on,etc.
.
Quel
quesunsdesobj
etssouv
entmani
pul
és:
• nav
igat
or:
c’estl
elogi
ciel
cli
entdontl
enom estnot
édansnav
igat
or.
appName
• wi
ndow:
l’
obj
etdepl
ushautni
veaucr
ééparl
enav
igat
eur
,c’
estsaf
enêt
re.
•l
ocat
ion:
c’estl
’
obj
etURLdel
afenêt
recour
ant
e.
• hi
stor
y:cesontl
esURLpr
écédemmentv
isi
tées.
• document:i
ls’
agi
tdudocumentcour
ant,dontl
espr
opr
iét
éssont
let
it
re,
lescoul
eur
s(f
ond,
t
exte,
li
en),l
esfor
mulai
res,
lesi
magesetc.
.
Pouraccéderàunobj
etdelapageHTML,nouspouvonsut
ili
serl
’at
tri
butnameoumieuxencor
e,
l
’at
tri
buti
dquenousauronsbienév
idemmentappl
iquésàl
’ensembledenosbali
sesHTML.
Ai
nsi
,l
’accèsàunchampduf
ormul
air
esef
eraparl
’
appel
sui
vant:
wi
ndow.
document
.nom_
du_
fomul
air
e.nom_
du_
champ
Nousvoyonsdansl’i
nst
ruct
ionpr
écédent
equ’
il
estcependantnécessairedebienspéci
fi
erl
e
"chemi
n"dufor
mul ai
re:l
eformul
air
efaai
tbi
enpart
iedelafenêtre(window),
quiconti
entun
documentHTML( document),
quil
uimêmeconti
entunformulai
re,etc
ChaqueélémentdudocumentHTMLestdoncaccessi bl
eviasonnom etl
ahiér
archi
edes
obj
etsdepuisl
elangageJavascr
ipt
.Ils’
agi
tmai
ntenantdepouvoirmani
pul
ercesobjet
sen
uti
l
isantl
eurspr
opri
étés,
leursméthodesetl
esévènementsauxquel
sil
sréagi
ssent.
Nousavonsvuqu’
uneméthodepermetenpr
ogrammati
onobj
etd’
eff
ect
uerdesact
ionssur
l
’obj
et,
etqu’
unepr
opri
étéestunedesescar
act
éri
sti
ques.
Global
ement,onpeutmanipul
ergr
âceauxpr
opri
étés,
l’
ensembledesatt
ri
but
sdechaquebali
se
HTML.Ainsi,sil’
onveutmodi
fi
erl
acl
asseCSSd’
unobj etdenot
redocument
,nousmodi
fi
erons
sapropri
étéclassname:
wi
ndow.
document
.mom_
element
.cl
assname="
nouv
ell
e_cl
asse"
;
Tousl
esat
tri
but
sdet
out
esl
esbal
i
sessontai
nsi
mani
pul
abl
esav
ecl
eJav
ascr
ipt!
wi
ndow.
document
.nom_
element
.met
hode(
);
Parexemple,
l’
envoi
d’unfor
mul
air
e,qui
cor
respondàl
’
évènementHTMLonsubmi
t,sef
erapar
l
’i
nstr
ucti
onJavascr
ipt:
wi
ndow.
document
.nom_
for
mul
air
e.submi
t(
);
CHAPTER2.LEMODÈLEOBJETDUNAVI
GATEUR 2.
1.LEMODÈLE
OBJETDUNAVIGATEUR
Nousav onsvudanslesséquencesducoursHTMLquelesbal
isesHTMLsontassociéesàdes
évènementsauxquel
lesell
espeuventr
éagir
.Ainsi
,l
abal
i
se<body>possèdedeuxév
ènements
i
ntri
nsèquessouventuti
l
isés,
onloadetonunl
oad.
Al’
int
éri
eurdecesbalises,i
lestdoncpossibl
ed’associ
erducodejav
ascri
ptqui
seraexecut
é
l
orsquel
’évènementseradéclenché,
soitparl
’ut
il
isat
eur(env
oid’
unformul
air
eparexemple)
,
soi
tparlenavigat
eurl
ui-même( char
gementd’unepageparexemple).
Combinéàl’ut
il
isat
iondesfeui
ll
esdestyle,l
esévènementsetJavascr
iptper
mettentégal
ement
d’
obteni
rdescombi nai
sonsgraphi
quesintér
essantes.Lesév
ènementsaccessi
blespour
chaquebal
iseHTMLsontdécr it
sdanslaspécifi
cati
onHTML4. 0.
Voi
ciunel
i
stedespr
inci
pauxév
ènement
sint
ri
nsèques:
Tabl
e2.
1Li
stesdespr
inci
pauxév
ènement
s
Nom
Descr
ipt
ion
onAbor
t
Quandl
’
int
ernaut
ear
rêt
elechar
gementd’
unei
mage
onBl
ur
Quandunobj
etHTMLn’
apl
usl
efocus
onChange
Quandunobj
etHTMLaét
émodi
fi
éetqu’
i
ln’
apl
usl
efocus
onCl
i
ck
Quandl
’
int
ernaut
ecl
i
quesurunobj
etHTML
onDbCl
i
ck
Quandl
’
int
ernaut
edoubl
ecl
i
quesurunobj
et
HTML
onEr
ror
Quandl
echar
gementdel
apageoud’
unei
mageaent
rai
néuneer
reur
onFocus
Quandunobj
etHTMLal
efocus(
cli
querdansunchampparexempl
e)
onKey
Down
Quandl
’
int
ernaut
eappui
esurunet
ouchedesoncl
avi
er
onKey
Press
onKey
Up
Quandl
’
int
ernaut
e"l
âchesondoi
gt"d’
unet
oucheal
orsenf
oncée
onLoad
Quandl
echangementdel
apageestf
ini
onMouseDown
Quandl
’
int
ernaut
eappui
esurunbout
ondel
asour
is
onMouseMov
e
Quandl
’
int
ernaut
edépl
acesasour
is
onMouseOut
Quandl
’
int
ernaut
eenl
èvesasour
issanscl
i
querd’
unobj
etHTML
onMouseOv
er
Quandl
’
int
ernaut
emetsasour
issanscl
i
quersurunobj
etHTML
onMouseUp
Quandl
’
int
ernaut
e"l
âchesondoi
gt"d’
unbout
ondesasour
isal
orsenf
oncé
onMov
e
Quandunef
enêt
reouunef
rameestdépl
acée
onReset
Quandunf
ormul
air
eestr
emi
sàzér
o(av
ecunbout
on[
Reset
])
onResi
ze
Quandl
’
int
ernaut
eredi
mensi
onnesaf
enêt
redenav
igat
eur
onScr
oll
Quandl
aposi
ti
ondel
abar
rededéf
il
ementestmodi
fi
ée
onSel
ect
Quandl
’
int
ernaut
esél
ect
ionnedut
ext
edansunobj
etHTML
onSubmi
t
Quandl
efor
mul
air
eestenv
oyé,
quandl
’
int
ernaut
ecl
i
quesurunbout
on[
Env
oyer
]
onUnLoad
Quandunepageestqui
tt
ée
2.
1.LEMODÈLEOBJETDUNAVI
GATEUR CHAPTER2.LEMODÈLEOBJETDU
NAVIGATEUR
Exampl
e2.
1Changementdecl
assed’
unl
i
en
<ahr
ef="
"cl
ass="
ma_
classe1"onmouseov
er="
thi
s.cl
assname=’
?ma_
classe2’
"
onmouseout="
thi
s.cl
assname=’
ma_
classe1’
">monl
i
enchangedef
ormeav
ecl
e?passagede
l
asouri
s</a>
Exampl
e2.
2Ouv
ert
ured’
unenouv
ell
efenêt
re
<ahr
ef="
(’
’,
’Nouv
Fenet
re’
,’
scr
oll
bar
s=y
es,
?st
atus=y
es,
widt
h=300,
hei
ght
=300’
)"
">
unenouv
ell
efenêt
rev
as’
ouv
rir:
tai
l
le300x300</
a>
Exampl
e2.
3Changementd’
i
mageaupassagedel
asour
is
<AHREF="
"onMouseOv
er="
=’"j
pg’
">
</
A>
onMouseOut
="=’
mon_
img.?
-
Chapt
er3
• ducôtéduserveur:
lesdonnéessontenvoy
éesàt r
aversl
eréseau,etunprogr
ammev ér
if
ie
qu’
ell
essontv
ali
des.Maiscemodedet rai
tementnécessi
tedesurchar
gerleserv
euret
encombrel
eréseau.
• ducôtéducli
ent:avantdeposterlesdonnéesduformulaire,il
estpossi
bledeprogrammer
l
enavigat
eurpourqu’
ilef
fect
uel ui
-mêmecesv éri
fi
cat
ions.C’estdoncauni v
eaudelapage
cont
enantlef
ormulai
requ’i
lfautécri
reunprogrammeJav ascriptréal
i
santcesopér
ationsde
cont
rôle.
Nousavonsvuprécédemmentl
esobjetsJav
ascr
ipt,etpl
uspart
icul
i
èrementl
esobj
etsdu
navi
gat
eur.Nousall
onsmai
ntenantdécr
ir
eavecprécisi
oncer
tai
nsdesobjet
sdesfor
mulai
res,
demanièr
eàef fect
uercer
tai
nesopér
ati
onsdecont
rôl
eetdef
ormat
agedesdonnéesent
rées
parl
’
uti
l
isateur
.
Leszonesdesai
siedet
ext
ecompor
tel
espr
opr
iét
ésetmét
hodessui
vant
es:
•v
alue:
Lav
aleurduchamp(
val
ueenHTML)
• name:
Lenom duchamp(
nameenHTML)
• si
ze:
Lat
ail
l
educhamp(
sizeenHTML)
• st
yle:
Feui
l
lesdeSt
ylesJav
aScr
ipt(
JSSS)
•f
ocus(
):Mét
hodequi
donnel
efocus,
c’estàdi
requel
ecur
seurestdansl
echampdesai
sie
Uneseul
emét
hodei
ntér
essant
epourl
esbout
ons:
oncl
i
ck(
)
Lescasesàcocheront:
• oncl
i
ck(
):év
ènementqui
int
erv
ientquandl
’
uti
l
isat
eurcl
i
quedessus
• checked:
truepourv
ali
derl
acaseàcocher
,fal
sesi
non.
3.
1.VALI
DATI
ONDESDOCNHNAÉPETSER3.APPLI
CATI
ONAUCONTRÔLEDESAI
SIEDES
DONNÉES
<ht
ml>
<head>
<t
it
le></
ti
tl
e>
<scr
iptl
anguage="
Jav
aScr
ipt
">f
unct
ionv
eri
f_f
orm(
){v
art
emoi
n=0;
if(
.val
ue=="
")
{
}i
f(
document
.f
ormul
air
e.pr
enom.
val
ue=="
")
{al
ert
("
Lechamp\
"Pr
énom\
"estv
ide"
);r
etur
nfal
se;
}i
f(
.sel
ect
edI
ndex==0)
{al
ert
("
Vousn’
avezpaschoi
siv
otr
esexe"
);r
etur
nfal
se;
}f
or(
i=0;
i
<document
.f
ormul
air
e.l
oisi
r.
lengt
h;i
++)
{if
(document
.f
ormul
air
e.l
oisi
r[
i]
.checked)
{
++t
emoi
n;
}}i
f(
temoi
n!=3)
{al
ert
("
Vousdev
ezchoi
sir3l
oisi
rs!
")
;ret
urnf
alse;
}r
etur
ntr
ue;
</
scr
ipt
>
</
head>
<body
>
<f
orm act
ion="
"met
hod="
post
"name="
for
mul
air
e"onSubmi
t="
ret
urnv
eri
f_f
orm(
)">
Votr
enom <inputtype="
text
"name="
nom"
> Vot
repr
énom Sexe:
<sel
ectname="
sexe"
>
<opt
ion>Choi
sissez
</opt
ion>
<opt
ionv
alue="
h">Homme</
opt
ion>
<opt
ionv
alue="
f"
>Femme</
opt
ion>
</
sel
ect
> 
Vosl
oisi
rs:
(3choi
x) <hr
>
LeJav
aScr
ipt
 
Lacout
ure Lecinéma 
Lat
élév
isi
on 
Lamar
che 
Lespor
t 
Lal
ect
ure 
Lechev
al 
Dor
mir
 <hr
>

</
for
m>
</
body
>
</
html
>
CHAPTER3.APPLI
CATI
ONAUCONTRÔLEDESAI
S3I
.E2.
DTERSODUOVNENRÉDEESSSCRI
PTS
SURINTERNET
•i
ndexOf
(sear
chVal
ue):
ret
our
nel
apl
acedel
apr
emi
èreoccur
encedel
achaî
nesear
chVal
ue
• subst
ri
ng(
indexA,
indexB):
ret
our
nel
achaî
nedecar
act
èrecompr
iseent
rei
ndexAeti
ndexB
•toLowerCase(
),t
oUpper
Case(
):r
env
oiel
achaî
nepasséer
espect
ivementenmi
nuscul
eeten
maj
uscul
e
Outrelesopérat
ionsclassi
quessurl esnombresquenousav onsvuenalgori
thmique,ilpeut
égalementêtreintér
essantdetestersiunevari
abl
eestbiendet y
peNumber ,Javascri
ptétant
rel
ativementsouplesurletypagedesv ar
iabl
es.Ainsi
,l
afoncti
onisNan(
test
Value)nousr envoi
e
l
av aleurf
alsesitestVal
uen’estpasunnombr e,etlaval
eurtr
uedanslecascontraire.
Vousl’
avezvu,Javascri
ptestunl angagetr
èscomplet
,per
mett
antdedonnerdudynamisme
auxpagesenappl i
quantlaprogrammat i
onducôtécli
ent
.Nousavonsaussi
lapossi
bil
it
éde
déchar
gerleserveurd’
unepar t
iedesont r
avai
l,
enutil
i
santl
econt
rôledesai
siedeschamps
desfor
mulair
es.
Javascri
ptdemandequandmêmeunecer t
aineexpér
ienceenpr ogr
ammat i
on,avantdepouv
oir
réal
iserdesmenusdér oulant
s,desappli
cati
onsgraphiques,et
c..maisrepr
ésenteune
alt
ernati
vesérieuseauxsolut
ionspropr
iét
airest
ell
esqueFl ashouautresPlug-
Ins,dontl
a
grat
uitén’estpasgarant
iedansl’
avenir
.
Unbonmoy endesefamili
ari
seravecJavascr
iptestt
outsi
mplementd’al
lercher
cherdes
exempl
esder éal
i
sati
ondescript
ssurInt
ernet
.Unsi t
eenpart
icul
i
errecensedenombr eux
exempl
es,
or gani
sésparcat
égori
e:
Il
exi
steégalementdenombreusesressourcesdocument
airessurJav
ascri
pt,
tell
esquedes
cour
setdest ut
ori
aux.Unbonportai
lversdessit
essurJavascri
pt,
eti
ntégr
antlui
-mêmeun
cour
strèscompletsurcel
angageest:
Cont
act
ez-
nous
Apr
oposdenous
Onr
ecr
ute
Recher
cherdansl
esi
te
Pol
i
tiquedeconf
ident
ial
i
té
Dr
oitd'
aut
eur
/Copy
right

Cours JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

Cour

Vous aimerez peut-être aussi