Jquery - intro
Jquery est la bibliothèque Javascript qui permet de dynamiser (sans trop d'efforts) les pages 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 et permet d'adapter le contenu aux besoins de l'utilisateur.
Inclure jQuery à ma page
Pour cela, je fais, par exemple, usage d'un CDN (cdnjs ou Google). Dans l'entête de ma page j'inclus l'appel à la bibliothèque :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Puis l'appel de mon script
<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 du code html de ma page) 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
Les fichiers
dans le presse papier
<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>
dans le presse papier
$(function(){
$("#test").append("ce texte est ajout&eacute; par le script")
});
Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante
Le script index.js
Le fichier javascript index.js 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.
//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'>
La dynamique d'une page Web s'appuie :
- 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".