Decouvrir JQuery, installation et « Hello World » [1/7]

Série de tutoriels sur JQuery que je commence ici. L’idée de de commencer de zéro (donc si tu connais un peu JQuery, ce premier tutoriel sera inutile pour toi). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !

J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !

——————-

JQuery est un framework JavaScript. C’est-à-dire un ensemble de bibliothèques JavaScript. Il propose tout un environnement pour faire du JavaScript le plus simplement possible et le plus rapidement possible. Ce n’est pas pour rien si la devise de JQuery est :

« Write less, do more. »

en français : « Ecrivez moins, faîtes-en plus. »

JQuery en est actuellement à la version 1.3.2. Il est disponible en téléchargement sur le groupe code.google de JQuery. La version minifiée (minified en anglais) ne fait que 55 Kio et se présente sous la forme d’un simple fichier JavaScript.

Tutorial JQuery : une semaine pour découvrir JQuery 1/7

Commençons par le commencement. Pour l’installer, il faut au préalable télécharger JQuery puis l’uploader sur le serveur de ton site. Ensuite, il suffit tout simplement d’importer le fichier JavaScript comme tu le ferais pour un fichier JavaScript quelconque. Le code suivant est à placer entre les balises <head> et </head> de la page (dans le cas où le fichier se trouve dans un dossier nommé « js ») :

<script type="text/javascript" src="js/jquery.1-3-2.js"></script>

Voilà JQuery est installé !

Ensuite le code JavaScript que l’on va rédiger est à insérer dans un fichier JavaScript comme n’importe quel fichier (ou insérer le code directement dans le fichier html, je ne traiterai pas cette méthode ici). Il faut donc également importer ce second fichier JavaScript (contenu également dans le dossier « js » et nommé « script.js ») dans la page que tu souhaites. Il faut bien faire attention à l’ordre et bien penser à charger le framework avant les scripts perso.

On se retrouve donc avec ces deux lignes dans la page html :

<script type="text/javascript" src="js/jquery.1-3-2.js"></script>
<script type="text/javascript" src="js/script.js"></script>

La première chose que l’on va faire, c’est afficher un message d’alerte sur au clic sur un lien. On va donc ajouter le lien dans la page html. Il faut bien penser à mettre un id ou une classe sur ce lien pour pouvoir le distinguer des autres liens éventuellement présents sur la page :

<a id="monLien" href="http://blog.arnaud-k.fr">Lien vers mon blog</a>

Nous allons donc enfin utiliser JQuery ! Le code qui suit sera donc à mettre dans le fichier script.js.
En JavaScript pur, pour ajouter l’événement il aurait fallu ajouter l’attribut « onclick » directement dans la balise html. Avec JQuery, la logique est différente, tout va se passer dans le fichier script.js.

La première chose à faire est de dire à JQuery d’exécuter le code que quand le DOM (la structure de la page) est entièrement chargé. Dans le cas contraire, il peut se produire des erreurs si on essaie d’atteindre un élément qui n’a pas encore été chargé. C’est l’équivalent de l’attribut « onload » qui était placé dans le code de la balise . Au final, on retrouvera le petit bout de code qui suit dans tous les fichiers de scripts qui utiliseront JQuery :

$(document).ready(function() {
                   // code JQuery à exécuter quand la page est chargé
                   // encore plus de code...
});

On va donc devoir détecter si le lien ayant pour id « monLien » a été cliqué. Avec JQuery, toutes les fonctions JavaScript natives ayant des noms à rallonge telles window.document.getElementById deviennent inutiles. Maintenant pour sélectionner un élément, on utilise la fonction « $ » qui prend en paramètre un sélecteur (voir le tutoriel qui va suivre sur les différents types de sélecteurs). Les sélecteurs de type CSS peuvent aussi être utilisés.

Pour détecter un clic, on utilise l’événement « click ». Tu auras forcément remarqué que l’intitulé de l’événement a changé par rapport au JavaScript pur (« onclick »). On se retrouve donc avec ceci dans le fichier script.js :

$(document).ready(function() {
                  $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite
                               // code à exécuter quand le lien est cliqué
                               // encore du code à exécuté le lien est cliqué
                  });
});

Si la logique de ce code est comprise, je pense que c’est gagné ! 😀 . Tous les événements se passe ainsi (avec juste le sélecteur ou le nom de l’événement qui change).

Une fois le lien cliqué, on va afficher une simple boîte d’alerte (la fonction alert() en JavaScript) pour voir si le code est bien exécuté au clic sur le lien :

$(document).ready(function() {
                  $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite
                               alert("Hello World");
                  });
});

Comme tu as pu le constater, c’est maintenant un mélange de JQuery et de fonction JavaScript normal, tout ceci fonctionne parfaitement car c’est le même langage de programmation, JQuery n’étant qu’un framework JQuery !

Voilà, je pense que c’est déjà pas mal pour le premier jour de JQuery même s’il y a encore du boulot ! 😛 . Dans le prochain épisode, on va aller un peu plus loin avec les sélecteurs et commencer à manipuler le DOM 😯

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

6 reponses a Découvrir JQuery, installation et « Hello World » [1/7]

  1. Vincent dit :

    Vivement la suite 🙂

  2. Tilàcica dit :

    Très bonne initiative ça tiens !

  3. arnaud dit :

    Merci à vous deux pour vos encouragements !

  4. Ping : » Découvrez JQuery, amusons-nous avec les sélecteurs [2/7] // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  5. Adonjess dit :

    Pas mal du tout, simple,court et efficace

  6. Couros dit :

    J’aime je clique 😉
    Merci, je voulais m’y mettre, mais je ne trouvais pas de tuto qui reprenait au début, j’aime bien quand on me parle comme si j’avais 3 ans 😉

    Efficace, simple et prometteur . aller zouh je file au 2/7

Laisser un commentaire

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