Introduction à jQuery

Voyons ensemble les concepts de base de JavaScript, qui sont fondamentaux pour utiliser jQuery en fin de compte. Comme nous l'avons évoqué au chapitre 1, bien que jQuery soit en soi un vaste sujet, son utilisation requiert des bases en JavaScript qui ne peuvent pas être négligées. 

Dans ce chapitre, nous allons voir :

• Le DOM (Document Object Model)

• Les opérateurs

• Les types de données

• Les conditions

Ces concepts sont utilisés universellement dans les langages de programmation, bien au-delà de JavaScript, donc leur compréhension vous servira également bien au-delà de ce cours. :soleil:

Le DOM

Le Modèle Objet de Document (DOM) peut être l'un des concepts les plus difficiles et abstraits en programmation. Il requiert une compréhension de l'interaction entre le HTML que vous écrivez et la représentation qu'en fait le navigateur.

Une page web telle que vous la voyez dans votre navigateur est un objet de document. C'est la modélisation de votre page dans le navigateur. Le DOM n'est pas exactement le HTML que vous écrivez ; c'est en fait exactement le HTML que vous avez écrit modélisé par le navigateur. Souvent, les deux semblent identiques, mais la modélisation du HTML par un navigateur permet le ciblage de certains éléments par d'autres langages de programmation tels que JavaScript.

Imaginez que votre navigateur reçoit un paquet de HTML, et qu'il habille ensuite chaque élément HTML dans sa propre petite combinaison de super-héro. Il vous reste encore un paquet d'éléments HTML, mais ils sont équipés d'un plus grand potentiel dès lors qu'ils font partie du DOM, et ils peuvent être ciblés et modifiés grâce à des langages de script tels que JavaScript.

Euh, à quoi ça sert ?

J'ai mis un bon moment à comprendre en quoi le DOM était important. On a déjà le HTML brut, alors quel est l'intérêt d'en faire quelque chose d'abstrait à travers ce truc de DOM ? Le DOM ouvre un monde de méthodes qui ne sont pas disponibles dans du HTML brut, sans navigateur, et je vous promets que cela va apporter de gros bénéfices.

Chaque objet est appelé un noeud, et des scripts comme JavaScript ou jQuery interagissent avec cet ensemble de noeuds -- pas avec le HTML brut lui-même !

Les types de données

Les nombres, les chaînes de caractères, les booléens et les tableaux sont les principaux concepts que vous rencontrerez lorsque vous intégrerez jQuery. Nous allons donc nous concentrer sur eux pour l'instant !

Les nombres ("numbers") sont exactement ce à quoi vous vous attendez : il y a des nombres positifs et négatifs (5 , -5 ), décimaux (0.5 ), et des nombres aussi grands que vous le voulez (5000 ). Les nombres ne servent pas à faire de l'arithmétique ici, ils sont également très importants en jQuery, avec lequel vous allez les utiliser pour interagir avec les éléments de la page.

Les chaînes de caractères ("strings") sont normalement constituées de texte, et sont délimitées par des guillemets. Une chaîne peut être 'Bonjour les étudiants !' ou "Bonjour les étudiants !". Le type de guillemets que vous utilisez est le sujet de tout un débat politique, mais c'est essentiellement votre choix. L'essentiel est que le guillemet d'ouverture soit le même que le guillemet de fermeture.

Les booléens ("booleans") n'ont que deux valeurs possibles : true (vrai) ou false (faux). À quoi ça sert ? Selon qu'ils sont vrais ou faux, vous pouvez exécuter un certain groupes de méthodes jQuery.

Les tableaux ("arrays") sont des ensembles de valeurs, comme  ['chien', 'chat', 'hamster', 'lapin'] . On peut aussi trouver des tableaux de nombres, de booléens, ou de tout autre type de données ! Ils sont délimités par des crochets, et leurs éléments sont séparés par des virgules. Pour accéder à un élément donné d'un tableau, on procède comme pour choisir un élément dans une liste numérotée qui commence à 0. Dans l'exemple ci-dessus, 'chien' est en position 0. Si notre tableau était appelé animaux, nous accéderions à 'chien' en sélectionnant animaux[0] . Pour 'lapin', ce serait animaux[3] .

Les opérateurs

La programmation n'est pas si différente des maths. On a un ensemble d'opérations liées les unes aux autres, avec un résultat final. Les opérateurs sont une simple représentation de ce concept ! Malgré toute sa syntaxe assez complexe, JavaScript peut être réduit à de très simples éléments de ponctuation.

Nous n'allons voir que deux opérateurs, car ce sont les plus importants pour une utilisation de base de jQuery.

Le signe égal

Un élément dont la compréhension est cruciale. Le =  permet d'affecter une valeur.

color = 'red';

Cette ligne de JavaScript affecte la valeur 'red' à color.

Le signe plus

Un signe +  combine deux chaînes, par exemple :

sentence = "Hello" + "students";

On peut aussi utiliser le +  dans des opérations arithmétiques en JavaScript, comme 5 + 3 . Notez bien qu'on ne peut pas utiliser le signe de soustraction pour enlever une chaîne de caractères d'une autre chaîne plus grande ! Le signe -  est réservé aux opérations arithmétiques.

Les conditions

La logique en JavaScript mérite son propre chapitre, mais comme notre objectif est véritablement le jQuery, contentez-vous de retenir que vous pouvez utiliser des mots comme if  et else  dans votre code, pour voir si certains prédicats sont vrais (if ceci, then do cela).

Vous pouvez également utiliser des opérateurs comme >  (supérieur à), <  (inférieur à), ==  (égal à ; eh oui, il y a deux signes !), et d'autres choses encore pour comparer des valeurs.