foreach en javascript

foreach en javascript - HTML/CSS - Programmation

Marsh Posté le 02-02-2005 à 10:34:21    

J'avais cru voir que cette sorte de boucle existait en javascript mais visiblement c pas le cas... mais alors on fait comment pour utiliser les valeurs d'un tableau habituellement ???
je veux faire une tableau avec une serie de valeur (des codes hexadecimaux genre : Array("00","33","66","99","CC","FF" )
puis des boucles avec des document.write() pour afficher un tableau avec uen palette de couleurs .. je sais pas si c'est possible mais bon...

Reply

Marsh Posté le 02-02-2005 à 10:34:21   

Reply

Marsh Posté le 02-02-2005 à 10:35:20    

C'est possible, mais ultra-lourdingue :/

Reply

Marsh Posté le 02-02-2005 à 10:37:35    

bah est ce que ce serait pas plus leger que d'afficher 256 lignes de HTML (sans compter les <tr> et </tr> ?
surtout que je dois l'afficher 4 fois (pour l'instant !)

Reply

Marsh Posté le 02-02-2005 à 10:38:14    

C'est sûr ;)

Reply

Marsh Posté le 02-02-2005 à 11:27:48    

pour faire un document.write() sur plusieurs lignes... on peut pas ?

Reply

Marsh Posté le 02-02-2005 à 12:34:06    

bouuuuuuh ! ça marche pas ma fonction! :(
 
http://clonecopy.net/php/ezdocs/
 
j'ai essayé un truc avec innerHTML mais ça marche pô !

Reply

Marsh Posté le 02-02-2005 à 13:04:55    

Voila l'equivalent d'un foreach en JavaScript :

Citation :

var tmp = new Array();
tmp[]=1;
SyntaxError: syntax error
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
tmp[tmp.length]=1;
1
props(tmp);
Fields: 0, 1, 2, 3, 4, 5, 6
for(x in tmp) { print(x);}
// Ici on obtient les indices du tableau.
0
1
2
3
4
5
6
for(x in tmp) { print(tmp[x]);}
// Ici on affiche les differentes valeurs du tableau
1
1
1
1
1
1
1


 
Edit : Apres avoir vu ton code JS, je sais pourquoi ton innerHTML fonctionne pas...
innerHTML est une "propriete", elle "contient" le contenu du div. Donc quand tu veux ajouter du contenu, il faut l'ajouter. Or toi tu ne fais que "changer le contenu", mais tu ne l'ajoutes pas.
Faut faire un "+=" et non un "=" seul.


Message édité par cerel le 02-02-2005 à 13:12:18
Reply

Marsh Posté le 02-02-2005 à 13:46:03    

Aussi, ta fonction "AffichePalette" est trop grosse. Au lieu de faire sur chaque ligne un "document.getElementById(div)", pourquoi ne fait-tu pas un :

Code :
  1. var d = document.getElementById(div);
  2. d.innerHTML += ...;
  3. d.innerHTML += ...;


:??: Ca serait encore beaucoup plus léger et rapide. Là le pauvre navigateur doit faire à chaque ligne un getElementById, tu perd grave en performance. Et le mieux encore est de mettre tout ces scripts dans un fichier séparé pour bénéficier de la mise en cache du navigateur :)


Message édité par FlorentG le 02-02-2005 à 13:46:49
Reply

Marsh Posté le 02-02-2005 à 15:54:02    

bah j'ai tout mis dans un fichier séparé mais pour l'instant c'est un include en PHP ! donc ça ne peut pas se voir ! :)
 
Sinon concernant ma page.. pour l'instant tout est valide en XHTML Strict 1.0 ... mais bon sur firefox je vois pas les backgrounds et j'ai des decalages avec mes div... et sur mac n'en parlons pas ! lol
 
je vais tenter de corriger le innerHTML avec ce que tu me dis ! :)

Reply

Marsh Posté le 02-02-2005 à 16:01:16    

... on y est presque ! lol !

Reply

Marsh Posté le 02-02-2005 à 16:01:16   

Reply

Marsh Posté le 02-02-2005 à 16:05:37    

bah non en fait ça marche pas encore !

Reply

Marsh Posté le 02-02-2005 à 16:25:39    

FlorentG a écrit :

Aussi, ta fonction "AffichePalette" est trop grosse. Au lieu de faire sur chaque ligne un "document.getElementById(div)", pourquoi ne fait-tu pas un :

Code :
  1. var d = document.getElementById(div);
  2. d.innerHTML += ...;
  3. d.innerHTML += ...;


:??: Ca serait encore beaucoup plus léger et rapide. Là le pauvre navigateur doit faire à chaque ligne un getElementById, tu perd grave en performance. Et le mieux encore est de mettre tout ces scripts dans un fichier séparé pour bénéficier de la mise en cache du navigateur :)


 
bon bah ça fait planter IE ! :(
 
j'ai fait ça :
 

Code :
  1. function AffichePalette(nom,div,input)
  2. {
  3. var d=document.getElementById(div);
  4. d.innerHTML="Choisissez votre couleur";
  5. d.innerHTML+="<table>";
  6. d.innerHTML+="<tr>";
  7. d.innerHTML+="<td align=\"center\" valign=\"middle\">";
  8. d.innerHTML+="<table>";
  9. d.innerHTML+="<tr>";
  10. d.innerHTML+="<td>";
  11. d.innerHTML+="<table>";
  12. d.innerHTML+="<tr>";
  13. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#000000\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='000000';document.getElementById("+nom+" ).style.background='#000000';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  14. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#000033\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='000033';document.getElementById("+nom+" ).style.background='#000033';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  15. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#000066\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='000066';document.getElementById("+nom+" ).style.background='#000066';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  16. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#000099\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='000099';document.getElementById("+nom+" ).style.background='#000099';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  17. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#0000CC\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='0000CC';document.getElementById("+nom+" ).style.background='#0000CC';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  18. d.innerHTML+="<td width=\"10\" height=\"10\" bgcolor=\"#0000FF\"><a class=\"closeLink\" href=\"#\" onclick=\"document.form2."+input+".value='0000FF';document.getElementById("+nom+" ).style.background='#0000FF';d.innerHTML='';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";
  19. d.innerHTML+="</tr>";
  20. [...]
  21. }
  23. mais ça marche pô !

Reply

Marsh Posté le 02-02-2005 à 16:53:08    

Il fait planter IE de quelle manière ?

Reply

Marsh Posté le 02-02-2005 à 16:54:09    

bah ça ecrit en haut de la fenetre "ne reponds pas" et quand je veux fermer... ça plante

Reply

Marsh Posté le 02-02-2005 à 16:55:05    

T'as pas fait de boucle bizarre ?

Reply

Marsh Posté le 02-02-2005 à 17:05:20    

bah ya plus de boucle là dans mes JS :
 
http://clonecopy.net/php/ezdocs/javascript.php

Reply

Marsh Posté le 04-02-2005 à 10:53:40    

bon j'ai toujours pas resolu mon petit soucy de couleurs.. ça plante mon IE ! et ça affiche que dalle ! lol!
 
pour info voici le code pour lancer la fonction :
 

Code :
  1. <div id="couleurnom1" class="couleurselect" style="background-color:#<?php echo $couleurnom; ?>;">
  2. <a href="#" onclick="toggleDisplay('coul1');AffichePalette('couleurnom1','coul1','couleurnom');" ><img src="dummy.gif" width="32" height="12" alt="Cliquez-ici pour choisir une couleur" /></a>
  3. </div><br />
  4. <div id="coul1" style="display:none;"></div>


Message édité par freed102 le 04-02-2005 à 10:56:55
Reply

Marsh Posté le 04-02-2005 à 10:54:20    

J'avais aussi une fois fait planté IE avec du innerHTML... Utilise des fonctions DOM sinon, ce sera mieux :)

Reply

Marsh Posté le 04-02-2005 à 10:57:19    

DOM ? conné pas.. faut que je me penche sur la question !

Reply

Marsh Posté le 04-02-2005 à 10:59:46    

Ouais, penche-toi dessus. Surtout qu'en XHTML servit en application/xhtml+xml, t'es obligé de les utiliser ;)

Reply

Marsh Posté le 04-02-2005 à 11:02:43    

ah oui mais c ultra mega lent le W3C Dom !

Reply

Marsh Posté le 04-02-2005 à 11:03:40    

