|
23.1 Objet |
  copyleftSee You Why? |
Il y a longtemps que vous connaissez une instruction telle que:
var maChaine = "CUY... si on y vient... on y revient !";
et depuis que vous faites du JS, vous dites que la variable maChaine est une chaine de caractères. Ce que vous ignoriez probablement, c'est que JS d'une part, n'est pas très typé et d'autre part considère que la variable maChaine contient pour l'instant un objet de type string (objet qui pourrait être d'autres types tels que booléen, nombre, date, array...) et vous aurez peut-être oublié que les objets de type string peuvent avoir des propriétés telles que maChaine.length qui renvoie le nombres de caractères de cette chaine, et que l'on peut appliquer des méthodes à ce type d'objets, telles maChaine.toUpperCase() pour l'écrire en capitales, maChaine.indexOf("e") qui indiquera la place du premier "e" rencontré dans cette string, maChaine.fontsize(+2) qui affichera le texte dans une police de taille supérieure ou maChaine.charCodeAt(6) qui renverra la valeur 32 qui est le code ASCII de l'espace. Voir la séquence "5.4 Manipulation de chaines".
Objet et JavaScript, quoi de commun ? Déjà dans la définition de JS, nous avions annoncé que JS était un langage orienté objet. Nous avions précisé qu'un objet, en informatique, était une entité unique (p.ex. : la moto de GVdK) qui possède des propriétés (p.ex. : constructeur, modèle, immatriculation, propriétaire, couleur...) et sur laquelle on peut appliquer des méthodes (p.ex. : faire_le_plein, vendre, repeindre, faire_la_vidange...).
Outre cet exemple qui vous paraît peut-être douteux, on pourrait aussi envisager chacun des élèves d'une classe pourrait être considéré comme un objet qui possède des propriétés (identifiant unique, nom, prénom, classe, date_de_naissance, taille, couleur_des_yeux...) et sur lequel on pourrait appliquer des méthodes (p.ex. : afficher_age qui afficherait l'age de l'élève calculé d'après la date du jour et sa date de naissance, accepter_basket qui afficherait les élèves dont la taille est supérieure à 1,80 m, calculer_nbre_elv qui calculerait en ligne le nombre d'élèves inscrits dans une classe, etc.).
On pourrait aussi envisager un objet point qui enregistrerait les résultats de tous les étudiants d'une école, à tous les tests dans toutes les disciplines. Chaque objet point devrait par exemple comporter les propriétés suivantes : identifiant de l'enseignant, id de l'étudiant, date, titre éventuel, maximum, liste de résultats (pas besoin de préciser la classe car elle est enregistrée dans les 'objets élèves' ni de préciser le nombre de cotations car il correspond au nombre d'élèves inscrits dans la classe visée).
JavaScript utilise des objets pour représenter des types de données complexes. Ces objets sont de petites structures de données avec leurs propres champs (propriétés) et des fonctions (méthodes) d'accès ou de modification de ces données.
Ces objets bénéficient d'une approche où les variables sont protégées de toute ingérence extérieure. Si les variables peuvent être modifiées directement par le code d'un programme en dehors de la fonction ou de l'objet, alors il ne peut plus être tributaire de donner un résultat précis.
La plupart des anciens langages informatiques étaient procéduraux... on établissait des procédures à suivre pour arriver au résultat souhaité. Dans la programmation dite classique, les données (le plus souvent des variables, c’est à dire du texte, des nombres…) sont passées à des fonctions, des procédures, qui se chargent de les traiter.
En programmation orientée objet, les données possèdent elles-mêmes des fonctions (on les appelle des méthodes) Javascript :
Pour illustrer nos propos, imaginons l'objet prédéfini de JS, l'objet Date(). Ce dernier est un objet qui ressemble à ceci : . Cet objet possède de nombreuses propriétés, bien plus que ce qu'il n'affiche ici ; il retient également le nombre de millisecondes écoulées... ce qui veut dire qu'on pourrait utiliser cet objet pour chronométrer le temps de réponse d'un élève à une question d'un test (bon outil pour mieux connaitre vos élèves, non ?)
Le lecteur pourra comprendre facilement qu'il faudra :
(1) employer un objet qui relève la date au moment de l'apparition des questions sur l'écran du visiteur ;
(2) employer un autre objet qui relève la date (et l'heure) au moment du 'clic' du visiteur indiquant qu'il a terminé son test ;
(3) relever une propriété de notre premier objet, à savoir le nombre de secondes (ou millisecondes) déjà écoulées dans la journée lors de l'apparition du début du test ;
(4) relever une propriété de notre second objet, à savoir le nombre de secondes (ou millisecondes) déjà écoulées dans la journée lors de la fin du test ;
(5) utiliser une méthode pour calculer la différence entre ses deux moments.
Le lecteur comprendra aussi que de nombreuses fonctions ne seront pas judicieuses pour l'emploi de ces objets Date() décrits dans l'exemple ci-dessus : à quoi servirait-il de calculer la racine carrée d'une date... ou de calculer le reste de la division par 97 de ces valeurs, traitement qui cependant s'avère très utile pour vérifier l'exactitude d'un numéro de compte bancaire ou celui de votre numéro national...
Le lecteur pressentira ici l'opportunité d'utiliser des procédures sur certaines données et pas sur d'autres. C'est ce que permet la POO et dont nous développerons certains aspects dans les chapitres suivants. Et pour terminer cette courte introduction, nous invitons le lecteur à cliquer sur le bouton ci-dessous pour voir le temps qu'il lui a fallu pour lire les lignes précédentes.
Cliquez sur le bouton pour (re)lancer la méthode qui calcule le temps passé :
Dans ce chapitre-ci, nous présenterons :
Dans les chapitres suivants, 24 et 25, nous apprendrons comment créer nos propres objets JS et comment leurs attribuer des propriétés et des méthodes. Certains préfèreraient peut-être ne pas commencer par la création d'onjets propriétaires et aimeraient d'abord prendre connaissance des objets prédéfinis par JS. Ceux-là éviteront pour l'instant la lecture des deux chapitres suivants dans l'immédiat. Nous leur rappellerons en fin de ce chapitre.
Suivront ensuite des chapitres relatifs à certains objets particuliers de JS, comme les tableaux, les objets mathématiques, ceux relatifs aux dates et aux formulaires.
JavaScript connait certains objets préétablis : vous en avez déjà découvert certains :
document est l'objet qui désigne la page HTML en cours, dans laquelle on peut écrire en utilisant la méthode 'write()' : document.write(message),
string est l'objet qui désigne une chaine de caractères sur laquelle on peut utiliser la méthode 'italics()' pour écrire cette chaine en caractères italiques : nom.italics(), voir ci-dessus,
string est aussi l'objet qui désigne une chaine de caractères dont on peut connaitre la longueur en utilisant la propriété 'length' : ma_variable.length,
window est l'objet qui désigne une fenêtre de votre écran, plus précisément celle de votre navigateur (ou browser), dans laquelle on peut afficher plusieurs documents, dans lesquels on peut trouver une boite de dialogue avec un message et un bouton 'OK' en utilisant la méthode 'alert()' : window.alert("message"), cependant, pour la méthode alert, on néglige le plus souvent de noter l'objet window (objet hiérarchiquement le plus élevé) et document (car un message d'alerte s'ouvre au-dessus de n'importe quelle page ouverte),
window est l'objet qui désigne une fenêtre de votre écran dont on peut connaitre la dimension horizontale en utilisant sa propriété 'outerWidth' : largeur_fenetre=window.outerWidth,
navigator est l'objet qui désigne le navigateur ou browser (Internet Explorer, Google Chrome, Mozilla, etc.) qu'utilise votre ordinateur... pardon, celui du visiteur de votre page... il aura donc des propriétés différentes sur des ordinateurs qui utilisent des navigateurs différents. Vous voulez en connaitre les propriétés ? cliquez ci dessous
Comment découvrir toutes les propriétés d'un objet ?
Le javascript propose une solution pour les parcourir toutes, grâce à la boucle for (i in objet) {... }.
Par exemple, pour parcourir toutes les propriétés de l'objet navigator, on écrit :
var object=window.navigator;
for (i in object) {
document.write(i+" = "+object[i]+" <br>")
}
La boucle parcourt toutes les propriétés de l'objet object (qui n'est rien d'autre que le navigateur de l'internaute qui visite votre page. La variable i contient le nom de la propriété. Dans object[i] on trouve le contenu de la propriété. Nous attirons l'attention du lecteur que l'objet se parcourt comme un tableau associatif. Nous y reviendrons dans notre chapitre 26.
Ce formulaire permet de lister (dans un popup) toutes les propriétés de l'objet indiqué dans la zone de saisie.
Et si votre document est l'objet qui désigne une page HTML, outre la méthode write(), cette page (mieux : cet objet document) possède aussi des tas de propriétés dont vous ne soupçonnez pas l'existence... vous en voulez la preuve ? cliquez ci dessous
Même façon de procéder ici pour les propriétés de ce document, on écrira :
var object2=window.document;
for (i in object2) {
document.write(i+" = "+object2[i]+" <br>")
}
Un chapitre précédent concernant les chaines de caractères et leur manipulation, a déjà abordé beaucoup de propriétés et méthodes applicables à des objets prédéfinis de JS de type 'string' (voir "jvs_056_manipulation_chaine.html").
Quelques chapitres suivants vous permettront de mieux aborder d'autres types d'objets prédéfinis de JS :
Outre ces quelques objets, prédéfinis dans JS, il existe aussi d'autres objets comme :
Boolean => Booléen
Function => Fonction JavaScript
History => Liste des pages parcourues par l'utilisateur
Location => Page affichée à l'écran
Navigator => Renseignements concernant le navigateur de l'utilisateur
Number => Nombre
Object => Objet de base de tous les objets
RegExp => Expression rationnelle
Screen => Écran de l'utilisateur
Mais avant cela, dans les deux chapitres suivants (24 et 25), nous apprendrons comment créer nos propres objets et comment leur attribuer des propriétés et des méthodes.
Attention cependant, le Javascript n'est pas un langage orienté objet du même style que le C++, le C# ou le Java. En effet, le JavaScript est un langage orienté objet par prototype. Ainsi, si vous avez déjà des notions de programmation orientée objet, vous y verrez quelques différences, mais la connaissance de ces différences n'est pas indispensable pour l'approfondissement du JS et les principales différences apparaitront par la suite, lors de la création d'objets.
JavaScript a également prévu une hiérarchisation de ses objets, c'est-à-dire que tous les objets en JavaScript n'ont pas la même importance et certains dépendent d'autres. Par exemple, si vous utilisez un formulaire 'formul1' qui contient des cases à cocher et des champs de texte dont un que vous avez appelé 'rue', ces derniers dépendent du formulaire auquel ils appartiennent.
Le formulaire lui-même est un objet qui dépend du document dans lequel il figure.
Ainsi, on adoptera la notation
document.formul1.rue
pour désigner le champ 'rue' du formulaire 'formul1' du 'document' en cours ; l'objet le plus important étant noté le plus à gauche, le moins haut hiérarchiquement à droite.
Si vous souhaitez connaitre la valeur du contenu de ce champ texte, vous pourriez écrire
document.formul1.rue.value
Si vous souhaitez modifier la valeur du contenu de ce champ texte, vous pourriez écrire
document.formul1.rue.value = "nouvelle rue";
et pour effacer le contenu de ce champ uniquement, vous noterez
document.formul1.rue.value = "";
Pour illustrer nos propos, nous invitons le lecteur à prendre connaissance de l'exemple suivant où l'on crée deux formulaires,
l'un avec une zone de texte contenant "Un essai CUY de JavaScript" par défaut,
et l'autre contenant deux boutons où appuyer sur l'un des boutons permet de modifier la propriété window.document.forms["formul2"].champ_text.value, c'est-à-dire
la valeur du texte associé au champ de texte nommé « champ_text »
dans le premier formulaire ci-dessous nommé « formul2 »)
de la page web en cours « document », à savoir ici « jvs_230_objet.html »
de la fenêtre active « window »
(l'objet 'window' étant celui le plus haut de la hiérarchie,
il est souvent omis) :
<form name="formul2">
<br/>
<input type='TEXT' name='champ_text' value='Un essai CUY de JavaScript' size='40'>
</form>
<form name="formul3">
<INPUT type="button" value=" CUY 1" onClick="document.forms['formul2'].champ_text.value='CUY, quel site !'">
<INPUT type="button" value=" CUY 2" onClick="document.forms['formul2'].champ_text.value='CUY, si on y vient, on y revient !'">
</form>
Le lecteur aura son attention attirée sur l'emploi des guilles doubles (" ou dubbel quote) et des guilles simples (' ou single quote).
Rien de tel qu'un essai personnel où l'on peut effectuer des modifications et observer le résultat :
Exemple
|
JavaScript n'est pas le seul langage qui fasse partie des langages orientés objet... on regroupe sous le sigle POO tous les langages qui font appel à la Programmation Orientée Objet.
Quels sont ces langages ?
Loin de nous la prétention de vouloir être exhaustif, mais nous citerons :
Sauf ceux cités ci-dessus comme langages orientés objets par prototype, les langages de POO sont généralement des LOO par classe.
JavaScript ne fait pas partie de la plateforme Java.
JavaScript, ne permet pas de créer des applets ou des applications autonomes, Java le peut. Dans sa forme la plus courante aujourd'hui, JavaScript s'intègre dans les documents HTML, et peut fournir des niveaux d'interactivité aux pages Web que vous ne pouvez pas obtenir avec du HTML simple.
Java est un langage de programmation POO (Programmation orientée objet) tandis que JavaScript est un langage de script basé sur les objets, mais sans les classes ni les héritages.
Java permet de créer des applications qui s'exécutent sur une machine (éventuellement côté serveur) ou un navigateur virtuel tandis que le code JavaScript est exécuté uniquement sur un navigateur côté client.
Le code Java doit être compilé tandis que le code JavaScript est composé entièrement de texte et sera interprété sur la machine de l'internaute visiteur.
Ils nécessitent des plug-ins différents.
JS a été développé par Netscape, Java a été développé par Sun. Si les noms se ressemblent, c'est peut-être parce que Netscape était partenaire avec Sun au moment de la création de JS.
Java sert surtout à créer des programmes et des applications sur toutes sortes de matériels divers, ce qui en fait son intérêt, puisqu'il permet aisément de passer d'un matériel à un autre avec le même code de l'application... ou avec peu de changements.
Les applets Java sont stockées sur l'ordinateur, comme compléments de la page Web (pour visionner une séquence filmée, pour écouter un MP3, etc.). Les applications JS sont chargées et intégrées dans la page Web visitée.
Les variables Java sont très typées et doivent être déclarées, celles de JS ne sont pas typées et ne doivent pas être déclarées.
voir suite >>>
voir suite >>>
voir suite >>>
