Javascript et la programmation objet
On l’a dit en introduction javascript est un langage orienté objet. Nous verrons quelques applications dans les exemples sophistiqués de code.
Cela étant, javascript offre un certain nombre d’objets prédéfinis et de méthodes et propriétés associés.
Les propriétés sont des caractéristiques de l’objet ayant une certaine valeur.
On accède aux propriétés d’un objet grace à l’opérateur ‘.’ précédé du nom de l’objet et suivi du nom de la propriété.
nom_objet.nom_propriété
Ainsi un objet ‘chaîne de caractères’ � une propriété fréquemment utilisée qui est sa longueur, notée ‘length’.
<script type= »text/javascript »>
var message= »Bonjour � tous »
document.write(message.length)
</script>
Parallèlement les méthodes sont des actions qui peuvent être effectuées sur l’objet auxquelles elles sont associées. La notation est la même que pour les propriétés avec ‘.’
nom_objet.nom_méthode
Il existe par exemple des méthodes pour l’objet chaîne de caractères pour le passer en majuscule, minuscule, gras, extraire une sous-chaîne, etc.
<script type= »text/javascript »>
var message= »BONJOUR aTous »
document.write(message.toLowerCase())
</script>
les objets (prédéfinis) du langage javascript
ces objets sont organisés hiérarchiquement de la façon suivante
On trouvera ci-après les propriétés et méthodes des principaux objets manipulables en javascript
| Built-in Objects | |||
| Array | length | join reverse sort xx |
|
| Date | none | getDate getDay getHours getMinutes getMonth getSeconds getTime getTimeZoneoffset getYear parse prototype setDate setHours setMinutes setMonth setSeconds setTime setYear toGMTString toLocaleString UTC |
|
| String | length prototype |
anchor big blink bold charAt fixed fontColor fontSize indexOf italics lastIndexOf link small split strike sub substring sup toLowerCase toUpperCase |
|
voici un exemple d’utilisation ou l’on affiche le jour de la seamine avec fonction ‘getday()’ de l’objet ‘date ‘
<script type= »text/javascript »>
var j=new Date()
var jours=new Array(7)
jours[0]= »dimanche »
jours[1]= »lundi »
jours[2]= »mardi »
jours[3]= »mercredi »
jours[4]= »jeudi »
jours[5]= »vendredi »
jours[6]= »samedi »
document.write(« Nous sommes un » + jours[j.getDay()])
</script>
Pour plus d’information voir les extraits du manuel de référence W3schools ci après :
Les objets du navigateur
ces objets sont organisés hiérarchiquement de la façon suivante
On trouve dans le tableau suivant� les ppropriétés, méthodes et événemens associées aux principaux objets du navigateur
| arbre des objets du navigateur | ||||
| Objet | Propriétés | Methodes | gestionnaire d’événement | Example –> |
| Window | defaultStatus frames opener parent scroll self status top window |
alert blur close confirm focus open prompt clearTimeout setTimeout |
aucun | |
| Frame | defaultStatus frames opener parent scroll self status top window |
alert blur close confirm focus open prompt clearTimeout setTimeout |
||
| Location | hash host hostname href pathname por protocol search |
reload replace |
||
| History | length forward go |
back | ||
| Navigator | appCodeName appName appVersion mimeTypes plugins userAgent |
javaEnabled | ||
| document | alinkColor anchors applets area bgColor cookie fgColor forms images lastModified linkColor links location referrer title vlinkColor |
clear close open write writeln |
aucun (les gestionnaires d’événement onLoad et onUnload appartiennent � l’objet Window) | |
| image | border complete height hspace lowsrc name src vspace width |
none | ||
| form | action elements encoding FileUpload method name target |
submit reset |
onSubmit onReset |
|
| text | defaultValue name type value |
focus blur select |
onBlur onCharge onFocus onSelect |
|
on peut par exemple afficher quelques information concernant le document ouvert en utilisant les propriétés de l’objet document
<html>
<head> <title> mon document </title></head>
<body>
<a name=toto href »toto.htm »>un premier lien � cliquer</a><br />
<a name=tata href »tata.htm »>…et un deuxieme</a><br />
<br />
qq infos sur ce document:<br />
<script type= »text/javascript »>
document.write(« son titre : » + document.title� + « <BR> »)
document.write(« son adresse : » + document.URL� + « <BR> »)
document.write(« le texte du 1er lien : » + document.anchors[0].innerHTML)
</script>
</body>
</html>
ce qui nous donne à l’écran
les fonctions et propriétés racines applicables � tous les objets
FF: Firefox, N: Netscape, IE: Internet Explorer
| Fonction | Description | FF | N | IE |
|---|---|---|---|---|
| decodeURI() | Decodes an encoded URI | 1 | 4 | 5.5 |
| decodeURIComponent() | Decodes an encoded URI component | 1 | 4 | 5.5 |
| encodeURI() | Encodes a string as a URI | 1 | 4 | 5.5 |
| encodeURIComponent() | Encodes a string as a URI component | 1 | 4 | 5.5 |
| escape() | Encodes a string | 1 | – | 3 |
| eval() | Evaluates a string and executes it as if it was script code | 1 | 2 | 3 |
| isFinite() | Checks if a value is a finite number | 1 | 4 | 4 |
| isNaN() | Checks if a value is not a number | 1 | 2 | 3 |
| Number() | Converts an object’s value to a number | 1 | ||
| parseFloat() | Parses a string and returns a floating point number | 1 | 2 | 3 |
| parseInt() | Parses a string and returns an integer | 1 | 2 | 3 |
| String() | Converts an object’s value to a string | 1 | ||
| unescape() | Decodes a string encoded by escape() | 1 | – | 3 |
les propriétés racine
| Propriété | Description | FF | N | IE |
|---|---|---|---|---|
| Infinity | A numeric value that represents positive or negative infinity | 1 | 4 | 4 |
| NaN | Indicates that a value is « Not a Number » | 1 | 4 | 4 |
| undefined | Indicates that a variable has not been assigned a value | 1 | 4 | 5.5 |