Introduction à jQuery

Les fonctions et les variables sont deux concepts de JavaScript dont vous allez  souvent avoir besoin en jQuery. Contrairement au chapitre précédent, au cours duquel nous avons évoqué du vocabulaire assez explicite, facile à lire et porteur de sens, il faut ici vous préparer à quelque chose de plus difficile ! C'est ici que nous commençons à explorer la légendaire foule d'accolades et autres points-virgules de JavaScript.

Mais rassurez-vous ! Une fois que vous aurez bien compris l'utilité des fonctions et des variables JavaScript, vous serez fin prêts pour jQuery. J'imagine que vous me regardez avec méfiance en ce moment-même, puisque nous n'avons même pas encore touché à jQuery. Ne vous inquiétez pas, on y est presque !

Les variables

Une variable est une donnée sous un nom différent ou "identifiant". En stockant cette donnée, vous permettez à vos scripts de conserver une information dans le but de s'y référer par la suite. Il est très simple de déclarer une variable, comme vous pouvez le voir dans cet exemple :

var monPrenom = "Emily";

Ça y est ! "Emily"  est à présent stockée en tant que valeur demonPrenom. La première étape est d'écrire le mot-clé var, un mot réservé en JavaScript pour identifier le contenu qui va suivre comme une variable. Ensuite, on précise le nom de la variable en CamelCase, puis le signe égal (opérateur d'affectation), et enfin le contenu de la variable. Vous pouvez stocker à peu près n'importe quoi dans une variable, notamment des chaînes de caractères, des nombres et des tableaux.

Voici encore quelques déclarations de variables :

var pays = "France";
var ville = "Paris";
var typeAnimal = "chien";

Les fonctions

Une fonction est un morceau de code qui exécute ou accomplit une action. Voici une fonction qui crée une alerte navigateur pour vous dire bonjour :

function saluerEtudiants() {
    alert('Bonjour les étudiants !');
}
saluerEtudiants();

Pour définir une fonction en JavaScript, il faut (1) écrire le mot function, (2) suivi du nom que vous souhaitez donner à votre fonction. Ensuite, vous devez (3) ajouter les parenthèses qui vont vous permettre de passer des paramètres (des données) à la fonction si besoin. Je n'en avais pas besoin pour la fonction ci-dessus, donc les parenthèses sont vides. Il faut aussi (4) écrire une accolade pour "commencer" l'ensemble d'instructions qui vont constituer votre fonction. Une fois que vous avez listé les instructions, (5) refermez la définition de la fonction avec une autre accolade.

La dernière ligne, saluerEtudiants();  est celle qui lance la fonction. Définir une fonction et la faire effectivement fonctionner sont deux étapes différentes.

L'apprentissage de jQuery est une excellente façon de comprendre et d'écrire des fonctions plus lisibles et moins complexes. Vous n'êtes pas censés être prêts à écrire des fonctions délirantes à l'heure actuelle, mais vous devez comprendre qu'elles représentent une manière de définir des actions. Le concept de fonction sera plus clair avec des exemples et des entraînements utilisant la bibliothèque jQuery plutôt que du JavaScript brut.

Combiner des fonctions et des variables

Dans l'exemple de code suivant, vous pouvez voir une déclaration de variable, une déclaration de fonction qui inclut cette variable, et un appel à cette même fonction.

var monPrenom = "Emily";
function saluerUtilisateur() {
    alert("Bonjour " + monPrenom);
}
saluerUtilisateur();

Voici un autre exemple, qui met à jour la biographie hypothétique d'un utilisateur tout aussi hypothétique. C'est le genre de JavaScript compliqué que nous apprendrons à remplacer par du jQuery bien plus simple dans la suite de ce cours.

function actualiserBiographie() {
    var bio = document.getElementByID('biographie');
    bio.textContent = 'Nouvelle biographie';
}
actualiserBiographie();

Cette fois encore, j'ai défini la fonction (étape 1) puis je l'ai appelée (étape 2).

Les variables (informations stockées) et les fonctions (instructions définissant des actions) peuvent être combinés en du JavaScript clair et lisible. Vous utiliserez ces concepts de JavaScript pour donner vie à vos pages web, comme nous allons le voir très prochainement dans le chapitre suivant !