Trop gros innerHTML ?

Bonjour, Bonsoir camarades !

Il m'arrive un petit problème. En effet j'ai créé un petit clavier visuel permettant d'entrer des caractères d'une langue étrangère.
Il fonctionne parfaitement bien, cependant j'aurais voulu créer un bouton pour l'afficher ou le cacher. Le clavier en lui même est
composé d'images cliquables, au clic le caractère correspondant à la touche est simplement inséré dans un <input>.

Voici le code html du clavier en question (je l'ai réduit car il est très lon : 39 touches au total)

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

<div id="clavier" class="clavier"> <img style="position:absolute; left:0px; top:300px;" alt="fond_touche" src="./images/toucheclavier.png" onclick="ecrire(0);"> <span style="color:#FFF;position:absolute; left:0px; top:300px">   ա   </span> <img style="position:absolute; left:40px; top:300px;" alt="fond_touche" src="./images/toucheclavier.png" onclick="ecrire(1);"> <span style="color:#FFF;position:absolute; left:40px; top:300px">   բ   </span> <img style="position:absolute; left:80px; top:300px;" alt="fond_touche" src="./images/toucheclavier.png" onclick="ecrire(2);"> <span style="color:#FFF;position:absolute; left:80px; top:300px">   գ   </span> <img style="position:absolute; left:120px; top:300px;" alt="fond_touche" src="./images/toucheclavier.png" onclick="ecrire(3);"> <span style="color:#FFF;position:absolute; left:120px; top:300px">   դ   </span> (. . .) </div>

---

Quant au bouton c'est simplement un

Code:

---

<input type="button" value="toogleClavier" onclick="toogleClavier ();"/>

---

Et pour le code JavaScript j'ai essayé ce qui va suivre. Petite précision j'ai déjà essayé un code plus simple en petits
morceaux mais je ne suis pas parvenu à déterminer ce qui n'allait pas. J'ai cru comprendre que .innerHTML me permettrait
d'entrer n'importe quel code excepté des balises <script>, je ne me trompe pas ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var htmlClavier = ' *ici le code html donné plus haut pour le clavier visuel à l\'intérieur du <div>* ';   var clavierAffiche = false; //Booléen pour savoir si le clavier est actuellement affiché.   function toogleClavier () { var codeClavier = document.getElementByID('clavier'); //récupérer le contenu du <div> if(clavierAffiche) { //Si le clavier est actuellement affiché codeClavier.innerHTML = ''; //On l'efface clavierAffiche = false; //Puis on indique que le clavier est maintenant effacé. } else{ //Si le clavier n'est pas affiché codeClavier.innerHTML = htmlClavier; //J'ajoute le code du clavier au <div> clavierAffiche = true; //puis j'indique que le clavier est affiché } }

---

En regardant dans le débogueur de Firefox je ne vois pas le contenu du <div> changer quand j'appuie sur le bouton.
Je me demandais aussi si changer la valeur de l'argument du "if" à l'intérieur de celui-ci pouvait avoir une incidence.

Merci par avance aux âmes charitables !! C'est peut-être une question qui vous paraît simple/idiote mais malgré mes
recherches (dans les questions du forum et sur stackoverflow) je n'ai pas su résoudre ça :?

A priori, il n'y a pas de raison que cela ne fonctionne pas...
Néanmoins, le code HTML que tu fournis pour ton clavier contient lui-même le conteneur (<div id="clavier">), du coup, si tu l'insères dans la même div, tu vas te retrouver avec une multitude d'identifiants clavie, ce qui n'est pas bien du tout.

Sinon, niveau logique du code, je pense qu'au lieu de stocker la chaine innerHTML, tu ferais mieux soit de alterner le display entre none et block, soit de stocker directement l'objet DOM dans la variable...

+1 pour Bovino à propos du display. Tu peux t'en servir à la fois pour masquer / afficher la <div>, et comme test dans le if. Du coup tu n'as plus besoin de ta variable booléenne clavierAffiche.

Utiliser innerHTML comme ton script le fait actuellement, ça revient à démonter ton ordinateur quand tu veux l'éteindre et le remonter quand tu veux l'allumer. L'instruction codeClavier.innerHTML = '' détruit toute la représentation DOM de ton clavier, et après pour le réafficher, ton navigateur doit la reconstruire entièrement. C'est beaucoup de travail inutile !

Une petite remarque à propos de ta structure HTML : tu as des images qui, a priori, servent d'images de fond. C'est plutôt le rôle du CSS. Tu pourrais les retirer de ton code HTML et ajouter une règle CSS sur les <span> :

Code:

---

1 2 3

#clavier span { background-image: url("./images/toucheclavier.png"); }

---

D'ailleurs, mieux qu'une <div> avec des <span>, ici je pense qu'une <ul> avec des <li> a plus de sens. Tu ajoutes list-style: none; à la <ul> pour éliminer les puces, et ensuite tu peux factoriser le style de tes touches.

Code:

---

1 2 3 4 5 6 7 8 9

#clavier { list-style: none; position: relative; } #clavier li { background-image: url("./images/toucheclavier.png"); position: absolute; color: #FFF; }

---

Ton code HTML sera beaucoup plus léger :

Code:

---

1 2 3 4 5 6 7

<ul id="clavier" class="clavier"> <li style="left: 0px; top:300px" onclick="ecrire(0);"> ա </li> <li style="left: 40px; top:300px" onclick="ecrire(1);"> բ </li> <li style="left: 80px; top:300px" onclick="ecrire(2);"> գ </li> <li style="left:120px; top:300px" onclick="ecrire(3);"> դ </li> (. . .) </ul>

---

Peut-être même qu'une <table> est encore plus pertinente, en fait. Mais retiens déjà ces quelques conseils à propos de CSS, tu verras, ça va te rendre la vie plus facile :)

Merci beaucoup pour vos conseils !!!
En réalité actuellement le code du clavier est simplement dans le <div>,
à la base il était généré dans un <span> lors du clic sur le bouton (génération à chaque ouverture de la page).
Le code html/JavaScript correspondant était :

Code:

---

1 2 3 4

<p> <span style="border:solid" id="fauxinput2"></span> <input type="button" value="Afficher le clavier" onclick="clavier();"/> </p>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var lettreminar = Array(/* alphabet de 39 lettres */); function ecrire (c){ document.getElementById("fauxinput2").innerHTML+=lettreminar[c]; // lettreminar est simplement un tableau contenant l'alphabet dans l'ordre. } function clavier (){ var x=0; var y=300; var c=0; // x et y permettent le positionnement des 'touches' du clavier, et c permet de parcourir le tableau contenant les lettres. while(c<40){ document.getElementById("clavier").innerHTML+= "<img onclick= ecrire("+c+"); src=toucheclavier.png style='position:absolute; left:"+x+"px; top:"+y+"px;'/>"+ "<span style='color:#FFF;position:absolute; left:"+x+"px; top:"+y+"px'>"+lettreminar[c]+"</span>"; x=x+40; c=c+1; if(c%10===0){ x=0; y=y+36; } } }

---

(Ce code n'est pas de moi mais d'une amie que j'essaie d'aider.)

Une fois le code html du clavier généré je l'ai d'abord simplement intégré dans le <div> car je trouvais qu'une grosse boucle comme ça
à chaque fois c’était un gaspillage de ressources. J'ai donc essayé d'afficher/cacher le code au lieu de tout générer à chaque fois. Je n'avais
pas pensé au display qui semble être parfaitement adapté pour ça :D


Voici le nouveau code en suivant vos conseils :
HTML :

Code:

---

1 2 3 4 5 6 7 8

<input type="button" value="Afficher / Masquer le Clavier" onclick="Clavier ();"> <ul id="clavier" class="clavier" style="display: none;"> <li style="left:0px; top:300px;" onclick="ecrire(0);">ա</li> <li style="left:40px; top:300px;" onclick="ecrire(1);">բ</li> <li style="left:80px; top:300px;" onclick="ecrire(2);">գ</li> <li style="left:120px; top:300px;" onclick="ecrire(3);">դ</li> (. . .) </ul>

---

JS :

Code:

---

1 2 3 4 5 6 7 8 9 10

function Clavier() { var cssClavier = document.getElementById("clavier"); var presenceClavier = cssClavier.style.display; if(presenceClavier === "inline-block"){ document.getElementById("clavier").style.display = "none"; } else{ document.getElementById("clavier").style.display = "inline-block"; } }

---

Cependant lorsque les variables étaient déclarées de façon globale (sans les passer en argument à la fonction) le code n'avait aucun effet.
Alors que tout fonctionne losque les variables sont déclarées au sein de la fonction. Au final elles sont re-déclarées à chaque exécution ce
qui ne me semble pas être la meilleure idée. Sauriez-vous comment résoudre ça ?

Merci encore pour vos réponses précédentes !!! Et merci par avance pour celles à venir !!

Citation:

---

Envoyé par tutzeroone

Cependant lorsque les variables étaient déclarées de façon globale (sans les passer en argument à la fonction) le code n'avait aucun effet.
Alors que tout fonctionne losque les variables sont déclarées au sein de la fonction. Au final elles sont re-déclarées à chaque exécution ce
qui ne me semble pas être la meilleure idée. Sauriez-vous comment résoudre ça ?

---

En fait, c'est plutôt le contraire : les variables globales sont en général moins performantes en JavaScript. En bref, l'ensemble des variables accessibles à un moment donné ressemble à une pyramide : au sommet il y a la portée courante, en-dessous il y a le bloc parent, et tout en bas il y a la portée globale. Par exemple :

Code:

---

1 2 3 4 5 6 7 8 9

var glob;   function f1( ){ var loc1;   function f2( ){ var loc2; } }

---

Au sein de la fonction f2, la « pyramide » ressemble à ça :

Code:

---

1 2 3

{ loc2 } // portée de f2 { loc1 f2 { loc2 } } // portée de f1 { glob f1 { loc1 f2 { loc2 } } // portée globale

---

Quand JavaScript cherche une variable, il commence par le haut de la pyramide. Tu comprendras donc que les globales sont moins rapides à atteindre… Pour enfoncer le clou, les variables globales peuvent provoquer des comportements inattendus dans le code, et même si le comportement est bien compris, le code est moins facile à lire à mon humble avis.

Avec le DOM, les variables locales ont encore un autre avantage : puisque les objets DOM ont des tas de propriétés, en mémoire ils ressemblent à des gros tas de pointeurs. Chaque accès à une propriété demande un déréférencement (c'est-à-dire, en gros, retrouver l'objet dans la mémoire à partir de son adresse). Une instruction de ce genre :

Code:

---

objetA.propriétéB.propriétéC.propriétéD;

---

demande 3 déréférencements (autant qu'il y a de « . »), donc au minimum 3 cycles de lecture en mémoire. Imagine une fonction qui a besoin 5 fois de cette propriétéD, tu montes à 15 cycles minimum. Ça devient vite un problème. Les interpréteurs modernes peuvent détecter ce genre de situation, mais il est plus sage de ne pas reposer dessus. Et puis, ça raccourcit le code.

Dans ta fonction Clavier, tu crées une variable cssClavier mais tu ne t'en sers pas, c'est un peu bête…

Code:

---

1 2 3 4 5 6 7 8 9

function Clavier() { var clavierStyle = document.getElementById("clavier").style; if(clavierStyle.display === "inline-block"){ clavierStyle.display = "none"; } else{ clavierStyle.display = "inline-block"; } }

---

Remarque finale en guise de conclusion : je considère personnellement que les variables globales sont au niveau maximum sur l'échelle de couplage.

Merci pour la réponse !

J'aurais une dernière question, ai-je le droit d'écrire ceci :

Code:

---

1 2	var clavierStyle = document.getElementById("clavier").style.display; // Et ensuite écrire : clavierStyle = 'none' ou clavierStyle = 'block' ?

---

Ou bien dois-je utiliser uniquement :

Code:

---

1 2	var clavierStyle = document.getElementById("clavier").style; // Et modifier le display avec : clavierStyle.display = monDisplay ?

---

Je me posais la question car le code suivant ne fonctionnait pas non plus :

Code:

---

1 2 3 4 5 6 7 8 9

function Clavier() { var displayClavier = document.getElementById("clavier").style.display; if(presenceClavier === "inline-block"){ displayClavier = "none"; } else{ displayClavier = "inline-block"; } }

---

Alors que le code que javais utiliser pour des test :

Code:

---

1 2 3 4 5 6

function Clavier() { var displayClavier = document.getElementById("clavier").style.display; if(presenceClavier === "inline-block"){ alert(presenceClavier) } }

---

m'affichait bien l'alerte.


Merci encore pour les réponses !!!

Ah mince, j'avais oublié de te parler de ça : la différence entre affecter une variable et affecter une propriété.

Reprenons ce bout de code :

Code:

---

1 2 3 4 5 6 7 8 9

function Clavier() { var displayClavier = document.getElementById("clavier").style.display; if(presenceClavier === "inline-block"){ displayClavier = "none"; } else{ displayClavier = "inline-block"; } }

---

displayClavier est une variable locale à la fonction Clavier, jusque-là ça va. Les choses intéressantes se passent aux lignes 4 et 7 : displayClavier = "..."; Tu affectes une nouvelle valeur à cette variable.

Représente-toi le tas des variables locales. Ce sont des cases avec des étiquettes. Il y a une case qui porte l'étiquette displayClavier. Au début cette case est vide. Puis, ligne 2, elle reçoit la valeur qu'a document.getElementById("clavier").style.display à ce moment-là, prenons par exemple "none". Tu as alors la valeur "none" dans la case displayClavier.

Ensuite, en toute logique, ton script arrive à la ligne 7, et tu mets dans ta case la valeur "inline-block". Est-ce que ça change la valeur de document.getElementById("clavier").style.display ? Absolument pas. Tu as simplement modifié une variable locale.


À présent, prenons cet autre bout de code :

Code:

---

1 2	var clavierStyle = document.getElementById("clavier").style; clavierStyle.display = monDisplay;

---

Au début, les choses sont pareil : dans la case clavierStyle, tu mets un objet style. Mais le détail important vient ensuite : au lieu de changer ce qu'il y a dans la case, tu vas chercher quelque part dans la mémoire la case qui correspond à la propriété display de l'objet style. Et c'est dans cette case que tu mets ta nouvelle valeur. Tu saisis la différence ?

Si tu es attentif, tu auras noté que le point dans clavierStyle.display fait en réalité un déréférencement. Tout à l'heure, je t'ai expliqué que c'était à éviter ; mais quand tu veux modifier une propriété, un déréférencement au dernier moment est nécessaire. Tu ne peux pas mettre la propriété elle-même dans une variable locale.

En résumé : si tu veux modifier une propriété il faut mettre un point :)

Merci encore !!!
Tout est clair comme de l'eau de roche !