"Bien" appeler une fonction javascript en html...

Bonjour j'aurais voulu savoir quelle est la meilleure méthode (et pourquoi) pour appeler une fonction javascript à partir du click sur un lien entre :

<a href='#' onclick='maFonction()' > ... </a>

et

<a href='javascript:maFonction()'> ... </a>

(les deux marchent apparement...)

Merci.
Modifié par Sol (23 May 2007 - 10:37)

tout ce que je sais c'est que le # fait remonter la page tout en haut ^^

Salut,

Ni l'une ni l'autre.

Le mieux, c'est de séparer le script du html, essentiellement pour une question de maintenance et d'utilisabilité.

Pour ton lien, ça peut par exemple donner :

function init()
{
   var oA = document.getElementById('test');

   oA.onclick = function()
   {
      alert('coucou');
      return false;
   };
}
window.onload = init;

avec dans le html :

<a href="page.htm" id="test">intitulé</a>

Le problème des écritures que tu proposes est, qu'en cas de désactivation de JS, on se retrouve avec des liens inutiles.
Modifié par koala64 (23 May 2007 - 10:47)

Et j'ajouterai, que l'on pense souvent séparation contenu/présentation pourquoi ne pas penser également séparation "comportement"/contenu/présentation ?

<edit>Tout a été dit par Koala </edit>
Modifié par yodaswii (23 May 2007 - 10:52)

koala64> merci, sinon je devrais metre quoi dans l'attribut "href" puisque je n'appelle pas de page html... ?

a écrit :
Le problème des écritures que tu proposes est, qu'en cas de désactivation de JS, on se retrouve avec des liens inutiles.

De toute façon en cas de désactivation de javascript, je compte rediriger le client vers une version du site non dynamique
Modifié par Sol (23 May 2007 - 11:04)

Si ton lien ne pointe vers aucune page, il n'a pas lieu de figurer dans ton code HTML, il doit être généré par le Dom (via Javascript).

Je laisse Koala te donner plus d'infos. A mon humble avis, il a de meilleurs ressources que moi pour t'aiguiller vers des tutos pour que tu te fasses la main. Bon apprentissage !

<edit>Si je peux me permettre : ne pas faire 2 versions de site ; c'est préhistorique ...</edit>
Modifié par yodaswii (23 May 2007 - 11:07)

Si ton lien ne sert qu'à lancer la fonction JS, il faut le créer via JS effectivement... comme ceci, par exemple :

function init()
{
   var oA = document.createElement('a');
   oA.href = '#alerte';

   var oTxt = document.createTextNode('intitulé');

   oA.appendChild(oTxt);
   document.body.appendChild(oA);

   oA.onclick = function()
   {
      alert('coucou');
      return false;
   };
}

window.onload = init;

Pour les tutos sur le sujet, tu peux regarder par ici ainsi que ceux qui y sont indiqués à la fin.
Modifié par koala64 (23 May 2007 - 11:12)

salut,
au passage, si j'osais j'ajouterais juste que si le lien en question n'est pas purement décoratif mais pointe vers ou génère un contenu ayant un qqconque intérêt, il serait malgré tout sain que ce lien existe, pointant vers le contenu en question et soit désactivé pour lancer la fonction js comme l'a montré Koala.

have swing

a écrit :
Lien ... décoratif

???

Je ne vois pas d'exemple où un lien n'est que décoratif . Enfin, l'idée est là passons ...
Modifié par yodaswii (23 May 2007 - 11:39)

yodaswii a écrit :
<edit>Si je peux me permettre : ne pas faire 2 versions de site ; c'est préhistorique ...</edit>

Le problème c'est que mon site est entièrement en Ajax (à cause notamment d'un menu en flash), donc je peux difficilement faire autrement... à moins d'avoir un code affreusement complexe... (dans le cas du site sans javscript, le menu sera en html)
Modifié par Sol (23 May 2007 - 11:40)

a écrit :
Le problème c'est que mon site est entièrement en Ajax (à cause notamment d'un menu en flash), donc je peux difficilement faire autrement... à moins d'avoir un code affreusement complexe...

