L'essentiel de JavaScript

Télécharger et importer jQuery

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à télécharger et à importer la bibliothèque jQuery dans une de vos pages HTML. Découvrez comment lier vos pages HTML à plusieurs fichiers JavaScript différents.

Transcription

Avant d'utiliser jQuery, donc devons télécharger la bibliothèque et l'intégrer dans nos pages web. Nous avons, pour cela, plusieurs méthodes à notre disposition. Alors, avant de commencer, sachez que nous allons faire cette procédure en prenant la bibliothèque jQuery pour exemple, mais la procédure est tout à fait similaire pour les autres bibliothèques JavaScript également. Alors, je suis ici sur jQuery.com, qui est le site officiel de la bibliothèque jQuery, je vais cliquer sur le gros bouton « Download », et vous voyez tout de suite que l'on me propose deux versions de la bibliothèque. La version 1 et la version 2. La version 1, qui est en version 1.12.2, pour le moment, et la version 2, qui est en version 2.2.2, à l'heure de tourner ces vidéos. Alors, quelle est la différence ? La version 2 ne supporte plus Internet Explorer 6, 7 et 8. Il faut savoir qu'Internet Explorer 6, 7 et 8 avaient un support JavaScript assez différent de celui des autres navigateurs. Il faut savoir qu'Internet Explorer 6, 7 et 8 ont un support JavaScript assez différent de celui des autres navigateurs. et jQuery prend en charge ces différences, et de manière assez remarquable. Cela dit, maintenir la compatibilité entre Internet Explorer 6, 7 et 8 et les autres navigateurs plus modernes, alourdit considérablement la bibliothèque jQuery. Alors, comme de moins en moins d'internautes utilisent ces versions obsolètes d'Internet Explorer, eh bien, l'équipe jQuery a décidé de créer une version 2, aux fonctionnalités identiques à la version 1 mais plus légère à télécharger, car elle ne supporte plus Internet Explorer 6, 7 et 8. Et nous, bien sûr, c'est cette version 2 que nous allons utiliser. Alors, je peux choisir la version compressée de production, ou la version non-compressée de développement, vous savez que la différence, c'est que la version de production est minifiée, on en a parlé dans la vidéo précédente. Je vais prendre celle-là, clic droit, Ouvrir dans un nouvel onglet, voici la bibliothèque jQuery que je vais télécharger, et je vais tout de suite sauvegarder ceci Enregistrer la page sous, directement dans mon site, vous voyez, au niveau de l'endroit de mon disque dur où se trouvent mes pages HTML, mes autres fichiers JavaScript, mes images et mes CSS. Alors, j'enregistre ceci, voilà, et je vais retourner dans mon éditeur, je retourne dans Brackets, vous voyez que la bibliothèque apparaît, ici, dans le panneau latéral de Brackets. Alors, pour que vous puissiez avoir la même chose dans votre copie de Brackets, il faut, au préalable, faire Fichier, Ouvrir un dossier, pour montrer à Brackets le dossier dans lequel vous voulez travailler. Maintenant que jQuery est disponible, remarquez le nom de ce fichier, « jQuery-2.2.2.min.js », donc, c'est la version, le fait que c'est minifié et puis « .js » puisque c'est du JavaScript. Dans le fond de cette page HTML, je charge déjà, vous le voyez, un fichier qui est mon fichier « script.js », qui est le JavaScript que je vais écrire pour ma page à moi, et ce fichier utilise ou, en tout cas, utilisera prochainement, dans la prochaine vidéo, la bibliothèque jQuery. Vous voyez des instructions qui sont commentées, pour le moment, mais qui commencent par le mot jQuery. Alors, si je veux que cela fonctionne, et si je veux que mon fichier « script.js » ait accès aux fonctionnalités de jQuery, je dois évidemment charger jQuery grâce à une deuxième balise « script », avant de charger mon fichier à moi. Donc, je vais aller chercher mon fichier jQuery, ici, donc cela va fonctionner, puisque jQuery est chargé, dans le navigateur, avant « script.js », et donc « script.js » peut utiliser, sans problème, les fonctionnalités de jQuery. Très souvent, ce que l'on voit, c'est que l'appel vers cette bibliothèque jQuery se trouve ici, en tête de code, dans la section « head », comme cela, jQuery est téléchargée très tôt dans le chargement de la page et est donc disponible pour tout le code JavaScript qui voudrait utiliser jQuery et qui serait défini plus bas dans la page. Alors, cela est une première option pour pouvoir installer, pour pouvoir télécharger jQuery dans mon site. Une deuxième option, est d'utiliser, ce qu'on appelle, un CDN. Alors, c'est un « Content Distribution Network », un réseau de distribution de contenu. Alors, l'idée, ici, c'est d'aller chercher une version de la bibliothèque jQuery qui est hébergée sur un autre serveur, plutôt que d'héberger jQuery directement dans notre site, comme on l'a fait, ici, vous le voyez sur le côté. Les avantages de cette technique sont nombreux. Premièrement, de nombreuses sociétés, telles que Google, Microsoft, Apple, etc., mettent à disposition des serveurs afin d'héberger ces bibliothèques, et ils mettent en place une architecture sophistiquée permettant l'optimisation de la bande passante et, surtout, la redondance des services, vous êtes donc certains que la bibliothèque sera toujours disponible et qu'elle se chargera très rapidement. Alors, un autre avantage, c'est que, comme énormément de sites différents utilisent tous les mêmes CDN, les mêmes « Content Distribution Network », eh bien il y a de fortes chances que votre internaute ait déjà téléchargé jQuery depuis le même CDN que celui que vous comptez utiliser, lorsque cet internaute a visité un autre site qui utiliserait le même CDN que vous. Dans ce cas, la bibliothèque est déjà présente dans le « cache » du navigateur et ne doit même plus être téléchargée. Je vais revenir dans mon navigateur, je ferme cet onglet pour aller dans Google, Et je vais faire une petite recherche Google, je vais taper, simplement : « Google CDN ». Je fais cette recherche et vous allez voir que je vais tomber sur un site qui s'appelle « Hosted Libraries » et qui est le site « developers.google.com ». Je tombe, ici, sur le CDN de Google qui héberge plein de bibliothèques JavaScript, il n'y a pas que jQuery, vous avez tout une liste dans la barre de côté. Je vais cliquer sur jQuery, voilà. Vous voyez qu'on me donne deux balises « script » que je peux copier et coller, telles quelles, dans mon code, une pour télécharger la version 1, et l'autre pour télécharger la version 2 de jQuery. Vous voyez que c'est la dernière version, la 1.12.2, ou la 2.2.2, mais si vous voulez d'autres versions, elles sont disponibles, ici, il suffira simplement de changer le numéro de version, ici, dans l'adresse. Alors, je vais prendre cette balise « script », je vais la copier, retourner dans Brackets et je vais remplacer, ici, l'appel vers le jQuery que j'héberge moi-même par jQuery hébergée sur le CDN de Google. Voilà, nous sommes maintenant prêts à passer à la vidéo suivante, et dans celle-ci, nous allons découvrir quelques fonctionnalités de cette bibliothèque jQuery.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !