Infos sur objets manipulés

Dernière mise à jour le par @karamel .

Infos sur objets manipulés

Description

Permet à tous de connaître les infos sur les Objets manipulés grâce à l'affichage de leurs propriétés ou attributs...

Introduction

Hello Javascripteuses et teurs...

Nombre d'entre nous se posent la question de savoir quelles sont les propriétés ou les attributs d'un objet présent sur la page que l'on écrit fiévreusement, voire plus si affinité...

Javascript, introduit il faut le rappeler par NetScape, nous offre une solution simple... la fameuse Boucle ...

for( var i in Objet)

Cette boucle peut rendre de grands services ou simplement aiguiser votre curiosité.

for( var i in Objet)    // la boucle
    Afficher( Objet[i]);  // l'instruction

Mise en oeuvre élémentaire

On glisse le script entre les balises <body>...</body> de la façon suivante...

Exemple :

<html>
<head>
</head>
<body>
  <script type="text/javascript"
    var Objet = navigator;
    for( var i in Objet)
      document.write( "<B>"+ i + " = </B>" + Objet[i] +"<BR>");
  </script>
</body>
</html>

Résultat :

Avec cet exemple, en fin de document apparaîtront les propriétés de votre navigateur ainsi que les valeurs de celles ci. Essayez de remplacer navigator par this pour voir... Vous vous rendrez vite compte que les propriétés mises à disposition par les différents navigateurs ne sont pas toutes les mêmes...

Autre mise en oeuvre

On crée une fonction, par exemple ObjShowInfo(obj_), que l'on intègre...

Dans le document

Entre les balises <script>...</script>, celles ci étant entre les balises <head>...</head> comme suit :

<html>
<head>
<script type="text/javascript">
//-------------------------
function ObjShowInfo( obj_){
  //...corps de la fonction Voir plus loin...
}
</script>
</head>
<body>
  //..BlaBla...ma page
</body>
</html>

Dans un fichier .js

  • Création d'un fichier objinfo.js par exemple...( Non traitée ICI ...)
  • Référencement de celui ci, dans la page, de la façon suivante :
<html>
<head>
  <script src="objinfo.js" type="text/javascript">
</head>
<body>
  // ..BlaBla...ma page
</body>
</html>

Appel de la fonction

Sinon à quoi ça sert...
Pour ce faire on va utiliser l'événement onclick ="" lié aux objets qui sont placés dans votre page...

Exemple :

<div id="DIV_0" onclick="ObjShowInfo( this);">Voir Info</div>

ou encore...

<div id="DIV_0" onclick="ObjShowInfo( this.style);">Voir Info style</div>

...Là c'est à vous de jouer...

La fonction

La fonction peut ressembler à ce qui suit :

//-------------------------
function ObjShowInfo( obj_){
  var Win;
  var html;
  var L = 400;                              // Largeur Fenêtre
  var H = 400;                              // Hauteur Fenêtre
  var X = (screen.width  -L) /2;            // Centrage Horizontal
  var Y = (screen.height -H) /2;            // Centrage Vertical
  var Pos = "left="+X+",top="+Y+",width="+L+",height="+H +",";
  var Opt = "scrollbars=yes, resizable=yes" ;
  
  //-- Création de la Fenêtre
  Win   = window.open("","", Pos +Opt);
  
  //-- Balises d'entête
  html  = '<html><head>';
  
  //-- Un peu de Style pour plus de clarté
  html += '<STYLE TYPE="text/css">';
  html += 'body{font-size:13px;font-family:Verdana;}';
  html += 'B   {color:#0000ff;}';
  html += 'PRE {font-size:11px;font-family:Verdana;margin:0px 10px;}';
  html += '</STYLE></head>';
  
  //-- Le corps du document avec fermeture si perte du Focus
  html += '<body OnBlur="javascript:window.close();">';
  
  //-- Nom de l'Objet
  html += '<H1>'+ eval(obj_) +'</H1>';
  Win.document.write(html);
  
  //-- La fameuse boucle
  for (var i in obj_){
    html = '<B>' +i +' =</B>';              // La propriété
    html+= '<PRE>' +obj_[i] +'<BR></PRE>';  // et sa valeur
    Win.document.write(html);               // on écrit
  }
  
  //-- Balises fin document
  Win.document.write('-- End FILE ---</body></html>');
  
  //-- Fermeture document
  Win.document.close();
  
  //-- Focus sur la fenêtre
  Win.focus();
}

Nota:
Le résultat n'est pas présenté dans l'ordre alphabétique, mais là je n'y suis pour rien..

Conclusion

Si vous ne possédez pas la documentation qui va bien, ou si vous voulez connaître une valeur, cela devrait vous aider au développement de vos pages...
Alors Bonne PROG...;0)

Ce document intitulé « Infos sur objets manipulés » issu de CodeS SourceS (codes-sources.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.
Rendre le javascript dynamique par apport à une base de données
Introduction au javascript
Rejoignez-nous