Médiaforma

All posts in jquery

Les fichiers au format JSON (JavaScript Object Notation) permettent de représenter des informations structurées.

Par exemple :

{
  "Employés": [
  { "Prénom":"John" , "Nom":"Doe" },
  { "Prénom":"Anna" , "Nom":"Smith" },
  { "Prénom":"Peter" , "Nom":"Jones" }
  ]
}

 

Ce qui équivaut à :

<Employés Prénom="John" Nom="Doe">
<Employés Prénom="Anna" Nom="Smith">
<Employés Prénom="Peter" Nom="Jones">

 

Pour accéder à des données JSON, vous utiliserez la fonction $.getJSON() :

$.getJSON(URL,function(données){
  // Une ou plusieurs instructions pour traiter les données lues
});

 

 

 

Saisissez ces données dans NotePad++ et sauvegardez-les dans le fichier employes.json :

{
  "Prenom":"John",
  "Nom":"Doe",
  "Age":"25"
}

 

 

Nous allons accéder à ce fichier en jQuery et exploiter les données qui le composent. Voici le résultat attendu :

 

 

Et voici le fichier HTML5/jQuery utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lecture et parsing d'un fichier JSON</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Lecture et parsing du fichier employes.json</h2>
    <button id="lecture">Lancer la lecture</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#lecture').on('click', function(){
          $.getJSON('employes.json',function(data){
            $('#zone').append('Prénom : ' + data.Prenom + '<br>');
            $('#zone').append('Nom : ' + data.Nom + '<br>');
            $('#zone').append('Age : ' + data.Age + '<br>');
          });
        });
      });
    </script>
  </body>
</html>

 

L’extraction (aussi appelée parsing) des données se fait dans la fonction callback :

$.getJSON('employes.json',function(data){
  $('#zone').append('Prénom : ' + data.Prenom + '<br>');
  $('#zone').append('Nom : ' + data.Nom + '<br>');
  $('#zone').append('Age : ' + data.Age + '<br>');
});

 

La structure du fichier JSON pris en exemple est ultra simple. Pour accéder à ses différentes composantes, on utilise le paramètre de la fonction callback, suffixé par le nom des différents champs à accéder :

data.Prenom
data.Nom
data.Age

 

Exercice :

Créez le fichier employes2.json :

[
  { "Prenom":"John" , "Nom":"Doe", "Age":"25" },
  { "Prenom":"Anna" , "Nom":"Smith", "Age":"34" },
  { "Prenom":"Peter" , "Nom":"Jones", "Age":"17" }
]

 

Modifiez le code jQuery pour afficher toutes les données de ce fichier JSON. Pour cela, vous parcourrez les données retournées par la fonction $.getJSON() en utilisant la fonction $.each() dont voici la syntaxe :

$.each(données à examiner, function(index, données extraites){
  // Instructions pour examiner les données extraites
});

 

 

Solution :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lecture et parsing d'un fichier JSON</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Lecture et parsing du fichier employes.json</h2>
    <button id="lecture">Lancer la lecture</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#lecture').on('click', function(){
          $.getJSON('employes2.json',function(data){
            $.each(data,function(index,d){
              $('#zone').append('Prénom : ' + d.Prenom + '<br>');
              $('#zone').append('Nom : ' + d.Nom + '<br>');
              $('#zone').append('Age : ' + d.Age + '<br><br>');
            });
          });
        });
      });
    </script>
  </body>
</html>

 

La fonction callback de $.getJSON() obtient la totalité des données du fichier JSON. La boucle $.each() porte sur les données extraites par $.getJSON(). Sa fonction callback va s’intéresser individuellement à chaque enregistrements, ici représentés par la lettre “d” :

$.getJSON('employes2.json',function(data){
  $.each(data,function(index,d){

 

Pour extraire les données d’un enregistrement, il suffit de passer par “d” et de le suffixer par le nom des champs concernés : Prenom, Nom et Age :

$('#zone').append('Prénom : ' + d.Prenom + '<br>');
$('#zone').append('Nom : ' + d.Nom + '<br>');
$('#zone').append('Age : ' + d.Age + '<br><br>');

 

Voici le résultat :

 

 


Les événements liés au clavier sont très limités. Ils sont résumés dans le tableau suivant :

Méthode Événement géré
keydown() Appui sur une touche du clavier
keyup() Relâchement d’une touche du clavier préalablement enfoncée
keypress() Maintien d’une touche du clavier enfoncée

 

A titre d’exemple, nous allons afficher le keycode ou le charcode de la touche frappée au clavier. Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom clavier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <span id="compte-rendu"></span>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
        if (e.which == 9) e.preventDefault();
        $('#compte-rendu').html('Code de la touche : ' + e.which);
        });
      });
    </script>
  </body>
