[JS] Comment récupérer tous les indices/membres d'un tablea/objet

Comment récupérer tous les indices/membres d'un tablea/objet [JS] - HTML/CSS - Programmation

Marsh Posté le 12-07-2006 à 09:23:52    

Salut,
 
J'essaie d'appréhender un peu mieux le Javascript, car ça me parait un peu la jungle pour le moment.
 
Je me pose une question:
 
Comment faire pour avoir les noms de tous les membres/indices d'un objet/tableau en Javascript.
 
J'ai tenté le code suivant:
 

Code :
  1. var buf = 'myObj indices:\n';
  2. for (i in myObj){
  3. buf += "+ " + i + "#" + (typeof myObj[i]) + "\n";
  4. }
  5. alert(buf);


 
Mais je me rend compte que ça marche de manière assez aléatoire, par exemple, avec document.images:
 
 

Code :
  1. var buf = 'document.images:\n';
  2. for (i in document.images){
  3. buf += "+ " + i + "#" + (typeof document.images[i]) + "\n";
  4. }
  5. alert(buf);


 
Par exemple, sous IE6, et en imaginant ue j'ai un seul <img name="myImg"....> dans mon document, il ne me sort que deux membres pour document.images, qui sontdocument.images, qui sont myImg et length...
Et pourtant, je sais que document.images.item existe aussi, et pour preuve, je peux faire un typeof document.images.item, et il me sort "string"....
 
Bre, j'aimerais y voir plus clair...

Reply

Marsh Posté le 12-07-2006 à 09:23:52   

Reply

Marsh Posté le 12-07-2006 à 09:41:55    

Quelques petites mises au point s'imposent :o
 
document.layers, document.all, document.images, document.anchors et toutes ces autres merdes c'est poubelle.
 
un élément ça n'a plus de name, le name est déprécié depuis longtemps, le name ne sert plus à rien sauf sur les éléments d'un formulaire.
 
pour recuperer un élément de nos jours c'est par un id
 

Code :
  1. <p id="toto"></p>
  3. var monp = document.getElementById("toto" );


ici la variable monp est une référence à l'élément p dans la page
 
maintenant pour récupérer une liste d'images, une liste de lien dans le document, il y a des méthodes propres à chaque objets.
 

Code :
  1. var a = document.getElementsByTagName("a" );


là j'ai récupéré un tableau contenant toutes les A de la page
pour le parcourir :  

Code :
  1. for (var i=0; i<a.length; i++) {
  2.   alert(a[i].href);
  3. }

Message cité 1 fois
Message édité par gatsu35 le 12-07-2006 à 09:43:49
Reply

Marsh Posté le 12-07-2006 à 09:51:19    

Waouuh Artung avec

Code :
  1. for ( var in truc)


Si truc est autre chose qu'un tableau ça remonte toute ses "propriétés", genre si c'est un objet ça va remonter ses attributs, méthodes etc...
C'est super pratique quand on le sait, mais ça amène aussi des confusions.
A noter aussi que le for ... in remonte l'indice du tableau ( et pas l'element correspondant)
 
Alors dans l'exemple de Gatsu, ça fait pas du tout ce qu'il faut vu que a n'est pas un tableau mais un objet DomNodeCollection :o
Avec le code suivant:

Code :
  1. var a = document.getElementsByTagName('a');
  2.     for ( i in a ){
  3.       alert(i);
  4.     }


On obtient des trucs genre:


0 // le premier indice de mon tableau
...
X // le dernier indice de mon tableau
length //la longueur du-dit tableau
item // une fonction DomNodeCollection
namedItem //pareil

Message cité 1 fois
Message édité par anapajari le 12-07-2006 à 09:51:56
Reply

Marsh Posté le 12-07-2006 à 09:52:52    

+1 pour les précisions

Reply

Marsh Posté le 12-07-2006 à 09:55:29    

gatsu35 a écrit :

Quelques petites mises au point s'imposent :o
 
document.layers, document.all, document.images, document.anchors et toutes ces autres merdes c'est poubelle.
 
un élément ça n'a plus de name, le name est déprécié depuis longtemps, le name ne sert plus à rien sauf sur les éléments d'un formulaire.
 
pour recuperer un élément de nos jours c'est par un id
 

Code :
  1. <p id="toto"></p>
  3. var monp = document.getElementById("toto" );


ici la variable monp est une référence à l'élément p dans la page
 
maintenant pour récupérer une liste d'images, une liste de lien dans le document, il y a des méthodes propres à chaque objets.
 

