c



c 

` Balises <SCRIPT> et </SCRIPT>

` Protocole JavaScript: dans une URL

` Attribut de balise pour la gestion

d'évènements
 



M


 
  
M


M


 
  


M

 § 



` S'ilécrit dans la page @ le mettre à
l'endroit où il doit écrire
` Sinon, dans l'en-
l'en-tête
± Définition de fonctions
± Définition de variables
 
c  



` emple:
<A HR
JavaScript:«>
...
</A>
 



!" #


` <BALIS onvenement . . .>
onClick
onChange
onMouseOver
onLoad
onMove
onSelect
...
c
@
$

%
c
@
$

&
 "c

pour stocker et manipuler
` ariables:
des données
± Pas de type prédéfini
± ariables globales et locales
` Objets

`
onctions
 '



` booléens
± document.nomform.checkbo .checked
true
` numériques
± var pi.
` chaines
± var monNom Bakhous
 "


w valeurs:
± true
± false
 -

`  @
`
 @
`
 @
` .w

` .w

` .we

w--
` w
 ()

#

` Délimitées par '«' ou «
` Concaténation: +
` Caractères spéciau
± \' pour '
± \ pour 
± \\ pour \
± \n aller à la ligne
± \t tabulation
± \b retour arrière
 

$
` var tabnew Array();
` var tabwnew Array(
);

` var tabtabw;

copie dynamique
` var tabeval(tabw.toSource());

copie statique
` accès: tab w , tabw i
 $



