Comment intégrer jQuery sur une page Web

Depuis quelques années, les sites Web utilisent de plus en plus de fonctionnalités exécutées côté client, codées la plupart du temps en JavaScript et en jQuery. Ceci permet d'augmenter l'interactivité des sites. Aussi, le code exécuté côté client ne nécessite pas un rechargement de la page Web, ce qui améliore l'expérience utilisateur.

Regardons ensemble comment intégrer JavaScript et jQuery dans nos pages Web.

▼Publicité

Qu'est-ce que JavaScript ?

JavaScript est un langage de script, c'est-à-dire un langage non compilé, qui permet d'effectuer différents traitements sur une page Web.

La particularité de ce langage est que le programmeur écrit le code JavaScript directement dans la page Web. Ce code est interprété par le navigateur.

Voici quelques exemples de tâches pouvant être réalisées à l'aide du JavaScript :

  • Modifier des balises HTML (ex : changer les attributs, modifier les classes CSS)
  • Afficher ou cacher des éléments
  • Créer ou supprimer des éléments
  • Réagir à une information entrée par l'usager sans avoir à recharger la page en entier
  • Réagir à un clic sur un bouton, à un double-clic, à un passage de la souris
  • Valider les informations saisies dans un formulaire HTML
  • Afficher des fenêtres d’alarme ou de message (pop-up)
  • Faire défiler un texte à l'écran
  • etc.

Et jQuery ?

L'arrivée de jQuery en 2006 a contribué à l'essor du JavaScript. jQuery, qui est en fait une bibliothèque JavaScript, permet d'effectuer des manipulations côté client sans avoir à écrire des tonnes de lignes de JavaScript.

Un des gros avantages de jQuery par rapport au JavaScript pur est la notion de sélecteur qui permet d'identifier plus facilement l'élément sur lequel on désire interagir.

jQuery UI

jQuery UI est une extension de jQuery qui s'intéresse aux interface usager (User Interface).

Parmi les fonctionnalités offertes par jQuery UI, notons :

  • Associer un calendrier à la saisie d'une date (HTML 5 prévoit un tel type de contrôle mais à ce jour, la majorité des navigateurs ne le supportent pas alors qu'avec jQuery, tout roule)
  • Convertir une division en fenêtre popup
  • Afficher une galerie d'images
  • Effectuer différentes animations
  • Afficher un menu qui demeure au même endroit dans l'écran même lorsque l'écran défile
  • etc.

Les concepteurs de jQuery et de jQuery UI ont écrit des tonnes de lignes de code pour nous permettre d'implanter ces fonctionnalités dans nos pages Web. Et ils les mettent constamment à jour pour suivre l'évolution du marché. Alors, un bon conseil : si ça répond à vos besoins, servez-vous-en !

Que faire pour que ma page Web reconnaisse jQuery ?

Alors que JavaScript est disponible nativement sur tous les navigateurs évolués (attention : il peut cependant être désactivé), jQuery nécessite une installation.

Vous avez deux choix pour utiliser jQuery :

  • Télécharger la bibliothèque dans votre projet
  • Faire référence à la bibliothèque en ligne. On parlera de jQuery CDN : Content Delivery Network. L'utilisation de jQuery CDN a pour principal avantage de réduire le temps de chargement des bibliothèques en utilisant la version mise en cache lorsque l'internaute a visité un autre site Web qui les utilise. 