Code :
  1. var a = document.getElementsByTagName("a" );


là j'ai récupéré un tableau contenant toutes les A de la page
pour le parcourir :  

Code :
  1. for (var i=0; i<a.length; i++) {
  2.   alert(a[i].href);
  3. }



 
Ouh là, zut, j'ai orienté la discussion sur un autre sujet... Je ne cherchais en aucun à demander comment réupérer une référence sur un élément de mon document, mais vraiment une question plus générale, à savoir comment avoir la liste des attriuts des objets/tableaux (j'ai l'impression que c'est plus ou moins la même chose) sous JS... Et j'ai pris document.images comme exemple....
 
Bon, alors, je vais prendre un autre exemple: var range = document.selection.CreateRange()
 
Ca me retourne un objet. Comment faire pour avoir tous les attributs/fonctions de cet objet....
 
Si je fais un:
 

Code :
  1. for (i in document.selection.createRange()){
  2.   buf += i + "\n";
  3. }
  4. alert(buf);


 
Je n'obtiens pas, dans ma liste, la fonction move(), alors que je sais qu'elle existe sur cet objet...
 
Ce n'est vraiment qu'un exemple, mais c'est pour illustrer ma question.
 
Je cherche à comprendre comment ça marche, car ça ne me parait pas très très clair (et j'ai l'impression que les objets ne sont que plus ou moins des tableaux ou vice versa...)
 
merci quand même pour les précisions plus haut.

Reply

Marsh Posté le 12-07-2006 à 09:59:11    

anapajari a écrit :

Waouuh Artung avec

Code :
  1. for ( var in truc)


Si truc est autre chose qu'un tableau ça remonte toute ses "propriétés", genre si c'est un objet ça va remonter ses attributs, méthodes etc...
C'est super pratique quand on le sait, mais ça amène aussi des confusions.


 
C'est exactement ce que je cherche (car ça me permettrait de voir plus facilement ce que support chaque navigateur, chui un peu paumé dans les compatibilités, etc...)
 
Mais justement, cette façon de lister les membres d'un objet (que ce soit attributs, méthodes) ne me donne pas l'impression d'être fiable.
 
En fait, mon idée, c'était que le for...in liste tous les indices d'un tableau, et queles objects JS sont des tableaux ou viced versa, donc, j'avais eu cette idée, sans doute un peu naïve (vu que ça ne semble pas fiable) et donc, c'est pour ça que je viens demander des précisions ici.


Message édité par Yoyo@ le 12-07-2006 à 09:59:51
Reply

Marsh Posté le 12-07-2006 à 10:07:47    

En gros en js tout object un est tableau...  
Le for ... in ça marche très bien mais tu as l'air de l'utiliser bizarrement :o
 
S'koi ça:

Code :
  1. document.selection.createRange()


Je dis pas que je suis un star en js, mais j'ai jamais vu ou eu à m'en servir ...
Donc je pense pas que ça soit terrible :o

Message cité 1 fois
Reply

Marsh Posté le 12-07-2006 à 10:16:24    

anapajari a écrit :

En gros en js tout object un est tableau...  
Le for ... in ça marche très bien mais tu as l'air de l'utiliser bizarrement :o
 
S'koi ça:

Code :
  1. document.selection.createRange()


Je dis pas que je suis un star en js, mais j'ai jamais vu ou eu à m'en servir ...
Donc je pense pas que ça soit terrible :o


 
Lol, bah ce document.selection.createRange() retourne, sous IE et Opera, ce qui est actuellement sélectionné dans la page (en bleu, avec la souris).
J'ai donné cet exemple, car c'est ce que j'avais sous la main, et qui m'a fait remarqué que ça marchait pas très bien...
 
Mais je te dis, tu peux essayer avec document.images...
 
Essaie le code suivant sous IE, par exemple dans une page sans <img>
 

Code :
  1. buf="";
  2. for (i in document.images){
  3. buf += i + "\n";
  4. }
  5. alert(buf);
  6. alert(typeof document.images.item);


 
Tu verras que IE ne va te donner qu'un seul élément pour document.imagesqui est length
 
Mais par ailleurs, lors du typeof, IE montre que l'attribut item existe, puisque IE retourne "string" alors qu'il aurait retourné "undefined" si ce dernier n'existait pas...  
 
Tu vois ce que je veux dire?
 
Il y a donc un problème dans la théorie...

Reply

Marsh Posté le 12-07-2006 à 10:39:10    

