[HTML - JS] Apostrophes et compagnie : JS et HTML

Vous avez enfin dégotté une photo de  L'arroseur arrosé , par Tartempion, et vous la mettez sur votre blog.

Si une infobulle vous suffit pour renseigner le lecteur, vous savez faire la cuisine de title exposée dans le premier article. Mais si vous voulez ouvrir un popup lorsque ce même lecteur clique sur cette même photo ?

---

Le point de départ est l'emploi d'un onclick :

 <img src="gnagna/pschit.jpg" onclick="alert('Vous avez cliqué !');" /> 

Maintenant regardez le piège se mettre en place :

• vous écrivez, comme on le fait le plus souvent, le onclick entre apostrophes doubles
  1. alors, pour ne pas être ennuyé, vous écrivez la chaîne du JS entre apostrophes simples
  2. et vous êtes coincé pour ajouter une apostrophe dans la chaîne du JS : simple elle termine prématurément la chaîne du JS (mais on connaît la parade), double elle termine prématurément le onclick (mais il y a une autre parade).
• alors, rusé comme un Sioux, vous écrivez le onclick entre apostrophes simples
  1. alors, pour ne pas être ennuyé, vous écrivez la chaîne du JS entre apostrophes doubles
  2. et vous êtes coincé pour ajouter une apostrophe dans la chaîne du JS : simple elle termine prématurément le onclick (mais on connaît la parade), double elle termine prématurément la chaîne du JS (mais il y a une autre parade).

Joli, non ? Et ça ne fait que commencer. Reprenons les deux derniers échantillons de JS de l'article précédent et voyons comment les inclure dans un onclick.

• Chaîne de JS entre apostrophes simples :

   alert('"L\'arroseur arrosé" (Tartempion)'); // simple en encadrement simple Cliquez 

  En écrivant le onclick entre apostrophes doubles on aura la paix avec les apostrophes simples, même celle précédée d'un antislash. Restera un souci HTML avec les apostrophes doubles incluses dans le JS, souci réglé en les remplaçant par " :

   onclick="alert('"L\'arroseur arrosé" (Tartempion)');" 

  Vous voyez ici un bout du code source du bouton  Cliquez . Logique mais pas vraiment spontané.
• Chaîne de JS entre apostrophes doubles :

   alert("\"L'arroseur arrosé\" (Tartempion)");// doubles en encadrement double Cliquez 

  En écrivant le onclick entre apostrophes simples on aura la paix avec les apostrophes doubles, même celles précédées d'un antislash. Restera un souci HTML avec l'apostrophe simple incluse dans le JS, souci réglé en la remplaçant par ’ :

   onclick='alert("\"L’arroseur arrosé\" (Tartempion)");' 

  Vous voyez ici un bout du code source du bouton  Cliquez . Aussi logique et pas plus spontané que le précédent.

Je vous laisse en exercice masochiste les deux cas où les mêmes apostrophes encadrent la chaîne du JS et le onclick, ils sont plus fastidieux que difficiles.

---

Comme vous voyez, tout cela s'explique (j'espère y être parvenu) mais n'est pas vraiment intuitif. En pratique comment s'y prendre, comment savoir qu'il faut un antislash ici et un &truc; là plutôt que le contraire ? Et aussi : comment ne pas en mettre là où c'est inutile ?

Premier élément de réponse : l'antislash c'est pour régler les soucis de JS – HTML s'en contre-tamponne. Les &truc;, eux, servent à se dépanner en HTML – JS ne les comprend pas. Au fait et depuis le temps : le nom officiel est entités caractères, pas &truc;.

Ce qui ramène la question à : ai-je affaire à un problème de JS ou de HTML ? . Ce genre d'emboîtement multiple n'est tout de même pas fréquent, on n'en connaît pas forcément la solution par cœur. Plutôt que d'écrire au fil de l'eau en gardant pour la fin la résolution des difficultés surgies en cours d'écriture, je crois meilleur de respecter l'emboîtement en compliquant progressivement un code simple au départ. Quelques étapes concrètes :

 onclick Parce qu'il faut bien commencer... onclick="" Tout de suite les deux apostrophes : vide mais correct onclick="alert();" Instruction vide mais correcte onclick="alert('truc');" Instruction idiote mais correcte, tant pour JS que pour HTML onclick="alert('voici l'alerte');" Significative mais incorrecte en JS (apostrophe simple ajoutée), OK en HTML onclick="alert('voici l\'alerte');" Corrigée pour le JS (antislash), rien de neuf pour HTML onclick="alert('voici l\'alerte : "alerte" !');" Correcte en JS mais incorrecte en HTML (apostrophes doubles entre deux autres) onclick="alert('voici l\'alerte : "alerte" !');" Corrigée pour HTML, toujours OK en JS : résultat final 

Vous avez compris l'intérêt ? D'abord on peut tester (prévisualisation ou autre) chaque étape réputée correcte. Ensuite les difficultés surgissent une à une et se corrigent au fur et à mesure, justement parce qu'on préfère un code modeste mais correct à un code ambitieux mais incertain.

C'est un peu comme en escalade : on ne lâche pas une prise avant d'avoir assuré la suivante. Et si on va vers la nouvelle prise sans avoir vraiment compris pourquoi on y va, c'est comme en escalade : on se casse la gueule.

---

Apostrophes en JS Début

• 1 - Apostrophes en HTML
• 2 - Apostrophes en JS
• 3 - Apostrophes en JS et HTML

Comments

[ღ ღ ღ ♥ nessa ♥ღ ღ ღ]

hello :-) bravo pour tes posts sur le forum ! j'étais venu y alongtemps chez toi car j'adore la disposition du blog mais c'était une telle prise de tete que j'ai tt arreté , maintenant que ça va
mieux avec le css faudrait que je voit àa me ferait gagner de la place dans mes modules et du coup virerait 3 pubs graphiques d'un coup le pied!!! bonne soirée :-)

[Bren du fat !]

Merci, mais il n'y a pas de quoi me féliciter, toute cette histoire me semblant beaucoup de salive gaspillée... Quant à virer les pubs graphiques, je ne suis pas sûr de comprendre : gagner de
l'argent avec des pubs sans les afficher ? Que voilà un profond mystère :-)