Reply

Marsh Posté le 04-02-2005 à 11:06:51    

De toute façon ton truc sera lent, alors on n'est plus à ça près :D Et si ta page est en XHTML, faut utiliser du DOM sinon dans l'avenir ça marchera pas du tout ;)

Reply

Marsh Posté le 04-02-2005 à 11:07:44    

t'as pas une bonne doc là dessus ? j'essaie de trouver mais je vois rien à par cette page qui compare les deux !

Reply

Marsh Posté le 04-02-2005 à 11:09:39    

Nope :( Juste Google...

Reply

Marsh Posté le 04-02-2005 à 11:54:14    

j'ai pas encore bien compris la différence avec ce que j'ai fait mais en tous cas j'ai compris mon erreur ! :)))
j'ai corrigé.. et ça marche !
 
en fait plutot que faire 256 lignes de d.innerHTML+="<td ....>";
 
je fais un  
 
var d="blablabla";
d+="<table...";
d+="<td...>";
...
et seulement à la fin je fais  
document.getElementById(div).innerHTML = d;
 
... et ça marche tres tres bien ! :D

Reply

Marsh Posté le 04-02-2005 à 11:55:07    

N'oublie pas de faire des boucles pour tes couleurs, pour gagner encore plus ;)

Reply

Marsh Posté le 04-02-2005 à 11:56:04    

ouai mais là faut que je me creuse un peu plus les meninges ! lol

Reply

Marsh Posté le 04-02-2005 à 11:56:29    

C'est pas très dur pourtant :)

Reply

Marsh Posté le 04-02-2005 à 11:57:05    

bah je suppose qu'il faut imbriquer 3 boucles.. mais faut que je sache comment....

Reply

Marsh Posté le 04-02-2005 à 11:57:33    

Deux boucles suffisent je pense.

Reply

Marsh Posté le 04-02-2005 à 11:58:12    

ahumm... bien bien ! je vais y reflechir... je vais deja debugger ce qui s'affiche !

Reply

Marsh Posté le 04-02-2005 à 12:02:09    

wouai enfin ça marche sur IE... Mais firefox plante.. Et le mac n'en parlons pas ! lol !

Reply

Marsh Posté le 04-02-2005 à 12:21:24    

c bon ça marche en fait !... me reste plus qu'un petit prob d'objet requis

Reply

Marsh Posté le 04-02-2005 à 12:57:08    

chti probleme de concatenation je pense....  :??:  
 
ça n'a pas l'air de marcher ça :
 

Code :
  1. d+="<td width=\"10\" height=\"10\" bgcolor=\"#000033\"><a class=\"closeLink\" href=\"#\" onclick=\"document.forms['form2']."+input+".value='000033';document.getElementById("+nom+" ).style.background='#000033';toggleDisplay("+div+" );\"><img src=\"dummy.gif\" alt=\"couleur\" width=\"10\" height=\"10\" /></a></td>";


Message édité par freed102 le 04-02-2005 à 12:57:33
Reply

Marsh Posté le 04-02-2005 à 13:58:51    

yess... c bon ça marchouille!

Reply

Marsh Posté le 04-02-2005 à 14:13:46    

Ce que tu peux faire, c'est rajouter un "return false" dans les onclicks que tu utilise pour afficher les options. Comme ca ca evitera que le navigateur suive le lien "#" et du coup retourne tout en haut de la page.

Reply

Marsh Posté le 04-02-2005 à 14:23:47    

yess ! merci pour le tuyau je vais faire ça tout de suite ! :)
 
me reste à faire la même chose avec les polices qui prennent des centaines de lignes
 
nettoyer le code pour qu'il soit valide...
 
à propos... la balise img ne prends pas l'attribut name... je peux faire un document.monimage.src='' avec un id ?

Reply

Marsh Posté le 04-02-2005 à 14:40:32    

Les trucs genre document.bidule ne doivent pas être utilisés, ils ne marchent pas en XHTML (application/xhtml+xml). Pareil pour l'attribut name qui n'est plus valide (sauf dans les formulaires). Faut toujours utiliser un id et la méthode getElementById...

Reply

Marsh Posté le 04-02-2005 à 14:49:47    

c ce que je suis en train de corriger. thx ! :jap:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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