</html>

La ligne suivante empêche la propagation de la touche Tab et donc la sortie du champ texte :

if (e.which == 9) e.preventDefault();

 

Voici la liste des codes ASCII retournés par e.which lorsque la fonction keypress() est utilisée :

Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII
Espace 32 3 51 F 70 Y 89 l 108
! 33 4 52 G 71 Z 90 m 109
34 5 53 H 72 [ 91 n 110
# 35 6 54 I 73 \ 92 o 111
$ 36 7 55 J 74 ] 93 p 112
% 37 8 56 K 75 ^ 94 q 113
& 38 9 57 L 76 _ 95 r 114
39 : 58 M 77 ` 96 s 115
( 40 ; 59 N 78 a 97 t 116
) 41 < 60 O 79 b 98 u 117
* 42 = 61 P 80 c 99 v 118
+ 43 > 62 Q 81 d 100 w 119
, 44 ? 63 R 82 e 101 x 120
45 @ 64 S 83 f 102 y 121
. 46 A 65 T 84 g 103 z 122
/ 47 B 66 U 85 h 104 { 123
0 48 C 67 V 86 i 105 | 124
1 49 D 68 W 87 j 106 } 125
2 50 E 69 X 88 k 107 ~ 126

 

Exercice

Créez un document qui comporte une zone de texte. Capturez l’événement keypress sur cette zone de texte, transformez les touches frappées en majuscules et affichez-les dans la zone de texte.

A titre d’information, pour convertir le code de la touche frappée en un caractère majuscule, vous utiliserez l’expression suivante :

String.fromCharCode(e.keyCode).toUpperCase;

 

Solution

Voici une des solutions possibles (clavier2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches et transformation en majuscules</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
          var contenu = $('#target').val();
          var frappe = String.fromCharCode(e.keyCode);
          if(e.which>=97 && e.which<=122){
            e.preventDefault(); // Empêche la propagation des touches frappées
            contenu+=frappe;
          }
          $('#target').val(contenu);
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’événement keydown est levé, le contenu de la zone de texte est stocké dans la variable contenu :

var contenu = $('#target').val();

La touche frappée est mémorisée dans la variable frappe :

var frappe = String.fromCharCode(e.keyCode);

S’il s’agit d’une lettre (entre A et Z dont entre le keyCode 65 et 90), la frappe n’est pas propagée :

if(e.which>=65 && e.which<=90){
  e.preventDefault(); // Empêche la propagation des touches frappées

Et le contenu est mis à jour avec la version majuscule de la touche frappée :

contenu+=frappe;

Il ne reste plus qu’à mettre à jour le contenu de la zone de texte :

$('#target').val(contenu);

 

Remarque

Si vous utilisez la fonction keypress(), e.which retourne le code de la touche frappée, en faisant la distinction entre les minuscules et les majuscules. Par contre, si vous utilisez la fonction keydown() ou keyup(), e.which retourne une version simplifiée de la touche frappée, sans faire la distinction entre les minuscules et les majuscules.


Le tableau suivant regroupe les différents événements souris qui peuvent être traités en jQuery :

Méthode Événement géré
click() Clic gauche
dbclick() Double-clic
mousedown() Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l’élément
mouseenter() ou mouseover() Début de survol de l’élément
mouseleave() ou mouseout() Arrêt de survol de l’élément
mousemove() Déplacement du pointeur au-dessus de l’élément
mouseup() Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l’élément
scroll() Utilisation de la roulette alors que le pointeur se trouve au-dessus d’un élément concerné par ce type d’événement

 

Ce premier exemple va capturer les coordonnées de la souris au-dessus d’une image et les afficher dans un span. L’événement capturé est onmousemove. Ainsi, à chaque déplacement de la souris, les coordonnées seront mises à jour dans le span. Tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier mouse-move.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Utilisation de l'événement mousemove</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
        // Gestion du clic et déplacement de l'image
        $("#target").mousemove(function(e) {
          var y = e.pageY;
          var x = e.pageX;
          $('#xy').html("x = " + x + ", y = " + y);
         });
      });
    </script>
  </body>
</html>

 

 

Voici le résultat :

 

Exercice

Tapez ce code dans Notepad++ et sauvegardez-le sous le nom taille-image.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de l'image sur click et mouseout</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Ecrivez quelques lignes de jQuery pour :

  1. Augmenter la taille de l’image lorsque l’utilisateur clique dessus.
  2. Redonner la taille originale à l’image lorsque le pointeur ne la survole plus.

 

Solution

$(function() {
  $("#target").mousedown(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',largeur+10);
  });
  $("#target").mouseout(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',160);
  });
});

jQuery est en mesure de réagir aux événements générés par la souris, le clavier et les éléments du DOM. Pour cela, vous devez définir une méthode de gestion événementielle en écrivant quelque chose comme ceci :

$(sélecteur).événement(function(){
  // Gestion de l'événement
});

Où :

  • sélecteur permet de sélectionner un ou plusieurs éléments du DOM
  • événement est le nom de l’événement à gérer.

Plusieurs méthodes jQuery permettent de manipuler les classes des éléments du DOM :

  • addClass() : ajoute la classe spécifiée en argument
  • removeClass() : supprime la classe de la sélection, si elle existe
  • toggleClass() : retire ou ajoute la classe de la sélection, selon si elle existe ou si elle n’existe pas

Pour vous entrainer à manipuler ces méthodes, saisissez le code suivant dans Notepad+++ et sauvegardez-le sous le nom manipule-classes.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manipulation de l'attribut class</title>
    <style type="text/css">
      .rouge { color: red; }
      .vert { color: green; }
      .petit { font-size: 100%; }
      .grand {font-size: 300%; }
    </style>
  </head>
  <body>
    <div id="kevin">Kévin</div>
    <div id="eric">Eric</div>
    <div id="cathy">Cathy</div>
    <div id="julie">Julie</div>
    <div id="trich">Patricia</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Ajouter le code jQuery ici

      });
    </script>
  </body>
</html>

 

Exécutez le code. Voici ce que vous devez obtenir :

 

A l’aide des méthodes addClass(), removeClass() et toggleClass(), modifiez les classes des éléments div pour obtenir ce résultat :

 

Voici le code à utiliser :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge').addClass('grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge').addClass('grand');

 

Remarque : Plusieurs autres variantes sont possibles.

Il est possible d’enlever ou d’ajouter plusieurs classes simultanément : précisez le nom des classes concernées dans les parenthèses en les séparant d’un espace. Par exemple :

addClass('bleu immense');

 

Simplifiez le code jQuery précédent :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge grand');

 

Pour terminer, la méthode hasClass() renvoie la valeur true si la sélection a pour classe la valeur spécifiée en argument. Elle renvoie la valeur false dans le cas contraire.

 

Exercice : A titre d’exemple, appliquez la méthode hasClass() à tous les éléments div du document. Si un élément est de classe rouge, supprimez cette classe et remplacez-la par la classe vert.

Solution :

    $('div').each(function(){
  element=$(this);
  if (element.hasClass('rouge')) {
    element.removeClass('rouge');
    element.addClass('vert');
  }
});

Vous appliquerez la méthode remove() aux éléments jQuery à supprimer.

Saisissez le code suivant dans Notepad++ et enregistrez-le sous le nom supprimer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
        $('p').remove();
      });
    </script>
  </body>
</html>

 

Exercice : Insérez le code nécessaire pour supprimer tous les paragraphes (<p>).

Solution :

$('p').remove();

 

Exercice : Supprimer le deuxième enfant <li> des balises <ul>

Solution :

$('li:nth-child(2)').remove();

Quatre méthodes permettent d’insérer un élément (el) avant ou après l’élément ciblé (cible) :

  • el.appendTo(cible) insère un élément à la fin de la cible
  • el.prependTo(cible) insère un élément au début de la cible
  • el.insertBefore(cible) insère un élément avant la cible
  • el.insertAfter(cible) insère un élément après la cible

Saisissez ce code dans Notepad++ et sauvegardez-le sous le nom inserer-elements.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion d'éléments</title>
    <script src="jquery.js"></script>
  </head>
  <body>
<h2>Titre</h2>
  <div class="parent">
    <div>Bonjour</div>
    <div>jQuery</div>
  </div>
  <script>
      $(function() {
        //$('<p>Comment ça va ?</p>').appendTo('.enfant');
      });
    </script>
  </body>
</html>

 

Exécutez ce code dans Firefox. Supprimez les commentaires et ré exécutez ce code. Voici le résultat :

 

Expérimentez les méthodes prependTo(), insertBefore() et insertAfter() pour comprendre leurs différences.

Si vous ne voyez pas la différence entre appendTo() et insertAfter(), ou entre prependTo() et insertBefore(), utilisez Firebug pour visionner le code généré. Pour cela, appuyez sur la touche F12, sélectionnez l’onglet HTML et développez les balises <body> puis <div> :