doc"Objets" en JavaScript
download 
Plainte Transcription
"Objets" en JavaScript
"Objets" en JavaScript
• Avec les objets COM de Visual Basic et les (vrais) objets Java,
encore une autre notion d'objet informatique...
• Les objets de Javascript sont en fait des "tableaux associatifs"
(c-à-d. des tableaux indexés par des chaînes), avec une une
syntaxe pointée (y compris l'instruction with, absente en
Java) pour les utiliser et une primitive new pour les créer.
• Comme les "vrais" objets ils ont des propriétés (champs =
données) et des comportements (méthodes = procédures)
– propriétés et comportements sont traités de la même façon
car en Javascript les fonctions sont des données !
• Mais il n'y a ni classes, ni héritage...
Objets
Constantine 2005 J-F. Perrot
1
"Objets" prédéfinis en JavaScript
• La notation pointée permet de manipuler aisément une grande
quantité d'objets dont le type est prédéfini : String, Date, etc.
• Dans le jargon (le "métalangage") employé pour parler de
JavaScript, on dit "l'objet String", " l'objet Date", etc. (et
même de "l'objet Math" !!!).
Il vaudrait certes mieux parler de classes, mais il n'y a pas de
classes en JavaScript... On préfère donc dire "n'importe quoi" !
• Exemple : les chaînes de caractères sont des "objets"
"abc".length --> 3 // length est une "propriété"
"abc".toUpper() --> "ABC" // toUpper est une "méthode"
"abc".toUpper().length --> 3
Objets
Constantine 2005 J-F. Perrot
2
<html> <head> <title> Essai de date </title> </head>
<body> <p>Debut</p> <p>
<script type="text/javascript">
var aujourdHui = new Date();
var
var
var
var
var
var
var
leQuantieme = aujourdHui.getDate();
leJourDeLaSemaine = aujourdHui.getDay();
leMois = aujourdHui.getMonth();
lAnnee = aujourdHui.getFullYear();
lHeure = aujourdHui.getHours();
laMinute = aujourdHui.getMinutes();
laSeconde = aujourdHui.getSeconds();
Les Dates
en JavaScript
date.html
document.write("<h3> Nous sommes le jour : " + leQuantieme);
document.write(" du mois : " + leMois);
document.write(" de l\'année : " + lAnnee + ".<br /> />");
document.write("Ce jour est un : " + leJourDeLaSemaine + ".<br /> />");
document.write("Il est : " + lHeure + " heures ");
document.write(laMinute + " minutes " + laSeconde + " secondes </h3>");
document.write("<h1>Bonne Année, Heureux Siècle, Excellent _
Millénaire </h1>");
</script>
</p><p>Fin</p> </body></html>
Objets
Constantine 2005 J-F. Perrot
3
Une Date particulière
Objets
Constantine 2005 J-F. Perrot
4
Constantes & fonctions "mathématiques"
• Comme en Java, un certain nombr />e de constantes (p.ex.
PI) et de fonctions à caractère "mathématique" sont
regroupées en un "module" appelé Math.
Par analogie avec Java, on emploie la notation pointée
" Math.xxx" pour les désigner :
Math.abs(-5) --> 5 ;
Math.max(5, 7) --> 7 ;
Math.PI --> 3.1416... ; Math.random() --> ???
• Puisqu'il n'y a pas de classes en JavaScript, on ne peut pas
parler comme en Java de la classe Math et de ses attributs
et méthodes de classe (alias static members).
On est donc amené pour expliquer cette notation à proférer
une monstruosité : the Math Object... que je préfère ne pas
traduire en français !
Objets
Constantine 2005 J-F. Perrot
5
Objets "fenêtres" vs. objets "documents"
• JavaScript distingue dans le fonctionnement d'une page
– ce qui concerne son cadre (la fenêtre : dimensions, position,
bordures, affichage de différents attributs, outils et autres)
– ce qui concerne son contenu (le document : ce qui est
affiché dans la page).
• Ces deux ordres de préoccupations sont pris en compte par
deux genres d'objets : les fenêtres (Window) et les
Documents.
• La difficulté est de savoir exactement à qui on doit s'adresser
pour réaliser telle ou telle tâche...
Objets
Constantine 2005 J-F. Perrot
6
La fenêtre comme "objet fondamental"
(1) L'espace des noms
L'unité fondamentale dans le modèle-objet de JavaScript est la
fenêtre du navigateur, représentée par un "objet Window".
(1) Toutes les entités JavaScript lui appartiennent (on dit qu'il
définit l'espace des noms - name space)
• Toutes les fonctions (standard comme alert, confirm, etc.
ou définies par l'utilisateur) sont en fait des méthodes de l'objet
Window où elles sont déclarées.
• Toutes les variables globales sont en fait des propriétés de
l'objet Window où elles sont déclarées.
• Il s'ensuit que deux fonctions ou deux variables globales
différentes pourront porter le même nom, à condition d'être
déclarées dans des fenêtres différentes.
Objets
Constantine 2005 J-F. Perrot
7
La fenêtre comme "objet fondamental"
(2) La hiérarchie de composition
(2) La fenêtre est la racine de l'arbre d'objets représentant la page :
• p. ex. elle détient comme propriété l'objet document...
• esquisse de cet arbre :
elements[ ]
forms[ ]
navigator
La fenêtre
history
Window
location
anchors[ ]
links[ ]
images[ ]
document
applets[ ]
Button
Checkbox
Hidden
Password
Radio
Reset
Select
Submit
Text
textarea
options[ ]
Pour chaque objet o dans la page, il y a un chemin unique de la fenêtre à o.
Objets
Constantine 2005 J-F. Perrot
8
Questions de désignation : contexte
• Tout fragment de code JavaScript s'exécute dans le contexte
d'un objet.
– tous les objets dont les noms sont connus dans ce contexte
peuvent être désignés directement :
ainsi par exemple : alert("bla bla")
• Exemple : soit un handler d'un objet Button, élément d'un
formulaire :
– la place du bouton dans l'arbre des objets de la page est
La fenêtre
document
form
button
– dans le handler, on peut donc utiliser les noms définis dans
la fenêtre, dans le document, dans le formulaire qui
contient le bouton, et enfin dans le bouton lui-même.
Objets
Constantine 2005 J-F. Perrot
9
Ex. Désignations
<html> <head> <script type="text/javascript">
var vb = "la value de ce bouton est : "
var frc = "le formulaire contient "
var elts = " elements\n"
var dc = "le document contient "
var frs = " formulaires\n"
var tlf = "la taille de la fenêtre est : "
var pxs = " pixels"
</script></head>
<body> <form>
<p> <textarea name="Aff" rows=5 cols=50> </textarea></p>
<input type="button" value="Pour voir"
Designation.html
onClick =
"Aff.value=vb+value+'\n'+frc+elements.length+elts+dc+
forms.length+frs+tlf+innerHeight+' x '+innerWidth+pxs">
</form> </body> </html>
La fenêtre
Objets
document
form
Constantine 2005 J-F. Perrot
button
10
Questions de désignation : ambiguïté ?
• Quid si le même nom est défini à deux niveaux différents ?
– l'évolution du système tend à éliminer ces situations
• C'est la désignation la plus locale qui prime, mais il vaut mieux
lever l'ambiguïté, en désignant explicitement l'objet visé
– l'objet Window représentant la fenêtre active est accessible
par la propriété implicite window, aussi appelée self
– dans notre exemple, les noms complets seraient :
window.document.forms[0].elements[1].value
window.document.forms[0].elements.length
window.document.forms.length
window.innerHeight
window.innerWidth
Objets
Constantine 2005 J-F. Perrot
11
Deux fonctionnalités des objets Window
(il y en a bien d'autres !)
• La status line gérée à travers deux propriétés
– status (déjà vu) pour messages transitoires
– defaultStatus pour messages permanents
• La gestion du temps :
– setTimeout(uneChaînedeCode, unDélai)
exécute l'action spécifiée par la chaîne
uneChaînedeCode
après unDélai compté en millisecondes :
setTimeout("alert('Avez-vous fini ?')", 5000)
SetTimeout.html
Objets
Constantine 2005 J-F. Perrot
12
Exemple : une horloge
<html> <head>
<script type="text/javascript">
function showtime(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var timevalue = "" + ((hours > 12) ? hours - 12 : hours)
timevalue += ((minutes < 10) ? ":0" : ":") + minutes
timevalue += ((seconds < 10) ? ":0" : ":") + seconds
timevalue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timevalue
<body onLoad="showtime()">
defaultStatus = timevalue
<form name="clock">
setTimeout("showtime()",1000)
<input type="text"
}
name="face" size="15" />
</script>
</form>
</head>
Showtime.html
</body> </html>
Objets
Constantine 2005 J-F. Perrot
13
Fenêtres : ouverture et fermeture
• Les objets Window possèdent (entre autres) une méthode
open() et une méthode close()
– les objets Document aussi, avec des significations
différentes ! Il faut donc préciser...
• window.close() ferme la fenêtre courante
– setTimeout("window.close()", 5000)
• window.open()ouvre une nouvelle fenêtre !!!
– il lui faut comme arguments
• une URL où trouver un document à y charger (éventuellt. vide)
• un nom désignant la fenêtre en question (voir plus loin)
• différentes caractéristiques optionnelles
– renvoie comme résultat un pointeur sur la fenêtre créée.
Objets
Constantine 2005 J-F. Perrot
14
message en réponse à la question posée
