Traduction
Tutoriel JavaScript & jQuery - sommaire
Tutoriel JavaScript & jQuery - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts dans les pages web.
La première version est lancée en janvier 2006 par John Resig.
Attention, programmer en jQuery c'est toujours programmer en JavaScript mais en utilisant entre autres des fonctions de haut niveau (qui évitent
beaucoup de lignes de code). Donc pour aborder ce tuto vous devez avoir quelques notions de JavaScript ...
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs,
John Resig imagine de créer une bibliothèque de fonctions prêtes à l'emploi et compatibles avec tous les navigateurs.
En effet, si désormais le JavaScript est standardisé, ce n'était guère le cas en 2006 ... Il dépendait des navigateurs et à cette même époque
HTML & CSS n'avaient pas encore fait leur révolution ...
A ce jour jQuery reste à ce jour toujours très populaire malgré la standardisation du JavaScript et la montée en puissance du CSS et de HTML.
jQuery est aussi concurrencé par de nouvelles bibliothèques telles que React et Vue.js mais aussi par les progrès du JavaScript natif.
Avec les méthodes querySelector(sélecteur CSS) & querySelectorAll(sélecteur CSS) de JS natif, jQuery a perdu de son intérêt en matière de
sélection des noeuds du DOM.
Quant aux effets visuels proposés par jQuery, des équivalents peuvent désormais être produits via CSS3.
De nombres "widgets" jQuery sont devenus obsolètes à cause des progrès réalisés par HTML ; un seul exemple, la méthode datepicker()
est supplantée par le input type date proposé par la spécification HTML5.
Par ailleur jQuery présente un inconvénient ; il ralentit le temps d'exécution du script puisqu'on rajoute une couche logicielle.
Maintenant jQuery reste très pertinent dans certaines circonstances. Realiser un "glisser-déposer" via jQuery est un jeu d'enfant alors qu'en JS natif c'est plus complexe ... ; même constat pour les requêtes AJAX.
La fameuse librairie jQuery c'est un fait un simple fichier (extension .js) de 100 ou 300 KO.
Pour récupérer ce fichier, il suffit d'aller sur le site officiel (jquery.com) et de cliquer sur le gros bouton légendé "Download jQuery".
Vous pouvez télécharger soit la version compressée (moins de 100 KO) soit la version décompressée (avec des commentaires et des sauts de ligne) qui est
trois fois plus lourde.
Si, par exemple, vous téléchargez la version compressée vous récupérez, en ce début d'année 2021, un fichier nommé jquery-3.6.1.min.js (version qui
date de mars 2021).
Tranférez ce fichier dans le dossier contenant vos scripts Javascript et vous pouvez lui donner un nom plus simple; par exemple : jquery.js.
Extrait du fichier jQuery compressé :
C'est illisible pour un humain.
Extrait de la version décompressée :
C'est compréhensible pour un surdoué en JavaScript (lol).
Si une page web comprent un script avec des instructions écrites en JS-jQuery il faut rajouter une instruction dans la partie HEAD de la page :
<script src ="jquery.js">charger jquery</script>
Vous aurez bien sûr auparavant téléchargé le fichier correspondant au framework sur le site "https://jquery.com/download/", renommé ce fichier
"jquery.js" et enregistré dans le meme dossier que le document HTML contenant le script.
Deux exemples de document HTML contenant chacun un script écrit en jQuery.
Imaginons que nous voulons rajouter une classe "cadre" à toutes les images de la page qui bénéficient déja de la classe "image" (et doivent la conserver).
Il faut charger le framework. Ici on suppose que le fichier unique correspondant au framework a été renommé "jquery.js" et se trouve dans le même dossier que la page web.
Chaque image a déjà la classe "image" ; classe qui définit une taille, le positionnement des images, etc.
Il faut via un script rajouter la classe "cadre" mais sans supprimer la classe "image".
Il est beaucoup plus succinct et se résume en une instruction unique !
$("img").addClass("cadre");
Une seule instruction !
Ce n'est pas par hasard si le slogan de JQuery est : "Write less, do more". Ce qui signifie : Ecrire moins, faire plus.
$('img') désigne la collection de toutes les images de la page.
Une instruction jQuery a la structure suivante : sélecteur.méthode(). méthode() ...
On peut chainer plusieurs méthodes.
L'objet $ est omniprésent ; tout sélecteur d'éléments de la page doit être préfixé par $ afin de préciser qu'il s'agit d'une instruction
jQuery. En effet rien n'interdit dans un script de mélanger des instructions en JS-jQuery et des instructions en
JS natif.
En JS natif le script aurait été un peu plus long :
Ce deuxième exemple de page web avec script en jQuery a pour objet de vous familiariser avec la syntaxe très concise de ce Framework.
Rappel : dans la partie HEAD il y a bien sûr chargement de la bibliothèque jQuery !
Par contre dans cette partie HEAD, il n'y a ni lien vers une fichier CSS ni de feuille de style interne !
Pour parler simple ce sera très moche !
Le code de la partie BODY :
Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS.
Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.
Il existe cependant un sélecteur spécifique à jQuery : :header
qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !
Ce script c'est en fait une feuille de style écrite en jQuery (et non pas en CSS).
Mais alors que le CSS s'applique automatiquement, cette mise en forme ne s'appliquera que si je clique sur le bouton de commmande.
Dans toutes les instructions on applique des mises en forme aux éléments sélectionnés. Donc la méthode est css.
A chaque fois il faut paramétrer cette méthode avec la propriété de mise en forme suivie de la valeur.
Il faut écrire la propriété de mise en forme avec la syntaxe javaScript ("camelCase") : pas de tiret ; la lettre qui suit le tiret supprimé est mise en majuscule (exemple : verticalAlign et non pas vertical-align).
Pour limiter les lignes de code on peut chainer plusieurs fois la méthode css() après le sélecteur. La syntaxe devient :
$(sélecteur).css().css().css() ... ;
Dans ce script je vous rappelle que les balises A et IMG sont des balises nativement inline. Donc pour centrer horizontalement des éléments inline il faut les transformer en boites (display : block) et leur affecter une largeur.
Notez aussi que dès que vous avez cliqué sur le bouton de commande ce dernier disparaît grâce à la dernière instruction du script : $("button").css("display", "none"). Ainsi la commande ne peut s'appliquer qu'une fois !
Ci-dessous le rendu du code dans un Iframe :
Cliquez sur le bouton de commande pour mettre en forme le texte !
Pour une exécution automatique de la fonction de mise en forme il suffit de supprimer dans le code HTML la balise button et d'écrire
dans le script à la place de function fstyle() :
$("body").load() ou encore $(window).load() ou encore $(document).load()
Il y a une autre façon de charger le framework jQuery dans un document HTML.
Il suffit de recourir à un CDN (Content Delivery Network) c'est à dire un site qui héberge des bibliothèques et autres outils de développement.
Il suffit donc de télécharger, par exemple, le framework jQuery à partir du CDN proposé par Google.
Ainsi vous avez toujours accès à la dernière version de jQuery.
Deux instructons sont nécessaires sont nécessaires pour télécharger jQuery à partir du CDN de Google :
Le code HTML et JS-jquery de cette page est intéressant à plusieurs titres.
Vous allez en effet comprendre comment modifier le contenu d'éléments de la page via des instructions jQuery.
Vous allez voir aussi que rien n'interdit de mélanger dans un script du JS natif et du JS-jQuery.
Je vais aussi vous rappeler qu'il est toujours préférable de centraliser le code JS dans le script donc de ne plus
recourir aux attributs événementiels de HTML.
Au "scorie" de JS dans le code HTML.
Dans le code HTML il y a trois éléments vides (un titre H2 et deux paragraphes) et deux images miniatures et cliquables.
Ces éléments vides seront remplis via le script et via à la méthode html() de jQuery tantôt avec un texte en français et
tantôt avec un texte en anglais.
Tout le JS (natif ou JS-jQuery) est centralisé dans le script.
Les deux fonctions sont écrites en JS-jQuery mais sont appelées en JS natif : gestionnaire d'événements de JS.
On aurait pu, bien sûr, appeler des fonctions via JS-jQuery mais je voulais vous montrer qu'on peut mélanger dans un script du JS natif et du JS-jQuery ;
Une instruction jQuery est détectée car elle commence par $ !
Evidemment cette solution ne fonctionne que si vous avez une connexion internet.
Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :
Or dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et ceux-ci fonctionnent quand même ...
Cette instruction veut dire que le jQuery doit être exécuté seulement lorsque la page est chargée (et donc le DOM constitué).
Ce qui tout à fait logique. En effet si vous tentez via jQuery de manipuler des éléments du DOM alors que ce dernier n'a pas été créé
il y aura forcément "plantage" !
Cette instruction est indispensable si le script jQuery se situe dans la partie HEAD de la page.
Or mes scripts ne sont jamais dans la partie HEAD mais toujours en fin de page après tout le code HTML. Donc mon script est exécuté seulement après que la page ait été chargée (et le DOM construit). Dans ce cas l'instruction "$(document).ready(function()" est facultative.