Et non justement, ce que t'as donné Koala ci-dessus te permet de développer qu'une seule version. En créant tout d'abord un site naviguable sans Javascript puis en le modifiant via le Dom (tu peux créer, modifier, déplacer, supprimer des éléments de ta page) et en insérant ce qu'il faut pour tes traitements via AJAX (attention à ne pas utiliser ce "concept" abusivement).

A ne pas oublier, Javascript doit être considérer comme une surcouche et non comme la couche (sauf dans des cas précis comme utilisation sur un intranet/extranet où la configuration du parc informatique est connue).

ok je vais étudier tout ça, merci pour les conseils

Bonjour,

yodaswii a écrit :
<edit>Si je peux me permettre : ne pas faire 2 versions de site ; c'est préhistorique ...</edit>

D'autant plus que l'utilisateur peut très bien désactiver JavaScript en cours de navigation.

encore une petite question, ça sert à quoi de mettre le code javascript entre commentaire comme ceci :

<script type="text/javascript">

<!--


//-->

</script>

Une petite question, pourquoi créer un lien et ne pas assigner l'évenement onclick à la balise concernée directement?
Modifié par matmat (23 May 2007 - 16:15)

thx, donc en XHTML il vaut mieux utiliser

// <![CDATA[
/* Votre script ici */
// ]]>

Salut
@yoda, je me dois d'une petite explication sur ce que j'appelle un lien décoratif... pour moi, mais je me trompe peut-être, ce ne serait pas la première fois un lien, donc un a href en clair, est une balise qui sert à pointer vers une page, voire la même en changeant son contenu ou à pointer vers une ancre dans une même page, un lien quoi.

J'ai tendance à considérer comme décoratif, et ce n'est pas péjoratif, un curseur "façon" lien sur ce qui serait sans js un inter suivi d'un pavé de texte et qui avec js sert à ouvrir élégamment ledit pavé de texte avec un joli effet de slider doublé d'un fade in. Ca, perso, je ne suis pas sûr que ça relève d'une balise a href et c'est ce que j'appelle un lien décoratif, en clair un truc qui ne sert qu'à déclencher un effet dans la page pour jouer avec le contenu, contenu qui si la page est bien faite est visible oeuf corse si js est désactivé.

Ce genre de truc relève plus (mais encore une fois ce n'est que mon avis) d'une balise p, h, span ou autre, "décorée" d'un cursor pointer css mais n'est pas vraiment un lien. Voilou.

Quant à la surcouche, je ne suis pas tout à fait d'accord, encore une fois ce n'est que mon avis, mais une page se compose d'abord de son contenu texte et image ayant un sens autre que purement décoratif, le tout proprement agencé et balisé comme il se doit. Ne pas oublier bien sûr la navigation qui doit être visible et ergonomique rien qu'avec des vilains liens (des vrais ceux-là) bleus soulignés. Vient s'ajouter, parce qu'un peu de beauté dans un monde de brutes ne nuit pas, une couche décorative grâce à nos chères css qui peuvent en profiter pour ajouter un peu d'ergonomie mais réservée au sujet dotée d'une vue qui permet d'en profiter... et, enfin, luxe suprème, js comme une couche supplémentaire, d'où surcouche dans mon langage primaire mais je suis preneur d'autre chose..., qui en rajoute un peu côté beauté, animation, effets, changement de contenu sans recharger le page, etc, etc, mais sur laquelle ne devrait en aucun cas reposer l'accès au contenu.

Voilou, première couche, le contenu, deuxième, la peinture et les tableau au murs avec css et troisième, la domotique avec js.

Have swing
Modifié par virtualgadjo (24 May 2007 - 09:12)

Salut,

Je suis d'accord avec toi sur le fait que les liens ne sont pas forcément adaptés aux effets JavaScript sur une page. Je me suis toujours demandé s'il n'y avait pas de meilleure solution, notamment avec l'élément button (qui est par ailleurs un élément remplacé je crois, donc difficilement stylable).

Par contre, comme je l'ai dit au-dessus, utiliser un élément quelconque pour ça rendra ta page inaccessible sans souris.