• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Premiers pas

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous êtes maintenant équipés pour développer en jQuery et vous brûlez d'écrire vos premières lignes de code. Ce chapitre est là pour cela. Mais avant, je voudrais introduire le jargon technique qui sera utilisé tout au long de ce tutoriel. Dans ce chapitre, vous verrez que les pages Web qui utilisent des instructions jQuery sont construites selon un modèle bien précis. Le « squelette » présenté ici servira tout au long de ce cours.

Et enfin, vous ferez vos premiers pas en programmation jQuery en écrivant quelques lignes de code. Vous pourrez alors constater à quel point jQuery est concis et puissant. Bienvenue dans le monde de la programmation jQuery !

Le vocabulaire à connaître

Tout au long de ce tutoriel, nous utiliserons un jargon technique propre aux langages HTML, CSS, JavaScript et jQuery. Cette section va passer en revue les différents termes à connaître. Il n'est pas nécessaire de lire tout ce qui figure dans cette section (surtout que vous êtes censés connaître la plupart de ces termes). Sachez simplement qu'elle existe et reportez-vous-y lorsque vous rencontrez un terme dont la signification vous échappe. Si vous avez besoin d'une piqûre de rappel plus importante, je vous renvoie sur ces deux cours :

Balise

Aussi appelée élément ou tag, c'est l'entité de base du langage HTML. Les balises sont toujours encadrées par les caractères < et >. Par exemple <html> ou encore <body>. Les balises ouvertes doivent être fermées avec une balise fermante. Par exemple </html> ou encore </body>. Certaines balises peuvent être à la fois ouvrantes et fermantes. Dans ce cas, le caractère / apparaît avant le signe > de fin de balise. Par exemple, <img src="image.jpg" />.

Attribut

Outre leur nom, certaines balises HTML peuvent recevoir une ou plusieurs informations complémentaires. Ces informations sont des attributs. Toujours spécifiés dans la balise ouvrante, ils sont suivis d'un signe = et d'une valeur entre guillemets. Lorsqu'une balise contient plusieurs attributs, ils sont séparés par des espaces. La balise <img> du code <img src="jquery.jpg" alt="logo jQuery" id="imglogo" /> contient trois attributs : src, alt et id.

Block

Les balises HTML de type block sont affichées sur des lignes successives. Par exemple, si l'on définit deux balises <div> dans un document HTML, elles seront affichées l'une en dessous de l'autre. Les balises de type block peuvent être dimensionnées, et donc occuper un espace bien défini (hauteur et largeur) dans un document.

Inline

Les balises HTML de type inline sont affichées les unes à la suite des autres. Par exemple, si l'on définit deux balises <span> dans un document HTML, elles seront affichées sur une même ligne. Les balises de type inline ne peuvent pas être dimensionnées. Elles occupent un espace qui dépend de leur contenu.

Inline-block

