{"id":84,"date":"2010-05-17T15:00:22","date_gmt":"2010-05-17T14:00:22","guid":{"rendered":"http:\/\/saladtomatonion.com\/blog\/?p=84"},"modified":"2010-05-17T15:00:59","modified_gmt":"2010-05-17T14:00:59","slug":"javascript-facile-avec-jquery","status":"publish","type":"post","link":"https:\/\/saladtomatonion.com\/blog\/2010\/05\/17\/javascript-facile-avec-jquery\/","title":{"rendered":"Javascript facile avec jQuery"},"content":{"rendered":"

Le web c’est essentiellement des pages statiques. Si on veut commencer \u00e0 avoir des niveau d’interaction utilisateur proches ou \u00e9quivalents \u00e0 ce qu’on peut avoir dans une application stand-alone<\/em>, il faut \u00e9videmment se mettre au javascript, histoire de g\u00e9rer des \u00e9v\u00e9nements et de rafra\u00eechissements d’interface ind\u00e9pendant d’un rechargement complet de la page (et cela inclut aussi les requ\u00eates asynchrones, le fameux AJAX<\/a>, ce qui ne sera pas trait\u00e9 aujourd’hui).<\/p>\n

Javascript, maintenant, \u00e7a marche tr\u00e8s bien sur les navigateurs r\u00e9cents, et avec les progr\u00e8s \u00e0 la fois des interpr\u00e9teurs et des machines, c’est ex\u00e9cut\u00e9 dans des temps \u00ab\u00a0interactifs\u00a0\u00bb. Mais le javascript, c’est long et fastidieux, entend-on. Plus avec jQuery<\/a>!<\/p>\n

jQuery<\/a>, c’est une biblioth\u00e8que javascript que l’on inclut dans sa page web, qui p\u00e8se quelques dizaines de Ko, et qui rend des services formidables. Si vous connaissez d\u00e9j\u00e0 l’outil, le billet ne vous apprendra rien, mais si vous avez envie d’enrichir vos applications web et que vous ne saviez pas par quel bout commencer, alors lisez la suite!<\/p>\n

Je ne vais pas entrer dans le d\u00e9tail, mais plut\u00f4t illustrer l’utilisation de la biblioth\u00e8que par quelques exemples simples.<\/p>\n

L\u00e0 o\u00f9 javascript va n\u00e9cessiter d’\u00e9crire moultes lignes de codes et\/ou fonctions d’aide pour la recherches d’\u00e9l\u00e9ments dans le DOM<\/a>, jQuery va s’appuyer sur une syntaxe qui correspond \u00e0 la s\u00e9lection CSS.<\/p>\n

Par exemple, imaginons que sur l’appui d’un bouton dans la page, je souhaite changer la couleur de tous les liens dans la page, via <\/em>un changement de classe CSS, j’\u00e9crirai ceci :<\/p>\n

function changeAnchorColor(){
\n$(\"a\"<\/span>).addClass(\"altAnchor\"<\/span>);
\n}<\/code><\/p><\/blockquote>\n

Une ligne de code pour, dans l’ordre, trouver tous les \u00e9l\u00e9ments de type <a><\/code> dans le document courant, et leur ajouter la classe CSS altAnchor<\/code> ($<\/code> est un alias de la fonction-constructeur jQuery<\/code>).<\/p>\n

Imaginons maintenant que je veuille changer uniquement les liens de classe externalLink<\/code>, et ce uniquement dans les paragraphes de la zone principale de mon site identifi\u00e9e comme suit : <div id=\"main\">...<\/div><\/code>.<\/p>\n

function changeExternalLinks(){
\n$(\"#main > p > a.externalLink\"<\/span>).addClass(\"altAnchor\"<\/span>);
\n}<\/code><\/p><\/blockquote>\n

Comme on le voit, la s\u00e9lection CSS est ici \u00e0 l’\u0153uvre. On doit donc lire : \u00ab\u00a0\u00e0 l’int\u00e9rieur du bloc nomm\u00e9 main<\/code>, et dans les blocs enfants directs de type <p><\/code>,\u00a0 je s\u00e9lectionne les \u00e9l\u00e9ments enfants <a><\/code> dont la classe est externalLink<\/code>\u00ab\u00a0.<\/p>\n

L\u00e0 o\u00f9 il aurait fallu \u00e9crire des parcours de tableau successifs, encore une fois, une seule ligne de code tr\u00e8s explicite est suffisante.<\/p>\n

Je me limite l\u00e0 \u00e0 deux exemples tr\u00e8s simples. On peut aussi vouloir appliquer un traitement plus complexe aux \u00e9l\u00e9ments s\u00e9lectionn\u00e9s. Il suffit pour \u00e7a de proc\u00e9der comme suit :<\/p>\n

$(\"a\").each(function(element){
\n\/\/traitements complexes sur l'objet de DOM element
\n});<\/code><\/p><\/blockquote>\n

Ici, j’appelle tout simplement une fonction (d\u00e9clar\u00e9e de fa\u00e7on anonyme, mais je peux aussi l’avoir d\u00e9clar\u00e9e ailleurs et la r\u00e9f\u00e9rencer ici) qui s’applique \u00e0 chacun des \u00e9l\u00e9ments de mon tableau de r\u00e9sultats.<\/p>\n

Je reviendrai probablement plus tard sur le sujet avec des exemples concrets. Cependant, rien qu’avec la fonction de s\u00e9lection et celle d’appel de fonction par \u00e9l\u00e9ment, on peut faire un nombre incroyable de choses. Je n’ai quasiment utilis\u00e9 que ces deux fonctionnalit\u00e9s pour la premi\u00e8re page que j’ai faite utilisant la biblioth\u00e8que, et \u00e7a marchait du tonnerre!<\/p>\n

jQuery<\/a> est une biblioth\u00e8que open source et libre, et elle dispose d’une multitude de plug-ins venus enrichir ses fonctionnalit\u00e9s. \u00c0 mon avis, c’est une r\u00e9f\u00e9rence devenue incontournable dans le domaine du d\u00e9veloppement web. \u00c0 essayer, et peut-\u00eatre \u00e0 adopter!<\/p>\n

Pour finir en beaut\u00e9, un exemple de ce que peut faire jQuery, avec la biblioth\u00e8que lightbox<\/em><\/a>. Pour ce faire, j’ai simplement ajout\u00e9 l’attribut rel=\"lightbox\"<\/code> aux liens vers les images, et lightbox<\/em> <\/a>s’occupe du reste automatiquement. Le code est donc non intrusif et les liens vers les images fonctionnent toujours m\u00eame sans javascript!<\/p>\n\n\n\n
\"\"<\/a><\/td>\n\"Water<\/a><\/td>\n\"There<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

Le web c’est essentiellement des pages statiques. Si on veut commencer \u00e0 avoir des niveau d’interaction utilisateur proches ou \u00e9quivalents \u00e0 ce qu’on peut avoir dans une application stand-alone, il faut \u00e9videmment se mettre...<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[4],"tags":[27,18,20,23,22,21,19],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":26,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saladtomatonion.com\/blog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}