Vous pouvez utiliser une ou l'autre de ces options, à votre convenance. Les deux options sont couvertes dans les étapes suivantes :

  1. Noter la référence au fichier jQuery de base :

    1. Option téléchargement : commencez par télécharger le fichier de base de jQuery à l'adresse suivante : http://docs.jquery.com/Downloading_jQuery. Vous obtiendrez un fichier dont le nom ressemble à ceci : jquery-1.11.1.min.js. Le numéro de version peut changer.

      Vous devez placer le fichier de code JavaScript dans un dossier de votre projet, par exemple dans un dossier nommé js.

    2. Option CDN : retrouvez  l'URL du fichier jQuery de base à l'adresse http://code.jquery.com. L'URL sera probablement sous la forme http://code.jquery.com/jquery-1.11.1.min.js.

    Attention : une même page Web ne peut pas utiliser deux versions de jQuery. Par exemple, si votre page contient déjà une référence vers jquery-1.8.3.min.js, vous ne pourrez pas utiliser en même temps la version plus récente. Vous devrez supprimer l'une ou l'autre des références selon vos besoins.

  2. Noter la référence aux fichiers jQuery UI :

    Pour tirer profit de certaines fonctionnalités jQuery, vous pourriez avoir besoin d'autres fichiers jQuery. Entre autres, la bibliothèque jQuery UI offre une foule de fonctionnalités intéressantes, comme par exemple des boîtes de dialogue, des menus, des animations, etc. 

    1. Option téléchargement : téléchargez, s'il y a lieu, les fichiers jQuery UI correspondant aux les fonctionnalités à implanter. Vous trouverez les fichiers nécessaires et la documentation ici : http://jqueryui.com/.  Attention : dans l'interface de téléchargement de jQuery UI, sélectionnez tous les composants dont vous croyez avoir besoin. Le fichier généré ne contiendra que les éléments sélectionnés. Le nom du fichier ne peut pas indiquer à lui seul les fonctionnalités présentes.

      Lorsque vous téléchargez les fichiers jQuery UI, vous obtenez un .zip contenant :

      • le fichier de base de jQuery. Ce fichier peut remplacer celui que vous êtes allés chercher à la première étape mais il se pourrait que ce ne soit pas la version la plus récente. À vous de choisir celui que vous conserverez. Notez que vous pourriez rencontrer des problèmes d'incompatibilité entre certaines versions de jQuery et de jQuery UI.
      • les fichiers .js nécessaires pour implanter la fonctionnalité désirée. Leur version peut être différente de celle du fichier de base (ex : jquery-1.11.1.min.js et jquery-ui-1.10.4.custom.js). Ces fichiers sont souvent offerts en version .js et .min.js. Il s'agit du même fichier mais la version .min.js est compressée, c'est-à-dire que les sauts de ligne ont été supprimés afin de réduire le temps de chargement. Un seul des deux suffit.
      • les fichiers .css et les images nécessaires pour styliser les fonctionnalités implantées
      • un dossier development-bundle contenant les fichiers de démonstration, la documentation de même que tout ce qui est nécessaires pour effectuer du développement par-dessus les fonctionnalités proposées. Ce dossier ne devra pas être mis en ligne... 

      Généralement, les fichiers .js seront placés dans un dossier nommé js. S'il y a des images et des fichiers CSS, à vous de déterminer où vous désirez les enregistrer. Vous n'avez pas besoin des fichiers de développement.

    2. Option CDN : retrouvez  l'URL des fichiers jQuery supplémentaires à l'adresse http://code.jquery.com. Notez qu'il se peut que certaines fonctionnalités ne soient pas disponibles sous CDN. Vous devrez à ce moment télécharger les fichiers nécessaires.
  3. Ajouter les balises HTML faisant référence aux fichiers jQuery :

    Pour que jQuery soit disponible sur une page Web, la page doit contenir des balises <script> qui se chargent d'inclure les fichier jQuery notés précédemment. Il faudra également ajouter une référence aux feuilles de style utilisées par jQuery, s'il y a lieu.

    Notez que les balises <script> peuvent être ajoutées dans la zone <head> d'une page Web ou encore juste avant la fermeture de la balise <body>. L'avantage de placer les balises <script> au bas de la page Web est que le navigateur pourra charger entièrement la page Web avant de charger le script, ce qui permet un affichage plus rapide. Par contre, dans certains cas précis, il sera nécessaire de les placer dans la zone <head>. À vous de choisir l'approche qui convient le mieux à votre situation.

    Exemple de balises utilisant des fichiers téléchargés :

    HTML 5

    <link rel="stylesheet" href="jquery-ui.min.css" />

    <script src="js/jquery.js"></script>

    <script src="js/jquery-ui.min.js"></script>

    Exemple de balises utilisant des références CDN :

    HTML 5

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

