Fonction JS dans balise <a>
Résolu/Fermé
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
-
23 oct. 2009 à 10:22
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 27 oct. 2009 à 15:37
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 27 oct. 2009 à 15:37
A voir également:
- Fonction JS dans balise <a>
- Fonction si et - Guide
- Fonction moyenne excel - Guide
- Fonction somme excel - Guide
- Fonction filtre excel n'existe pas - Forum Excel
- Fonction remplacer word - Guide
11 réponses
Archeus01
Messages postés
1571
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
9 juin 2022
450
27 oct. 2009 à 10:20
27 oct. 2009 à 10:20
Bonjour, en règle de bonne pratique, je pense que le W3C est celui qu'il faut écouter sur le net, non?
Lire la section 2 de http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-SCRIPT-TECHS-20041008/ et l'exemple 1 extrait de http://www.w3.org/TR/WCAG-TECHS/SCR35.html :
Example 1 :
Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Tecnology.
Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.
The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
Example Code:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>
Conclusion : Ne pas mettre les évenments javascript dans le href mais dans un onclick!
Lire la section 2 de http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-SCRIPT-TECHS-20041008/ et l'exemple 1 extrait de http://www.w3.org/TR/WCAG-TECHS/SCR35.html :
Example 1 :
Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Tecnology.
Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.
The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
Example Code:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>
Conclusion : Ne pas mettre les évenments javascript dans le href mais dans un onclick!
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
23 oct. 2009 à 10:31
23 oct. 2009 à 10:31
Bonjour,
1) Un bouton, c'est un élément maléable au niveau du design, et un peu de CSS peut le rendre comme un lien <a> tout bête.
2) Un lien peut-être contrôlé par javascript oui. pour cela, il faut mettre le code: <a href="#" title="titre" onclick="fonctionJavascript(parametre);">texte du lien</a>
un document.location(...) te permettra de changer de page dans ta fonction.
1) Un bouton, c'est un élément maléable au niveau du design, et un peu de CSS peut le rendre comme un lien <a> tout bête.
2) Un lien peut-être contrôlé par javascript oui. pour cela, il faut mettre le code: <a href="#" title="titre" onclick="fonctionJavascript(parametre);">texte du lien</a>
un document.location(...) te permettra de changer de page dans ta fonction.
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
11
23 oct. 2009 à 10:34
23 oct. 2009 à 10:34
merci pour ta réponse si rapide je vais chercher et posterais la soluce pour les suivants qui voudraient le faire ;)
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
11
23 oct. 2009 à 10:47
23 oct. 2009 à 10:47
en fait ton href="#" march nickel c'est exactement ce que je veux ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
23 oct. 2009 à 10:58
23 oct. 2009 à 10:58
C'est le but. pour appronfondir, le # permet d'accéder aux ancres. Une ancre est ce qui permet d'accéder à une partie de la page via un lien. c'est en fait un lien avec l'attribut "name".
si à un endroit de la page on crée un lien de cette forme:
<a name="ancre" href="#"></a>
On peut accéder à cette ancre avec un autre lien de cette forme:
<a href="page.html#ancre">aller à l'ancre</a>.
C'est ce qui permet de faire les petits boutons "aller en haut de page" ou "aller en bas de page" du site. Ou encore, sur ce forum, "#3" fait référence au 3ème message du topic vu.
De ce fait, si on fait un lien "page.html#ancre", le lien dirigera vers la page en question et ira à l'ancre voulue
Si on fait un lien href="page.html#", on recharge la page,
Si on fait un lien href="#ancre", on ne recharge pas la page, mais on va à l'ancre 'ancre'
Si on fait un lien href="#", on ne recharge pas la page, et on ne va à aucune ancre.
Voilà la petite histoire du # dans les liens.
si à un endroit de la page on crée un lien de cette forme:
<a name="ancre" href="#"></a>
On peut accéder à cette ancre avec un autre lien de cette forme:
<a href="page.html#ancre">aller à l'ancre</a>.
C'est ce qui permet de faire les petits boutons "aller en haut de page" ou "aller en bas de page" du site. Ou encore, sur ce forum, "#3" fait référence au 3ème message du topic vu.
De ce fait, si on fait un lien "page.html#ancre", le lien dirigera vers la page en question et ira à l'ancre voulue
Si on fait un lien href="page.html#", on recharge la page,
Si on fait un lien href="#ancre", on ne recharge pas la page, mais on va à l'ancre 'ancre'
Si on fait un lien href="#", on ne recharge pas la page, et on ne va à aucune ancre.
Voilà la petite histoire du # dans les liens.
P@t@ch0n
Messages postés
565
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009
85
23 oct. 2009 à 11:05
23 oct. 2009 à 11:05
Il est tout de même préférable de mettre le js dans le href, et pas dans un event onclick.
<a href="javascript: uneFonction()">clic !</a>
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
23 oct. 2009 à 11:09
23 oct. 2009 à 11:09
Et quelles sont les raisons pour préférer la version
J'ai vu sur ce site: http://www.siteduzero.com/tutoriel-3-102952-bonnes-pratiques-javascript.html , qu'il était préférable de passer par l'évènement onclick, qui est totalement attribué au javascript. Je m'interroge donc sur le pour et le contre des deux méthodes.
<a href="javascript: uneFonction()">clic !</a>à la version
<a href="#" title="titre" onclick="fonctionJavascript(parametre);">clic !</a>
J'ai vu sur ce site: http://www.siteduzero.com/tutoriel-3-102952-bonnes-pratiques-javascript.html , qu'il était préférable de passer par l'évènement onclick, qui est totalement attribué au javascript. Je m'interroge donc sur le pour et le contre des deux méthodes.
P@t@ch0n
Messages postés
565
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009
85
23 oct. 2009 à 18:13
23 oct. 2009 à 18:13
Les raisons ?
Le but ici est d'utiliser du js non ? Et pas d'utiliser un ancre pour ramener quelque part dans la page, celui qui a son js désactivé se verra à chaque fois qu'il clique sur ce genre de lien ramener en début de page, bien lourdingue...
Là tu mets un ancre parce que tu ne sais pas quoi mettre d'autres dans le href qui est un attribut obligatoire.
Et en ce qui concerne le tuto que tu indiques, bah c'est le site du zéro quoi...
Bien évidemment la meilleure des méthodes à mon sens serait d'écrire les liens avec le js et de proposer une alternative lorsque cela est possible sans javascript, ce qui est le cas de l'auteur de ce sujet avec sa redirection.
Le but ici est d'utiliser du js non ? Et pas d'utiliser un ancre pour ramener quelque part dans la page, celui qui a son js désactivé se verra à chaque fois qu'il clique sur ce genre de lien ramener en début de page, bien lourdingue...
Là tu mets un ancre parce que tu ne sais pas quoi mettre d'autres dans le href qui est un attribut obligatoire.
Et en ce qui concerne le tuto que tu indiques, bah c'est le site du zéro quoi...
Bien évidemment la meilleure des méthodes à mon sens serait d'écrire les liens avec le js et de proposer une alternative lorsque cela est possible sans javascript, ce qui est le cas de l'auteur de ce sujet avec sa redirection.
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
>
P@t@ch0n
Messages postés
565
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
28 décembre 2009
27 oct. 2009 à 09:20
27 oct. 2009 à 09:20
Ton argumentation tient la route. Même si je ne reste pas fan des requêtes javascript dans le href...
Et pour ce qui est du site du zéro, je ne me suis pas arrêté qu'à cette vision, et mes recherches n'ont fait que corroborer cette vision des liens javascript.
Cela dit, chacun ses habitudes de travail. L'avantage de liens en href="javascript:function()" est de pouvoir montrer à l'internaute que c'est un lien javascript pur, car cela s'affiche sur la barre d'état du navigateur au survol du lien. Et si la fonction est bien nommée, il est facile de savoir ce que fait le lien.
Et pour ce qui est du site du zéro, je ne me suis pas arrêté qu'à cette vision, et mes recherches n'ont fait que corroborer cette vision des liens javascript.
Cela dit, chacun ses habitudes de travail. L'avantage de liens en href="javascript:function()" est de pouvoir montrer à l'internaute que c'est un lien javascript pur, car cela s'affiche sur la barre d'état du navigateur au survol du lien. Et si la fonction est bien nommée, il est facile de savoir ce que fait le lien.
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
11
23 oct. 2009 à 11:15
23 oct. 2009 à 11:15
M@dien merci pour ton explication sur les ancre je connaissais deja mais pas pensé à l'adapter ici...
Quant aux deux différentes syntaxes je pense préférer aussi le onclick mais effectivement c'est intéréssant de savoir laquelle est la plus adaptée je vais jeter un oeil la dessus dès que j'aurais un moment ^^
Quant aux deux différentes syntaxes je pense préférer aussi le onclick mais effectivement c'est intéréssant de savoir laquelle est la plus adaptée je vais jeter un oeil la dessus dès que j'aurais un moment ^^
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
11
27 oct. 2009 à 11:07
27 oct. 2009 à 11:07
sinon j'ai lu que c'était correct aussi de le faire sur une balise <span>
Archeus01
Messages postés
1571
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
9 juin 2022
450
27 oct. 2009 à 11:18
27 oct. 2009 à 11:18
Source?
papouuu86
Messages postés
77
Date d'inscription
mercredi 21 octobre 2009
Statut
Membre
Dernière intervention
4 novembre 2009
11
27 oct. 2009 à 11:56
27 oct. 2009 à 11:56
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
27 oct. 2009 à 15:37
27 oct. 2009 à 15:37
C'est possible d'attribuer des évènements sur tous les éléments de la page, du <div> au <span> en passant par le <li>, et ce pour (presque) tous les évènements.
Le seul inconvénient de passer par un <span>, par exemple, est de ne pas avoir le "design" d'un lien par défaut. mais le CSS peut largement palier au problème.
Le seul inconvénient de passer par un <span>, par exemple, est de ne pas avoir le "design" d'un lien par défaut. mais le CSS peut largement palier au problème.
