[POO] Bonnes pratiques href="javascript:fonction()"

**LhIaScZkTer** · 03/04/2009, 14h32

Bonjour à tous,

J'ai trouvé un document en furetant sur le net au fil de la lecture je me suis retrouvé sur cette page : Bonnes pratiques

Ma question est la suivante, dans le "ce qu'il ne faut pas faire" il y a :

Ne jamais utiliser le protocole javascript: href="javascript:function1()"

Qu'est-ce que cela veut-il dire ? Qu'il n'est pas bon de faire quelque chose dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="Javascript:alert('hello')">hello</a>

et pourquoi ? Il m'arrive de faire des appels à des fonctions comme ceci pour ne pas avoir un # dans l'url.

Quelqu'un pourrait-il m'éclairer sur ce sujet ?
Merci à tous pour votre aide.

**SpaceFrog** · 03/04/2009, 14h39

href attend une url ...
le fait de mettre du js dedans revient à taper ta commande js dans la barre d'adresse

De plus les moteurs de recherche recupèrent l'arborescence de navigation de ton site grace à cela...

si tu tiens à utiliser une balise href pour lancer une fonction $passe par le onclick

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href=#" onclick="function1(); return false;)>

par contre la ligne du dessus je vois pas

Pas d'événements dans le HTML : onclick="function0()"

on est supposés lancer comment alors les fonctions ?

**RomainVALERI** · 03/04/2009, 14h43

Le principal défaut de cette pratique est de constituer une infraction au principe de l'unobstrusive javascript.
Comme on ne peut pas déterminer a priori que l'utilisateur final consultera tes pages avec un navigateur capable d'interpréter du javascript (et qui "l'accepte" en terme de sécurité), il faut le proposer sans l'imposer ^^

**SpaceFrog** · 03/04/2009, 14h46

donc le coup du pas de js dasn l'html impose du 100% non intrusve et peupler les evénements sur le onload ?

**Bovino** · 03/04/2009, 14h46

C'est expliqué dans la FAQ !

**LhIaScZkTer** · 03/04/2009, 14h47

Encore une fois merci pour tes lumières SpaceFrog

Je pense que pour le onclick="function0()" , il doit parler de la semantique, genre, les personnes qui foutent (mettent) des onclick dans des div par exemple

Mais alors dans le cas d'un popup modal ?

**RomainVALERI** · 03/04/2009, 14h48

Envoyé par SpaceFrog

on est supposés lancer comment alors les fonctions ?

Tout est dans un script attaché dans le head de la page : le script en question contient notamment ton "point d'entrée", c'est-à-dire la plupart du temps on attache un listener de "onload" sur le body et c'est là qu'on va aller placer les autres listeners (onclic, onmouseover etc.) de la page ^^ un peu laborieux mais "propre"... ^^

edit : décidément je ne refresh pas mes pages assez vite bande de ninjas des forums... ... 3 minutes 4 messages qui s'intercalent et me voilà dans les choux avec mon explication hu hu

**SpaceFrog** · 03/04/2009, 14h53

100% non intrusive et peupler les evénements sur le onload ?

c'est ce que j'avais compris ...

merci de cette confirmation...

Mais bon les paranos du js ...

**LhIaScZkTer** · 03/04/2009, 14h57

houaaa merci à tous pour votre intervention, j'ai vite été débordé par les évènement, je ne m'attendais pas à tant de réaction si vite.

Merci Bovino, pour le lien sur la FAQ il est vraiment très très bien.

En gros, de gérer les évènements de cette manière ne sert qu'à rendre les couches encore plus indépendantes. Cela me rappel un bon vieux MVC, évidemment très schématiquement parlant

**SpaceFrog** · 03/04/2009, 15h01

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<noscript> t'es qu'une buse! depèche toi d'activer ton js</noscipt>

**RomainVALERI** · 03/04/2009, 15h04

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<noscript> t'es qu'une buse! depèche toi d'activer ton js</noscipt>

très bon

(mééé non on est pas parano hu hu : on peut adorer le js tout en voulant être clean sur la séparation du contenu, des comportements et des données

)

**SpaceFrog** · 03/04/2009, 15h30

ça me donne une idée ...
je vais peut être réinventer le fil à couper l'eau tiède mais ...

que pensez vous d'une librairie qui se chargerait de peupler les évenements des objets de la page

genre on a d'un coté les fonctions dans un js externe
et de l'autre une fonction qui va associer id et fonctions
un array a deux dims arrayid qui comporte l'id, l'evenement et la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
genre populate(arrayid){
for (i=0;i<arrayid.length){
eval('document.getElementById(\"'+arrayid[i][0]+'\").'+arrayid[i][1]+'=fonction(){'+arrayid[i][3]+'();')
}

ce n'est qu'un brouillon de code ...

**RomainVALERI** · 03/04/2009, 16h10

Envoyé par SpaceFrog

ça me donne une idée ...
je vais peut être réinventer le fil à couper l'eau tiède mais ...

que pensez vous d'une librairie qui se chargerait de peupler les évenements des objets de la page

genre on a d'un coté les fonctions dans un js externe
et de l'autre une fonction qui va associer id et fonctions
un array a deux dims arrayid qui comporte l'id, l'evenement et la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
genre populate(arrayid){
for (i=0;i<arrayid.length){
eval('document.getElementById(\"'+arrayid[i][0]+'\").'+arrayid[i][1]+'=fonction(){'+arrayid[i][3]+'();')
}

ce n'est qu'un brouillon de code ...

L'idée est excellente ^^ je me souviens l'avoir envisagé quand on m'a expliqué cette manière d'inclure le javascript proprement dans une page, mais je n'avais pas les compétences nécessaires en web/javascript à l'époque... et maintenant je n'ai plus le temps

Si seulement quelqu'un de très doué et d'un peu dispo décidait de s'en charger et de le poster dans les contributions : la vie serait quand même plus belle

*non non je ne pense à personne en particulier* ^^

**le_chomeur** · 03/04/2009, 16h45

Spaffy , moi je ne suis pas pour ^^
car il est préférable d'attacher les évènements via un addevent , sur chaque objet avant ou après le load

**SpaceFrog** · 03/04/2009, 16h53

pourquoi le addevent ?
autant definit direct la fonction puisque là pas de risque d'ecraser vu que le html est vierge ds js ...
et sinon ben ça se fait de toute façon dans le onload ...

**le_chomeur** · 03/04/2009, 17h13

et non pas forcément spaffy , j'ai justement eu l'erreur il y a peu :-/
une page avec beaucoupppppp d'image ... celle ci n'étant aps toute chargées a la fin du onload , des erreur bloquant complètement le site apparaissait !

il faut passer par le domready :-)

**SpaceFrog** · 03/04/2009, 17h15

ha oui mais pour ça j'ai une tempo qui boucle sur les images et verifie leur complete ...

sinon HS mais y'a un bug sur ton slider ...
la zone de clic n'est pas bien definie, si tu cliques sur les bords ça part en vrac

**le_chomeur** · 03/04/2009, 17h27

ouep mais la tempo pour attendre le domready ,c'est un peu bidouille non ? je te montrerais un code mettant en oeuvre le dom ready sans tempo ...

pour le slider, je l'ai fait en 20 minutes lol
je publierais une version clean pt ce win