var mon_tableau  new Array('Bonjour','
Array('Bonjour','Hola
Hola','
','Guten
Guten Tag','Hello','Tching
Tag','Hello','Tching tching tchong
tchong');
');

document.write('Je
document.write('Je vais vous dire bonjour en français : '+
'+mon_tableau
mon_tableau

+'<br
+'<br/>');
/>');
document.write('Je
document.write ('Je vais vous dire bonjour en espagnol : '+
'+mon_tableau
mon_tableau 
 +'<br
+'<br/>');
/>');
document.write('Je
document.write ('Je vais vous dire bonjour en allemand : '+
'+mon_tableau
mon_tableau w
w +'<br
+'<br/>');
/>');
document.write('Je
document.write ('Je vais vous dire bonjour en anglais : '+
'+mon_tableau
mon_tableau 
 +'<br
+'<br/>');
/>');
document.write('Je
document.write ('Je vais vous dire bonjour en *e¨
*e¨:ù%*µ£¤@! : '+mon_tableau
'+mon_tableau   +'<br
+'<br/>
/>
 
*

` var noms_enfants  new Array(

Array( Zineb
Zineb',
', Adam',¶Wafae
Adam',¶Wafae');
');
var taille_tableau  ;
taille_tableau--
taille_tableau --;;
` /* Il y a  cases dans le tableau, mais la case n°
n° d'un tableau
commence à
, et non . Donc on décrémente une fois la
variable */

document.write('oici
document.write('oici les membres de la famille : ');

for(var i 
; i < taille_tableau;
taille_tableau; i++)
{
document.write((noms_enfants i
document.write noms_enfants i +' '); /* On affiche les noms
*/
}
 



` var noms_enfants  new Array(
Array( Zineb
Zineb',
', Adam',¶Wafae
Adam',¶Wafae');
');
var taille_tableau  noms_enfants.length;
noms_enfants.length;
taille_tableau--
taille_tableau --;;

document.write('oici
document.write('oici les membres de la famille : ');

for(var i 
; i < taille_tableau;
taille_tableau; i++)
{
document.write((noms_enfants i
document.write noms_enfants i +' '); /* t on affiche les noms */
}
 §+

` Classe  famille d'objets de mêmes
structure et comportement
` Objet
± Propriétés: caractéristiques des objets
± Méthodes: outils s'appliquant
± Constructeur: outil permettant de créer
un objet d'une classe
± vénements: au quels répond l'objet
` Objet en cours:
cours: this
 §c("(
` Objet document
± Objet formulaire @nomform
` Objet champ @nomchamp
± aleur @value

` Le point . sert de filiation

document.nomform.nomchamp.value
document.title
document.screen.width
 §+
   

window

document history location

anchors links image forms

button radio hidden reset

submit

checkbo te tarea password

select te t
 G

` Méthodes
± appliquées à un objet
`
onctions
 u"(


onctions associées à un objet

± document.write()
± document.nomform.submit()
± window.open()
 G
`
unction nomfonction(arg, . . , argn)
{ instr ;
...
instr m;
Ô
Ô Ô
}
` Arguments passés par valeur,
sauf tableau et objets
 
,

` instructions séparées par des ;
` majuscule È minuscule

` 'te te' peut remplacer te te quand

nécessaire
` commentaires: entre /* et */

ou fin de ligne après //

 G
` If (condition)
Instruction; {instruction;
«;}
` If (condition

instruction; {instruction;
«;}
else
instruction; {instruction; «;}
` ariable(condition)?val:valw;
G@
$


` Réaliser un script qui protège une

page web par mot de passe
` Si le psw est correcte on affiche la
page sinon on indique dans un
message qu¶il ya erreur et ferme la
fenetre..
fenetre
%
&
 -.

` switch (variable) {
case valeur : instr; «; break;
case valeurw : instr; «; break;
...
case valeurn : instr; «; break;
default: instr; «; }
-.@
$


 


` break
± sortie d'une boucle
` continue
± aller directement au début de la
prochaine boucle
` return
± sortie de la fonction
 


` ë
 !
` La puissance des ordinateurs vient de leur capacité à répéter un
grand nombre de fois des opérations élémentaires. Un langage de
programmation doit fournir au programmeur des moyens
d'e primer ces répétitions de façon concise, grâce à des 
..
JavaScript fournit les instructions " et #$ que nous allons
étudier dans ce TD.
` %
&
` Boucle for
Utiliser les boucles " pour répéter une suite d'instructions un
nombre de fois donné.

` Boucle while
Utiliser les boucles #$ pour répéter une suite d'instructions
tant qu'une condition est vérifiée.
 G§

` for
± for(i
;i<tab.length;i++) instruction;
` for in
± for(var i in tab) instruction;
G§@
$


 -.
/§
-.
` while (condition) instruction;
` while (condition) {instr; «;}

` do {instruction} while(condition);
` do {instr;«;} while (condition)
-.@
$


` 
` Tables de multiplication
Créer un document HTML qui demande un
nombre puis affiche la table de multiplication
correspondante.
Table de Pythagore
Construire la table de Pythagore en imbriquant
deu boucles for. (chaque case contient le
produit de son numéro de ligne par son numéro
de colonne)
Somme des premiers entiers
Créer un document HTML qui permet d'entrer un
entier n, qui calcule la somme des entiers de  à
n et qui affiche le résultat.
 §+

` Objets du navigateur
` Autres:
± String
± Array
± Date
± Math
± Screen
 §+
   


window

document history location

anchors links image forms

button radio hidden reset

submit

checkbo te tarea password

select te t
 -  

` oir toutes les propriétés
 §+
0 0""
&& ë

closed fenêtre fermée?

defaultStatus message par défaut(barre état

length nb de cadres

name nom
opener nom fenêtre ouvrante
parent si cadre
self/top fenêtre courante

status contenu barre d'état

 §+
0 0"(
1%2
u&$% ë
alert(chaine) Affiche boite alerte
back() URL précédent historique
blur()
enêtre plus courante
close()
erme fenêtre
confirm(chaine) Affiche boîte confirmation
focus()
enêtre courante
forward() URL suivant historique
home() URL page accueil
moveBy(hor,ver) Déplacement relatif
moveTo( ,y) Déplacement absolu
open(args) Ouvre fenêtre
 §+
0 0"(
1&2
u&$% ë
print() Imprime
prompt(chaine, val/defa Affiche boîte entrée
ut )
resizeBy(hor,ver) Redimensionne
resizeTo(Wid,Hei) Redimensionne
scrollBy(hor,ver) Défilement visualisation
scrollTo( ,y) Défilement visualisation
setInterval(e pr,msec) Évalue e pr après msec
clearInterval(IDinterv) Supprime délais
setTimeOut(e pr,msec) Évalue e pr après msec

clearTimeOut(Idchrono) fface fonction chrono

 u"(


å
å


 
 





3
 44(


  
3
 44(

 ! 



3
 44(



14(
5" 5
2

6
3
 /"4

4
7

 4

3
 44(



1

 "4

2


81-2

91-2
412  "

$
'
4
7

3
 44(


 !"

3
 44(


 !
0 (3
 /"4
1
$
2

(
 (3(
 /"4(
1
$
2
- 0@
$


- 0@
$


 u"(



` prompt
± varprompt();
± varprompt('te te');
± varprompt('te te',valeur);
` alert
± alert(te te);
± alert(var);
± alert(var+te te);


@
$




@@
$

1
2



 §+
0 0" "


& '  ë& $' 

onBlur Qd fenêtre désactivée

onrror Qd erreur dans

fenêtre
on
ocus Qd fenêtre activée

onLoad Qd document chargé

dans fenêtre
onUnload Qd document dans le
fenêtre quitté
§+
""5"(

&& ë
href URL entière
protocol Protocole
host Nom hôte + N° N° port
hostname Nom hôte
port Port
path Chemin du document
hash Nom ancrage
search Info pour cgi-
cgi-bin GT
u&$% ë
assign(chaine) al @ location.href
@
$


§+
('""
"(

&& ë
current URL entrée courante
hist.
length Nb entrées hist.
previous URL entrée précédente
ne t URL entrée suivante
u&$% ë
back() Recule d'une entrée
forward() Avance d'une entrée
go(nb) Avance de nb entrées
go(chaine) @ ntrée t.q. chaine 8
 §+
 
""
&& ë
alinkColor Couleur lien actif
bgColor Couleur de fond
cookie Cookie
domain Nom de domaine du
serveur
fgColor Couleur premier plan
lastModified Date dernière
modification
linkColor Couleur liens
referrer URL appelante
title Contenu <TITL>
URL URL document
 §+
 
"(

u&$% ë

close()
erme le document

eval(chaine) value chaine @

résultat
open() Ouvre nouveau
document
write(e pr ,e prw, Écrit e pr HTML
« )
writeln(e pr ,e prw, Écrit e pr HTML + nl
« )
c
 "#
 .u
` document.write(te te);
"" !+
@
$


 
 !+

` Document
± images document.images

± forms
± links
`
ormulaire
± elements
± nomoptionradio
 §+
(
` Créé quand balise <A avec attribut
NAM
` Collection @ tableau anchors

` Propriété

± name nom de l'ancre

 §+
:
` Créé quand balise <A avec attribut
HR

` Collection @ tableau links

` Comprend les zones area

` Mêmes propriétés que objet location

` vénements:
± onClick qd clic lien
± onMouseOver qd pointeur sur lien
± onMouseOut qd pointeur quitte lien
 §+


` Créé quand balise <IMG

` Collection @ tableau images

` vénements

& '  ë& $' 

onAbort Qd IT chargement
image
onrror Qd erreur chargement
onLoad Qd chargement achevé
 §+

""
&& ë
border al attribut BORDR
complete Image chargée entièrement?
height al attribut HIGHT
hspace al attribut HSPAC
lowsrc al attribut LOWSRC
name al attribut NAM
src al attribut SRC
vspace al attribut SPAC
width al attribut WIDTH

@
$


 §+
4
` Créé quand balise <
ORM
` Collection @ tableau forms

` vénements

& '  ë& $' 

onReset Qd clic RST ou appel

reset()
onSubmit Qd clic SUBMIT ou appel
submit()
 §+
4""
"(

&& ë
name al attribut NAM
method al attribut MTHOD
action al attribut ACTION
elements Tableau elements du
form.
length Nb éléments formulaire
encoding al attribut HIGHT
target
enêtre après submit
u&$% ë
reset() Rétablit val init du form.
 §+
- !4

""
"(

&& ë
name al attribut NAM
value Contenu du champ
defaultvalue Contenu initial du
champ
u&$% ë
focus() Active objet spécifié
blur() Désactive objet spécifié
select() Sélectionne objet
spécifié
submit() nvoie formulaire
 §+
- !4

" "


& '  ë& $' 

on
ocus Qd champ activé

onBlur Qd champ désactivé

onSelect Qd te te du champ
sélectionné
onSubmit Qd formulaire envoyé

onChange Qd te te modifié
8@
$


§+
 /§
.;§8 !
4
""
"(

&& ë
name al attribut NAM
value al attribut ALU
checked État case à cocher
defaultChecked État initial case à
cocher
u&$% ë
focus() Active objet spécifié
blur() Désactive objet
spécifi
click() Clic sur bouton
§+
 /§
.;§8 !
4
" "


®& '  ë& $' 

onClick Qd clic sur bouton

on
ocus Qd champ activé

onBlur Qd champ désactivé

onSubmit Qd formulaire envoyé

onChange Qd te te modifié
 /§@
$


.;§8@
$


 §+
""5
"(

" "


&& ë
length Nb options select
name Nom select
selectedInde Indice actuel sélectionné
options Tableau des options
u&$% ë
blur() Ote le focus
focus() Donne le focus
& '  ë& $' 
onBlur Qd le select perd le focus
on
ocus Qd le select a le focus
onChange Qd l'option change
 §""
&& ë
defaultSelected Option par défaut?
inde Indice
length Nb options
name Nom select
selected Option sélectionnée?
selectedInde Indice option
sélectionnée
te t Te te
value valeur
@
$


 #$(@
$


` window.document.nom_formulaire.nom_element num_case .
checked
` window.document.nom_formulaire.nom_element num_case .value
` window.document.nom_formulaire.nom_element.options num_cas
e .
selected
` window.document.nom_formulaire.nom_element.options num_cas
e .value
` window.document.nom_formulaire.nom_element.length
` window.document.nom_formulaire.nom_element.options num_cas
e .te t
` window.document.nom_formulaire.nom_element.selectedInde
` window.document.nom_formulaire.nom_element.options num_cas
e .
selected  true/false
` window.document.form.Pays.options  .selected  true;
` window.document.nom_formulaire.nom_element.value
 - 
  9""

` length:
± longueur chaine (nb de caractères)
± taille tableau (nb éléments du tableau)
- 
  9@
$


 - u"(

u&$% ë
charAt(ind) Caractère à l'ind donné
concat(ch) Concaténation avec ch
inde Of(ch,ind) Indice ch à partir de ind
lastInde Of(ch,ind) Id en arrière
split(sépar) Tableau de chaines
substr(dep ,lg ) Lg cars depuis dep
substring(ind,indw) Sous
Sous--chaine
toLowerCase() Conversion en
minuscules
toUpperCase() Conversion en
- @
$


  9"(

u&$% ë

concat(tab) Concatène les éléments des w tableau

join(ch) Chaîne avec éléments du tableau séparés par ch

pop() Ote et retourne le dernier élément

push(val, Ajoute éléments au tableau

«)
reverse Inverse l'ordre du tableau

sort( fn ) Tri par rapport à fn ou alphabétique

toString() Conversion tableau en chaîne

 9@
$


 9@
$


 9@ 

$


 §+
" "
c 

` Date

` Math
 !+
/
12
` Constructeur:
± Date actuelle:
` Aujourdhuinew Date();
± Autre date:
` Annivnew Date(annee,mois,jour)
` Annivnew
Date(annee,mois,jour,heure,minute,seconde)
 /
"(
1%2
u&$% ë
getDate() aleur jour du mois;  @
getDay() Jour de la semaine;
@  (
Dimanche)
getHours() Heures;
@ w
getMinutes( Minutes;
@ 
)
getSeconds Secondes;
@ 
()
getMonth() Mois;
@  (
janvier)
getTime() Nb de secondes depuis le er Janvier 

getYear() Nb années depuis 

get
ullyear( Année
)
 /
"(
1&2
u&$% ë
setDate(arg) Jour du moisarg
setHours(arg) Heuresarg
setMinutes(arg Minutesarg
)
setSeconds(ar Secondesarg
g)
setMonth(arg) Moisarg
setTime(arg) Nb de secondes depuis le er Janvier 
arg
setYear(arg) Annéearg
toLocalString() @ Date sous forme de chaine
/
@
$


 u(""
&& ë
 Constante e
LNw Log naturel de w
LN
Log naturel de 

LOG Log de e à la base w

LOG
 Log de e à la base 

PI Constante pi
SQRT_w Racine carrée de /w
SQRTw Racine carrée de w
 u("(

u&$% ë

abs(n) aleur absolue

ceil(n) ntier immédiatement supérieur

e p( )  puissance

floor(n) ntier immédiatement inférieur

log( ) Log de

ma (n,nw) Ma imum des w valeurs

min(n,nw) Minimum des w valeurs

pow(n,nw) n à la puissance nw

random() Nb aléatoire entre

et 

round(n) ntier le plus proche

sqrt(n) Racine carrée

§+
u(@
$


 u



`  () : e écution de code

JS à intervalles réguliers
`  ()* arrêt de la
minuterie
` '() : e écution de code
JS au bout d'un délai
` '()* annule setTimeout

 @
$

1%2

 @
$

1&2

 @
$

1<2

@
$