« Article précédent : Article suivant : »

Comment (bien) démarrer avec jQuery

Par 24 avr, 2009

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 !

Un bon environnement pour coder avec jQuery

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.

Un bon éditeur de texte vaut tous les Notepad du monde

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.

Un Firebug bien utilisé remplace toutes les alert() du monde

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.

jQuery vs Javascript vs PrototypeJS

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 icon wink Comment (bien) démarrer avec jQuery ).

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 :

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’);
}
});

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() ».

Un bon exemple : la double-liste dynamique

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;
});

Conclusion

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 !

Vous avez aimé cet article ? Vous aimerez sûrement aussi...

 

Vous devriez nous suivre sur Twitter ici et rejoindre notre groupe sur Facebook ici.

Mots-clefs :, Catégories : article, humour, logiciel, non classé, programmation
3 commentaires

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.

moshi (le 24 avril 2009)  - #1

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… :)

Soso (le 25 avril 2009)  - #2

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…

Olivier (le 26 avril 2009)  - #3

Désolé, les commentaires sont fermés pour le moment.