Forum d'entraide PHPFrance

Bonjour.

Jquery a une fonction qui peut capturer un événement

$('#handle').click(function(e){
}

Mais,moi qui suis plutôt familier avec l'attribut onclick de balise input,
écris des codes comme suit:

function iti(){
$("#cache").animate({
width: '500px',
height: '200px',
border: '1px solid red',
backgroundColor: '#ffffff'
});
}
.....

<input type="button" onclick="iti()" />

A votre avis,mon code n'est pas professionnel ? Et si vous privilégiez
la fonction click() de jquery,pourquoi ?

Bonjour,

click() de Jquery, ne fait en réalité qu'ajouter un onclick sur la balise que tu auras passé en paramètre.
Donc si tu es familier avec onclick, tu ne devrais pas être dépaysé avec click()

Quant à ton code, rien à redire. Tu peux vouloir séparer complètement le HTML du javascript et donc mettre un id à ton bouton et ajouter le onclick dynamiquement avec click... mais bon c'est un détail

A votre avis,mon code n'est pas professionnel ? Et si vous privilégiez
la fonction click() de jquery,pourquoi ?

Je vois 3 raisons de ne pas utiliser onclick :

1. Il est plus propre de mettre l'intégralité de ton code Javascript dans des fichiers externes que tu inclus ensuite, ainsi les utilisateurs qui ne lisent pas Javascript ne sont pas encombrés pour rien.

2. Le HTML est là pour le sémantique, tout ce qui appartient à la logique doit se trouver ailleurs et non pas dans les balises. C'est la même chose pour la balise "style" par exemple, on ne devrait jamais l'utiliser et uniquement utiliser des classes CSS. La balise style n'est là que pour se simplifier la vie, au détriment des bonnes pratiques.

3. Si tu veux appliquer ta fonction sur d'autres éléments, tu seras obligé de dupliquer autant de fois cette balise partout dans ton code. Et si tu décides par la suite qu'en fait il faudrait utiliser 2 fonctions plutôt qu'une seule, tu devras le modifier partout.

La fonction est équivalente à l'ajout de l'attribut onclick="" ? C'est clair,merci.

A votre avis,mon code n'est pas professionnel ? Et si vous privilégiez
la fonction click() de jquery,pourquoi ?

Je vois 3 raisons de ne pas utiliser onclick :

1. Il est plus propre de mettre l'intégralité de ton code Javascript dans des fichiers externes que tu inclus ensuite, ainsi les utilisateurs qui ne lisent pas Javascript ne sont pas encombrés pour rien.

2. Le HTML est là pour le sémantique, tout ce qui appartient à la logique doit se trouver ailleurs et non pas dans les balises. C'est la même chose pour la balise "style" par exemple, on ne devrait jamais l'utiliser et uniquement utiliser des classes CSS. La balise style n'est là que pour se simplifier la vie, au détriment des bonnes pratiques.

3. Si tu veux appliquer ta fonction sur d'autres éléments, tu seras obligé de dupliquer autant de fois cette balise partout dans ton code. Et si tu décides par la suite qu'en fait il faudrait utiliser 2 fonctions plutôt qu'une seule, tu devras le modifier partout.

Bonjour.
Quant aux premiers deux points, la séparation dynamique et statique. Amateur de cliquer-droit sur la page web que je visite,
j'ai rencontré un petit nombre de sites privilégiant l'attribut onclick.
Cette distinction est faite uniquement pour garantir la bonne lisibilité de code pour utilisateurs(ou développeur web),
et non pour la raison de vitesse de chargement ?

Cette distinction est faite uniquement pour garantir la bonne lisibilité de code pour utilisateurs(ou développeur web),
et non pour la raison de vitesse de chargement ?

Il s'agit des deux. Lorsqu'un développeur passe sur du code, il est beaucoup plus simple de n'avoir à regarder que les fichiers JS pour voir tout ce qui a été ajouté en Javascript, plutôt que d'avoir à regarder les fichiers JS et les HTML.
En ce qui concerne l'utilisateur, quelques attributs onclick auront un impact nul sur le temps de chargement de leur page. Il faut vraiment plutôt voir comme une bonne pratique de développement.

Cet article décrit bien l'idée : https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Ou bien ce stackoverflow : http://stackoverflow.com/questions/1262 ... vs-onclick