Vous êtes maintenant prêts à ajouter le code jQuery dans votre page Web !

Exemple d'utilisation de jQuery : zone à onglets

Voici un exemple simple qui permet de transformer des balises HTML précises en une zone présentant des onglets.

  1. Le code jQuery permettant de définir les comportements désirés doit être placé dans une balise <script>. Cette balise doit être placée après les balises <script> qui font référence aux fichiers jQuery.

    Vous devez consulter la documentation jQuery et jQuery UI pour savoir ce que votre code doit faire. Dans cet exemple, on applique la méthode .tabs() à la balise HTML dont l'identifiant est tabs. C'est cette méthode qui se chargera de convertir la division en zone à onglets.

    Attention : prenez soin de placer votre code dans $(function () { ... }); pour assurer qu'il soit chargé dès que la page est prête. Notez que la notation $(function () { ... });, équivalente à $(document).ready(function () { ... });.

    Ex :

    HTML

    <script>

        $(function () {

            $("#tabs").tabs();

        });

    </script>

  2. Ajustez le code HTML pour l'associer aux fonctions jQuery. Ceci sera fait principalement à l'aide de l'attribut id ou class, selon ce qui a été précisé dans le code jQuery. Ici encore, référez-vous à la documentation et aux exemples trouvés sur le Web pour connaître les balises à utiliser.

    Ex :

    HTML

    <div id="tabs">

        <ul>

            <li><a href="#tabs-1">Premier onglet</a></li>

            <li><a href="#tabs-2">Deuxième onglet</a></li>

            <li><a href="#tabs-3">Troisième onglet</a></li>

        </ul>

        <div id="tabs-1">

            <p>Texte du premier onglet.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi tellus, luctus dignissim mi quis, rhoncus pretium mauris. Pellentesque ut tristique leo. Suspendisse potenti. Phasellus non libero quis elit consequat vestibulum. Nam justo velit, porttitor quis consequat non, pharetra eu ante.</p>

        </div>

        <div id="tabs-2">

            <p>Texte du deuxième onglet.</p>

        </div>

        <div id="tabs-3">

            <p>Texte du troisième onglet.</p>

        </div>

    </div>

  3. Une petite touche CSS permettra de styliser le tout.

    CSS

    #tabs li {

        list-style: none;

        float: left;

        position: relative;

        margin: 1px .2em 0 0

    }

    ...

  4. Et voilà le résultat !

    Boite à onglets jQuery

Pour plus d'information

« Tutorials:How jQuery Works ». jQuery. http://docs.jquery.com/How_jQuery_Works

« jQuery user interface ». jQuery UI. http://jqueryui.com/

« Javascript Reference ». SitePoint. http://reference.sitepoint.com/javascript

« Tout sur le Javascript ! ». Le site du zéro. http://www.siteduzero.com/tutoriel-3-8158-tout-sur-le-javascript.html

« jQuery Quick API Reference ». Oscar Otero. http://oscarotero.com/jquery/

« Inclure jQuery de manière optimisée ». AlsaCréations. http://www.alsacreations.com/astuce/lire/916-librairie-javascript-jquery-script.html

« Apprendre et comprendre jQuery – 1/3 ». Babylon design. http://babylon-design.com/apprendre-et-comprendre-jquery-1-3/

« Découvrir jQuery ». Le site du zéro. http://www.siteduzero.com/tutoriel-3-160876-decouvrir-jquery.html

« Initiation à Ajax avec Jquery ». Snoupix. http://www.snoupix.com/initiation-a-ajax-avec-jquery-partie-1_tutorial_20.html

« 45 Useful jQuery Tutorials And Techniques For Better UI ». Pelfusion. http://pelfusion.com/tutorials/45-useful-jquery-tutorials-and-techniques-for-better-ui/

« Javascript - Scripts et tutoriaux ». Support du Web. http://www.supportduweb.com/scripts_tutoriaux-4-javascript.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

Un commentaire