A quoi sert JQUERY ?

Ici je reprends l'exemple d'une requête AJAX codée en JAVASCRIPT. Il y a un petit problème. Si j'exécute ce code sur un ancien navigateur de la famille Microsoft et bien il ne fonctionnera pas !! Et c'est normal car pour faire ma requête AJAX j'utilise des instructions JAVASCRIPT qu'il ne connait pas. Sur ces navigateurs une requête AJAX doit être programmée d'une autre manière.

Le programmeur JAVASCRIPT est donc obligé de tester sur quel navigateur son code va tourner.

C'est là qu'intervient JQUERY. JQUERY est une librairie écrite en JAVASCRIPT qui fournit au programmeur des fonctions de haut niveau. Elle fournit notamment une fonction qui fait une requête AJAX. La différence c'est que la fonction de JQUERY va tester le navigateur et adapter le code à ce dernier. Et ça c'est vrai pour tout ce que fait JQUERY.

Là le programmeur gagne du temps. En plus il a une sécurité car quel que soit le navigateur il est tranquille ça va fonctionner.

Donc ici vous avez une requête AJAX codée en Jquery qui va tourner correctement dans les navigateurs des ordinateurs de bureau, tablettes, smartphones.

jQuery(document).ready(function() { // Sur un changement d'état du select $('#annee').on('change',function() { // On récupére l'année var annee = $('#annee').val(); // On fait une requête Ajax $.ajax({ type: 'POST', url : 'ajax-javascript-serveur.php', data: 'annee='+annee, // Ci-dessous c'est le traitement de la réponse success: function (reponse) { // Analyse et récupération du tableau de données transmis par le serveur var data = JSON.parse(reponse); // On place les données dans le tableau HTML $('#opus').text(data.opus); $('#ventes').text(data.ventes); $('#logo').html("<img src='"+data.logo+"'>"); } }); }); });

Je précise toutefois ce problème est résolu sur les versions récentes. Il n'en reste pas moins vrai que les navigateurs sont différents selon le visiteur et que le JAVASCRIPT lui même n'est pas tout à fait identique d'un navigateur à l'autre.

La devise de JQUERY est de moins écrire tout en faisant plus.

Dans ce sens JQUERY propose au programmeur le moyen de travailler avec efficacité sur la page web. Le programmeur a à sa disposition un mécanisme puissant de sélection des éléments du document. A cette sélection il peut appliquer une séquence d'actions.

Par exemple ici on fait apparaître et disparaître un tableau avec une animation qui durera une seconde.

$('table').toggle(1000);

On voit bien apparaître la structure d'une instruction JQUERY. Une partie sélection à gauche et une autre partie action à droite.

Ce mécanisme de sélection est identique au mécanisme de sélection des feuilles de styles CSS. A priori le programmeur le connait déjà et si il ne le connait pas il lui suffira de l'apprendre une seule fois pour les deux utilisations.

Programmer la même animation en JAVASCRIPT nécessite beaucoup plus de lignes de code. Ce type de manipulation de document est présent dans de nombreuses situations aussi il est utile que les outils nécessaires soient regroupés dans une librairie. C'est ce que fait JQUERY.

Je termine en vous faisant remarquer que j'ai utilisé le terme d'instruction JQUERY. En fait JQUERY impose aux programmeurs des structures de programmation. A ce titre il est plus qu'une librairie de fonctions. Vous entendrez ou lirez que c'est un framework. Ce n'est pas le seul c'est juste un des premiers et le plus populaire.

Juste deux mots pour dire que des briques ont été rajoutées par dessus JQUERY.

JQUERY UI permet de programmer de puissantes interfaces utilisateurs. Un clic sur ce lien vous permettra de voir la liste des possibilités.

JQUERY MOBILE permet de programmer de puissantes interfaces utilisateurs dédiées aux smartphones. Un clic sur ce lien vous permettra de voir la liste des possibilités.