[JS] Array: Ajout et retrait dynamiques de "lignes"

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Lun 6 Avr 2015 - 21:43

Bonjour à tous !

Alors je suis encore assez novice dans la manipulation de tableaux javascript, donc mes connaissances sont très très basiques !

Dans mon Panneau d'Accueil j'ai différents éléments, dont 5 que je voudrais faire "clignoter" aléatoirement pour les mettre en évidence et montrer aux utilisateurs que leur survol peut être intéressant.
J'ai déclaré un tableau js comme ceci :
Code:
var tab_hasard = new Array();
  tab_hasard[0]  = 'nouvelles';
  tab_hasard[1]  = 'evil';
  tab_hasard[2]  = 'light';
  tab_hasard[3]  = 'staff';
  tab_hasard[4]  = 'contexte';
 
  var l_tab_hasard = tab_hasard.length;

Et un petit bout de js me permet de tirer aléatoirement une de ces valeurs :
Code:
hasard = tab_hasard[Math.round((Math.random()*l_tab_hasard) - .5)];
(la variable hasard est bien déclarée au début)

J'obtiens l'effet que je veux dans le sens où effectivement il va bien me tirer au hasard une des valeurs du tableau et faire ce que je veux avec l'élément choisi aléatoirement, puis tirer une autre valeur et ainsi de suite.
Le truc c'est que je ne veux pas que le même élément soit tiré deux fois de suite, mais qu'il peut être tiré à nouveau après le prochain élément sélectionné aléatoirement, car chaque élément doit "clignoter" un certain nombre de fois.
Alors je me suis dit : et si je retirais la ligne qui vient d'être tirée pour qu'elle ne soit pas choisie au prochain tirage, mais la rajoutais une fois le tirage effectué pour qu'elle puisse à nouveau être prise en compte lors du tirage suivant ?
Sauf que je ne sais pas comment faire ça :S
J'ai lu qu'il y avait quelque chose comme :
Code:
array.splice(array.indexOf('machin'),1)
Qui permettait de retirer la "ligne" correspondant à une valeur égale à "machin", mais je n'ai pas compris comment ça marchait exactement, et je ne sais pas comment insérer à nouveau cette ligne une fois le nouveau tirage effectué.

Merci d'avance pour votre aide et joyeuse fin de Pâques ! cheers


Dernière édition par Evaliah le Sam 11 Avr 2015 - 12:02, édité 1 fois
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Mar 7 Avr 2015 - 6:30

Bonjour, je ne sais pas comment est le reste de votre script mais je vous propose la solution suivante:
Code:
var hasard_tmp;
var tab_hasard = 'nouvelles,evil,light,staff,contexte'.split(',');
function gen_hasard(){
do{var t=Math.floor(Math.random()*tab_hasard.length)}while(hasard_tmp==t);
return (hasard_tmp=t);
}

ensuite il vous suffit d'appeler gen_hasard() pour récupérer un index aléatoire par exemple:
Code:
tab_hasard[gen_hasard()]

Notez que vous ne devriez pas utiliser la variable hasard_tmp, dans la mesure ou celle-ci est utilisée pour mémoriser la valeur aléatoire renvoyée par la fonction gen_hasard().


Dernière édition par no_way le Mar 7 Avr 2015 - 7:22, édité 2 fois (Raison : faute d'orthographe)
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Mar 7 Avr 2015 - 22:10

Bonsoir no_way et merci pour votre réponse Smile

Cette méthode différente semble intéressante, mais à vrai dire j'ai du mal à la comprendre, donc j'aimerais savoir si vous pourriez me l'expliquer un peu avant de la tester, j'aime bien savoir ce que je fais =)

Je n'ai jamais utilisé de do / while mais d'après la documentation que j'ai consultée votre code ci-dessous :
Code:
do{var t=Math.floor(Math.random()*tab_hasard.length)}while(hasard_tmp==t);
Veut dire que tant que la valeur tirée n'est pas différente de la valeur préalablement enregistrée ce code va continuer à en tirer jusqu'à ce que la condition se vérifie ?

Merci pour cette nouvelle pierre (do/while) à mon début d'édifice en tout cas Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Mer 8 Avr 2015 - 6:40

Aucun problème:
Code:
var tab_hasard = 'nouvelles,evil,light,staff,contexte'.split(',');
La fonction split() découpe une chaîne de caractères selon un argument qui est présentement une virgule et renvoie un tableau.

Code:
do{var t=Math.floor(Math.random()*tab_hasard.length)}while(hasard_tmp==t);
Vous avez bien compris, l'avantage de do.. while.. est que le code contenu dans do est exécuté obligatoirement une fois avant que la condition dans while ne soit évaluée, concrètement cela permet de raccourcir le code puisque si on utilisait while vous auriez quelque chose de ce genre:
Code:
...
var t=Math.floor(Math.random()*tab_hasard.length);
while(hasard_tmp==t){
/*répétition du calcul, un peu dommage*/
t=Math.floor(Math.random()*tab_hasard.length);
}
...

