Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

16. Mise en ligne d'un site

Formations informatiques en ligne sur YBET.be
Office Internet Techniques
Access Formation Internet PC et périphériques
Cours Excel PHP - MySQL Equipements réseaux
Powerpoint Créer son propre site Dos et Windows
ACCUEIL Forum webmasters Nous contacter

5. HTML et objet en javascript 

1. Objet - 2. Les objets standards - 3. Exemple d'utilisation - 4. La méthode this

L'évolution des langages passe par l'utilisation d'objet (on en a déjà rencontré sans le savoir réellement au tout début). Ca sert à quoi des objets en programmation?

Prenons comme exemple une fiche article d'un produit, genre vêtements (on parle de tailles et couleurs). Une méthode pour reprendre les différentes caractéristiques de ce vêtement serait d'utiliser un tableau: tableau["couleur"]="bleu", tableau["taille"]=44, ... C'est effectivement une méthode utilisable mais en programmation, on va faire beaucoup mieux puisqu'on va regrouper tous les vêtements comme classe d'objet. L'intérêt? Non seulement on va pouvoir rassembler pour chaque objet les caractéristiques mais aussi leur affecter des fonctions. Les caractéristiques sont appelées attributs, les fonctions (comme stock supérieur à une certaine valeur), des méthodes. Lorsque nous allons entré un nouvel objet dans nos stocks, nous allons simplement faire "une copie d'un objet" (et pas le recréer complètement) pour ensuite remplir ses caractéristiques, y compris en ajouter des supplémentaires.

Finalement, le gros avantage est de séparer la partie création des produits (programmation) de la partie remplissage (utilisateur). C'est assez théorique au début, jetons un petit coup d'oeil.

1. Objet

Reprenons notre vêtement. Nous allons créer un tableau de départ un peu spécial.

var pull_bleu = new vetement("bleu",44,2,"homme");

C'est ici que ça se complique. On vient de créer un objet nommé pull_bleu qui appartient à la classe d'objet vetement dont les caractéristiques sont:

Il nous reste à créer la classe d'objet vêtement qui va mettre en concordance les cellules de notre pull avec la classe vetement. Mais pour montrer l'utilité de cette méthode de programmation, un petit exemple qui reprend deux notations identiques (accès aux mêmes données)

Méthode objet méthode tableau
pull_bleu.couleur="bleu" pull_bleu["couleur"]="bleu"
pull_bleu.taille=44 pull_bleu['taille']=44

C'est finalement une méthode équivalente dans les deux cas sauf que: dans le premier cas, les cellules sont numérotées de 0 à ...lorsqu'on entre ou récupère les valeurs (suivant la classe d'objet), dans le deuxième cas, il vaut reprendre les indices uns à uns. J'essaye pas de vous convaincre pour l'instant de cette méthode, on verra après les objets repris directement par javascript.

Comment on crée une classe d'objet? C'est un nouveau type de variable qui va être utilisée, associé à une fonction. Dans notre exemple, ça donnera quelque chose comme cela en schématisant (this désigne cet objet):

var vetement= new classe()
function vetement(couleur,taille,stock,type)
{
this.couleur=couleur;
this.taille=taille;
this.stock=stock;
this.type=type;
}

2. Les objets standards

La principale utilisation des objets est liée à quelques uns qui sont déjà intégrés dans l'html (souvenez-vous des images et tableaux du début de cette formation) et dans notre cas, c'est effectivement la principale utilisation. Javascript ne va pas créer le contenu de la page, juste déclarer des objets appartenant au contenu pour pourvoir les manipuler en fonction d'actions, et c'est là l'intérêt des objets.

Reprenons notre idée de départ en examinant une page Internet dans un navigateur. Elle reprend une certaine hiérarchie.

Tout au-dessus, Windows (la fenêtre affichée), dedans un objet appelé document et dans document, d'autres sous objet (images, formulaire, ... par exemples). L'intérêt de la méthode objet est justement cette dernière partie, chaque partie du document va être vue comme un objet à part avec ses propres caractéristiques mais aussi avec des attributs identiques aux autres. Pour reprendre l'exemple du dessus, deux pull peuvent avoir une taille différente mais les deux ont chacun une taille. Deux images peuvent avoir une adresse différente mais doivent au moins avoir une adresse d'image. Dans notre exemple ci-dessus, on retrouvait pull_bleu.couleur="bleu", pour les objets contenus dans le document, on va en retrouver deux principaux:

1. document.getElementById(numero);
2. document.getElementsByTagName("type");

On voit directement que ces deux commandes sont associés au document (ou plutôt à un de ses sous objet). Chaque objet du document va avoir un numéro et un type.

Reste un petit problème, un document va comporter plusieurs objets. Pour le premier, il doit être unique pour chaque objet. Par contre, plusieurs éléments d'un même document peuvent avoir le même type. En reprenant les tableaux, ça ne va pas trop nous poser de problème, on va simplement utiliser document.getElementsByTagName("type")[0]; et effectivement, cette méthode donne comme résultat un ... tableau.

Quelques types:

Comment attribuer une id à un objet? Lorsque nous avons parlé de numéro, nous avons implicitement sous-entendu que c'était un numéro. Pourtant, il peut être aussi un mot. Pour donner une id à un bobjet, on va simplement dans le code html de l'objet ajouter id=.

Par exemple

<imgsrc="logo.jpg" id="logo"/>

Pour un formulaire ...

<form id="formulaire1" method="post">

et dans les différentes parties des formulaires

<input type="text" name="nom" size="20" id="nom"> // pour une zone de texte simple.

3. Exemple d'utilisation

Dans le premier chapitre, nous avons vu quelques commandes liés au clicks. Reprenons cette partie en utilisant cette fois les objets. On va simplement reprendre un id pour l'image et créer en script une commande reprenant l'id de l'image suivi d'un attribut (ici onclick) qui va démarrer une fonction.

<img src="logo.jpg" id="logo"/>

Suite du contenu
< script>
document.getElementById("logo").onclick = function()
{
alert("click gauche");
}
< /script>

Le résultat est le même que celui déjà vu précédemment:

<img src="logo.jpg" onclick="alert('click gauche');" />

4. La méthode this, une autre notation.

Utiliser la méthode id est souvent longue. Une méthode courante est d'utiliser la méthode this (celui-ci). Ceci va faciliter notre programmation.

Comme exemple, modifier une image lorsqu'on passe la souris dessus. Par l'html, ça donne

<img scr="logo.jpg" onmouseover="this.src='logo2.jpg'" />

>6. Utilisation dans les formulaires

< 4. Utilisation des tableaux
Sur le sujet:

Votre site Web YBET informatique: analysons ensemble votre projet.

Formation PHP - MySQL Cours en ligne pour créer ses propres applications