Introduction à jQuery

JavaScript, jQuery, par où commencer ? C'est le problème classique de l'oeuf et de la poule dans l'apprentissage de la programmation. Il faut connaître un petit peu de JavaScript pour pouvoir utiliser jQuery, mais jQuery permet d'économiser une tonne d'énergie en effectuant des choses qui prendraient une éternité en JavaScript ordinaire. Dans ce cours, nous allons donc étudier ces deux concepts en parallèle en partant du niveau débutant.

JavaScript est un langage de programmation inventé par Brendan Eich en 1995, et jQuery est une bibliothèque JavaScript open-source inventée par John Resig en 2006. Insérer du JavaScript pur (le langage de programmation) dans vos projets web peut changer le comportement de vos pages. Ce langage vient compléter le HTML et le CSS de votre site, qui déterminent le contenu et l'apparence de votre page, en y ajoutant une couche d'interactivité.

jQuery (la bibliothèque JavaScript open-source) vous permet d'exploiter la puissance de JavaScript pour accomplir une myriade de choses géniales sur votre page web. Avec jQuery, vous pouvez par exemple :

• Ajouter, supprimer ou modifier des éléments HTML au sein de votre page.

• Changer les styles des éléments de la page en modifiant le CSS qui leur est associé.

• Animer des éléments de votre page.

• Envoyer et recevoir des données depuis un serveur grâce à AJAX (asynchronous JavaScript and XML, c'est-à-dire JavaScript et XML asynchrones) pour ne plus avoir besoin de recharger vos pages après validation d'un formulaire.

• Et bien plus encore !

Par ailleurs, utiliser jQuery vous permet de profiter d'une plus grande compatibilité avec les différents navigateurs. Le JavaScript pur est réputé pour avoir des spécificités dans chaque navigateur comme Internet Explorer, Chrome, Safari, etc, qui vont potentiellement exécuter votre code JavaScript différemment les uns des autres. jQuery vous évite cette prise de tête, car il est conçu dans un esprit de compatibilité maximale.

Cette compatibilité est rendue possible par l'utilisation que fait jQuery des sélecteurs CSS. Sélectionner des éléments devient plus rapide et plus direct qu'en JavaScript classique, et puisque la plupart des développeurs web comprennent déjà les sélecteurs CSS, ils n'ont aucun mal à se servir de jQuery.

À quoi ressemblent JavaScript et jQuery ?

Voici un bout de code JavaScript d'exemple : il sert à ajouter une classe "starred" à chaque élément de liste.

var listItems = document.querySelectorAll('li');
var i;
for (i = 0; i < listItems.length; i++) {
    listItems[i].className = 'starred';
}

Et voici à présent un morceau de jQuery qui fait la même chose :

$("li").addClass("starred");

Vous remarquerez qu'il y a beaucoup de points-virgules, de parenthèses, crochets et autres accolades en JavaScript, tandis qu'il y a de nombreux $ (signes dollar) en jQuery.  À l'aide de tous ces symboles barbares, vous pouvez accomplir les mêmes tâches en JavaScript et jQuery. Cependant, en général, ce dernier vous demandera moins d'efforts et de code que le JavaScript pur.

jQuery a beau vous offrir une foule de fonctionnalités, ce n'est ni plus ni moins qu'un simple fichier JavaScript ! Pour l'utiliser dans vos projets, vous devez l'inclure dans votre page web, ce que vous apprendrez à faire dans la deuxième partie. En incluant le fichier jQuery dans vos projets, vous pourrez :

1. Sélectionner des éléments en utilisant les sélecteurs

2. Faire des choses aux éléments sélectionnés, grâce à des méthodes

Ces deux actions de base vont vous permettre d'accomplir tous les cas d'usage de jQuery que j'ai mentionnés précédemment. Vous organiserez ensuite vos fichiers JavaScript de la même manière que vous organiseriez votre CSS ou d'autres langages dans vos projets ; soit via des fichiers externes, soit directement dans votre HTML.