Mais c'est quoi ces examples moldaves du XIVeme siècle :o
Bon pour selection, ok maintenant je sais à quoi ça sert. Je reste quand même sceptique sur le fait que document.selection.createRange()  soit un objet ( c'est sur lui que tu faisais ton for ... i).
Quand a tes images, je rejoins ce que disais Gatsu, fait 10 ans qu'on a arrété document.images, ça m'étonne pas que ça marche pas ( encore que je suis sceptique sur ton .item )
 
Prenons un vrai exemple :), genre un objet qu'on a fait nous:

Code :
  1. function Voiture(){
  2.     var nbRoues = 4;
  3.     var nbPlaces = 5;
  4.     this.vitesse = 0;
  6.     function pneuCreve(){
  7.       this.nbRoues = 3;
  8.     }
  10.     this.klaxonne = function(){
  11.       alert('pouet');
  12.     }
  13. }
  14. Voiture.prototype.roule = function (){
  15.    this.vitesse = 90;
  16. }
  17. Voiture.prototype.freine = function(){
  18.     this.vitesse = 0;
  19. }
  22.   window.onload = function(){
  23.     var v = new Voiture();
  24.     for ( var i in v){
  25.       alert(i + ' -- '+ v[i])
  26.     }
  27.     v.klaxonne();
  28.   }


Et la tu vas me dire oui mais il alerte pas nbRoues, nbPlaces et la fonction pneuCreve... bin c'est normal [:spamafote] ce sont des propriétés/methodes privées de ton objet et tu essayes d'y accèder de l'extérieur.
 
Il n'y a pas vraiment de problème dans la théorie ;)

Citation :

In theory, there is no difference between theory and practice. But, in practice, there is. -- Jan L. A. van de Snepscheut


Message édité par anapajari le 12-07-2006 à 10:39:53
Reply

Marsh Posté le 12-07-2006 à 11:11:59    

Bon, OK, soit... Ca marche très bien avec nos propres objets, avec encapsulation, etc. Mais ce qui m'intéresse, dans le but de débugger les choses, c'est les objets prédéfinis, et là, la gestion semble bizarre....
 
Peux tu essayer de copier le code suivant dans un fichier html et l'ouvrir avec IE:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4.  <script type="text/javascript">
  5.   function jstests(){
  6.    if (typeof document.selection != 'undefined'){
  7.     document.myform.mytext.focus();
  8.     var range = document.selection.createRange();
  9.     alert("Selected Text: " + range.text);
  10.     var buf="range attributes:\n";
  11.     for (var i in range){
  12.      buf += i + " # " + typeof(range[i]) + "\n";
  13.     }
  14.     alert(buf);
  15.     alert(typeof range.move);
  16.    }
  17.   }
  18.  </script>
  19. </head>
  20. <body>
  21.  <a href="nowhere.html" onclick="jstests(); return false;">Test</a>
  22.  <form name="myform">
  23.   <textarea name="mytext">Select some text here...</textarea>
  24.  </form>
  25. </body>
  26. </html>


 
Tu verras que "move" n'est pas listée dans ma liste "range attributes" mais que cependant, cet attribut existe bel et bien (et c'est une fonction dans la réalité), comme le prouve l'alert juste en dessous. Essaie STP et dis moi ce que tu en penses. Ca te permettra en plus de tester la sélection dans le textArea et voir comment ça marche ;)

Reply

Marsh Posté le 12-07-2006 à 11:11:59   

Reply

Marsh Posté le 12-07-2006 à 11:31:05    

Ce que j'en pense c'est que c'est du propriètaire IE, que ça marche pas et qu'en plus même la doc dans la MSDN est à l'ouest ...
http://msdn.microsoft.com/workshop [...] trange.asp , nous apprends que la members table est vide :o
Donc je suis déjà surpris que ça alert quelque chose :o

Message cité 1 fois
Reply

Marsh Posté le 12-07-2006 à 11:39:34    

anapajari a écrit :

Ce que j'en pense c'est que c'est du propriètaire IE, que ça marche pas et qu'en plus même la doc dans la MSDN est à l'ouest ...
http://msdn.microsoft.com/workshop [...] trange.asp , nous apprends que la members table est vide :o
Donc je suis déjà surpris que ça alert quelque chose :o


 
Bon, OK, je tombe àa priori que sur des exemples à "deux balles". Je suis surpris qu'avec le document.images, même si son utilisaion est deprecated, ça ne marche pas correctement non plus. J'en déduis que le JS est tellement haut niveau qu'il y a des exceptions dans tous les sens... (et donc, je ne suis pas avancé pour savoir comment décortiquer mes objets et savoir ce qui est compatible avec tel ou tel navigateur.)
 
