Jquery - intro
Jquery est la bibliothèque Javascript qui permet sans trop d'efforts, de rendre plus dynamiques les pages d'un site web.
Elles sont très souvent réalisées à partir de 4 fichiers.
Trois s'exécutent côté Client (navigateur) et sont écrits respectivement en HTML (le contenu de la page), en CSS (l'esthétique) et en Javascript (et avec la bibliothèque Jquery) pour l'interactivité.
Le dernier est écrit en PHP et s'exécute côté serveur. Il permet d'adapter le contenu aux besoins de l'utilisateur.
Inclure jQuery à ma page
Le fichier "index.html" décrit ci-dessous figure dans un des onglet en bas de page.
Pour utiliser la bibliothèque jQuery dans ma page, j'utilise un CDN (par exemple celui de cdnjs ou celui de Google). Pour cela, dans l'entête, j'inclus l'appel à la bibliothèque Jquery stockée sur le CDN de Google par :
<script src= "https://ajax.googleapis.com/ajax/libs/ jquery/3.4.1/jquery.min.js"></script>
Puis, toujours dans l'entête, j'appelle mon script JS par :
<script src="index.js"></script>
Pour que le script interagisse avec la page, je dois identifier quelques éléments de la page (cf. le DOM). Dans ce billet, ma page est élémentaire. Le seul élément que je vais identifier est la balise div (la seule figurant dans le code html présenté) en ajoutant id=test.
Sans ce code , <script src="index.js"></script> le navigateur affiche une page "vide" car il n'y a aucun contenu à l'intérieur des les balises body ou div.
Le script index.js
Le fichier javascript index.js , dont le code figure dans un onglet en bas de page, va modifier (interagir) l'affichage en utilisant la bibliothèque jQuery.
Il utilise la fonction jQuery de la bibliothèque sous sa forme raccourcie $(). Grossièrement, cette fonction transforme tous les éléments de la page (le DOM) en objets jQuery et me permet donc d'y appliquer les méthodes de cette bibliothèque.
$(function(){
//le contenu du script est entièrement la.
});
$("#test") cible l'élément "test" ...
...sur lequel s'applique la méthode append() qui insère le contenu situé entre les parenthèses dans l'élément <div id='test'>
Pour cibler l'élément d' id=test, on utilise $("#test"), pour cibler les éléments de classe test, on utilise $(".test")
$("#test").append("ce texte est ajout&;eacute; par le script")
Les fichiers
<html> <head> <meta http-equiv="Content-Type" content="charset=utf-8"/> <title> Page interactive de base </title> <link rel="stylesheet" href="index.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="index.js"></script> </head> <body> <div id="test"> </div> </body> </html>
$(function(){ $("#test").append("ce texte est ajout&eacute; par le script") });
Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante
La dynamique d'une page Web s'appuie :
sur des sélecteurs bien identifiés dans le code HTML de la page ;
sur un (des) script(s) écrit(s) en javascript, basé(s) sur des bibliothèques "qui évitent au développeur de réinventer la roue".