11521 sujets

JavaScript, DOM et API Web HTML5

<a href="javascript:void(0)" onclick="..."

Bonjour,

Je suis quasi-nul en javascript.

J'ai lu que le pseudo-protocle javascript devait être évité dans les URL.

Par exemple, pour ouvrir un pop-up

<a href="javascript:void(0)" onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420')">Site s&eacute;curis&eacute;</a>


Il paraît que "javascript:void(0)" est à éviter.

Je n'ai pas compris par quoi le remplacer.

Je me demande s'il est indispensable d'employer une balise <a> pour ouverture d'un pop-up.
Bonsoir
Je ne sais pas ce que c'est que ce "javascript:void(0)", et pourtant je fais du JavaScript depuis 20 ans, mais bien entendu je ne sais pas tout, loin de là!
Il suffit de ne pas mettre d'attribut href dans <a>
Moyennant quoi on n'a pas besoin d'avoir une balise <a>, le code
<p onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420')">Site sécurisé</p>

est tout à fait correct (<p>, ou <div> ou n'importe quoi qui peut contenir du texte)
Au passage, l'utilisation des &eacute; n'est plus "à la mode", il est préférable de faire des documents en codage utf-8, soit

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
	<title>test</title>
        <meta name="description" content="page de test"/>
	</head>
    <body>
		<p onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420')">Site sécurisé</p>
    </body>
</html>

Modifié par PapyJP (27 Jul 2017 - 22:59)
Bonjour,

Je suis à peu près d'accord avec PapyJP, j'aurai juste pris un <button> à la place d'un <p>.
Également, je préfère gérer tout le JS dans un code à part de l'HTML, comme les événements... (en gros pas fan des onclick directement dans l'HTML)
SolidSnake a écrit :
Bonjour,

Je suis à peu près d'accord avec PapyJP, j'aurai juste pris un <button>à la place d'un <p>
Également, je préfère gérer tout le JS dans un code à part de l'HTML, comme les événements... (en gros pas fan des onclick directement dans l'HTML)

Hmm! pas vraiment d'accord:
<button> est généralement affublé par les navigateurs d'un style spécifique qui n'est pas souvent ce qu'on aimerait... sauf s'il s'agit vraiment d'un bouton.
Quand j'écris
<p> c'est une information que l'on peut retrouver dans <a onclick="...">ce document</a> et dont voici un résumé... <p>

je ne tiens pas à voir apparaître un bouton au milieu de la phrase.
Quant à faire un gestionnaire d'évènements, ça n'a à mon avis de sens que si tous les objets d'un type donné ont le même comportement. Il est à mon sens préférable de mettre un onclick="trucmuche('toto')" que d'avoir dans la balise un attribut data-truc="toto", plus un gestionnaire d'évènement click qui va analyser la valeur de "data-truc"
Mettre onclick="..." dans les attributs d'une balise favorise la compréhension du code pour celui qui en assure la maintenance des années plus tard. Conformément aux principes de la programmation OO, l'information a sa place dans l'objet plutôt qu'à l'extérieur.
Mais bien entendu c'est une question de goût personnel, de conventions de travail dans l'équipe, etc.
PapyJP a écrit :
<button> est généralement affublé par les navigateurs d'un style spécifique qui n'est pas souvent ce qu'on aimerait... sauf s'il s'agit vraiment d'un bouton.

Je crois qu'il y en a qui ont inventé le CSS... Smiley rolleyes
Un border:0 et background:inherit et ton style par défaut a disparu, mais au moins on saura directement que c'est un élément à cliquer. Après comme tu dis, les goûts et les couleurs...

EDIT :
Et comparer une écriture html à de la POO juste parce que tu mets un onclick en inline sur ton élément, tu vas peut-être un peu loin.
Par contre rien ne t'empêche de faire ça en html :
<button id="toto">Toto</button>

Et ça en JS :
var MaTotoClass = function(id, data_truc){
  var me = this;
  me.id = id;
  me.el = document.getElementById(me.id);
  me.truc = data_truc;
  me.trucmuche = function(){
    console.log('Coucou '+me.truc)
  }
  me.el.addEventListener('click', me.trucmuche)
}
var toto = new MaTotoClass('toto', 'Toto')

... Et là on peut commencer à se rapprocher LÉGÈREMENT de POO.
Modifié par SolidSnake (28 Jul 2017 - 15:57)
Pour pinailler un peu, si on considère qu'une balise est un objet il me semble naturel que cet objet contienne ses propriétés et ses méthodes.