C'est un mélange des types inline et block. Si on définit deux balises de type inline-block dans un document HTML, elles seront affichées l'une à la suite de l'autre (c'est le comportement des balises inline). Leur taille (largeur et hauteur) pourra également être définie (c'est le comportement des balises block).

Feuille de styles

C'est un document qui rassemble un ou plusieurs styles CSS qui définissent la mise en forme d'un document. Si la feuille de styles est interne à un document, les différents styles doivent être définis dans l'en-tête du document, entre les balises <style type="text/css"> et </style>. Si la feuille de styles est externe, vous devez définir les styles dans un fichier d'extension .css et y faire référence dans l'en-tête du document en utilisant une balise <link rel="stylesheet" type="text/css" href="feuille-de-styles.css" />. Ici, la feuille de styles a pour nom feuille-de-styles.css.

Propriétés CSS

Elles définissent les caractéristiques d'un style CSS. Elles sont précisées dans la feuille de styles, entre les accolades ouvrante et fermante qui suivent le nom du style. Dans l'exemple qui suit, color et margin sont des propriétés CSS :

li
{
  color: red;
  margin: 10px;
}
Sélecteur CSS

Pour définir une règle CSS, on utilise un sélecteur qui indique à quoi va se reporter la règle. Il peut s'agir d'un sélecteur de balise, de classe, d'identifiant, de pseudo-élément, voire même d'un sélecteur universel qui s'adresse à toutes les balises du document. Le tableau suivant montre quelques exemples pour mieux comprendre le fonctionnement des sélecteurs.

Sélecteur

Type

Se rapporte à

h2

Sélecteur de balise

Toutes les balises <h2>

.rouge

Sélecteur de classe

Toutes les balises de classe rouge

#grand

Sélecteur d'identifiant

La balise d'identifiant grand

:first-letter

Sélecteur de pseudo-élément

La première lettre d'un élément

.rouge:first-letter

Sélecteur de pseudo-élément d'une classe

La première lettre des balises de classe rouge

*

Sélecteur universel

Toutes les balises

W3C

Le World Wide Web Consortium (W3C), est un organisme de standardisation à but non lucratif, chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.

DOM

Le Document Object Model est une structure de données qui représente un document HTML comme une arborescence. La racine de cet arbre est un nœud nommé document qui correspond grossièrement à la balise <html>. Tout aussi grossièrement, les balises HTML définies dans la page Web correspondent aux nœuds de l'arbre DOM et en constituent la structure. Le langage jQuery est en mesure d'interroger le DOM pour connaître les caractéristiques (attributs et valeurs HTML, propriétés et valeurs CSS) des balises qui constituent un document HTML, mais aussi de modifier ces éléments pour changer l'allure et/ou le contenu du document.

DTD

Le Document TYPE Declaration fait référence à la balise <!DOCTYPE>. Cette dernière doit apparaître en tête des documents HTML. Elle indique au navigateur les règles d'écriture utilisées dans le document. Dans ce cours, nous utiliserons systématiquement les règles d'écriture du langage HTML5. Le DTD correspondant sera <!DOCTYPE html>.

Jeu de caractères

Le jeu de caractères d'un document HTML est associé aux différents claviers nationaux. Pour indiquer au navigateur dans quel jeu de caractères vous travaillez, vous devez insérer une balise <meta charset=""> dans l'en-tête du document. Deux jeux de caractères sont essentiellement utilisés :

  • ISO-8859-1 pour accéder à la majorité des caractères des langues occidentales, telles que le français, l'anglais, l'allemand, l'espagnol, etc.

  • UTF-8 pour afficher sur une même page des caractères issus de plusieurs langues (français et japonais par exemple).

Selon vos besoins, vous utiliserez donc une balise <meta charset="ISO-8859-1"> ou <meta charset="UTF-8">.

Fonction jQuery

C'est le point d'entrée de la bibliothèque jQuery. Vous pouvez utiliser au choix l'instruction jQuery() ou son alias $(). Dans ce cours, nous utiliserons systématiquement l'alias pour limiter l'écriture.

Méthodes jQuery

La bibliothèque jQuery est constituée d'un ensemble de blocs de code autonomes appelés méthodes. Ce qui fait la puissance de cette bibliothèque, c'est avant tout la grande diversité des méthodes proposées. Pour exécuter une méthode jQuery, il suffit de préciser son nom à la suite d'un sélecteur en le séparant de ce dernier par un point : $(sélecteur).méthode(paramètres);.

Objet jQuery

On appelle « objet jQuery » l'entité retournée par la fonction jQuery, c'est-à-dire par $(). Cet objet représente un ensemble de zéro, un ou plusieurs éléments issus du document.

Le squelette HTML typique

Nous allons voir le squelette typique d'un document HTML dans lequel on utilise du code jQuery. C'est à partir de ce squelette que tous les exemples de ce tutoriel seront construits. Vous trouverez ici toutes les informations nécessaires pour comprendre son agencement.

En fait, ce n'est pas un mais deux squelettes dont nous allons parler ici : un concernant le développement et un autre concernant la production. Une seule balise HTML les différencie, mais, comme nous allons le voir, cette balise fait une grande différence.

Squelette HTML en phase de développement

Voici les instructions qui seront typiquement utilisées dans tous nos exemples :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="jquery.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Je ne vais pas m'arrêter sur chacune de ces lignes, vous devriez être en mesure de les comprendre. Je vais cependant détailler un peu les lignes 10 et 11.

La ligne 10 fait référence à la bibliothèque jquery.js. Ici également, étant donné qu'aucun chemin n'est spécifié dans la valeur affectée à l'attribut src, le fichier jquery.js doit se trouver dans le même dossier que le document HTML. Je ne vais pas revenir sur comment le télécharger, reportez-vous au premier chapitre si vous avez besoin.

La ligne 11 fait référence à un fichier JavaScript externe à votre page dans lequel vous placerez tout le code jQuery en rapport avec le document.

Au final, on se retrouve donc avec quatre fichiers :

  1. Le document HTML lui-même ;

  2. La feuille de styles externe qui définit la mise en forme du document ;

  3. Le fichier jquery.js, qui contient la bibliothèque jQuery ;

  4. Un fichier JavaScript externe qui contient tout le code jQuery que vous développerez.

Quatre fichiers pour mettre en place quelques instructions jQuery ? N'est-ce pas un peu disproportionné ?

Eh bien… tout dépend si vous voulez « bricoler » ou si vous voulez programmer en jQuery. Effectivement, la tentation est grande de placer le code CSS et jQuery dans le document HTML, afin de n'utiliser que deux fichiers : le document HTML et la bibliothèque jQuery. D'autant plus que cela fonctionne. Mais imaginez que vous deviez réaliser un site Web contenant plusieurs dizaines de pages. En externalisant les codes CSS et jQuery, vous pourrez facilement les réutiliser et ainsi être gagnants sur plusieurs tableaux :

  • Le temps de développement sera réduit d'autant ;

  • Les risques d'erreurs seront minimisés, puisque le même code sera utilisé dans les différents documents HTML ;

  • La maintenance sera d'autant facilitée : pour effectuer une modification dans tout le site, il vous suffira d'agir sur la feuille de styles externe et sur le fichier de code JavaScript externe. Si vous aviez internalisé le code de ces deux fichiers, vous auriez dû agir sur chacune des pages HTML du site !

Squelette HTML en phase de production

Ça y est, votre code HTML/CSS/jQuery/JavaScript fonctionne à la perfection et vous êtes impatients de le tester en ligne. Avant d'utiliser un client FTP, assurez-vous que vous faites référence à la version minimisée de la bibliothèque jQuery et que vous la chargez sur un CDN. Ainsi, avec la version minimisée sur le CDN de Google, voici le code à utiliser :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Optimisation du code

Voici quelques recommandations qui augmenteront les performances des pages qui contiennent du code jQuery :

  1. Invoquez la bibliothèque jquery.js à la fin du document, avant la balise </body>.

  2. Insérez le code jQuery rattaché à la page dans un fichier annexe et faites référence à ce fichier juste après la balise qui indique où se trouve la bibliothèque jQuery.

Ces positions stratégiques optimisent le temps de chargement de la page. En effet, de nombreux navigateurs bloquent l'exécution du code qui suit une balise <script> jusqu'à ce que cette balise ait été chargée et exécutée. En plaçant les deux balises <script> juste avant la balise </body>, l'affichage de la page n'est pas « freiné » par le code jQuery.

Attendre la disponibilité du DOM

Le langage jQuery est utilisé pour manipuler (en lecture et en écriture) le DOM, c'est-à-dire l'arborescence du document. Imaginez que ces manipulations commencent alors que l'arbre n'a pas encore été entièrement obtenu. Cette situation erratique pourrait désorganiser l'affichage, produire des erreurs, voire même… bloquer le navigateur !

Pour éviter d'en arriver là, vous devez attendre que l'arbre soit complet. En jQuery, cela se traduit par le code suivant :

jQuery(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Cette écriture peut se simplifier en remplaçant jQuery par son alias, $, ce qui donne :

$(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Enfin, (document).ready peut être omis pour arriver au code suivant :

$(function() {
  // Ici, le DOM est entièrement défini
});

Ces trois instructions sont strictement équivalentes. En ce qui me concerne, j'utiliserai systématiquement la troisième tout au long de ce cours, car c'est la plus courte et la plus simple à écrire. Par contre, si vous consultez d'autres articles traitant de jQuery, vous trouverez parfois les deux autres formes.

Dans l'introduction, il a été dit que jQuery peut être utilisé pour interroger/modifier le DOM, mais aussi les styles CSS du document. L'instruction $(function() { s'assure que le DOM est entièrement défini. Mais qu'en est-il de la feuille de styles ?

Si vous avez fait référence à une feuille de styles entre les balises <head> et </head>, l'instruction $(function() { s'assure également que la feuille de styles est chargée. Vous pouvez donc l'interroger et la manipuler comme bon vous semble.

Premier script : « Hello world »

Il est une tradition bien ancrée lorsque l'on écrit un cours sur un langage de programmation : le premier exemple affiche un texte sur l'écran : « Hello world » ! Nous n'allons pas déroger à la règle. Prêts à relever le défi ?

Précédemment, j'ai plusieurs fois affirmé que jQuery était capable de manipuler les éléments du DOM. Eh bien maintenant, il est temps de le prouver. Pour cela, je vais définir une balise <span> dans le document, lui affecter un attribut id afin de l'identifier et modifier son contenu en jQuery.

hello-world.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    Ce texte est affiché en HTML

    <span id="texteJQ"></span>
    <script src="jquery.js"></script>
    <script src="jq-hello-world.js"></script>
  </body>
</html>

Comme vous pouvez le constater, la ligne contenant une balise <link> a été enlevée de l'en-tête. En effet, l'utilisation d'une feuille de styles ne présente aucun intérêt dans cet exemple.
La ligne 12 fait référence au fichier JavaScript jq-hello-world.js. En voici le contenu :

$(function() {
  $('#texteJQ').html('Hello world. Ce texte est affiché par jQuery.');
});

Si vous n'avez pas la mémoire trop courte, vous reconnaissez certainement les lignes 1 et 3 qui attendent la disponibilité du DOM. La ligne 2, quant à elle, contient une instruction jQuery dont la syntaxe peut vous laisser perplexes. Décomposons-la pour mieux comprendre son fonctionnement :

  • $('#texteJQ') : cette partie agit comme un sélecteur. Elle retrouve dans le DOM l'élément dont l'attribut id vaut texteJQ. Pourquoi l'attribut id, me direz-vous ? Eh bien parce que, selon les conventions du langage CSS, le caractère # représente justement l'attribut id.

  • html('Hello world. Ce texte est affiché par jQuery.'); : la deuxième partie indique ce qui doit être modifié. Dans cet exemple, on utilise la méthode html() pour demander la modification du contenu de la balise.

  • Le point entre ces deux parties fait le lien entre le sélecteur et l'action.

Cette instruction sélectionne donc l'élément d'id texteJQ et y insère le texte « Hello world. Ce texte est affiché par jQuery. » Vous voyez, il n'y a rien de sorcier là-dedans.

Double-cliquez sur le fichier hello-world.html pour l'ouvrir dans votre navigateur. Vous devriez obtenir quelque chose ressemblant à l'image suivante.

Le fichier est ouvert dans Internet Explorer
Le fichier est ouvert dans Internet Explorer

Si chez vous rien ne s'affiche, vérifiez que :

  • Le fichier jquery.js se trouve bien dans le même dossier que le fichier hello-world.html.

  • Vous n'avez oublié aucun guillemet, parenthèse ou accolade dans le fichier jq-hello-world.js.

  • Le squelette d'un document qui utilise du code jQuery est différent en développement et en production. Dans le premier cas, vous ferez référence à la bibliothèque jquery.js localement. Dans le second, vous ferez référence à la bibliothèque jquery.min.js sur un CDN.

  • Il est impératif d'attendre la disponibilité du DOM avant d'exécuter du code jQuery. Sans quoi, ce code pourrait s'appliquer à un élément indisponible et provoquer un comportement inattendu, voire même un plantage du navigateur.

  • En jQuery, pour modifier le contenu d'une balise <span> dont l'attribut id vaut monid, on utilise l'instruction $("#monid").html("texte quelconque");.

  • Pour optimiser le code d'un document HTML qui utilise une feuille de styles et du code jQuery, on place les styles et le code jQuery dans des fichiers externes. La feuille de styles est appelée dans l'en-tête du document, alors que le code jQuery est appelé juste avant la balise </body> et juste après la référence à la bibliothèque jQuery.

Exemple de certificat de réussite
Exemple de certificat de réussite