Apprendre JQuery : Introduction

JQuery est une bibliothèque Javascript libre et multi-plateformes, très utilisé sur internet, on peut même dire que c’est la bibliothèque Javascript la plus répondue sur internet. JQuery permet de manipuler le DOM “Document Object Model” qui est une interface de programmation normalisée qui permet à des scripts d’examiner et de modifier le contenu du navigateur web.

Plus simplement, JQuery est une bibliothèque Javascript qui nous permet de manipuler le contenu d’une page web en apportant des changements sur le code HTML et CSS de la page encours d’affichage sur le navigateur.

Tout au long de cette série nous allons utiliser une structure de projet que vous pouvez télécharger ci-dessous :


Cette structure de projet est déjà paramétré et prête à l’utilisation, vous pouvez donc directement commencer à codé en JQuery.

Une fois le ficher décompresser vous devez avoir une structure comme suit :

En ouvrant le fichier “index.html” dans un navigateur, vous devez avoir le logo de nettuto qui clignote comme suit :

Explication de la structure de projet

Pour commencer, on remarque le dossier “assets” qui contient tous les fichiers nécessaires à notre projet, il est composé de plusieurs sous dossiers :

  • CSS : ce dossier va contenir tous les fichiers “css” utiliser par nos projets.
  • img : toute image utiliser et afficher par nos projets sera placé dans ce dossier.
  • js : ce dossier va regrouper tous les scripts javascript utiliser par nos projets.
  • libs : parfois nous allons avoir besoin d’utiliser des librairies comme “Bootstrap, JQuery, JQuery ui…” donc c’est dans ce dossier qu’on va placer toutes ces librairies.

Cette organisation n’est pas l’organisation ultime, ce n’est qu’une manière d’organiser les fichiers qu’on va utiliser dans nos projets tout au long de cette série de tutoriels.

Code de la structure de projet

La structure de projet initial est composée de plusieurs fichiers, ci-dessous l’explication de chacun d’eux :

Le fichier index.html

Ce fichier représente le point d’entrée de chaque projet, ce fichier est un document HTML5 dont le code est :

dans le code HTML on remarque qu'on a fait appel au fichier CSS "style.css" dans le header du document :

on va donc utiliser ce fichier pour apporter des personnalisations du style du contenu de la page HTML.

Notre document HTML ne contient qu'une image :

qu'on peut supprimer pour préparer notre structure de projet au prochain tutoriel.

Dans le bas du document, nous avons inséré un appel aux différents fichiers Javascript utilisé par notre document:

Généralement l'appel des scripts Javascript se fait dans le header du document HTML, mais l'une des bonnes pratiques du développement web est de faire l'appel des fichiers Javascript dans le bas de page du document juste avant la fermeture du tag "body" pour s'assurer que le code Javascript ne se charge que lorsque le navigateur à finit de charger le DOM, on reviendra ultérieurement sur le sujet.

On a donc fait appel à notre fichier "script.js" le ficher dans lequel nous allons codé en JQuery.

d'autre part, il y a un appel spécial à la librairie JQuery :

cet appel va nous permettre de charger la version locale de JQuery si la version en ligne sur le CDN de la librairie est inaccessible, le navigateur va donc essayer de charger la librairie JQuery depuis le CDN "https://code.jquery.com/jquery-3.3.1.min.js" le navigateur va donc placer une référence à la librairie dans une variable nommée "JQuery".

En second lieux, on vérifie l’existence de la variable "JQuery" pour décider de charger la version locale ou non.

Le fichier jquery-3.3.1.js

Ce fichier est localisé dans le dossier "assets\libs\jquery\jquery-3.3.1.js" et représente la version locale de la bibliothèque JQuery.

Le Fichier script.js

Ce ficher est localisé dans le dossier "assetsjsscript.js" c'est le fichier dans lequel on codera en JQuery, il contient initialement un code qu'on va supprimer lorsqu'on commence nos tests :

Le code initial dans le fichier "script.js" est ce qui permet de faire clignoter le logo nettuto dans la page index.html

Déjà pour commencer on peut supprimer le code initial, donc notre fichier "script.js" deviendra :

Il est conseillé d'utiliser le code précédent pour s'assurer que le code JQuery ne sera exécuté que lorsque le document HTML est entièrement chargé dans le navigateur, c'est logique puisque JQuery manipule le code HTML donc une exécution du code avant la fin du chargement peut engendrer des erreurs, notre code JQuery vas donc être placé dans la fonction "ready".

Bonjour Québec

Nous allons maintenant écrire notre premier code en JQuery, ça sera une fonction simple qui affiche un message lorsque le document HTML est chargé dans le navigateur.

Dans le fichier "assets\js\script.js" ajouter le code suivant et enregistrer :

En testant le fichier index.html dans un navigateur, vous devez avoir cet effet :

Un message s'affiche à chaque chargement du fichier "index.html" dans le navigateur (Si vous avez des problèmes et que ça ne marche pas, veuillez cliqué sur les touches "ctrl+F5" ceci forcera le navigateur à recharger tous les fichiers utiliser dans le projet).

Voilà, vous avez codé votre premier code en JQuery :

La fonction "alert" permet d’afficher une fenêtre de dialogue qui affiche le message passer en paramètre.

Vous pouvez téléchargé le code final de ce tutoriel ici :


Merci pour votre lecture.

Autres articles de cette série

  1. Apprendre JQuery : Introduction (janvier 1, 2019)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Solve : *
6 × 30 =