Code:
return (hasard_tmp=t);
La valeur aléatoire trouvée est assignée à hasard_tmp puis retournée.

Petit complément d'information concernant la déclaration de votre tableau:
Code:
var tab_hasard = new Array();
  tab_hasard[0]  = 'nouvelles';
  tab_hasard[1]  = 'evil';
  tab_hasard[2]  = 'light';
  tab_hasard[3]  = 'staff';
  tab_hasard[4]  = 'contexte';
Vous pouvez définir votre tableau plus facilement:
Code:
var tab_hasard = ['nouvelles','evil','light','staff','contexte'];
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Mer 8 Avr 2015 - 12:40

Merci encore une fois pour cette réponse et pour l'optimisation dans la déclaration du tableau Smile

Votre solution semble fonctionner (je n'avais pas de doute sur la solution en elle-même mais sur ma capacité à l'appliquer au reste de mon js) mais j'ai un problème auquel je ne m'attendais pas sur la suppression d'une valeur dans le tableau.
En effet je voudrais que lorsqu'on a survolé un des éléments programmés pour "clignoter" celui-ci ne soit plus pris en compte dans la fonction déclenchant le "clignotement", l'utilisateur a bien repéré qu'il pouvait faire quelque chose avec donc ce n'est plus utile de le lui signaler.

