Comment Ca Marche - Communauté informatique  
   
Accueil - Encyclopédie informatiqueTélécharger l'encyclopédieContribuer à cet article

Javascript - Notion d'objet

Approche objet avec Javascript Encyclopédie


Notion d'objet

Le but de cette section n'a pas pour ambition de traîter de la programmation orientée objet mais de donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript.

Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments :

  • classés selon une hiérarchie pour pouvoir les désigner précisément ;
  • auxquels des propriétés sont associées.

Cette notion semble floue pour l'instant mais voyons voir cela sur un exemple concret :
Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose la hiérarchie d'objets est définie comme ceci :
  • jardin
    • arbre
      • branche
        • feuille
        • nid
          • largeur: 20
          • couleur: jaune
          • hauteur: 4
      • tronc
      • racine
    • salade
    • balançoire
      • trapèze
      • corde
      • nid
        • largeur: 15
        • couleur: marron
        • hauteur: 6
Le nid sur l'arbre est donc désigné comme suit :
jardin.arbre.branche.nid
Contrairement au nid situé sur la balançoire :
jardin.balançoire.nid

Pour changer la couleur du nid (dans l'arbre) et le peindre en vert, il suffit d'une commande telle que la suivante :
jardin.arbre.branche.nid.couleur= vert;

Les objets en Javascript sont représentés de cette manière à ceci près que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre du navigateur.

Les objets du navigateur

Javascript divise la page du navigateur en objets, afin de permettre d'accèder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés.

On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu.

  • L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window)
  • Dans la fenêtre s'affiche une page, c'est l'objet document
  • Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc.
Pour accéder à un objet il est donc nécessaire de parcourir l'arborescence en partant de l'objet le plus grand (l'objet window) vers l'objet à atteindre.
Soient le bouton (appelé checkbox) et le champ de texte suivants :



  • Le formulaire (baptisé form1 pour le distinguer des autres formulaires de la page) est repéré par le code suivant :
    window.document.forms["form1"]
  • Le bouton checkbox (baptisé checkbox) est repéré par le code suivant :
    window.document.forms["form1"].checkbox
  • Le champ de texte (appelé champ_text) est repéré par le code suivant :
    window.document.forms["form1"].champ_text

Le bouton checkbox a entre autre une propriété checked, qui retourne la valeur 1 si le bouton est coché, 0 dans le cas contraire. Cliquez sur le bouton checkbox pour comprendre ce qu'il est possible de faire grâce à ces propriétés.

Ainsi le formulaire form1 a comme code HTML :

<form name="form1">
<br><input type="checkbox" name="checkbox" onClick="ModifChamp();return true;">
<br><input type='TEXT' name='champ_text' value='Essai du javascript' size='24'></form>

La fonction javascript associée au bouton checkbox est la suivante :

<script language="Javascript">
<!--
function ModifChamp()
{
	if (document.forms["form1"].checkbox.checked)
	{
		document.forms["form1"].champ_text.value='Bouton coché'
	}
	else
	{
		document.forms["form1"].champ_text.value='bouton non coché'
	}
}
//-->
</script>

Le champ de texte a par exemple comme propriétés :

  • name: le nom du champ de texte
  • value: le texte contenu dans le champ
  • size: la taille du champ de texte
L'appui sur les boutons suivants permet de modifier la propriété window.document.forms["form2"].champ_text.value, c'est-à-dire le texte associé au champ de texte nommé « champ_text » dans le formulaire ci-dessous nommé form2)


Trucs & astuces pertinents trouvés dans la base de connaissances

12/02 01h50 convertisseur d'unités de mesures scientifiques (Javascript)
19/11 00h08 Effacer un champ de formulaire lors du clic (focus) (Javascript)
18/11 00h43 JavaScript c'est la même chose que Java (Mythes et légendes)
11/11 01h39 Coloration syntaxique dans vos pages web (Webmaster)
04/11 16h32 Interdire le clic droit de la souris (Javascript)
08/11 10h32 Lien aléatoire / Choisir un lien au hasard (Javascript)
05/11 11h53 Date de dernière modification de la page (Javascript)
javascript notion objet Plus d'astuces sur « javascript notion objet »

Discussions pertinentes trouvées dans le forum

22/01 15h35 javascript objet attendu [Javascript]Objet attendu Webmastering 22/01 16h57->lomic25
12/05 14h16 javascript nommer objet nom indice quo [Javascript] Nommer un objet "nom[indice]&quo Développement 15/05 09h14->Delta9_THC2
18/12 21h04 php javascript xhr php objet [PHP-Javascript] XHR et PHP Objet Développement 18/12 21h21->kij_821
09/01 21h54 javascript objet xhr server ovh [javascript] Objet XHR sur server OVH Webmastering 09/01 21h59->kij_821
26/05 09h38 javascript objet javascript et objet Windows 26/05 15h30->jul8
24/01 15h04 javascript modifier valeur objet [Javascript]modifier la valeur d'un objet Développement 26/01 10h24->kij_828
21/08 15h57 javascript declarer objet javascript: comment declarer un objet Développement 21/08 17h02->sylvie274
31/05 19h13 objet date javascript objet date de javascript Windows 01/06 13h41->Azrael2
11/04 15h19 accèder objet cellule javascript Accèder à un objet cellule en Javascript Windows 11/04 16h38->doue1
30/07 18h49 javascript presence objet cache [javascript] Presence d'un objet en cache Windows 31/07 10h04->omar1
Discussion fermée Problème résolu javascript notion objet Plus de discussions sur « javascript notion objet »

Ce document intitulé « Javascript - Notion d'objet » issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.