Framework JQuery pour écrire du Javascript non-intrusif

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Framework JQuery pour écrire du Javascript non-intrusif

Article en plusieurs parties : 1 2 3 4 5

JQuery, librairie Javascript. Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie1 Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2ème millénaire…

En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.

Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info :)

Les bases de chez base »

Articles sur le même sujet

Article en plusieurs parties : Page suivante

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



30 commentaires pour “Framework JQuery pour écrire du Javascript non-intrusif”

  1. Fetard dit :

    Mazette, ça c’est une revue complète !

    Le seul défaut de jQuery, c’est quand tu combines pas mal d’instructions, on s’y perd un peu dans les ) et }….

  2. giz404 dit :

    Pas le temps de lire maintenant, mais je sens que c’est l’article qu’il me fallait pour me lancer dans JavaScript avec jQuery !! bookmarké !

  3. indicadesbois dit :

    Juste pour dire que tes post sont toujours aussi impressioants. Bravo mon br1o !

  4. br1o dit :

    indica > Bah… en ce moment j’ai un peu de temps libre. Et puis je n’allais pas garder tout ça pour moi ;) giz 404 > J’espère que tu ne sera pas déçu… Tiens-moi au courant ! Fetard > C’est clair qu’il faut rester vigilant, mais comme tu l’aura remarqué, je n’ai pas encore de problème de lisibilité. J’espère que ça viendra vite :)

  5. Gilles dit :

    Excellent article. Je bookmarke. C’est du bon.

  6. Kynerion dit :

    Pareil, félicitations. J’utilise prototype et script.aculo.us après Moofx (oui, j’ai voyagé…) et JQuery me tente assez maintenant. A suivre.

    ( tiens, "je reviendrai" y’a pas de "s"… ;) )

  7. br1o dit :

    Tiens, ça fait plaisir de te lire, Gilles ;) Et hop, blogrollmarké !

  8. Bon, ça fait deux fois que je me fais doubler sur un sujet d’article aujourd’hui. Du coup j’abandonne mon article su jQuery et je renvoie les gens chez toi. ;)

  9. br1o dit :

    kynerion > Oups ! c’est corrigé ;) Aymeric > Whoa! j’espère qu’il me reste assez de bande passante pour accueillir tout le monde ;)

  10. Ohh tu sais, ce n’est pas forcément mon blog qui va te bouffer le plus de bande passante. ;)

  11. xuxu dit :

    jQuery c’est bon. Codez en.

  12. Fred Bird dit :

    Jquery c’est (très) bien. Le javascript non intrusif, c’est encore mieux.

    A ce sujet, le coup des coins arrondis en javascript je trouve ça un poil batard; pour moi c’est le boulot des feuilles de style. Dommage que les CSS3 soit encore si peu implémenté…

  13. br1o dit :

    Fred Bird > css 3 ? Je te trouve bien optimiste ou bien patient : si on suit le tempo actuel, il nous faudra certainement attendre les css 4 pour espérer voir la version 3 implémentée sur les principaux navigateurs de 2015 ;)

    Xuxu > t’as pas des devoirs à faire, toi ? :p

  14. xuxu dit :

    Au niveau des mes devoirs, je vais faire comme au collège, c’est à dire les rendre en retard ^^ (ca se trouve "si on suit le tempo actuel", je te répondrais en live au prochain apéro blog :p)

  15. br1o dit :

    lol, ok xuxu, y a pas de problème : j’apporterai un crayon et du papier au prochain apéro :)

  16. xk_liber dit :

    Pour ma part, j’avais déjà découvert JQuery mais c’est un très long, très bon et assez complet article que tu nous as fait là (encore une fois! ;-) ), intéressant et parfait pour une première immersion. :-)

    Vivement DC2 ! ;-)

  17. piouPiouM dit :

    Je vois que pour chaque comportement ajouté à la page tu ajoutes un bloc $(document).ready(function(){…}), pourquoi ne pas tout regrouper dans un unique bloc ? Une version courte de $(document).ready(function(){}) existe, à savoir $(function(){…}) :-)

    Comme tu es demandeur de suggestions d’optimisations, en voici quelques-unes :

    1. la ligne $(‘#links>h3:first a’).css(‘font-size’,’1.5em’); ne sert à rien puisqu’il n’y a aucune balise de lien enfant du premier h3 du bloc #links (un oubli certainement).

    2. suggestion de code pour « links on blogroll h3 » : $(‘#links h3′) .hover(function() { $(this).css(‘color’,’#cf3500′); },function() { $(this).css(‘color’,’#ff7200′); }) .eq(0).css(‘font-size’,’1.5em’); // équivalent à $("#links h3:first")

    3. suggestion de code pour « show hide twitter et presentation » et « links h2 twitter et presentation », le tout étant réunit : $(‘#presentation h2, #twitter h2′) // masque #presentation p puis reviens à l’objet initial .eq(0).next(‘p’).hide().end().end() // modification du curseur .css(‘cursor’,’pointer’) // bind click .click(function() { $(this).next().slideToggle(‘slow’); }) // bind hover .hover(function() { $(this).css(‘color’,’#065f00′); }, function() { $(this).css(‘color’,’#9E0050′); });

    4. il en subsiste certainement d’autres, mais il faudrait dans ce cas oublier la séparation en blocs logiques du code ^_^’

  18. br1o dit :

    piouPiouM > Merci pour toutes ces suggestions :)

    Au début j’avais tout mis en un seul $(document).ready(function() puis quand j’ai commencé à rédiger l’article, j’ai trouvé plus didactique de bien séparer, et puis… après, je me suis dit que si c’était plus lisible pour les lecteurs, ça le serait pour moi aussi !

    Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3 :(

    N°2, j’ai modifié déjà pas mal de choses entre hier soir et ce matin, et là, j’ai utilisé $(‘#links ul:lt(3)’).show(); pour qu’une partie de la blogroll reste visible après avoir masque l’ensemble. (à ce propos je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ‘3’ ça prend les 3 premiers ul et non pas les 4 premiers…).

    N°3 : je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end() ;)

    Merci encore, et à très bientôt j’espère :p

  19. Thanh dit :

    Je comprends mieux pourquoi tu t’es couché aussi tard l’autre soir ;-)

    Brillant!

  20. piouPiouM dit :

    br1o > de rien :p

    > Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3

    Oki, dans ce cas le code précédemment donné en 2. devient :

    /// $(‘#links h3′) .hover(function() { $(this).css(‘color’,’#cf3500′); },function() { $(this).css(‘color’,’#ff7200′); }) // équivalent à $("#links h3:first") .eq(0).css(‘font-size’,’1.5em’) // recherche du premier élément lien enfant de l’élément qui suit // l’élément h3 (à savoir <ul />) .next().find(‘a:first’).css(‘font-size’,’1.5em’); ///

    > je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ‘3’ ça prend les 3 premiers ul et non pas les 4 premiers…

    La méthode eq() réduit le nombre d’éléments à celui dont l’index est passé en paramètre. L’index allant de 0 à n-1, eq(0) retourne logiquement le premier élément, eq(1) le deuxième, eq(2) le troisième, etc…

    La méthode lt(), d’aspect similaire, réduit le nombre d’éléments à ceux qui précèdent l’élément dont l’index est passé en paramètre (l’index allant également de 0 à n-1)). Ainsi, lt(1) retourne les éléments précédants le deuxième élément, soit le premier. lt(2) retourne les deuxième et premier éléments. Et, pour finir, lt(0) ne retourne rien, puisqu’il n’existe aucun élément ayant un index inférieur à 0 ^^ Dans ton cas, $(‘#links ul:lt(3)’) réduit donc le nombre d’éléments à ceux qui ont un index inférieur à 3, autrement dit du 4ème élément et par conséquent les 3 premiers ul ;-)

    > je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end()

    La méthode end() permet de retourner à l’état précédant la dernière manipulation DOM. Par exemple $(‘#links’).next().end() cherche dans un premier temps l’élément div#links puis passe au nœud frère qui suit, soit div#TLA. Finalement la méthode end() fait repasser la pile de jQuery à div#links.

    HS: j’espère que la syntaxe dotclear sera prise en compte =]

  21. Simay dit :

    Très bien vu, j’hésitais encore avec quelle librairie JS travailler, mais bon je crois que mon choix est fait !

  22. br1o dit :

    pioupiouM > Merci pour toutes ces précisions très utiles. Je perçois mieux maintenant la différence entre eq(0) et lt(0) !

    (j’ai l’impression que la syntaxe dotclear n’a pas été prise en compte : ça devait donner quoi, au juste ?)

    Simay > Je pense que tu ne seras pas déçu. Bon, en même temps, j’dis ça, j’dis rien, vu que je connais pas très bien les autres bibliothèques ;)

  23. piouPiouM dit :

    La syntaxe dotclear n’est pas passée effectivement :-( D’un aute côté, je me suis planté dans la syntaxe de l’ajout de code en ligne : il y a un couple de @ en trop à chaque fois =] Une version en ligne est disponible ci-après : mehdi.gimp4you.eu.org/mis…

  24. br1o dit :

    C’est pas grave, je me suis permis de remplacer les @@ par samp et hop! (j’ai essayé en enlevant un @ de part et d’autre, mais rien à faire…)

  25. alex dit :

    J’avais déjà jeté un coup d’oeil sur http://www.jquery.info/ et sur interface.eyecon.ro/demos (pas mal de démos), j’ai hâte de voir l’intégration qu’en fera le Framework Symfony (que j’utilise), le plugin actuel étant pour l’instant seulement en version alpha.

  26. br1o dit :

    alex > WordPress, Dotclear, Synfony… il semble que jquery soit vraiment la bibliothèque qui grimpe :)

    A propos de Synfony, si tu as quelques liens vers des tuto orientés windows sans devoir modifier 50 fichiers exotiques, je suis intéressé ;)

  27. shyboy dit :

    Merci, pour cet articla convainquant, je vais me lancer cet été dans c framework!

  28. Jean-Michel dit :

    Bravo pour ces explications (trop bien !). Dommage qu’elle ne marche pas pour la version 2 de Dotclear. J’essaie en vain de trouver un tuto facile pour organiser en trois parties mes widgets dans la sidebar et l’effet de masquage/affichage semble être l’idéal.

  29. seb dit :

    Simplement pour ajouter qu’une documentation non officielle sur jQuery est dispo ici: jquery.developpeur-web2.c… pour ceux que ca intéresse :-)

  30. gagnant dit :

    heu … ?,"ou alors je n’ai pas bien cherche les options disponibles" ;)



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site