Alors, si on en revient à des "objets" un peu moins farfelus, et si on prend le simple cas d'un tableau, considérons l'exemple suivant:
 

Code :
  1. function jstests(){
  2.    var arr = new Array(1,2,3);
  3.    buf = "";
  4.    for (var i in arr){
  5.     buf += i + "\n";
  6.    }
  7.    alert(buf);
  8.    alert(arr.length);
  9.   }


 
Pourquoi l'attribut length n'apparait il pas dans la liste des attributs de mon tableau? Car finalement, on peut appeler length sur mon tableau, donc, ca devrait être un attribut comme un autre?
 
Dernière question, d'ordre plus général... Tu utilises quoi comme site de référence pour JS? Car ca devient rapidement la jungle je trouve....
 
merci :hello:

Message cité 1 fois
Reply

Marsh Posté le 12-07-2006 à 12:06:48    

Yoyo@ a écrit :

J'en déduis que le JS est tellement haut niveau qu'il y a des exceptions dans tous les sens...


ça c'est sur :o

Yoyo@ a écrit :

(et donc, je ne suis pas avancé pour savoir comment décortiquer mes objets et savoir ce qui est compatible avec tel ou tel navigateur.)


Tes objets tu peux en faire ce que tu veux, les objets "standards" ne réagissent pas forcément de la même façon.
C'est le cas de ton exemple sur le tableau, je suis sur que le length apparait pas "on purpose"...  
Tout comme plein d'autres méthodes genre push, pop, reverse ...
T'as qu'a te faire une classe Tableau :o
 

Yoyo@ a écrit :

Dernière question, d'ordre plus général... Tu utilises quoi comme site de référence pour JS? Car ca devient rapidement la jungle je trouve....


c'est vrai que c'est la jungle ;)
Mon camp de base:
http://developer.mozilla.org/en/do [...] _Reference => la "Core Reference", tout ce qu'il y a dedans marche partout ( enfin ... )
ensuite pour le dom tu as au même endroit:  
http://developer.mozilla.org/en/do [...] _Reference => je le trouve un peu bordélique, du coup je lui préfère souvent:
http://www.laltruiste.com/document [...] maire.html => l'interface est immonde et c'est lourd mais la doc DOM est bien classé et tout y est
Pour l'OO en js, la seule page correcte que j'ai trouvée :
http://phrogz.net/JS/Classes/OOPinJS.html ( les bases)
http://phrogz.net/JS/Classes/OOPinJS2.html (l'héritage)
http://phrogz.net/JS/Classes/Exten [...] asses.html ( ajout dynamique de méthode/attribut sur une classe)
Ensuite un oeil sur http://www.quirksmode.org/js/ qui contient moults scripts et tutoriaux "bien écrits" ( c'est rare)
voilou  
 

Message cité 1 fois
Reply

Marsh Posté le 12-07-2006 à 12:18:13    

anapajari a écrit :

...


 
Merci pour tout ça, j'y jetterai un oeil petit à petit.
 
Pour ce qui est de quirksmode.org, j'ai découvert ce site hier, et honnêtement, je l'ai trouvé vraiment bien. Il n'est bien sûr pas exhausitf, mais propose plein d'exemples creusés, de discussions, etc... Et ils ont des tableaus de références sur les différents supports de telles ou tells fonctionnalités vraiment très bien faits, du genre http://www.quirksmode.org/dom/w3c_core.html
 
Sinon, pour ma part, je consulte www.selfhtml.org qui est pas mal dans son genre, et terme de référence, même si malheureusement, ce site ne semble plus mis à jour pour sa version française ou anglaise...
 
Enfin, pour info, mon principal but avec JS est de créer un éditeur très simplifié permettant de mettre en page (gras, italique, souligné, listes et tableaux).
Je me te tate encore entre un système du genre BBCodes et un système édition en temps réel utilisant du DHTML.
Et avant ça, et pour me décider, il faut que je puisse maîtriser JS un minimum.
 
Ou alors, je vais m'orienter vers un outil tout fait, du genre TinyMCE, mais il reste beaucoup trop complet (et donc lourd) pour moi, et jene pense pas que je puisse en maitriser la source pour l'adapter à mes besoins simples...
 
Merci pour les détails en tout cas.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed