High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Fonction JS dans balise <a>

Dernière réponse le 27 oct 2009 à 15:37:59 papouuu86, le 23 oct 2009 à 10:22:12 
 Signaler ce message aux modérateurs

Bonjour je me demandais une chose:

est-ce qu'il est possible de mettre un appel de fonction JS dans un lien <a>?
mais sans que ceci me dirige vers une autre page... difficile je suppose puisque c'est a la base la définition de la balise <a>
ce que je veux faire en fait c'est ajouter un "j'ai oublié mon mot de passe" qui lorsqu'on clique dessus affiche un formulaire demandant l'email dans la meme page.
j'ai deja ma fonction JS mais je veux pas que "j'ai oublié mon mot de passe" soit un boutton (plutot moche :s).

Configuration: Windows Vista
Firefox 3.0.14

Meilleures réponses pour « fonction JS dans balise  » dans :
Javascript - Afficher un message d'au-revoir aux visiteurs VoirIl est parfois très plaisant d'afficher un message en remerciant les visiteurs de votre site de leur passage. Cette astuce a pour but de vous montrer comment s'y prendre. 1.La fonction JavaScript 2.Appel du Script 1.La fonction...
Javascript - Les fonctions VoirLa notion de fonction On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction...
Javascript - Implantation du code VoirA quel emplacement insérer le Javascript dans votre page HTML Il existe plusieurs façons d'inclure du JavaScript dans une page HTML : Grâce à la balise En mettant le code dans un fichier Grâce aux événements Dans la balise...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Posez votre question Répondre

1

M@dien, le 23 oct 2009 à 10:31:38

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. Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, 
on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

   
Répondre à M@dien

2

papouuu86, le 23 oct 2009 à 10:34:18

Merci pour ta réponse si rapide je vais chercher et posterais la soluce pour les suivants qui voudraient le faire ;)

   
Répondre à papouuu86

3

papouuu86, le 23 oct 2009 à 10:47:40

En fait ton href="#" march nickel c'est exactement ce que je veux ;)

   
Répondre à papouuu86

4

M@dien, le 23 oct 2009 à 10:58:19

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. Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, 
on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

   
Répondre à M@dien

5

P@t@ch0n, le 23 oct 2009 à 11:05:36

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>

   
Répondre à P@t@ch0n

6

M@dien, le 23 oct 2009 à 11:09:30

Et quelles sont les raisons pour préférer la version 

<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. Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, 
on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

   
Répondre à M@dien

8

P@t@ch0n, le 23 oct 2009 à 18:13:11

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.

   
Répondre à P@t@ch0n

9

M@dien, le 27 oct 2009 à 09:20:47

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. Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, 
on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

   
Répondre à M@dien

7

papouuu86, le 23 oct 2009 à 11:15:55

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 ^^

   
Répondre à papouuu86

10

Archeus01, le 27 oct 2009 à 10:20:20
  • +1

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-20041­008/ 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!

   
Répondre à Archeus01

11

papouuu86, le 27 oct 2009 à 11:07:37

Sinon j'ai lu que c'était correct aussi de le faire sur une balise <span>

   
Répondre à papouuu86

12

Archeus01, le 27 oct 2009 à 11:18:48

Source?

   
Répondre à Archeus01

13

papouuu86, le 27 oct 2009 à 11:56:56
   
Répondre à papouuu86

14

 M@dien, le 27 oct 2009 à 15:37:59

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. Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, 
on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

   
Répondre à M@dien
Posez votre question Répondre
Ils ont besoin de votre aide