variable et .indexOf

Version imprimable

16/04/2019, 15h17
Charal72

variable et .indexOf

Bonjour à tous,

Je débute..:D

J’aimerai développer ce code de façon à pouvoir inspecter différentes chaines de caractères (que je nomme i0=[..,..,..], i1, i2.. pour localiser un mot entré par l'utilisateur. (récupéré par la variable a)

Pourquoi si var b=i1; b.indexOf(a) ne fonctionne t il pas alors que i1.indexOf(a) va bien!!? Je n'arrive pas à trouver la réponse..

Merci pour votre aide ..

:salut:

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const 
        i0 = ['un', 'deux', 'trois'],
        i1 = ['quatre', 'cinq', 'six'],
        i2 = ['sept', 'huit', 'neuf'];
 
    let a = 'cinq';
 
    // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf
    // -1 : n'existe pas
    // 0 à n : index de l'élément cherché
 
    console.log(`i0.indexOf(a) = ${ i0.indexOf(a) }`); // -1
    console.log(`i1.indexOf(a) = ${ i1.indexOf(a) }`); // 1
    console.log(`i2.indexOf(a) = ${ i2.indexOf(a) }`); // -1
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

18/04/2019, 10h42
Watilin

Citation:

Envoyé par Charal72

Pourquoi si var b=i1; b.indexOf(a) ne fonctionne t il pas alors que i1.indexOf(a) va bien!!? Je n'arrive pas à trouver la réponse..

Si effectivement b = i1, les choses devraient se passer comme tu le décris. Si le problème n’est pas là où on regarde, il faut regarder ailleurs… Peut-être que a est modifié entre les deux tests.
Ou alors, c’est un problème de portée. Comment et à quel endroit déclares-tu b, i1 et a ?
18/04/2019, 19h42
Charal72

Merci pour votre intérêt..et désolé de ne pas avoir répondu plus vite! En fait des chaines de caractères j'en ai plus de 50! l1....l50) d'ou l’intérêt,( je pense..), de parcourir une boucle type for (i=...) {b=l + i;...
et c'est là que le b.indexOf(a) ne fonctionne pas!

Voici le code réduit afin de comprendre :?
e ne donne pas la bonne valeur si je rentre puma, par ex..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input id="case0" type="text" class="cinq" value="" />
<input id="case2" type="text" class="cinq" value="" />
<input type="button" value="Nouvelle partie"onClick="myFunction()"/>
 
<script>
var i0 = ["lama","puma","elephant","vache","renard"];
var j=0;
function myFunction() {
var a = document.getElementById("case0").value;
var b="i"+j;
var e = b.indexOf(a);
document.getElementById("case2").value= e;
}
</script>

23/04/2019, 17h29
CosmoKnacki

Le problème c'est var b="i"+j;, car tout ce que fait cette ligne est d'affecter à la variable b la chaîne de caractère "i0" (par exemple). Mais ça reste une chaîne de caractère, et le i0 dans cette chaîne ne sera pas vu comme la variable i0 (et heureusement sinon ce serait un sacré bazar).

Pour que ça fonctionne, il faudrait à la limite remplacer cette ligne par: var b=eval("i"+j);. De cette manière la chaîne de caractère serait interprétée comme du code Javascript et donc i0 vu comme la variable du même nom et remplacée par sa valeur.

Mais, l'utilisation de eval est le petit signal qui doit te dire que tu t'y prends mal, et qu'il y a sûrement une manière bien plus simple et élégante d'arriver à tes fins (l'utilisation d'un tableau à la place de noms de variable numérotés?). N'ayant pas tous les tenants et aboutissants, je ne peux pas t'en dire plus.

En parler sarthois, "renard" se dit "r’nâ".
24/04/2019, 09h22
NoSmoking
Bonjour,
on peut utiliser la notation par crochet pour atteindre ta variable
Code:

1 2 3 var i0 = ["lama", "puma", "elephant", "vache", "renard"]; var b = "i" + 0; alert(window[b]);
Ceci étant, cela n'est valable, dans le cas présent, que si ta variable est déclarée avec le mot clé var, cela ne fonctionnera pas avec les mots clé let ou const.

Citation:

Envoyé par CosmoKnacki

Le problème c'est var b="i"+j;, car tout ce que fait cette ligne est d'affecter à la variable b la chaîne de caractère "i0" (par exemple). Mais ça reste une chaîne de caractère, et le i0 dans cette chaîne ne sera pas vu comme la variable i0 (et heureusement sinon ce serait un sacré bazar).

Pour que ça fonctionne, il faudrait à la limite remplacer cette ligne par: var b=eval("i"+j);. De cette manière la chaîne de caractère serait interprétée comme du code Javascript et donc i0 vu comme la variable du même nom et remplacée par sa valeur.

Mais, l'utilisation de eval est le petit signal qui doit te dire que tu t'y prends mal, et qu'il y a sûrement une manière bien plus simple et élégante d'arriver à tes fins (l'utilisation d'un tableau à la place de noms de variable numérotés?). N'ayant pas tous les tenants et aboutissants, je ne peux pas t'en dire plus.

En parler sarthois, "renard" se dit "r’nâ".

Merci pour ta réponse.
Voici le code, qui fonctionne ! grâce à toi ! Maintenant si une solution plus propre existe, je ne demande qu'à apprendre :)
En fait j'ai une quarantaine de cases (case0 ... case 40), et autant de chaines de caracteres (l0..l40)
Encore merci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <input id="case0" type="text" class="cinq" value="" /> <input id="case1" type="text" class="cinq" value="" /> <input id="case2" type="text" class="cinq" value="" /> <input type="button" value="Vérifier"onClick="myFunction()"/> <script> var l0 = ["peintre jeune","jeune peintre"]; var l1 = ["tableau du vieux peintre","peintre vieux","vieux peintre","sous la main"]; var memo = []; function myFunction() { for(var i=0; i<3; i++) { var a = document.getElementById("case" + i).value; var mem = memo.indexOf(a); for(var n=0; n<2; n++) { var b = eval("l"+n); if(mem == -1) { if(b.indexOf(a) !== -1 && a!="") { document.getElementById("case" + i).style.backgroundColor="#4CE0D2"; for(var k=0; k<b.length; k++) { memo.push(b[k]); n = 2;} } } } } }

Bonjour,

la 1ère amélioration est de travailler avec un array * :
* Ca m'étonne que tous les émiments spécialistes de DVP ne te l'aient pas proposé avent moi... :aie:
Code:

1 2 3 4 5 6 const l = [ ["peintre jeune","jeune peintre"], ["tableau du vieux peintre","peintre vieux","vieux peintre","sous la main"], // ... ]; const l_lg = l.length;
Il faut alors remplacer :
Code:

1 2 for(var n=0; n<2; n++) { var b = eval("l"+n);
par :
Code:

1 2 for(var n=0; n<l_lg; n++) { var b = l[n];
Et il y a sûrement d'autres optimisations à faire...
Cela dit... Je n'ai pas compris à quoi ça servait... :koi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style></style>
    </head>
<body>
    <form>
        <fieldset id="cases">
            <input type="text" class="cinq" value="" />
            <input type="text" class="cinq" value="" />
            <input type="text" class="cinq" value="" />
        </fieldset>
        <input id="check" type="button" value="Nouvelle partie" />
    </form>
</body>
<script>
    // tableau de tableaux (chaque tableau a donc un index suivant son ordre)
    const wordLists = [
        [ "peintre jeune", "jeune peintre" ], // index 0
        [ "tableau du vieux peintre", "peintre vieux", "vieux peintre", "sous la main" ], // index 1
        [ "lama", "puma", "elephant", "vache", "renard" ], // index 2, etc.
    ];
 
    // tableau de tous les éléments input contenus dans l'élément avec l'id #cases
    const cases = document.querySelectorAll('#cases > input');
 
 
    // pour séparer le html et le javascript, on utilise un gestionnaire d'évenements (ici pour détecter le click sur le bouton)
    document.getElementById('check').addEventListener('click', e => { // corps de la fonction exécutée lors du click
        for (const c of cases) {
            if ( c.value === "" )
                continue;
 
            for (let i=0, maxi=wordLists.length; i < maxi; i++) {
                for (const word of wordLists[i]) {
                    if ( word.indexOf(c.value) !== -1 ) {
                        c.value = i;
                        c.style.backgroundColor = '#4CE0D2';
                        break;
                    } 
                }
            }
        }
    }, false);
</script>
</html>

Citation:

Envoyé par charal72

Maintenant si une solution plus propre existe, je ne demande qu'à apprendre :)

Citation:

Envoyé par jreaux62

Cela dit... Je n'ai pas compris à quoi ça servait... :koi:

Et c'est bien là le problème, car sans savoir ce que ce code cherche à réaliser et avec pour seul indice un code avec des noms de variables qui n'ont pas de signification (a, b, l, mem...), c'est pas facile d'avoir une vision d'ensemble qui permettrait de prendre de meilleurs décisions.

24/04/2019, 14h36
Invité
J'avoue que j'ai encore du mal à bien appréhender "const" et "let"...

Citation:

let
L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

L'exemple est "perturbant" :
Code:

1 2 3 4 5 6 let x = 1; if (x === 1) { let x = 2; console.log(x); // expected output: 2 } console.log(x); // expected output: 1
un simple "if" est un "bloc courant" ? 8O

On comprend un peu mieux dans la description :

Citation:

let permet de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées.

Le mot-clé var, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).

Citation:

const
La déclaration const permet de créer une constante nommée accessible uniquement en lecture.
Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté.
Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures.
Une constante ne peut pas être déclarée à nouveau.

portée... ?? globale ? (là, je doute...)

let et const ont la même portée dans le sens où elles rendent disponibles la variable (ou la constante) dans le bloc courant. Ensuite la variable (ou la constante) sont également disponibles dans les blocs enfants car en l'absence de définition locale, javascript cherche dans les blocs parents. On peut donc faire ça:
Code:

1 2 3 const chaine='toto'; (function() { console.log(chaine); })(); // toto // ^--- Javascript cherche dans le bloc parent si "chaine" est définie, car il n'y a pas de définition locale
mais aussi:
Code:

1 2 3 4 5 const chaine='toto'; (function() { const chaine='titi'; console.log(chaine); })(); // titi // ^--- j'ai le droit car j'ai changé de bloc (function() { console.log(chaine); })(); // toto // la constante du bloc parent n'a pas changé
Bien que "chaine" soit disponible dans le bloc enfant (en tant que constante du bloc parent), rien ne m'empêche de définir une constante de même nom dans un bloc enfant (qui du coup sera prioritaire au sein de ce bloc).

La grosse différence avec var c'est que les définitions des blocs enfants n'impactent pas les parents:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var a=0; if (1) { var a=6; } console.log(a); // 6 let b=0; if (1) { let b=6; } console.log(b); // 0 if (1) { var x=12; } console.log(x); // 12 if (1) { let y=12; } console.log(y); // ReferenceError: y is not defined

Il existe une autre différence et non des moindres, dans un contexte global, avec let on déclare une variable globale avec var on déclare également une variable global mais qui est en fait une propriété de l'objet global window.

Ce que l'on peut faire avec var
Code:

1 2 3 4 5 6 console.log(varVariable); // méthode directe // >> globalVar console.log(window.varVariable); // méthode point // >> globalVar console.log(window["varVariable"]); // méthode crochet // >> globalVar
Ce que l'on peut également faire
Code:

1 2 3 4 5 6 // autre type d'appel var autreVar = "var-Variable"; console.log(autreVar); // >> var-Variable console.log(window[autreVar]); // >> globalVar
Ce qui différencie let de var, dans l'espace global
Code:

1 2 3 4 5 6 7 let letVariable = "globalLet"; console.log(letVariable); // >> globalLet console.log(window.letVariable); // >> undefined console.log(window["letVariable"]); // >> undefined

24/04/2019, 15h57
Watilin
On peut voir les blocs d’une autre façon, en partant du principe qu’ils sont une forme de statement (en français on pourrait dire « instruction »). Par exemple si on prend la structure if :

Code:

if (expression) statement

Le statement peut être une instruction seule, par exemple

Code:

if (true) console.log("bonjour");

Ou bien un ensemble de zéro, une ou plusieurs instructions regroupées entre accolades { … } et séparées par des point-virgules ; :
Code:

1 2 3 4 if (expression) { console.log("bonjour"); const reponse = 42; }
Ce n’est pas if, ni for^(*), ni while, etc. qui définissent un bloc, c’est simplement la présence des accolades. D’ailleurs, on peut les utiliser sans rien et c’est un moyen facile de créer une nouvelle portée :
Code:

1 2 3 4 5 6 7 8 const x = 1; { const x = 2; console.log(x); // 2 } console.log(x); // 1
(*) Edit : pour for il y a une exception, voir mon message suivant.
24/04/2019, 22h27
CosmoKnacki

Citation:

Envoyé par Watilin

Ce n’est pas if, ni for, ni while, etc. qui définissent un bloc, c’est simplement la présence des accolades.

C'est piégeux comme disent les québécois, car on pourrait penser qu'écrire if (1) let a=1; soit possible et que le bloc soit sous-entendu (comme un sucre syntaxique), or ce n'est pas du tout le cas (SyntaxError: lexical declarations can't appear in single-statement context), car c'est bien les accolades qui définissent le bloc.

Bonjour,

Citation:

Envoyé par CosmoKnacki

C'est piégeux comme disent les québécois, car on pourrait penser qu'écrire if (1) let a=1; soit possible et que le bloc soit sous-entendu (comme un sucre syntaxique), or ce n'est pas du tout le cas (SyntaxError: lexical declarations can't appear in single-statement context), car c'est bien les accolades qui définissent le bloc.

Je vois cette erreur comme un choix arbitraire qui a été fait (la déclaration de cette variable n'ayant pas de sens dans ce bloc implicite), mais ne signifiant pas pour autant qu'il ne pourrait pas y avoir de bloc implicite en l'absence d'accolades.

Cet exemple fonctionnel sans accolades montre l'existence de blocs implicites :
Code:

1 2 3 4 var ar_=[]; for(let i=0;i<2;i++) ar_[i]=function(){console.log(i);}; ar_[0](); //0 ar_[1](); //1
De même qu'avec if, on aurait :

Code:

for(let i=0;i<2;i++) let j=0; //erreur

Il y a une erreur, oui, mais ne voulant pas forcément dire qu'il n'y a pas potentiellement de bloc, comme le montre l'exemple précédent.

Bon après, c'est aussi un peu abstrait comme perception, le résultat est le même. :)

A noter au passage cette différence entre les deux boucles suivantes :
Code:

1 2 3 4 5 6 7 8 9 var ar_=[]; for(let i=0;i<2;i++) {ar_[i]=function(){console.log(i);};} ar_[0](); //0 ar_[1](); //1 for(let i=0;i<2;) {ar_[i]=function(){console.log(i);};i++;} ar_[0](); //1 ar_[1](); //2
On comprend le fonctionnement, mais cela montre qu'il y a vraiment une convention d'écriture, avec derrière un remaniement assez important du code.

Dans le genre également un peu déroutant :
Code:

1 2 3 4 for(const i of [0,1,2]) console.log(i); //0 1 2 for(const i in [1,2,3]) console.log(i); //0 1 2 for(let i=0;i<3;i++) console.log(i); //0 1 2 for(const i=0;i<2;i++) console.log(i); //0 puis erreur
Les deux premiers cas montrent une utilisation de constante qui peut surprendre car en lisant naïvement le code on croirait voir une constante i qui change de valeur.
Bien sûr, on comprend, mais du coup pour ma part, je ne suis pas vraiment fan de let et const, certes pratiques, mais qui amènent à des codes peu élégants (sans dire que les miens le sont :P), le côté pratique s'accompagnant de subtilités dont tout le monde n'aura pas forcément conscience.
Je n'irai toutefois pas jusqu'à en déconseiller l'usage, évidemment. :)

25/04/2019, 10h20
Invité

Bonjour,

je trouve surtout que c'est un bon moyen pour semer la confusion, et s'arracher les cheveux plus souvent qu'à son tour...

Celui qui a inventé "let" et "const" devait être chauve, et il a voulu se venger... :weird:

Et pour citer Gilles Le Gendre :

Citation:

C'est certainement « Trop intelligent, trop subtil »...
25/04/2019, 16h36
Watilin

J’avais oublié ce détail avec for. J’éditerai mon précédent message pour réduire la confusion.

La structure for a une syntaxe complexe et permet une petite particularité : sa clause d’initialisation permet de déclarer une variable. Historiquement, d’abord seulement avec var. Puis, quand const et let sont apparus, la sémantique de cette clause d’initialisation a été légèrement modifiée.

var étant aveugle aux blocs, déclarer la variable dans l’initialisation du for ou en-dehors ne changeait rien. Mais avec let et const, il a été décidé que la variable déclarée existerait seulement dans le corps de la boucle, même si ce corps n’est constitué que d’une seule instruction, sans accolades. Avec la subtilité, comme tu le fais remarquer Loralina, que cette déclaration se fait pour chaque itération, ce qui peut donner l’impression d’une constante qui change de valeur.

Donc oui, quelque part, la structure for est un peu une exception car elle crée un bloc implicite, mais seulement pour la ou les variables déclarées dans la clause d’initialisation.
Voir la syntaxe de for.

1 pièce(s) jointe(s)

Citation:

Voici donc une description plus précise :D
Je montre un tableau une minute, Pièce jointe 470021
puis je demande de remplir une trentaine de case avec les éléments du tableau dont il se souvient. Je leur demande d'expliciter le maximum leur réponse..ex: le petit coffret métallique sur la table
Puis je compare chacune de leur réponse avec différentes chaines de caractères contenant chacune la description d'un élément ["coffret",métallique","table","petit"]. Si au moins 2 éléments d'une même chaîne appartiennent à la réponse, je valide. Sinon, je refuse.
Le code ci après fonctionne parfaitement tant que la réponse est validée. Une fois qu'une réponse est refusée, les suivantes le sont aussi systématiquement !!
Pourriez vous m'aider?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<style>
    .cinq {float:left; width:30%;margin-left:25px;padding:10px;}
    .cinq input {border:none; background-color:transparent;width:70%;text-transform:uppercase;}
</style>
<div>
<p class="txt" style="font-weight:bold; text-align:center;padding:15px;text-transform:uppercase;">Inscrivez ci dessous les éléments dont vous vous rappelez concernant le tableau de Bailly.</br>Soyez le plus précis possible !</p>
<input id="case0" type="text" class="cinq" value="" /><input id="case1" type="text" class="cinq" value="" /><input id="case2" type="text" class="cinq" value="" />
<input id="case3" type="text" class="cinq" value="" /><input id="case4" type="text" class="cinq" value="" /><input id="case5" type="text" class="cinq" value="" />
<input id="case6" type="text" class="cinq" value="" /><input id="case7" type="text" class="cinq" value="" /><input id="case8" type="text" class="cinq" value="" />
<input id="case9" type="text" class="cinq" value="" /><input id="case10" type="text" class="cinq" value="" /><input id="case11" type="text" class="cinq" value="" />
<input id="case12" type="text" class="cinq" value="" /><input id="case13" type="text" class="cinq" value="" /><input id="case14" type="text" class="cinq" value="" />
<input id="case15" type="text" class="cinq" value="" /><input id="case16" type="text" class="cinq" value="" /><input id="case17" type="text" class="cinq" value="" />
<input id="case18" type="text" class="cinq" value="" /><input id="case19" type="text" class="cinq" value="" /><input id="case20" type="text" class="cinq" value="" />
<input id="case21" type="text" class="cinq" value="" /><input id="case22" type="text" class="cinq" value="" /><input id="case23" type="text" class="cinq" value="" />
<input id="case24" type="text" class="cinq" value="" /><input id="case25" type="text" class="cinq" value="" /><input id="case26" type="text" class="cinq" value="" />
<input id="case27" type="text" class="cinq" value="" /><input id="case28" type="text" class="cinq" value="" /><input id="case29" type="text" class="cinq" value="" />
<input type="button" value="Vérifier"onClick="myFunction()"/>
</div>
 
<script>
var ok=0;
var l0 = ["peintre","jeune"];
var l1 = ["tableau","peintre","vieux","main"];
var l2 = ["tableau","femme"];
var l3 = ["tableau","homme","barbe","barbu"];
var l4 = ["tableau","joueur","mandoline","guitare"];
var l5 = ["buste","enfant","sculpture","antique"];
var l6 = ["statue","homme","esclave","sculpture"];
var l7 = ["palette","peinture","peintures","couleurs","esclave"];
var l8 = ["trois","bulles","volent","flottent","savon"];
var l9 = ["crane","table","crane"];
var l10 = ["canne","baguette","personnage","peintre"];
var l11 = ["flute","table","flûte","flute","flûte"];
var l12 = ["couteau","table","coupe","papier","lettre","coupe-papier","couteau"];
var l13 = ["collier","perle","table"];
var l14 = ["petit","coffret","couvercle","ouvert","boite","métallique","coffret"];
var l15 = ["deux","2","livres","livre","table"];
var l16 = ["trois","3","roses","vase","table"];
var l17 = ["table","bois","table"];
var l18 = ["rideau","tenture","livres","livre","table","rideau"];
var l19 = ["verre","moitié","rempli","vin","blanc","flute","champagne"];
var l20 = ["pièces","monnaie","pièce"];
var l21 = ["flacon","renversé","table","brûle parfum","brûle-parfum"];
var l22 = ["vase","transparent","renversé","table"];
var l23 = ["bougeoir","bougie","éteinte"];
var l24 = ["parchemin","roulé","enroulé"];
var l25 = ["vase","livre","vase"];
var l26 = ["sablier","sablier"];
var l27 = ["nappe","tissu","froissé","table","bord"];
var l28 = ["papier","texte","écrit","plié","bord","écriture"];
var l29 = ["papier","tombe","table","vole","petit","blanc"];
var memo = [];
var mem = [];
function myFunction() {
for (var i=0;i<30;i++){
var a = document.getElementById("case"+i).value;
mem.push(a);
for (var j=0;j<30;j++){
ok=0;
var b = eval("l"+j);
for (var v=0;v<b.length;v++){
var z = b[v];
if (a!="") {
if (mem[0].indexOf(z) !== -1) {
ok++;
if (ok==2) {
document.getElementById("case"+i).style.backgroundColor="#4CE0D2";ok=0;v=b.length;j=30;mem.pop(a);
for (var w=0;w<b.length;w++){
var u = b[w];b.pop(u);}}
}
else {
document.getElementById("case"+i).style.backgroundColor="#FF6666";}
}
else{
document.getElementById("case"+i).style.backgroundColor="#FF6666";}
}
}
}
}
</script>

D'avance, merci pour votre réflexion :?

25/04/2019, 23h27
ProgElecT

Salut

Je ne savais pas qu'il était possible de nommer des variable avec seulement des chiffres, chez moi je n'y parviens pas.

[NOSUJET]Il serait plus lisible de nous mettre un code intenté [/NOSUJET]
25/04/2019, 23h54
CosmoKnacki

Moi, la première chose qui me vient à l'esprit c'est que l'utilisateur motivé peut tricher en affichant le code source de la page. D'où la question: est-ce que tu utilises un langage serveur comme le php? (ce qui permettrait de rendre inaccessible les listes de mots à l'utilisateur.)

Autre chose, un utilisateur peut rentrer "deux 2" ou "livre livres" pour valider un champ. Ça n'est pas très probant. De même, si un utilisateur rentre "coupe papier", c'est valide alors que s'il rentre "coupe-papier" ça ne l'est plus.
Peut-être faudrait-il envisager une structure de données plus complexe qui prendrait en compte différentes "versions" d'un même terme pour éviter ce problème de "faux-positif", et qui du même coup permettrait de pondérer certains termes comme par exemple "sablier" sans avoir à l'écrire deux fois dans la liste.

Je réfléchirai à ça demain.

Voilà ce que je te propose (j'ai séparé le html et le javascript pour avoir une coloration syntaxique correcte, il suffit de le coller):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style> #instructions { font-weight: bold; text-align: center; padding: 15px; text-transform: uppercase; } #cases { border: none; } #cases > input { width: 30%; margin-left: 15px; } </style> </head> <body> <div> <p id="instructions">Inscrivez ci dessous les éléments dont vous vous rappelez concernant le tableau de Bailly. </br>Soyez le plus précis possible !</p> <form> <fieldset id="cases"> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> <input type="text" value=""/><input type="text" value=""/><input type="text" value=""/> </fieldset> <input type="button" value="Vérifier" id="check" /> </form> </div> <script> /* le code Javascript */ </script> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 document.forms[0].reset(); const cases = document.querySelectorAll('#cases input'); const json = `[ {"elts": ["peintre", "jeune"]}, {"elts": ["tableau", "peintre", "vieux", "main"]}, {"elts": ["tableau", "femme"]}, {"elts": ["tableau", "homme", {"elts": ["barbe", "barbu"], "needed": 1}]}, {"elts": ["tableau", "joueur", {"elts": ["luth", "mandoline", "guitare"], "needed": 1}]}, {"elts": ["buste", "enfant", "sculpture", "antique"]}, {"elts": [{"elts":["statue", "sculpture"], "needed": 1}, "homme", "esclave"]}, {"elts": ["palette", {"elts": ["peinture", "peintures"], "needed": 1}, "couleurs", "esclave"]}, {"elts": ["trois", "bulles", {"elts": ["volent", "flottent"], "needed": 1}, "savon"]}, {"elts": ["sablier"], "needed": 1} ]`; const lists = JSON.parse(json); const defaultPoints = 1; // par défaut un mot donne un point const defaultNeeded = 2; // par défaut il faut au moins 2 points pour valider une liste function check(wordSet, list) { const points = list.points || defaultPoints; // nombre de points pour 1 item correspondant const needed = list.needed || defaultNeeded; // nombre de points nécessaires pour valider la liste courante let totalScore = 0; for (const item of list.elts) { if ( typeof item === 'string' ) { // l'item est une chaîne if ( wordSet.has(item) ) // si l'item est dans la case, on augmente le score totalScore += points; } else { // l'item est un objet (une liste), on appelle récursivement la fonction if ( check(wordSet, item) ) // si elle renvoie "true", on augmente le score totalScore += points; } } return totalScore >= needed; // renvoie "true" lorsque le score nécessaire est atteint. } document.getElementById('check').addEventListener('click', e => { for (const c of cases) { let wordSet = new Set(c.value.toLowerCase().match(/[\wàâäéèêîïôöùûüÿçæœ]+(?:-[\wàâäéèêîïôöùûüÿçæœ]+)*/g)); if ( ! wordSet.size ) // la case est vide, on passe à la suivante continue; let found = false; for (const list of lists) { if ( check(wordSet, list) ) { c.style.backgroundColor = '#4CE0D2'; found = true; break; // dés qu'une liste correspond on interrompt la boucle } } if ( ! found ) c.style.backgroundColor = '#FF6666'; } }, false);
L'idée est de stocker les listes de mots dans du JSON. Cela permet plus de souplesse et notamment de faire face aux subtilités que j'ai évoquées dans mon post précédent. Voyons ça de plus prés.

Pour un cas simple comme la liste: "buste", "enfant", "sculpture", "antique", pas de difficulté, on créé le json suivant: {"elts": ["buste", "enfant", "sculpture", "antique"], "needed": 2, "points": 1}. La clef "elts" est associée à un tableau dont les items sont chacun des mots, la clef "points" donne le nombre de points à chaque mot correspondant (donc ici 1 mot = 1 point), quant à la clef "needed", elle donne le nombre de points nécessaires pour valider la liste (donc 2 points, soit 2 mots correspondants).

Pour alléger le json, et comme la plupart du temps 1 mot = 1 point et que 2 points sont nécessaires, j'ai créé des constantes par défaut (defaultPoints et defaultNeeded) de manière à ce que quand les clefs "points" ou "needed" sont manquantes, ces valeurs par défaut soient utilisées.

Quel est l'intérêt de ce système de points biscornu?

Et bien, c'est justement pour les cas plus ardus:
liste avec un élément unique:"sablier".
Dans ce cas, vu qu'il n'y a qu'un seul mot, pour valider la liste, on a deux solutions possibles, soit on réduit le nombre de points nécessaires à la validation: {"elts": ["sablier"], "needed": 1}, soit on augmente le nombre de points: {"elts": ["sablier"], "points": 2} pour une correspondance.
liste avec des items équivalents: "tableau", "homme", "barbe", "barbu".
"barbe" et "barbu" relève de la même idée, il serait curieux de valider une case contenant juste ces deux mots. Dans ce cas, il suffit de les remplacer par un objet json (une autre liste), pour donner: {"elts": ["tableau", "homme", {"elts": ["barbe", "barbu"], "needed": 1}]}.
Dans ce cas de figure la fonction check s'appelle elle-même pour comparer les mots de la case avec cette liste imbriquée. Si cet appel récursif renvoie "true" les points sont attribués, dans le cas contraire, ils ne le sont pas.
À noter qu'il n'y a pas de limite au niveau d'imbrication, par exemple rien n'empêche de faire: {"elts": ["tableau", "homme", {"elts": ["barbe", "barbu", {"elts": ["poils", "sur", "visage"], "needed": 3}], "needed": 1}]}

Dans la même veine, on pourrait envisager avec des modifications minimes sur l'algorithme de faire une liste pondérée (si on souhaite que certains termes soient mieux rétribués que d'autres).

27/04/2019, 14h32
Charal72

Un grand merci.. je vais regarder ca.
27/04/2019, 18h30
CosmoKnacki

Il manque encore un système pour empêcher de répondre plusieurs fois la même chose (donc un système qui élimine une liste lorsque qu'une case correspond déjà à celle-ci), je vais voir ça plus tard.

Ci-joint la ligne du coupe-papier: {"elts": [{"elts": [{"elts": ["coupe", {"elts": ["papier", "lettre"], "needed": 1}]}, "coupe-papier", "couteau"], "needed": 1}, "table"]}

Il suffit d'ajouter une propriété frozen à chaque liste, ce qui change juste un peu cette partie du code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
document.getElementById('check').addEventListener('click', e => {
    for (const list of lists) { // on défreeze toutes les listes
        list.frozen = false;
    }
 
    for (const c of cases) {
        let wordSet = new Set(c.value.toLowerCase().match(/[\wàâäéèêîïôöùûüÿçæœ]+(?:-[\wàâäéèêîïôöùûüÿçæœ]+)*/g));
 
        if ( ! wordSet.size ) // la case est vide, on passe à la suivante
            continue;
 
        let found = false;
 
        for (const list of lists) {
            if ( list.frozen )
                continue;
 
            if ( check(wordSet, list) ) {
                c.style.backgroundColor = '#4CE0D2';
                found = true;
                list.frozen = true; // cette liste a été validée, on la freeze.
                break; // dés qu'une liste correspond on interrompt la boucle
            } 
        }
 
        if ( ! found )
            c.style.backgroundColor = '#FF6666';
 
    }
}, false);

28/04/2019, 16h28
DMC

Bonjour Charal72,

Voila une exemple en espérant que j'ai bien compris

https://codepen.io/Zonecss/pen/qwQbrB
28/04/2019, 16h35
Charal72

Que dire??... J'ai encore pas mal de progrès à faire 8O!
Je vais passer quelques heures à comprendre ton code..mais pas de problème: il est nickel! Encore merci :lol: (et à bientôt..)
Et je viens de regarder celui, de DMC qui semble également pas mal.. 2 façons de faire différentes ! le top !
28/04/2019, 17h36
Charal72

Concernant DMC: le code ne prends pas en compte le fait qu'il faut au moins 2 éléments pour valider la réponse. (peintre ne suffit pas, il faut ajouter jeune, par ex..)
Pour Cosmo: Impeccable..sauf que si je veux rajouter des [], le code ne fonctionne plus..?? je vais essayer de comprendre ..mais bon, si tu as la réponse..merci encore
28/04/2019, 21h15
CosmoKnacki

Citation:

Envoyé par Charal72

Impeccable..sauf que si je veux rajouter des [], le code ne fonctionne plus..??

Est-ce que tu peux être plus clair? Des crochets où ça et pourquoi faire?
28/04/2019, 22h05
Charal72

Ajouter des {"elts": ["", ""]}
28/04/2019, 22h41
CosmoKnacki

Il n'y a pas de difficulté particulière à le faire, tu dois juste veiller à bien respecter la syntaxe (bien appairer les crochets et accolades, séparer éléments d'une virgule), car la moindre erreur de ce coté provoque une erreur de parsing du JSON. Si tu n'arrives pas à voir l'erreur que tu as commise tu peux toujours poster ce que tu as fait.

(NB: pour avoir la confirmation qu'il s'agit bien d'une erreur de syntaxe dans le JSON, utilise les outils de développements de ton navigateur et affiche la console: dans ce cas elle te signalera une erreur au niveau de la ligne const lists = JSON.parse(json);)

J'ai tout bien regardé... quelque chose m'échappe..(une de plus!)
voici le code js (je n'ai rien odifié d'autre que les elts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<script>
document.forms[0].reset();
 
const cases = document.querySelectorAll('#cases input');
 
const json = `[
    {"elts": ["peintre", "jeune"]},
    {"elts": ["tableau", "peintre", "vieux", "main"]},
    {"elts": ["tableau", "femme"]},
    {"elts": ["tableau", "homme", {"elts": ["barbe", "barbu"], "needed": 1}]},
    {"elts": ["tableau", "joueur", {"elts": ["luth", "mandoline", "guitare"], "needed": 1}]},
    {"elts": ["buste", "enfant", "sculpture", "antique"]},
    {"elts": [{"elts":["statue", "sculpture"], "needed": 1}, "homme", "esclave"]},
    {"elts": ["palette", {"elts": ["peinture", "peintures"], "needed": 1}, "couleurs", "effacées"]},
    {"elts": ["trois", "bulles", {"elts": ["volent", "flottent"], "needed": 1}, "savon"]},
    {"elts": ["sablier"], "needed": 1},
    {"elts": ["parchemin"], "needed": 1},
    {"elts": ["vase"], "needed": 1},
    {"elts": ["crane", "crâne"], "needed": 1},
    {"elts": [{"elts":["canne", "baton", baguette"], "needed": 1}, "personnage", "tenue", "peintre"]},
    {"elts": [{"elts": [{"elts": ["coupe", {"elts": ["papier", "lettre"], "needed": 1}]}, "coupe-papier", "couteau"], "needed": 1}, "table"]},
    {"elts": ["flute", "flûte"], "needed": 1},
    {"elts": ["perle", {"elts": ["colliers", "collier"], "needed": 1}]},
    {"elts": ["petit", "coffret", "couvercle", "ouvert"]},
    {"elts": ["deux", "livres", "livre", "table", "2"]},
    {"elts": ["trois", "3", "roses", "vase", "table"]},
    {"elts": ["table"], "needed": 1},
    {"elts": ["rideau", "rideaux"], "needed": 1},
    {"elts": [verre", "moitié", "rempli", "vin", "blanc", "flute", "champagne"]},
    {"elts": ["monnaie", {"elts": ["pièce", "pièces"], "needed": 1}]},
    {"elts": [{"elts": ["brûle parfum", "brûle-parfum"], "needed": 1}]},
    {"elts": ["vase", "renversé", "tombé"]},
    {"elts": ["bougie", "éteinte", {"elts": ["bougeoir"], "needed": 1}]},
    {"elts": ["nappe", "table"]},
    {"elts": ["papier", "texte", "écrit", "plié", "bord", "écriture"]},
    {"elts": ["papier", "tombe", "table", "vole", "petit", "blanc"]}
]`;
const lists = JSON.parse(json);
 
const defaultPoints = 1; // par défaut un mot donne un point
const defaultNeeded = 2; // par défaut il faut au moins 2 points pour valider une liste
 
function check(wordSet, list) {
 
    const points = list.points || defaultPoints; // nombre de points pour 1 item correspondant
    const needed = list.needed || defaultNeeded; // nombre de points nécessaires pour valider la liste courante
 
    let totalScore = 0;
 
    for (const item of list.elts) {
        if ( typeof item === 'string' ) { // l'item est une chaîne
            if ( wordSet.has(item) ) // si l'item est dans la case, on augmente le score
                totalScore += points;
 
        } else { // l'item est un objet (une liste), on appelle récursivement la fonction
            if ( check(wordSet, item) ) // si elle renvoie "true", on augmente le score
                totalScore += points;
 
        }
    }
 
    return totalScore >= needed; // renvoie "true" lorsque le score nécessaire est atteint.
}
 
document.getElementById('check').addEventListener('click', e => {
    for (const list of lists) { // on défreeze toutes les listes
        list.frozen = false;
    }
 
    for (const c of cases) {
        let wordSet = new Set(c.value.toLowerCase().match(/[\wàâäéèêîïôöùûüÿçæœ]+(?:-[\wàâäéèêîïôöùûüÿçæœ]+)*/g));
 
        if ( ! wordSet.size ) // la case est vide, on passe à la suivante
            continue;
 
        let found = false;
 
        for (const list of lists) {
            if ( list.frozen )
                continue;
 
            if ( check(wordSet, list) ) {
                c.style.backgroundColor = '#4CE0D2';
                found = true;
                list.frozen = true; // cette liste a été validée, on la freeze.
                break; // dés qu'une liste correspond on interrompt la boucle
            } 
        }
 
        if ( ! found )
            c.style.backgroundColor = '#FF6666';
 
    }
}, false);
</script>

Il manque un double-quote " avant le mot verre ligne 30.

Dans ce genre de situation, pour débusquer l'erreur facilement, tu peux:
utiliser un éditeur avec coloration syntaxique (notepad++, gedit, pspad, visual studio code..., indispensable quand on programme) et tu composes ton json à part dans un nouveau fichier que tu enregistres en .json, comme ça tu verras tout de suite les accolades, crochets ou quotes manquants. Puis quand il est au point, tu n'as plus qu'à le coller dans ton code javascript.
utiliser la dichotomie (tu enlèves la moitié de ce que tu as mis, si l'erreur persiste tu enlèves la moitié de la moitié restante etc., si l'erreur disparaît tu ajoutes la moitié de ce que tu viens de retirer etc.) pour réduire le champ de recherche.

Pour le brûle-parfum, ça ne marchera pas comme ça {"elts": [{"elts": ["brûle parfum", "brûle-parfum"], "needed": 1}]} car la recherche dans la liste se fait un mot de la case à la fois donc brûle parfum (sans tiret) ne sera jamais trouvé. Pour que ça fonctionne, il faudrait faire:{"elts": [{"elts": ["brûle", "parfum"]}, "brûle-parfum"], "needed": 1}
Juste pour l'exemple, si je veux rajouter renversé (mais pas flacon qui lui serait plutôt un "synonyme" de brûle-parfum), cela m'oblige à rajouter un niveau:{"elts": [{"elts": [{"elts": ["brûle", "parfum"]}, "brûle-parfum"], "needed": 1}, "renversé"]}.

Pour éviter d'étendre le code sur je ne sais combien de lignes j'ai écrit chaque liste sur une seule ligne, mais dans ta phase d'écriture du json, rien ne t'empêche de l'indenter sur plusieurs lignes pour y voir plus clair:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "elts": [ { "elts": [ { "elts": ["brûle", "parfum"] }, "brûle-parfum" ], "needed": 1 }, "renversé" ] }

29/04/2019, 20h10
Charal72

Comme éditeur j'utilise brackets..mais pas d'indication.. Ca ne fonctionne toujours pas..:(
29/04/2019, 20h32
CosmoKnacki

Il y a aussi baguette ligne 21.
29/04/2019, 21h23
Charal72

Merci Cosmo !!