"Objets" en Javascript: Objets Constantine 2005 J-F. Perrot

"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

<html> <head> <title> Essai de date </title> </head>
<body> <p>Debut</p> <p>
<script type="text/javascript">
var aujourdHui = new Date();

Les Dates
var leQuantieme = aujourdHui.getDate();
en JavaScript
var leJourDeLaSemaine = aujourdHui.getDay();
var leMois = aujourdHui.getMonth();
var lAnnee = aujourdHui.getFullYear(); date.html
var lHeure = aujourdHui.getHours();
var laMinute = aujourdHui.getMinutes();
var laSeconde = aujourdHui.getSeconds();
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>

Une Date particulière

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 "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...

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.
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 Button
Checkbox
anchors[ ]
history Hidden
La fenêtre Password
links[ ]
Window location Radio
images[ ] Reset
Select options[ ]
document
Submit
applets[ ] Text
textarea
Pour chaque objet o dans la page, il y a un chemin unique de la fenêtre à o.

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.
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 document form button

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

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
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
defaultStatus = timevalue <body onLoad="showtime()">
setTimeout("showtime()",1000) <form name="clock">
<input type="text"
}
name="face" size="15" />
</script>
</form>
</head> Showtime.html </body> </html>

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" en Javascript: Objets Constantine 2005 J-F. Perrot

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

"Objets" en Javascript: Objets Constantine 2005 J-F. Perrot

Transféré par

Droits d'auteur :

Formats disponibles

"Objets" en JavaScript

Objets Constantine 2005 J-F. Perrot 1

Objets Constantine 2005 J-F. Perrot 2

var aujourdHui = new Date();

document.write("<h3> Nous sommes le jour : " + leQuantieme);

Objets Constantine 2005 J-F. Perrot 3

Objets Constantine 2005 J-F. Perrot 4

• Comme en Java, un certain nombr />e de constantes (p.ex.

• JavaScript distingue dans le fonctionnement d'une page

Objets Constantine 2005 J-F. Perrot 6

Pour chaque objet o dans la page, il y a un chemin unique de la fenêtre à o.

– dans le handler, on peut donc utiliser les noms définis dans

<p> <textarea name="Aff" rows=5 cols=50> </textarea></p>

La fenêtre document form button

Objets Constantine 2005 J-F. Perrot 11

timevalue += ((minutes < 10) ? ":0" : ":") + minutes

Objets Constantine 2005 J-F. Perrot 13

Vous aimerez peut-être aussi