Régler le problème javascript de l'apostrophe...

Commenter

Contenu du snippet

Exemple de scripts élémentaires avec un texte comportant divers caractères réservés précédés du backslash et explication...

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title></title>
    <script type="text/javascript">
        //<![CDATA[ 
        function a() { 
            document.getElementById('A').innerHTML = "<button type=\"button\" id=\"button1\" onclick=\"alert('Coucou');\">Bouton d\'alerte</button>";
        }
        function b() {
            document.getElementById("B").innerHTML = '<button type=\'button\' id=\'button2\' onclick=\'alert("Coucou");\'>Bouton d\'alerte</button>';
        } //' " \ b f n r t v; \' \" \\ \b \f \n \r \t \v
        //]]>
    </script>
</head>

<body onload="a(); b();">
<h1>Régler le problème de l'apostrophe...</h1>
<hr />
<p>
Certains caractères présentent la particularité d'être interprétés différemments suivant leur utilisation dans un 
script. Les guillemets ou l'apostrophe par exemple peuvent introduire une valeur d'attribut html ou une valeur de variable, etc.
Par ex: document.write('<p>Coucou</p>'); ou bien encore var a; a = "coucou"; etc. Selon les situations des 
ambiguités peuvent empécher l'interprétation ce qui arrête l'exécution du script et renvoie une erreur à l'écran.<br />
</p>
<p>
1/ Le backslash peut être utilisé afin d'oter les ambiguités d'interprétation.
</p>
<p>
2/ Dans un script les caractères seuls  ' " \ b f n r t v sont interprétés différemment s'ils sont précédés ou non 
d'un backslash (les cas de ' " sont traités 3; x et u qui ont aussi une certaine importance ne sont pas traités).<br />
\ b f n r t v peuvent être de simples caractères formant une expression littérale quelconque... 
</p>
<button type="button" id="button1" onclick="alert('Coucou\CoucoubCoucoufCoucounCoucourCoucoutCoucouvCoucou');">Bouton d'alerte</button>
<p>Munient d'un backslash \\ \b \f \n \r \t \v peuvent impliquer une altération du rendu écran de l'expression...</p>
<button type="button" id="button2" onclick="alert('Coucou\\Coucou\bCoucou\fCoucou\nCoucou\rCoucou\tCoucou\vCoucou');">Bouton d'alerte</button>
<p>
3/ L'utilisation de ' " se fait souvent dans des situations "plus complexes" que précédemment par ex:<br />
document.getElementById('A').innerHTML = "<button type=\"button\" id=\"button1\" onclick=\"alert('Coucou');\">Bouton d\'alerte</button>";
</p>
<div id="A"></div>
<p>
Dans ce cas, l'ambiguité, qui réside dans le nombre des interprétations possibles de ' et " inhérentes à leur usage 
et qui retourne une erreur quand elle n'est pas levée, est otée par l'utilisation du backslash qui introduit la 
lecture de la séquence qui suit (le caractère ambigue) d'après son code, alors unique, du type %n° 
(%22 pour guillemet %27 pour apostrophe par exemple).<br />
Dans le cas ci-dessus donc:<br />
Les premiers apostrophes permettent dans une instruction de définir un indentifiant.<br />
Les guillemets qui suivent = et termine le code html à enchasser dans le bloc div définissent une chaine principale
en tant qu'objet.<br />
Les guillemets dans la chaine permettent de définir les valeurs des attributs html ils sont indispensables en 
xhtml, mais ne définissent pas un objet.<br />
Les apostrophes dans la commande d'alerte définissent une expression littérale dans la chaine principale, tandis que le 
texte du bouton n'est qu'une partie de la chaine principale.<br />
Dans le respect du même schéma il est donc possible d'écrire:<br />
document.getElementById("B").innerHTML = '<button type=\'button\' id=\'button2\' onclick=\'alert("Coucou");\'>Bouton d\'alerte</button>';
</p>
<div id="B"></div>
<p>
(Pour mémoire, dans un document HTML l'écriture conventionnelle reste <button type="button" id="button1" onclick="alert('Coucou');">Bouton d'alerte</button>)
</p>
<p>
l'interprétation par la machine est de la forme:<br />
document.getElementById("B").innerHTML = '<button type=%27button%27 id=%27button1%27 onclick=%27alert("Coucou");%27>Bouton d%27alerte</button>';
</p>
<p>
4/ Les caractères listés ci-dessus peuvent encore être utilisés dans les commentaires de scripts.
Afin que leur prise en compte reste celle qui doit être faite pour du texte l'on placera avant deux slachs:
//' " \ b f n r t v; \' \" \\ \b \f \n \r \t \v  (voir source).
</p>
<hr />
Salut, LGH.
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" border="0" height="31" width="88" /></a></p>
</body>

</html>

Conclusion :


Il suffit de copier la page ci-dessus de la coller dans notepad de l'enregistrer au format htm...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_lgh)