Maintenant, une balise peut être également considérée comme la représentation HTML d'un objet conceptuel et que dans ce cas il est normal que les méthodes soient définies dans la classe de cet objet, et donc un gestionnaire d'évènement est légitime dans ce cas.
En général, effectivement, je définis des classes d'objet JavaScript, par exemple "diapo" et chacune des ces "diapos" est une occurrence de l'objet, dont la balise HTML est le résultat d'un appel à la méthode "toHTML()" de cet objet.
J'ai peut être tort de faire générer les évènements sous la forme de "onclick" et autre dans le HTML, mais cela m'évite de tenir à jour une table des "diapos" et de leur donner à chacune un id.

Bon... ça ne vaut pas la peine de passer plus de temps la dessus, dès l'instant qu'on se comprend, c'est l'essentiel Smiley smile
Bonjour,

Merci de vos réponses toujours très intéressantes.

Je ne savais pas qu'il était possible (valide) d'avoir des balises <a> sans href.

Si oui, je prends la solution la plus simple, j'enlève mon href, je garde mon onclick.

<a> me semble aussi légitime que <button> pour un morceau de texte qui au click ouvre un pop-up avec des informations de type aide.

Bien que sous PHP 7, le site est en iso-8859-1, cela explique &eacute;. Migrer vers UTF8 serait trop compliqué. Par ailleurs utiliser htmlentities () pour les écritures dans la base de données reste une sécurité simple et efficace.
SolidSnake a écrit :
Également, je préfère gérer tout le JS dans un code à part de l'HTML, comme les événements... (en gros pas fan des onclick directement dans l'HTML)

+1 sur le fait de déporter les scripts dans des fichiers et éviter les attributs de type @onXXX.
Si j'en crois les différents articles que j'ai pu parcourir sur le sujet, la préconisation reste de séparer HTML et JS, au même titre qu'on sépare HTML (structure du document) et CSS (présentation).
HTML n'étant pas, du moins à ma connaissance, un "langage objet" au sens de la POO, il n'est pas forcément pertinent de mélanger propriétés (getters et setters) et méthodes, comme on pourrait le faire sur des classes Java ou C# par exemple.
Ceci étant dit, les spécifications W3C prévoyant de façon formelle la possibilité d'avoir des événements définis sous forme d'attribut HTML, utiliser cette possibilité n'est pas une erreur en soi et reste le choix de chaque concepteur.
Oui, il est vrai que rien n'est exact terme d'optimisation car on veut généralement le moins de fichier js possible (donc tout minifier dans un seul fichier) mais aussi ne pas appeler tout les scripts sur toutes les pages. Donc si le bouton n'existe que sur une page, il peut être judicieux d'avoir l'événement directement dans le code. Perso je mets plutôt les appels aux scripts en bas de page entre les balises <script></script>
Bonjour,

En enlevant href :

<a onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420')">Site s&eacute;curis&eacute;</a>


Cela marche effectivement et je suppose que cela marche sur tous les navigateurs de ce siècle.

Petit détail, au survol le pointeur devient un pointeur de type texte comme avec une balise p.
Il faut donc styler dans le css :
a {cursor : pointer}
D'ailleurs je me demande s'il existe une forme de pointeur dédiée au pop-up. A mon avis ce serait utile.

Pour aller plus loin, je me dis qu'il existe des utilisateurs qui désactivent javascript ou des navigateurs de téléphone qui ignorent les pop-up.
Il serait bien dans ce cas de proposer une action alternative qui pourrait être d'afficher le lien non plus en pop-up mais comme une page normale.

Je vais tester ce code :

<a href="nouscab.php#PS" onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420'); return false;">Site s&eacute;curis&eacute;</a>


j'ai lu que dans ce cas il faut ajouter un return false dans onclick.
Modifié par boteha_2 (29 Jul 2017 - 15:17)
A propos de "javascript:void(0)", je viens de découvrir une utilisation de cette fonction.
Si vous définissez une balise <form> sans mettre d'attribut "action", certaines navigateurs, dont FF, rechargent systématiquement la page HTML.
Vous me direz que si on met une balise <form>, c'est généralement qu'on veut déclencher une action, et qu'on peut très bien mettre des <textarea> et autres <input> dans une autre balise.
Mais il se peut que la sémantique de cette balise soit bien un formulaire d'entrée, mais, par exemple, que l'on veuille effectuer une action différente selon la valeur de ce que l'utilisateur a entré dans le formulaire.
Pour éviter ce rechargement systématique, notamment quand on fait un "cancel", la syntaxe suivante est à utiliser:

<form action="javascript:void(0)">...</form>

Comme quoi on en apprend à tout âge... Smiley smile
boteha_2 a écrit :

Petit détail, au survol le pointeur devient un pointeur de type texte comme avec une balise p.
Il faut donc styler dans le css :
a {cursor : pointer}
D'ailleurs je me demande s'il existe une forme de pointeur dédiée au pop-up. A mon avis ce serait utile.

Le pointeur (petite main) signifie qu'on va exécuter une action, il est donc approprié à mon sens pour déclencher un popup.
Dans mon CSS général, j'ai écrit:
*[onclick] {cursor:pointer;}

C'est à dire que toute balise qui contient un attribut "onclick" affiche le pointeur au survol. Cela semble satisfaire mes utilisateurs.
boteha_2 a écrit :

Pour aller plus loin, je me dis qu'il existe des utilisateurs qui désactivent javascript ou des navigateurs de téléphone qui ignorent les pop-up.
Il serait bien dans ce cas de proposer une action alternative qui pourrait être d'afficher le lien non plus en pop-up mais comme une page normale.


En effet pas grand monde ne va voir une popup fait comme cela. Mieux vaut afficher ça dans une lightbox. Pour ce qui est du fall back sans js, tu peux faire une page classique accessible directement via le lien href du bouton et avec js remplacer ce comportement par une lightbox.
Bonjour,

PapyJP a écrit :

Dans mon CSS général, j'ai écrit:
*[onclick] {cursor:pointer;}

C'est à dire que toute balise qui contient un attribut "onclick" affiche le pointeur au survol. Cela semble satisfaire mes utilisateurs.


Merci de ta suggestion.
J'utilise parfois cursor: help quand le lien est une page d'aide ou équivalent.
cursor: zoom-in est très bien pour les photos à agrandir.
Bonjour,

Après test je confirme, ce code fonctionne :

<a href="nouscab.php#PS" onclick="window.open('nouscab.php#PS','','scrollbars=yes,resizable=yes,width=420,height=420'); return false;">Site s&eacute;curis&eacute;</a>


return false est indispensable afin de d'empêcher le lien d'être actif après l'ouverture du pop-up.
J'aimerais bien essayer sur un truc qui bloque javascript ou les pop-up, je n'en n'ai pas sous la main.
Bonjour,

Avec ce code :

p.cll img {cursor: zoom-in}

<p class="cll"><img src="im/pr/1432G.jpg" width="400" height="240" onclick="window.open('popup.php?nom=1432G.jpg','','scrollbars=yes,resizable=yes,width=420,height=345')" alt="Fiche BNC HDTV m&acirc;le droite, &agrave; sertir, Sofim" /></p>


J'ai IE 11 sur mon poste en Windows 10.

Contrairement à Chrome ou Firefox, cette saleté d'IE n’affiche par le pointeur en forme de loupe, pas même une main, juste une flèche comme s'il n'y avait aucune action possible sur l'image.
Le pop-up s'ouvre quand même.

Il faut donc ajouter une balise <a> inutile

p.cll a {cursor: zoom-in}

<p class="cll"><a><img src="im/pr/1432G.jpg" width="400" height="240" onclick="window.open('popup.php?nom=1432G.jpg','','scrollbars=yes,resizable=yes,width=420,height=345')" alt="Fiche BNC HDTV m&acirc;le droite, &agrave; sertir, Sofim" /></a></p>


Dans ce cas IE 11 affiche quand même une main, mais pas la loupe.
Il se sait pas mettre un pointeur sur une image qui n'est pas dans un lien.
Il ne connait pas zoom-in...
Je n'en reviens pas, ils avaient dit avoir fait des progrès...
Bonjour,

En gardant la structure initiale, j'ai essayé d'ajouter :hover :

p.cll img:hover {cursor: zoom-in}

<p class="cll"><img src="im/pr/1432G.jpg" width="400" height="240" onclick="window.open('popup.php?nom=1432G.jpg','','scrollbars=yes,resizable=yes,width=420,height=345')" alt="Fiche BNC HDTV m&acirc;le droite, &agrave; sertir, Sofim" /></p>


Cela ne marche pas mieux avec IE11, une flèche.

J'ai pour l'instant adopté :

p.cll img {cursor: pointer} /* Affiche une main dans IE */
p.cll img {cursor: zoom-in} /* les autres navigateurs appliquent */


A noter que :hover semble inutile, même pour IE11.

Le truc est que IE11 ne connaît pas la valeur zoom-in, j'ai vérifié avec cette page :
Salut SVP
comment désactiver une lien javascript
je l ai trouver sur ma page...
<script type="text/javascript" src="//bodelen.com/apu.php?zoneid=2010201"></script>
et merci
Sujet clos
Aller à