J'ai pensé qu'en utilisant ceci (lors du survol de l'élément correspondant) par exemple :
Code:
tab_hasard.splice(tab_hasard.indexOf('nouvelles'),1);
Je pourrais retirer la valeur "nouvelles" à mon tableau et donc ne plus l'inclure dans le tirage au sort.
Et effectivement lors du premier survol on retire bien le "nouvelles" du tableau, mais si on survole ce même élément une seconde fois même si l'élément n'existe plus il va retirer le dernier élément du tableau, donc pour moi "contexte".
Je suppose que c'est parce-que le "tab_hasard.indexOf('nouvelles')" retourne alors une valeur qui indique de retirer le dernier élément du tableau, mais je ne sais pas comment faire pour corriger ce problème.
Auriez-vous une solution pour cette défaillance ?

Merci beaucoup Smile

ps : J'entrevois bien une solution mais elle ne me semble pas optimale :
Grossièrement :
Code:
// En dehors de la fonction de survol
var retrait_nouvelles = 1;

// Dans la fonction de survol
if(retrait_nouvelles){
tab_hasard.splice(tab_hasard.indexOf('nouvelles'),1);
retrait_nouvelles = 0;
}
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Mer 8 Avr 2015 - 12:56

Il est assez difficile de vous faire un code optimal ignorant le reste du script mais voici ce que je vous propose:
Code:
function retrait_tab(e){
var a=tab_hasard.indexOf(e);
a!=-1&&tab_hasard.splice(a,1);
}
Notez que si vous retirez n éléments du tableau de sorte qu'il ne contienne plus qu'un élément, vous vous retrouverez avec une boucle infinie en appelant gen_hasard(), et qu'il serait donc nécessaire de modifier le code de gen_hasard afin de prendre ceci en compte ou de vérifier la taille du tableau avant son appel.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Mer 8 Avr 2015 - 23:24

Merci encore une fois pour cette aide !

Par contre je ne possède pas toutes les clefs pour le comprendre et mes recherches au sujet des "bouts de connaissance manquants" n'ont pas été très fructueuses.
je comprends que le var a va chercher l'index de l'élément voulu (par exemple le "nouvelles"), mais ensuite plusieurs choses sortent de ma zone de compréhension.
a != : Je sais que le != veut souvent dire n'est pas égal à, mais dire qu'une variable n'est pas égale à sans mettre de "if" n'entre pas dans ce que j'ai déjà pu voir/utiliser, du coup je ne comprends pas quel est l'effet recherché.
-1&& : là j'avoue que c'est le flou total, et je ne sais pas quels mots clefs utiliser pour en chercher la signification

Pour le retrait jusqu'à ce qu'il n'en reste plus qu'un (Highlander quoi !) ce n'est pas un problème, ma fonction prend bien en compte le nombre d'éléments du tableau et s'arrête d'elle-même quand il ne reste plus de fil sur la bobine Smile

Merci pour votre patience en tout cas !
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Jeu 9 Avr 2015 - 6:47

Aucun souci j'aime ce genre d'aide ^^, et j'aurais dû avoir la présence d'esprit d'expliquer, ce que je m'en vais faire de ce pas Wink
Code:
a!=-1&&tab_hasard.splice(a,1);
Cette partie représente ce qu'on appelle un court-circuit, pour faciliter la compréhension voici ce qui se passe lors de l'évaluation d'une condition dans if, imaginons le code suivant:
Code:
var a=5;
if(a>4&&a<10){...}
l'évaluation commence par "a>4", c'est juste on exécute le test suivant "a<10" , c'est juste aussi, plus aucun test à faire, tous nos tests ayant renvoyé true (juste) on exécute le code entre accolades.
Mais si "a" n'est plus entre 4 et 10:
Code:
var a=3;
if(a>4&&a<10){...}
l'évaluation commence par "a>4", c'est faux, le code entre accolades est ignoré tout comme le test "a<10" qui n'a de toute façon aucune raison d'être évalué puisque l'on sait d'office que "a" ne sera pas compris entre 4 et 10.

C'est le principe du court-circuit:
Code:
a!=-1&&tab_hasard.splice(a,1);
Que l'on peut traduire ainsi:
si "a" est différent de -1 (test juste donc), on passe à l'étape suivante qui consiste à supprimer l'élément du tableau ("tab_hasard.splice(a,1)"), dans le cas contraire le court-circuit est simplement évalué à false et donc la deuxième étape ("tab_hasard.splice(a,1)") est ignorée.
C'est l'équivalent if suivant:
Code:
if(a!=-1){tab_hasard.splice(a,1);}
Vous pouvez effectuer un test conditionnel sans if, en utilisant ce qu'on appelle les conditions ternaires, la structure d'une condition ternaire est la suivante:
Code:
condition?valeur si vrai:valeur si faux;
Exemple:
Code:
var a=5;
alert(a==5?"a est égal à 5":"a n'est pas égal à 5");
On les utilise en général pour attribuer rapidement une valeur à une variable, par exemple:
Code:
var a="Evaliah";
a+=a=="Evaliah"?" est une fille":" est un garçon";
alert(a);
qui est plus rapide que:
Code:
var a="Evaliah";
if(a=="Evaliah"){
a+=" est une fille";
}else{
a+=" est un garçon";
}
alert(a);

En revanche ça devient vite illisible et il y a des limites que je ne détaillerai pas car vous devriez avoir suffisamment d'informations pour d'éventuelles recherches de documentation.

Si vous ne comprenez pas tout, contactez-moi par MP afin de ne pas trop être hors-sujet par rapport à votre question initiale Wink.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Sam 11 Avr 2015 - 10:01

Merci pour toutes ces explications !
C'était donc un "if" raccourci, ce que j'avais pressenti sans pour autant en être sûre Smile
Je ne savais pas du tout qu'on pouvait se servir du && autrement que pour évaluer deux conditions dans le if comme dans votre premier code avec le a = 5, et pour le petit bonus : "condition?valeur si vrai:valeur si faux;" je l'avais déjà vu dans les explications sur des formulaires mais je me suis rarement aventurée à l'utiliser, pourtant c'est bien pratique !

Il y a une dernière chose qui m'interpelle, c'est justement cette condition "si a n'est pas égal à -1", je pense comprendre mais je voudrais juste confirmation : )
Donc si on définit a comme ceci :
Code:
var a=tab_hasard.indexOf(e);
et que e est égal à "nouvelles" et que "nouvelles" est bien présent, alors le a aura une valeur positive qui correspondra à l'endroit où il se situera dans le tableau js.
Dès que "nouvelles" n'est plus présent, a renvoie forcément comme valeur -1.
Donc si j'ai bien compris, quand je tentais ceci :
Code:
tab_hasard.splice(tab_hasard.indexOf('nouvelles'),1);
La première fois "nouvelles" existait bien donc il renvoyait son index dans le tableau et le supprimait correctement, et dès la deuxième fois "nouvelles" n'existant plus il renvoyait -1 et
Code:
tab_hasard.splice(-1,1);
est un code qui fait retirer une valeur à partir de la fin (-1) du tableau, quelle qu'elle soit.

Voilà, si j'ai bien compris comme indiqué je n'ai normalement plus de question votre honneur Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Sam 11 Avr 2015 - 11:36

Vous avez parfaitement cerné les subtilités votre radiance ^^.
Et merci de votre merci Wink
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par Evaliah Sam 11 Avr 2015 - 12:02

Dans ce cas c'est une affaire résolue !
Merci encore une fois pour votre patience et votre pédagogie, j'ai appris des choses très intéressantes grâce à ce sujet Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [JS] Array: Ajout et retrait dynamiques de "lignes"

Message par no_way Sam 11 Avr 2015 - 12:15

Je vous en prie et bonne continuation pour votre forum !
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum