Vous êtes un programmeur débutant ou confirmé en Javascript, vous savez ce qu’est jQuery (parce que vous avez lu notre introduction à jQuery) et vous êtes finalement convaincu qu’utiliser un framework Javascript, c’est bien ? Vous êtes à la recherche d’un article qui pose bien les bases sans entrer dans les détails des API de jQuery, comme ça, à froid, alors que vous ne savez pas encore de quoi il s’agit ?
Vous êtes au bon endroit !
Le pire pour démarrer à coder en jQuery et plus généralement en Javascript, c’est de démarrer trop vite et de coder un combo Notepad / Alert() : « Notepad », du nom de l’éditeur de texte brut de Windows et « alert() » du nom de la célèbre fonction qui nous a tous servi à débugger du javascript.
Pour (bien) commencer, vous devriez vous munir d’un éditeur de texte digne de ce nom. Un éditeur avec la coloration syntaxique, gratuit pourrait être Notepad++ dont je vous avais déjà parlé.
Sinon il y a l’artillerie lourde, inutile pour le moment, du genre de JSEclipse qui a la coloration syntaxique et l’auto-complétion. Je dis inutile pour le moment car pour jQuery, il n’existe pas, à ma connaissance, d’outil d’auto-complétion.
Par contre, pour le moment, oubliez le debugging depuis l’éditeur, puisque le seul outil qui sera votre ami ici, c’est l’extension Firebug pour Firefox.
Firebug est l’extension Firefox qui m’a fait oublié Web Developer.
La base du du débugging est de tracer la valeur de vos variables. Là où auparavant, on aurait utilisé une rapide alert(), prenez l’habitude d’utiliser Firebug pour vérifier la valeur de vos variables. Je ferai un article prochainement sur l’utilisation de Firebug.
La première surprise qui attend le développeur habitué à coder du javascript sera la suivante : « mais où sont passées mes fonctions si connues ?« .
En effet, pour sélectionner un élément du DOM, on avait l’habitude d’utiliser la fonction document.getElementById (que celui qui a dit document.element aille se pendre tout de suite ).
Avec jQuery, je vous ai appris à utiliser la fonction magique « $ » qui retourne un autre élément jQuery. Or, il arrive, c’est comme ça, que vous ayiez besoin d’accéder à un élément DOM directement… même si ce serait pour de mauvaises raisons étant donné qu’avec jQuery, vous pouvez faire la même chose qu’avec Javascript-sans-jQuery.
Pour simplifier ma pensée, voici un petit tableau des équivalences de mon cru :
La première chose qui frappe, c’est qu’on écrit en PrototypeJS à 99% exactement de la même façon qu’en Javascript pur. C’est l’avantage de ce framework, il ne nécessite presque pas d’apprentissage. Pour moi, il se résume à l’emploi de la fonction magique « $ » et à la conversion des tableaux Javascript avec « $A() ».
J’ai 2 listes côte à côte et en double-cliquant sur un élément de l’une, je souhaite la transférer à l’autre. Et inversement.
$(« #listeOrigine »).dblclick(function() { Sur l’action double-clic
$(« #listeOrigine option:selected »).each(function () { Pour chaque option sélectionnée
$(« #listeDestination select »).append($(this)); Déplace l’option vers la seconde liste
});
})
Plusieurs choses à noter :
La fonction dblclick() prend en paramètre un pointeur de fonction qu’on définit juste après le « fonction() {« .
En javascript, on aurait eu besoin de faire une jolie boucle « for() ». Avec jQuery, on utilise la fonction each() et on lui passe en paramètre, encore une fois, un pointeur de fonction. A l’intérieur de cette fonction, on peut faire référence à l’objet courant avec $(this).
Pour faire joli, on peut également compléter le code ci-dessus par un tri automatique de la seconde liste lorsqu’on lui ajoute un élément.
var options = $(« #listeDestination select option »).get().sort(function(a, b) { Réordonne la seconde liste
var keyA = $(a).attr(« value »).toUpperCase();
var keyB = $(b).attr(« value »).toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
J’espère avec ce petit aperçu la puissance de jQuery et les différences notables entre « utiliser ce framework » et « utiliser un autre framework ou carrément ne pas utiliser de framework » !
En tout cas, vos questions et remarques sont les bienvenues !
Bonjour,
Soit il y a une faute de copier/coller soit il y a une mauvaise connaissance de prototype, récupérer un élement par son id avec prototype se fait grâce à $(‘elmID’)
De plus, il ne se resume pas a l’utilisation de $ et $A, il étand d’origine les différents objets javascript,
il permet, de la meme maniere que jQuery, la gestion des evenements, des helpers Ajax, etc…
Perso je suis plus jQuery, mais quitte à comparer, autant que cela soit juste et équitable.
Bonjour moshi, merci pour ces petites corrections. En effet, je corrige le copier/coller maladroit.
Je ne dis pas qu’il se résume à $ et $A, mais que POUR MOI cela résume toute l’utilité que l’on peut en avoir. Sinon, il est vrai que j’ai oublié de mentionner qu’il étendait la plupart des objets du DOM avec ses propres fonctions…
J’apporterai un peu d’équitabilité dans un autre article plus approfondi je pense…
Je partage ton avis sur Jquery, l’essayer, c’est l’adopter. Si tu le couples avec la puissance d’un CMS comme wordpress et de l’Ajax, tu peux faire des choses très sympas avec un minimum de code. Ceci dit, au départ, quand tu écris du jquery, tu as un peu l’impression de rentrer dans la 4e dimension mais après on s’y fait assez vite.
Firebug a le mérite d’exister et il est bien pratique dans un certain nombre de situations mais il est quand même super buggé. Le nombre de fois où je suis obligé de relancer FF parce qu’il me plante le rendering…
Désolé, les commentaires sont fermés pour le moment.
Un bon environnement pour coder avec jQuery
jQuery vs Javascript vs PrototypeJS
Un bon exemple : la double-liste dynamique
Conclusion
Un bon éditeur de texte vaut tous les Notepad du monde
Un Firebug bien utilisé remplace toutes les alert() du monde
Comment (bien) démarrer avec jQuery
Vous avez aimé cet article ? Vous aimerez sûrement aussi…
Vous devriez nous suivre sur Twitter ici et rejoindre notre groupe sur Facebook ici.
3 commentaires
| Description | Javascript | PrototypeJS | jQuery |
|---|---|---|---|
| Retourner la valeur contenue dans ma textbox monInputText | monInputText.value() | monInputText.value() | monInputText.val() |
| Retourner la liste des options ma liste monSelect | monSelect.options | monSelect.options | monSelect.attr(‘options’) |
| Créer un nouveau div à la racine du document | document.createElement(‘div’) | document.createElement(‘div’) | append(‘div’) |
| Retourner l’élément DOM monDiv | document.getElementById(‘monDiv’) | $(‘monDiv’) | $(‘monDiv’)[0] |
| Parcourir un tableau d’options et les remplacer par « bla » | var options = monSelect.options; for (; i < options.length; i++) { var option = options[i]; option = « bla »; … } |
var options = $A(monSelect.options); options.each(function(option) { option.value() = « bla »; }); |
monSelect.attr(‘options’).each( function() { $(this).val(‘bla’); } }); |
moshi
Soso
Olivier Sosojavascriptjqueryarticlehumourlogicielnon classéprogrammation #1 #2 #3 Par
24 avr, 2009Catégories :
, , , ,