Jquery - intro

Dynamiser une page sans trop d'effort

Jquery est la bibliothèque Javascript qui permet de dynamiser sans (trop d'efforts)  mes 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 lorsque j'ai besoin d'adapter le contenu en fonction des 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

Cliquez sur le bouton pour copier le code
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>
Cliquez sur le bouton pour copier le code
dans le presse papier 

$(function(){
    $("#test").append("ce texte est ajout&amp;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.

$(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'>

information complémentaire disponible en cliquant ici
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")

 

 

  • 5 vues

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".
Mots clé
Dev_Web
JQuery