Javascript

1
Partie 2 - Le langage JavaScript

Olivier GLUCK
Universit LYON 1fUFR d'!nformatique
Olivier.Gluck@ens-lyon.fr
http:ffwww710.univ-lyon1.frf~ogluck
Olivier Glck - 2007 N1!F - UE PW 2
Copyright
Copyright 2007 Olivier Glck; all rights reserved
Ce support de cours est soumis aux droits d'auteur et n'est
donc pas dans le domaine public. Sa reproduction est
cependant autorise a condition de respecter les conditions
suivantes :
Si ce document est reproduit pour les besoins personnels du
reproducteur, toute forme de reproduction (totale ou partielle) est
autorise a la condition de citer l'auteur.
Si ce document est reproduit dans le but d'tre distribu a des tierces
personnes, il devra tre reproduit dans son intgralit sans aucune
modification. Cette notice de copyright devra donc tre prsente. De
plus, il ne devra pas tre vendu.
Cependant, dans le seul cas d'un enseignement gratuit, une
participation aux frais de reproduction pourra tre demande, mais elle
ne pourra tre suprieure au prix du papier et de l'encre composant le
document.
Toute reproduction sortant du cadre prcis ci-dessus est interdite
sans accord pralable crit de l'auteur.
Remerciements
Quelques transparents sont directement tirs des
supports de cours de :
Dominique Bouillet (!NT)
Nerci a eux !
Des figures et exemples sont issus des livres ou
sites !nternet cits en bibliographie
Olivier Glck - 2007 N1!F - UE PW +
Bibliographie
Webmaster in a nutshell , S. Spainhour 8 R. Eckstein, 3ime
dition, O'RE!LLY, !SBN 0-596-00357-9
JavaScript, La rfrence , D. Flanagan, +ime dition en
franais, O'RE!LLY, !SBN 2-8+177-212-8
Cration d'un site Web du dbutant a l'expert , Daniel !chbiah,
Eska, !SBN 2-7+72-0227-5
HTNL et JavaScript , P. Chalat et Daniel Charnay, Eyrolles,
!SBN 2-212-11157-6
!nternet et JavaScript.
http:ffwww.aidejavascript.comfsommaire.php3
http:ffconceptnet.online.frfaccueil.htm
http:ffwww.ac-creteil.frfutilfprogrammationfjavascriptfWelcome.html
http:ffwww.le-webmestre.netfwebfcoursfjavascriptf
http:ffwww.henri-ruch.chfjavascriptfcours.asp
http:ffdeveloppementweb.online.frfindex1.html
http:ffwww.w3.orgf
Plan de la partie 2 (2 sances)
Le langage JavaScript
Les objets prdfinis
Les vnements
Les objets du noyau
Quelques exemples classiques
2
Notivations
!nsertion d'instructions de programmation
directement dans le code des pages HTNL
Excution de code sur le poste client pour
amliorer l'interactivit (temps de rponse plus court)
amliorer les dbits sur le rseau (viter des envois
errons)
proposer des pages dynamiques (animation,
personnalisation,.)
Exemples
test d'un formulaire avant envoi
animation type texte dfilant
affichage dynamique
Cr a l'origine par Netscape (Netscape 2.0)
Conu pour traiter localement des vnements
provoqus par le client
dplacement du pointeur de souris ou click de souris
soumission d'un formulaire, .
JavaScript est un langage
interprt (le code du script est analys et excut au
fur et a mesure par l'interprte, partie intgrante du
navigateur) - problme en cas d'erreurs !
a base d'objets
multi-plateforme
JavaScript permet
de programmer des actions en fonction d'vnements
si la zone de saisie contient un nombre alors
enregistrer la valeur sinon afficher une erreur
d'effectuer des calculs (sans recours au serveur)
lire la valeur saisie, la multiplier par 3,1+ et afficher
le rsultat
Domaines d'applications
petites applications simples (calculette, outils de
conversions, dition automatique de devis, jeu, .)
aspects graphiques de l'interface (modification
d'images lors du passage de la souris, gestion de
fentres, modification locale de la page HTNL,
modification de menus.)
test de validit des donnes sur les lments de
l'interface de saisie
vrifier qu'une valeur considre comme
obligatoire a bien t saisie
vrifier que le champ saisi correspond bien au
format demand
Autres langages analogues
Le langage vBScript
propos par Nicrosoft
driv de visual Basic
Le langage Jscript (microsoft)
Le noyau JavaScript
Au niveau du langage, on distingue
le noyau JavaScript (cur du langage) comportant des
objets prdfinis, des oprateurs, des structures, .
un ensemble d'objets associs au navigateur
fentres,
documents,
images, .
!l existe aussi la possibilit d'excuter du code
JavaScript sur le serveur (communications avec
une BD.) mais l'usage est plus restreint
3
Normalisation
ECNA (European Computer Nanufacturers
Association) a dfini un standard ECNAScript
bas sur JavaScript 1.1
Ce standard, repris par l'!SO, dfinit les
caractristiques du noyau du langage
JavaScript 1.3 et Jscript 3.0 sont conformes a
cette norme mais ils ont aussi tous les deux
leurs propres extensions
des diffrences au niveau du modle objet du
navigateur
Olivier Glck - 2007 N1!F - UE PW 1+
JavaScript n'est pas JAvA !
JavaScript
interprt
a base d'objets prdfinis (pas
d'hritage)
code intgr dans HTNL
(visible)
typage faible
n'existe pas en dehors du Web
dbuggage difficile
Java
compil
orients objets (dfinition
de classes, hritage)
code dans applets (non
visible)
typage fort
langage a part entire
environnement de
dveloppement
Communication possible entre Java et JavaScript grace au
plug'in LiveConnect (Netscape) ou aux contrles Active X
(Nicrosoft)
!nsertion de code JavaScript
3 mthodes
utilisation de la balise <script>.<fscript>
dclaration de fonction dans l'en-tte entre <head>
et <fhead>
appel de fonction ou excution d'une commande
JavaScript dans <body>.<fbody>
insertion d'un fichier JavaScript "externe"
utilisation dans une URL
une URL peut tre une excution de fonction
JavaScript (entre <a>.<fa> ou <form>.<fform>
utilisation de nouveaux attributs de balise pour la
gestion d'vnements utilisateur
<BAL!SE onEvenement="code JavaScript">
!nsertion de code JavaScript

<HTNL><HEAD>
<SCR!PT LANGUAGE="JAvASCR!PT">
function fin() { window.close(); )
<fSCR!PT>
<fHEAD><BODY>
document.write('Pour fermer la fentre');
<fSCR!PT>
<br><a href="javascript:fin();">cliquez ici<fa>
<br> ou passez la souris sur
<a href="" onNouseOver="fin();">ce lien<fa>
<fBODY><fHTNL>
La balise <SCR!PT>
!ntroduite pour permettre l'excution de code par
le navigateur
Syntaxe gnrale
<SCR!PT LANGAGE="nom" SRC="URL" ARCH!vE="fichier.jar"
!D="entier">.<fSCR!PT>
Attribut LANGAGE
"JavaScript" par dfaut dans Netscape
permet de prciser la version
Attribut SRC
permet de charger du code prsent dans un autre fichier
Attributs ARCH!vE et !D
utiliss pour la scurisation (signature digitale)
!nsertion d'un fichier externe

<HTNL><HEAD>
<SCR!PT LANGUAGE="JAvASCR!PT" SRC="fin.js">
<fSCR!PT>
<fHEAD><BODY>
document.write('Pour fermer la fentre');
<fSCR!PT>
<br><a href="javascript:fin();">cliquez ici<fa>
<br> ou passez la souris sur
<a href="" onNouseOver="fin();">ce lien<fa>
<fBODY><fHTNL>
ff fin.js
function fin() {
window.close();
)
+
La balise <NOSCR!PT>
Bonne utilisation de la balise <SCR!PT>
<SCR!PT LANGAGE="JavaScript1.2">
<! --
Code JavaScript
-->
<fSCR!PT>
<NOSCR!PT>
Attention, ce document contient du code JavaScript non
interprt par votre navigateur.
<fNOSCR!PT>
Des variables faiblement types
Des oprateurs et instructions (ceux du langage C)
Des mthodes
globales (associes a tous les objets)
fonctions dfinies par l'utilisateur
Des objets
prdfinis (String, Date, Nath, .)
lis a l'environnement (window, document, .)
Commentaires comme en langage C
ff une seule ligne ou f* plusieurs lignes *f
Sparateur d'instructions : ; (ou retour-chariot)
Oprateurs JavaScript
Ceux du langage C
arithmtiques : + - * f
infdcrmentation (prfpost indexe) : k++ ++k
logiques : 88 (ET) { { (OU) ! (NON)
bit a bit : 8 (AND) { (OR) ' (XOR) ~ (Not)
dcalages : >> (a droite) << (a gauche) >>> (non
sign)
comparaisons: == != <= >= < >
concatnation de chanes : +
ATTENT!ON : L'oprateur + est l'addition ou la
concatnation
Affectations
affectation simple
nom=valeur;
affectation conditionnelle
var = (condition) ? exp_alors : exp_sinon;
X = (a > b ) ? "plus" : "moins ";
affectation avec opration : += -= *= ...
X +=3; ff quivaut a X=X+3;
ATTENT!ON : distinguer l'affectation (=) et la
comparaison (==)
variables JavaScript
JavaScript est sensible a la casse
Dclaration de variables
optionnelle mais fortement conseille
avec l'instruction var
le type n'est pas prcis lors de la dclaration
initialisation possible lors de la dclaration sinon
valeur undefined
Notion de variables locales et globales
locales a une fonction
globales au document HTNL
Utilisation d'une variable globale d'un autre
document (autre frame)
window.parent.droite.nomvar

<HTNL><HEAD>
<SCR!PT LANGUAGE="JAvASCR!PT1.2">
var Age=Nath.round(70*Nath.random());
var Nom;
var Prenom='Florent';
function affiche() {
var Nom='Dupont';
var Age=Nath.round(10*Nath.random());
document.write(Prenom + ' ' + Nom + ' ' + Age + ' ans<br>');
)
<fSCR!PT>
<fHEAD><BODY>
document.write(Prenom + ' ' + Nom + ' ' + Age + ' ans<br>');
affiche();
<fSCR!PT>
<fBODY><fHTNL>
variables JavaScript
5
variables et types
Le typage a lieu lors de l'initialisation ou d'une
affectation
Le type d'une variable peut changer si on lui affecte
une valeur d'un autre type
Les types de donnes simples
Nombre (Number)
Entier : dcimal ou hexa (0x+F) ou octal (075)
Rel (-2.3+52E-12)
Boolen (Boolean) : true ou false
Chane de caractres (String)
'chaine' ou "chaine"
Les codes t (tabulation) n (a la ligne) r (retour chariot)
b (backspace) f (saut de page) sont reconnus
Conversions de type
Type String = type dominant
JavaScript fait des conversions implicites selon
les besoins
Exemples
N=12; ff N numrique
T="3+"; ff T chane de caractres
X=N+T; ff X est la chane de caractres "123+"
!l existe des types particuliers : null, undefined, objet,
function
et des nombres particuliers : !nfinity, -!nfinity, NaN
(Not a Number)
!nstructions classiques
!nstructions de branchement
if (condition) { instructions; ) [ else { instructions; ) |
Boucles
for (i=1 ; i<N ; i++) { instructions; )
while (condition) { instructions; )
do { instructions; ) while (condition)
for (p in objet) { instructions; )
Sortie d'une boucle
break;
!tration suivante d'une boucle
continue;
typeof(entite) retourne le type de l'entit
!nstructions classiques
Le bloc switch
switch (variable) {
case 'valeur 1':
Code a excuter si "variable == 'valeur 1'";
break;
case 'valeur 2':
Code a excuter si "variable == 'valeur 2'";
break;
case 12:
Code a excuter si "variable == 12";
break;
default:
Code a excuter si tous les autres ont chou;
break;
)
Les fonctions
function nom_f (arg1, ., argN) {
instruction1;
.
instructionN;
return valeur;
)
arguments non typs
nombre d'arguments non fix par la dclaration
Les fonctions - exemple

<HTNL><HEAD>
<SCR!PT LANGUAGE="JAvASCR!PT1.2" SRC="function.js">
<fSCR!PT>
<fHEAD><BODY>
document.write('Aujourd'hui, on est ' + jour() + '<br>');
<fSCR!PT>
<FORN name="naissance"
onSubmit="document.write('vous tes ns un ' +
jour(this.date_naissance.value));">
<center>
Entrez votre date de naissance sous la forme jjfmmfaaaa : <br>
<input type="text" name="date_naissance">
<input type="submit" value="Je veux voir !">
<fcenter>
<fFORN>
<fBODY><fHTNL>
6
Les fonctions - exemple
ff function.js
f* retourne le jour de la semaine si pas d'argument sinon le jour de la semaine
correspondant a la date passe en argument jjfmmfaaaa *f
function jour(arg_date) {
var date_ANJ;
var Semaine = new Array('Dimanche', 'Lundi', 'Nardi', 'Nercredi', 'Jeudi',
'vendredi', 'Samedi');
if (arg_date) {
ff on rcupre arg_date dans un tableau d'entiers
date_JNA = arg_date.split('f');
ff on cre un objet Date en fournissant anne, mois (0-11), jour
date_ANJ = new Date(date_JNA[2|, date_JNA[1|-1, date_JNA[0|);
) else {
ff on cre un objet Date avec la date du jour
date_ANJ = new Date();
)
return Semaine[date_ANJ.getDay()|;
)
Les objets
Pas de classe mais des pseudo-classes
pas de sous-classe
pas d'hritage
uniquement des crations d'objets et la possibilit de
dfinir des proprits "prototype"
syntaxe largement inspire de la programmation objet
Objets prdfinis
accs a une proprit (objet.proprit)
accs a une mthode (objet.mthode)
Cration d'un objet par la dfinition de son
constructeur
Les objets - exemple
ff constructeur de l'objet individu
function individu(N, P, D) {
ff proprits d'un individu
this.nom = N;
this.prenom = P;
this.date = D;
ff mthodes d'un individu
this.age = calcul_age;
)
ff crer une instance de l'objet individu - appel du constructeur avec trois arguments
Pauline = new individu('Pauline', 'Dupont', '3f12f75');
ff modifier une proprit
Pauline.date = '3f12f78';
ff appel de la mthode age()
document.write(Pauline.age{));
ff suppression de l'instance Pauline
delete Pauline;
ff dfinition de la mthode calcul_age
function calcul_age() {
ff date du jour
var date_today = new Date();
ff date de naissance de l'individu
date_indiv = this.date.split('f');
.
return age_indiv;
)
Compltez !
Les objets - la proprit prototype
Toutes les classes JavaScript ont une proprit
particulire "prototype" permettant d'ajouter
une nouvelle proprit ou mthode a une classe
Nom_classe.prototype.New_propriete = valeur_par_defaut;
Nom_classe est une classe prdfinie ou dfinie par
l'utilisateur
New_propriete est le nom de la nouvelle proprit ;
elle est cre pour tous les objets dja instancis ; si
elle existe dja, cela permet de lui affecter une valeur
par dfaut
valeur_par_defaut peut tre une rfrence vers une
fonction si on dsire ajouter une nouvelle mthode
Les tableaux
Construire un tableau sans prciser le contenu
var Tab = new Array();
Construire un tableau en prcisant la taille
var Tab = new Array(3);
!nitialisation du tableau lors de sa cration
var Tab = new Array(t1, ., tN);
-> les indices varient de 0 N-1
-> les ti peuvent tre de types diffrents
proprit length : taille du tableau
Tab.length = N;
La taille du tableau est dynamique
Tableaux et objets
Un tableau est un objet prdfini qui possde
des proprits et des mthodes
Tableaux associatifs : l'indice peut tre une
chane de caractres
Tab['nom'] est quivalent a Tab.nom
Un objet peut tre considr comme un tableau
associatif - exemple de parcours de l'ensemble
des proprits d'un objet :
for (p in window) { ff p est une chane de caractres
document.write('window.'+p+'='+window[p|+'<br>');
)
7
Tableaux et objets

<HTNL><HEAD>
<fHEAD><BODY>
ff p est une chane de caractres
for {p in window.location) {
document.writeln('<b>location.' + p + '<fb>=' + window.location[p| +
'<br>'); )
document.writeln("<hr>");
for {p in window.document) {
document.writeln('<b>document.' + p + '<fb>=' + window.document[p| +
'<br>'); )
document.writeln("<hr>");
for {p in window) {
document.writeln('<b>window.' + p + '<fb>=' + window[p| + '<br>'); )
<fSCR!PT>
<fBODY><fHTNL>
Les objets prdfinis
Les objets prdfinis (1)
L'objet Global qui dfinit un ensemble de
proprits et mthodes communes a tous les
objets
les mthodes et proprits de cet objet n'appartiennent
a aucune classe et cet objet n'a pas de nom
la seule faon de faire rfrence a cet objet est this
chaque variable ou fonction globale est une proprit de
Global
sur un navigateur client, l'objet window est l'objet
Global auquel il a t ajout certaines proprits et
mthodes
proprits de Global : Infinity, NaN, undifined
Olivier Glck - 2007 N1!F - UE PW +0
L'objet Global - quelques mthodes
parseFloat{s) et parseInt{s,base) pour les
conversions string->rel ou entier
isNaN{expr) pour tester une expression numrique
eval{s) permet d'valuer une expression JavaScript
contenu dans la chane de caractre s
escape{s) et unescape{s) pour le codage de type
URL-encod
escape("Hello World!"); ff retourne "Hello20World21"
Les classes prdfinies du noyau JavaScript
Array - objet pour crer les tableaux
Boolean - objet pour crer un Boolen (true ou false)
Date - contient des mthodes de traitement de la date
Function - objet pour crer des fonctions
Math - contient des mthodes et des proprits
mathmatiques (sinus, cosinus, racine carre...)
Number - objet pour crer des nombres
Image - objet de gestion dynamique des images
Option - permet la gestion des listes cres avec
<select> dans les formulaires
RegExp - pour l'utilisation des expression rgulires
String - objet pour crer des chanes
Les objets prdfinis (+)
Les objets instancis automatiquement lors du
dmarrage du browser
permettent d'accder a des informations concernant le
navigateur client, les documents HTNL affichs, l'cran
de la machine
la classe Navigator
une seule instance -> objet navigator
infos sur nom, version, plug-ins installs,.
la classe Window
une instance par fentre et frame du document HTNL
accs a tous les objets crs par des balises HTNL
la classe Screen
une seule instance -> objet screen
infos sur largeur et hauteur en pixels, nombre de
couleurs disponibles,.
8
Hirarchie des objets du navigateur
L'objet window est l'objet
racine :
var t=10; ff nelle proprit
de l'objet window
window.t=10; ff quivalent
a la ligne prcdente
Olivier Glck - 2007 N1!F - UE PW ++
Hirarchie des objets du navigateur
Une image est contenue dans un document qui
est lui mme contenu dans une fentre...
Un champ de saisie est contenu dans un
formulaire qui lui mme est contenu dans un
document...
L'objet navigator (1)
navigator.appName = Netscape nom du browser
permet de diffrencier les navigateurs
navigator.appVersion = +.7 [fr| (Win95; !)
informations sur la plate-forme d'excution
navigator.language = fr (2 caractres)
navigator.platform = Win32 type de machine
navigator.appCodeName = Nozilla nom de code
navigator.userAgent = Nozillaf+.7 [fr| (Win95; !)
informations gnrales envoyes au serveur HTTP a
chaque requte du navigateur
L'objet navigator (2)
navigator.plugins = [object PluginArray| tableau des
plug-ins installs sur le navigateur
var p0 = navigator.plugins[0|.name;
document.write(navigator.plugins[p0|.description);
navigator.mimeTypes = [object NimeTypeArray|
tableau des types mimes reconnus par le navigateur
mimeTypes[0|.type nom du type N!NE ('imagefgif')
mimeTypes[0|.description description du type
mimeTypes[0|.enabledPlugin rfrence vers le plug-in qui gre
ce type
mimeTypes[0|.suffixes listes des suffixes de fichiers grs par
ce type
Les problmes d'incompatibilit
ff vrifie que le navigateur soit au minimum !E+ ou Netscape+
function verifieNav() {
var oldNav = true;
navName = navigator.appName;
navver = parse!nt(navigator.appversion);
if (navName == "Netscape" 88 navver >= +)
oldNav = false;
else if (navName == "Nicrosoft !nternet Explorer" 88 navver >= +)
oldNav = false;
if (oldNav)
alert("Passez a une version plus rcente de votre navigateur !");
)
if (navigator.appName == "Netscape") {
ff Code a excuter avec le navigateur Netscape
) else {
ff Code a excuter avec les autres navigateurs
)
L'objet screen
screen.height hauteur de l'cran en pixels
screen.width largeur de l'cran en pixels
screen.availHeight nombre de pixels disponibles
verticalement (sans les barres de taches, .)
screen.availWidth idem horizontalement
screen.pixelDepth nombre de bits utiliss pour coder
la couleur en pixels
screen.colorDepth nombre de couleurs disponibles
9
La classe Window (1)
Un objet window pour chaque fentre ou cadre
(zone) ouverte par le navigateur
3 proprits de base
window.history qui contient un tableau des URL
dja visites dans la zone (historique)
window.location qui contient les caractristiques de
l'URL de la zone
window.document qui contient les caractristiques
et tous les objets de la zone
La classe Window (2)
Accs aux objets contenus dans l'objet window
rfrence directe a l'objet window de la zone
window.document.bgcolor = 'blue';
rfrence a un objet window d'une autre zone par
l'intermdiaire d'une proprit
window.top.cadre_droit.document.bgcolor = 'blue';
window.parent.frames[1|.document.bgcolor = 'blue';
rfrence a un objet window d'une autre zone par
l'intermdiaire d'une variable
var new_window=window.open('test.html');
new_window.document.bgcolor = 'blue';
Principales proprits de window (1)
document contient des mthodes et
informations sur le document (voir aprs)
history permet d'avoir accs a l'historique d'une
page (voir aprs)
location permet d'avoir accs a toutes les
informations de l'URL (voir aprs)
external cet objet permet d'avoir accs a
certaines proprits du navigateur et de les
modifier, telles que la page d'accueil, les favoris
(!E uniquement)
frames[] permet d'avoir accs aux cadres ; on
peut galement utiliser directement le nom du
cadre
parent, self, top permettent d'accder aux
autres cadres
defaultStatus permet de prciser la valeur par
dfaut du texte a afficher dans la barre d'tat
(quand la souris est sur le fond de la zone)
status permet de prciser la valeur du texte a
afficher dans la barre d'tat a un instant donn
closed boolen qui permet de savoir si la zone a
t ferme
opener retourne l'objet window qui a ouvert
cette fentre (avec la mthode open())
Autres proprits relatives aux caractristiques
de la zone (dimensions, positionnement)
innerHeight, innerWidth, outerHeight, outerWidth,
pageXOffset, pageYOffset, screenX, screenY
Principales mthodes de window (1)
La mthode open{)
win = window.open(URL, nom_zone, options);
options boolennes (yes ou no) : fullscreen, menubar,
toolbar, scrollbars, status, resizable
options en pixels : height, width, left, top
La mthode close{)
window.close();
demande de confirmation a l'utilisateur si la zone n'a
pas t ouverte avec open()
La mthode alert{)
window.alert(message);
ouvre une fentre d'alerte ou s'affiche message avec
un bouton OK qui permet de fermer la fentre
10
La mthode focus{)
window.focus(); rend la zone active
La mthode blur{)
window.blur(); rend la zone non active
La mthode prompt{)
chaine = window.prompt(message, valeur_defaut);
ouvre une fentre compose d'un message et d'un
champ de saisie et retourne la valeur saisie
La mthode confirm{)
bool = window.confirm(message);
ouvre une fentre avec message, boutons OK et
Annuler et retourne true (OK) ou false (Annuler)
La mthode back{)
window.back(); renvoie sur la page prcdente
La mthode forward{)
window.forward(); renvoie sur la page suivante
La mthode home{)
window.home(); renvoie sur la page d'accueil du browser
La mthode stop{)
window.stop(); stoppe le chargement de la zone
La mthode find{)
chaine = window.find(chaine, casse, sens);
recherche la chane dans la zone
Principales mthodes de window (+)
La mthode print{)
permet d'imprimer le document courant comme si
l'utilisateur avait cliqu sur le bouton "imprimer"
Les mthodes setTimeout{) et clearTimeout{)
timeout = window.setTimeout(codeJS, msec);
timeout = window.setTimeout(func, msec, arg1,.,argN);
window.clearTimeout(timeout);
Les mthodes setInterval{) et clearInterval{)
idem mais excutions priodiques toutes les msec
interval = window.set!nterval(codeJS, msec);
interval = window.set!nterval(func, msec, arg1,.,argN);
window.clear!nterval(interval);
DHTNL !
Principales mthodes de window (+)
Les mthodes moveBy{) et moveTo{)
permettent de dplacer la zone
window.moveBy(dx,dy); ff dx pixels vers la droite, dy vers le bas
window.moveTo(x,y); ff (x,y) = coin suprieur gauche
Les mthodes resizeBy{) et resizeTo{)
permettent de redimensionner la zone
window.resizeBy(dw,dh); ff dw pixels d'augmentation de la largeur.
window.resizeTo(l,h); ff largeur et hauteur en pixels
Les mthodes scrollBy{) et scrollTo{)
permettent de faire dfiler la zone
window.scrollBy(dx,dy); ff dfilement de dx pixels vers la droite...
window.scrollTo(x,y); ff le point (x,y) du document est affich dans le
coin suprieur gauche de la fentre
Les vnements associs a window
onFocus - excuter du code JS quand la fentre
devient active
<BODY onFocus="codeJS"> ou
window.onfocus=f; ff f est une fonction ou null
onBlur - idem mais quand la fentre devient
non active
onerror - excuter une fonction quand survient
une erreur dans le code JavaScript
window.onerror=f; ff f est une fonction ou null
Et aussi : onload, onunload , onmove,
onresize
La proprit history de window
window.history est un objet qui permet
d'avancer ou reculer dans l'historique du browser
associe a la zone
Trois mthodes : back{), forward{) et go{int)
window.history.back(); ou window.history.forward();
window.history.go(-2); retourne 2 documents en arrire
window.history.go(3); retourne 3 documents en avant
window.history.go(0); recharge le document courant
<a href="javascript:window.history.back();">Retour<fa>
11
La proprit location de window (1)
window.location est un objet qui contient des
informations sur l'URL de la zone
Deux mthodes : reload{) et replace{URL)
window.location.reload(); recharge le document courant
window.location.replace(URL); remplace le document
courant par celui dont l'URL est pass en paramtre
mais sans changer l'historique du navigateur
Les proprits
window.location.href contient la totalit de l'URL ;
permet de charger une URL dans une autre fentre
La proprit location de window (2)
Les proprits (suite.)
window.location.hash partie de l'URL situe aprs le #
window.location.host nom du serveur et port
window.location.hostname nom du serveur
window.location.port numro du port sur le serveur
window.location.pathname entre le nom d'un script
CG! et le ?
window.location.protocol nom du protocole
window.location.search partie de l'URL situe aprs le
? ; permet de rcuprer les donnes d'un formulaire en
mthode GET
La proprit document de window (1)
Les principales proprits
titre du document : document.title
couleur du texte : document.fgColor
couleur du fond : document.bgColor
couleur de liens : document.linkColor
couleur de liens visits : document.vlinkColor
couleur de liens activs : document.alinkColor
adresse du document : document.URL
URL du document prcdent : document.referrer
date de dernire modification : document.lastModified
il y a beaucoup d'autres proprits lies aux balises
<body>, <img>, <form>, <a>, <area>, .
Les principales proprits (de type collection)
anchors[] tableau des liens internes <A NANE=...>
applets[] tableau des applets <APPLET CODE=...>
embeds[] tableau des objets insrs <ENBED SRC=...>
forms[] tableau des formulaires <FORN>
elements[] tableau des composants du formulaire
<!NPUT...>, <SELECT...>, ...
images[] tableau des images <!NG SRC=...>
links[] tableau des liens (hypertextes et images cliquables)
<A HREF=...>
all[| rfrence tous les lments HTNL du document dans
l'ordre d'apparition dans le source (!E seulement)
layers[| rfrence tous les blocs D!v (Netscape seulement)
Accs a un objet du document
<form name="mon_form">
<input type="text" name="t1" value="z1">
<input type="submit" name="b1" value="go">
<fform>
<l-- l'attribut id permet de donner un nom un lment -->
<a id="mon_lien" href="f1.html">lien1<fa>
<script>
ff forms[0|, forms['mon_form'| et mon_form sont quivalents
document.forms[0|.elements[0|.value = 'z2';
document.mon_form.b1.value = 'Envoyer'; JJ car attribut name
document.links[0].href = document.URL; JJ standard
if (navigator.appName == "Netscape")
document.links['mon_lien'].target='_blank'; JJ Netscape seulement
if (navigator.appName == "Nicrosoft !nternet Explorer")
document.all.mon_lien.target='_blank'; JJ IE seulement
<fscript>
La proprit document de window (+)
Accs au contenu de <p>, <div>, . ?
Principales mthodes d'accs a un objet du
document (DON niveau 2)
getElementById{"id1") retourne l'lment du
document dont l'attribut id vaut "id1" (null sinon) ; id1
doit tre unique
document.getElementById{"mon_lien").target='_blank';
getElementsByName{"mon_form") retourne le
tableau des lments dont l'attribut name vaut
"mon_form" (tableau de longueur nulle sinon)
getElementsByTagName{"h1") retourne le tableau
des lments du document de type "h1" (l'argument
est un nom de balise)
permet d'atteindre tous les liens du document, ...
12
Principales mthodes
write{arg1, ., argN) affiche les chanes ou les
arguments traduits en chanes
writeln{arg1, ., argN) idem que write() mais
ajoute un retour chariot non interprt par HTNL
open{) cre un nouveau document (vide l'ancien)
dans lequel on peut crire avec write(), ne pas
confondre avec la cration d'une fentre !
close{) ferme le document et provoque l'affichage de
ce qui a t crit avec write(), ne pas confondre avec
la fermeture d'une fentre !
getSelection{) retourne une chane de caractres
contenant le texte slectionn dans le document

<HTNL><HEAD>
<SCR!PT LANGUAGE="JAvASCR!PT" SRC="function.js">
<fSCR!PT>
<fHEAD><BODY>
<div id="title1" style="position:absolute; top:50; left:20;">
<h1>DHTNL...<fh1>
<fdiv>
<div style="position:absolute; top:10; left:250;">
<a href="javascript:changeText();">Nodifier le texte<fa><br>
<a href="javascript:changeColor();">Nodifier la couleur<fa><br>
<a href="javascript:changePosition();">Dplacer le bloc<fa>
<a href="javascript:AfficheBloc();">Affiche le bloc<fa>
<a href="javascript:NasqueBloc();">Nasque le bloc<fa>
<fdiv>
<script language="JavaScript">
var elm = document.getElementById{'title1');
<fscript>
<fBODY><fHTNL>
ff function.js
function changeText() {
elm.innerHTML="<b><i>... est dynamique !<fi><fb>";
f* outerHTNL permet de tout rcrire (marqueurs compris)
elm.outerHTML="<div id="title1" style="background-color:
gold;">... est dynamique !<fdiv>" *f
)
function changeColor() {
elm.style.color="#00FF00";
)
function changePosition() {
elm.style.top="+00";
elm.style.left="+00";
)
Les vnements
Les vnements (1)
Des vnements sont associs aux actions de
l'utilisateur et a certaines balises
notion de couple (objet, vnement)
permet d'excuter du code JavaScript lorsque
l'vnement se produit sur l'objet associ
Exemples d'vnements
un lien hypertexte est sensible au clic ou au passage
de la souris
un formulaire est sensible au fait d'tre soumis
une page est sensible au fait d'tre charge
Les vnements (2)
Deux faons d'associer une action a un couple (objet,
vnement)
utiliser des attributs de balise spcifiques associs aux
vnements
<a href="index.html" onMouseOver="alert('bonjour');">cliquez ici<fa>
indiquer pour un lment et un vnement donns la
fonction qui devra tre excute
<body><a id="l1" href="index.html">cliquez ici<fa><fbody>
<script>
function bonjour() { alert('bonjour'); );
document.links[0|.onmouseover=bonjour;
<fscript>
13
Les vnements (3)
La classe event
quand un vnement se produit, le navigateur cre un
objet event avec les proprits suivantes :
type chane indiquant le type de l'vnement
target objet sur lequel l'vnement est dclench
layerX, layerY position de la souris en pixels dans la couche
pageX, pageY position de la souris en pixels dans la page
screenX, screenY position de la souris en pixels dans
l'cran
on accde a l'objet event par
event.xxxx dans l'attribut de la balise capturant l'evt
event qui peut tre pass en paramtre de la fonction
associe a l'evt
Les vnements (+)
Attribut Balises concernes Dclenchement de l'vnement
onAbort !NG L'utilisateur interrompt le chargement d'une image
onBlur
BODY, FRANESET, <!NPUT
txt,pwd>, <TEXTAREA>
Un lment n'est plus actif (perd le focus)
onChange <!NPUT txt,pwd>, <TEXTAREA> L'utilisateur a changer la valeur d'un champ de saisie
onClick <A>, <AREA>, <!NPUT others> L'utilisateur clique sur un objet
onDbClick <A>, <AREA>, <!NPUT others> L'utilisateur double-clique sur un objet
onError !NG ou window.onerror
Une erreur se produit lors du chargement d'une image
ou de l'excution d'un code JavaScript
onFocus
BODY, FRANESET, <!NPUT
txt,pwd>, <TEXTAREA>
Un lment devient actif (reoit le focus)
onKeyDown <!NPUT txt,pwd>, <TEXTAREA> L'utilisateur appuie sur une touche
onKeyPress <!NPUT txt,pwd>, <TEXTAREA> L'utilisateur appuie, puis relache une touche
onKeyUp <!NPUT txt,pwd>, <TEXTAREA> L'utilisateur relache une touche
onLoad BODY, FRANESET, !NG Un document ou une image commence a se charger
onMouseDown <A>, <AREA>, <!NPUT others> L'utilisateur appuie sur un bouton de la souris
onMouseMove seulement interceptable L'utilisateur dplace la souris
onMouseOut <A>, <AREA>, <!NPUT others> L'utilisateur fait ressortir la souris de l'objet
onMouseOver <A>, <AREA> L'utilisateur place la souris sur un objet
onMouseUp <A>, <AREA> L'utilisateur relache un bouton de la souris
onMove BODY, FRANESET L'utilisateur dplace une fentre
onReset FORN Un formulaire est rinitialis par un bouton reset
onResize BODY, FRANESET L'utilisateur redimensionne une fentre ou un cadre
onScroll BODY, FRANE L'utilisateur se sert des barres de dfilement de la page
onSelect <!NPUT txt,pwd>, <TEXTAREA> L'utilisateur slectionne du texte dans un champ
onSubmit FORN Un formulaire est soumis (bouton submit)
onUnload BODY, FRANESET Un document se dcharge (chargement d'un autre doc)
Les vnements (5)
Pour la plupart des vnements, le navigateur
possde dja un comportement par dfaut (ex:
chargement du document lors du click sur un lien)
Quand un vnement est intercept, le
navigateur excute d'abord le traitement
JavaScript dfini dans la page puis le traitement
par dfaut
Pour empcher le traitement par dfaut, il faut
retourner la valeur false :
<a href="l.html" onClick="return confirm('continue ?');">lien<fa>
Les objets du noyau JavaScript
L'objet String
Proprit : length
Principales mthodes de manipulation de chanes
indexOf(chaine,index),
substring(dbuf,fin+1), charAt(n),
last!ndexOf(chaine), toLowerCase(),
toUpperCase(), split(), toString()
var T = Bonjour;
T.indexOf ("o"); --> 1
T.last!ndexOf("o"); --> +
T.charAt(3); --> j
T.substring(3,7); --> jour
T.toUpperCase(); --> BONJOUR
L'objet Nath
Proprits : constantes mathmatiques
E, P!, SQRT2, SQRT1_2 (1fSQRT2), LN2, LN10,
LOG2E, LOG10E
Nthodes : fonctions usuelles
trigonomtriques : cos, sin, tg, acos, atan, asin, atan2
abs (valeur absolue)
ceil (entier sup), floor (entier inf), round (entier +
proche)
exp, log, sqrt, pow(x,a)
max (a,b), min (a,b)
random --> 0 < r < 1
1+
L'objet Array
Proprit : length (nombre d'lments)
Principales mthodes :
join concatne tous les lments en une chane de
caractres spars par une virgule ou un sparateur
pass en argument
reverse transpose le tableau (1<->N 2<-> N-1...)
sort trie les lments dans l'ordre lexicographique ou
selon la relation d'ordre passe en argument (fonction
de comparaison fournie par l'utilisateur)
Quelques exemples classiques
Changement de la couleur de fond

<HTNL><BODY><CENTER>
<FORN>
<SELECT NANE="couleur"
onChange="document.bgColor=this.options[this.selected!ndex|.value;">
<OPT!ON selected vALUE="" >Choisissez une couleur de fond
<OPT!ON vALUE="blue">Bleu
<OPT!ON vALUE="aquamarine">vert clair
<OPT!ON vALUE="darkred">Narron
<OPT!ON vALUE="gold">Or
<OPT!ON vALUE="red">Rouge
<OPT!ON vALUE="yellow">Jaune
<OPT!ON vALUE="hotpink">Rose
<OPT!ON vALUE="#000000">Noir
<OPT!ON vALUE="#FFFFFF">Blanc
<fSELECT><fFORN><fCENTER><fBODY>
alert() et formulaires

<HTNL><HEAD><SCR!PT LANGUAGE="Javascript">

<fSCR!PT><fHEAD><BODY><CENTER>
<A HREF="javascript:pop_up('Nessage 01 !');">NESSAGE 01<fA>
<FORN ACT!ON="toto.html" onSubmit="confirm('Soumission');">
<!NPUT type="button" value="NESSAGE 02" onClick="pop_up('Nessage
02 !');">
<!NPUT type="submit" value="Envoyer" onClick="pop_up('Nessage 03
!');">
<fFORN>
<fCENTER><fBODY><fHTNL>
Conversions FrancsfEuros

<HTNL><HEAD><SCR!PT LANGUAGE="JavaScript">
function f2e (form)
{ form.eur.value = form.fra.valuef6.55957; )
function e2f (form)
{ form.fra.value = form.eur.value*6.55957; )
<fSCR!PT><fHEAD><BODY>
<FORN name="fe">
<!NPUT TYPE="text" name="fra" size="15"
onChange="f2e(document.fe);"> F<br>
<!NPUT TYPE="text" name="eur" size="15"
onChange="e2f(document.fe);"> Euros
<fFORN>
Calculs effectus sur la base de<BR>
1F = 6.55957 Euros
<fBODY><fHTNL>
Affichage de l'heure

<HTNL><HEAD>
<SCR!PT LANGUAGE="JavaScript1.2">
var t=null;
function affiche_heure() {
var now = new Date();
var hrs = now.getHours();
var min = now.getNinutes();
var sec = now.getSeconds();
document.heure.h.value = hrs;
document.heure.m.value = min;
document.heure.s.value = sec; )
function start() { t = set!nterval(affiche_heure,1000); )
function stop() { clear!nterval(t); )
function restart() { window.location.reload(); )
<fSCR!PT><fHEAD>
<BODY onLoad="start{);">
<FORN NANE="heure">
<!NPUT TYPE="text" NANE="h" S!ZE=2>
<!NPUT TYPE="text" NANE="m" S!ZE=2>
<!NPUT TYPE="text" NANE="s" S!ZE=2>
<!NPUT TYPE="button" vALUE="STOP" onClick="stop{);">
<!NPUT TYPE="button" vALUE="CONT!NUE" onClick="restart{);">
<fFORN><fBODY><fHTNL>
15
Test d'une adresse mail

<HTNL><HEAD>
<SCR!PT LANGUAGE="JavaScript">
function verifNail(adresse) {
if (adresse == "" ) {
alert ("vous n'avez pas saisi votre adresse");
document.forms[0|.email.focus(); return false;
)
arob = adresse.indexOf('@');
if (arob == -1) {
alert ("Adresse incorrecte (pas de @)"); document.forms[0|.email.value="";
document.forms[0|.email.focus(); return false; )
site = adresse.substring(arob+1);
if (site == "ens-lyon.fr" ) { return confirm('c'est bon ! On envoie ?'); )
else { alert ("site : "+ site +" incorrect"); return false; )
)
<FORN name="formulaire" action="toto.html" onSubmit="return
verifNail(document.formulaire.email.value);">
Entrez votre adresse e-mail : <BR>
<!NPUT TYPE="text" NANE="email" S!ZE="20" NAXLENGTH="+0">
<!NPUT TYPE="submit" vALUE="Envoyer">
Cration d'une fentre

var maFen=null;
function ouvrir() {
var options = "width=300,height=30";
ff window.open(url, nom-pour-target, caractristiques)
maFen = window.open("", "Na_Fenetre", options);
maFen.document.open();
maFen.document.write("Exemple JavaScript");
maFen.document.close();
)
function fermer() {
maFen.close();
)
Passez sur ce <A HREF="" onNouseOver="ouvrir();"
onNouseOut="fermer();">lien <fa>
sans cliquer<br>
!l doit se passer quelque chose... et ensuite sortez du lien
<fBODY><fHTNL>
Texte dfilant

var posBan1=0, ban1, msgBan1, sp="";
function banniere1(delai) {
for (i=1;i<35;i++) sp=sp+" ";
msgBan2=sp+msgBan1+sp;
ban1 = set!nterval(banniere2,delai);
)
function banniere2(delai) {
if (posBan1 >= 2*msgBan1.length) posBan1 = 0;
document.formBan1.Fbanniere1.value =
msgBan2.substring(posBan1,posBan1+msgBan1.length);
posBan1++;
)
<fSCR!PT><fHEAD><BODY onLoad="msgBan1='voici un exemple de
texte defilant '; banniere1(500);" onUnload="clearTimeout(ban1);">
<FORN NANE="formBan1">
<!NPUT TYPE="text" NANE="Fbanniere1" S!ZE="35">
JavaScript et les images

var img = new !mage(+00,+00);
ff permet d'acclrer le chargement de l'image
ff (pr-chargement de img1.gif dans le cache du navigateur)
img.src = "img1.gif"
<!NG src="img0.gif" width="100" height="100"
onNouseOver="this.src='img1.gif';this.width=+00;this.height=+00;"
onNouseOut="this.src='img2.gif';this.width=200;this.height=200;">
<fBODY><fHTNL>

Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

1

Partie 2 - Le langage JavaScript

Vous aimerez peut-être aussi