• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Textes et images

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons voir quelques méthodes spécialisées dans le traitement des chaînes de caractères et des images. Vous allez apprendre à supprimer des espaces dans une chaîne, à faire des recherches et des remplacements, mais aussi à créer une galerie d'images ou un diaporama.

Les chaînes de caractères

Supprimer des espaces dans une chaîne

La fonction $.trim() supprime les espaces au début et à la fin d'une chaîne. Pour mettre en évidence son fonctionnement, le code suivant demande à l'utilisateur d'entrer du texte dans la zone de texte en le faisant précéder et/ou suivre par des espaces. Ce texte est alors affiché dans une balise <pre> tel qu'il a été saisi, puis tel qu'il est après avoir été traité par la fonction trim(). Voici le code utilisé :

Tapez du texte dans la zone de texte en le faisant commencer et/ou finir par des espaces, puis cliquez sur le bouton.<br><br>
<input type="text" id="texte" />
<button id="action">Cliquez ici</button>
<pre id="resultat"></pre>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      var leTexte = $('#texte').val();
      $('#resultat').html('Texte original           : "' + leTexte + '"' + 
                      '<br>Après la fonction trim() : "' + $.trim(leTexte) + '"');
    });  
  });
</script>

Le résultat se trouve à la figure suivante.

La fonction $.trim() supprime tous les espaces au début et à la fin de la chaîne
La fonction $.trim() supprime tous les espaces au début et à la fin de la chaîne

Ce code n'a rien d'extraordinaire et vous devriez être en mesure de le comprendre par vous-mêmes. Cependant, remarquez l'utilisation d'une balise <pre> pour afficher le résultat. Ce choix de balise est intentionnel, car le texte y est affiché avec des caractères non proportionnels, c'est-à-dire dont la largeur est fixe. Par exemple, une espace est aussi large que la lettre i ou encore que la lettre R.

Position d'un caractère dans une chaîne

La fonction charAt() permet d'obtenir le caractère qui se trouve à une position donnée dans une chaîne. Voici sa syntaxe :

var unCaractere = chaine.charAt(position);

… où chaine est une chaîne de caractères, position est la position du caractère à extraire (attention, le premier caractère occupe la position 0, le deuxième la position 1, etc.) et unCaractere est la variable dans laquelle est stocké le caractère extrait.

Dans l'exemple suivant, l'utilisateur entre une chaîne de caractères dans la première zone de texte, une position dans la deuxième, puis il appuie sur le bouton. Le caractère qui se trouve dans la position spécifiée est alors affiché dans une balise <div>.

Tapez du texte dans la première zone de texte, une position dans la deuxième zone de texte, puis cliquez sur le bouton.<br><br>
Texte : <input type="text" id="texte" /><br>
Position : <input type="text" id="position" /><br>
<button id="action">Cliquez ici</button><br>
<div id="resultat"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      var leTexte = $('#texte').val();
      var laPosition = $('#position').val();
      var leResultat = 'Le caractère en position ' + laPosition + ' est un "' + leTexte.charAt(laPosition) + '"';
      $('#resultat').text(leResultat);
    });  
  });
</script>

La figure suivante montre le résultat dans un navigateur.

Le troisième caractère (position 2) est un « e »
Le troisième caractère (position 2) est un « e »

Recherches et remplacements de textes

Il est parfois nécessaire de sélectionner le ou les éléments qui contiennent un mot ou un texte particulier. Pour cela, vous utiliserez le pseudo-sélecteur :contains. Par exemple, pour sélectionner toutes les balises <div> qui contiennent le mot « rouge », vous utiliserez le sélecteur suivant :

$('div:contains("rouge")')

Vous pourriez par exemple modifier la couleur d'arrière-plan des <div> qui contiennent le mot « rouge » en utilisant cette instruction :

$('div:contains("rouge")').css('background-color', 'red');

Il est également possible de remplacer un texte par un autre ou un élément par un autre en utilisant la méthode replaceWith(), dont voici la syntaxe :

$('sel').replaceWith('contenu');

… où sel est un sélecteur jQuery et contenu une chaîne HTML, un élément du DOM ou un objet jQuery qui remplacera le ou les éléments sélectionnés. Regardez le code suivant, tout deviendra limpide.

<img id="un" src="girafe.jpg"><br>
<button id="changement">Remplacer l'image</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#changement').click(function() {
      $('#un').replaceWith('<img id="unbis" src="chat.jpg">');
    });
  });
</script>

En cliquant sur le bouton #changement, la balise <img id="un"> va tout simplement être remplacée par la balise <img id="unbis">, qui affiche une autre image.

Les images

Ce que nous allons voir ici ne sera pas forcément nouveau pour vous. J'ai voulu faire un rappel et approfondir certaines techniques déjà vues.

Réagir au survol d'une image

Pour ajouter un peu d'interactivité dans une page Web, vous pouvez suivre les mouvements de la souris et interagir lorsqu'elle survole certains éléments.

Agrandissement au survol

Cet exemple est un grand classique : une vignette est affichée sur la page. Lorsqu'elle est survolée par la souris, elle est remplacée par une image de plus grande taille. Lorsque la souris se déplace en dehors de l'image, la vignette est à nouveau affichée. Voici le code utilisé :

<img id="montagne" src="montagnepetit.jpg">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $('#montagne').mouseover(function() {
      $(this).attr('src','montagne.jpg');
    });
    $('#montagne').mouseout(function() {
      $(this).attr('src','montagnepetit.jpg');
    });
  }); 
</script>

Une vignette (ou une miniature, si vous préférez) est affichée sur la page. Lorsque l'utilisateur la survole avec la souris :

$('#montagne').mouseover(function() {

… elle est remplacée par une autre image. Cette action est accomplie en agissant sur la propriété src de la vignette :

$(this).attr('src','montagne.jpg');

Lorsque la souris n'est plus sur l'image :

$('#montagne').mouseout(function() {

… cette dernière est remplacée par la vignette. Ici encore, le passage de l'image à la vignette se fait en agissant sur la propriété src de l'image :

$(this).attr('src','montagnepetit.jpg');
Agrandissement avec animation au survol

Dans l'exemple précédent, le passage de la vignette à l'image et de l'image à la vignette était pratiquement instantané. Que diriez-vous d'ajouter un peu de douceur aux transitions ? Pour cela, nous allons :

  1. Superposer la vignette et l'image ;

  2. Cacher l'image ;

  3. Passer de la vignette à l'image et de l'image à la vignette en utilisant des transitions fadeIn()/fadeOut().

Voici le code utilisé :

<style type="text/css">
  img{
    position: absolute;
    left: 0px;
    top: 0px;
  }
  #montagneGrand{
    display: none;
  }
</style>

<img id="montagnePetit" src="montagnepetit.jpg">
<img id="montagneGrand" src="montagne.jpg">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $('#montagnePetit').mouseover(function() {
      $(this).fadeOut(1000);
      $('#montagneGrand').fadeIn(1000);
    });
    $('#montagneGrand').mouseout(function() {
      $(this).fadeOut(1000);
      $('#montagnePetit').fadeIn(1000);
    });
  }); 
</script>

Les deux images doivent se trouver au même emplacement pour que le passage de l'une à l'autre se fasse en douceur. D'autre part, seule la vignette doit être affichée. Toutes ces mises en forme se font en CSS. Les deux images sont positionnées de façon absolue en haut et à gauche de l'écran, puis l'image est dissimulée afin que seule la vignette soit affichée.

Passons maintenant au code jQuery ! Lorsque le pointeur se trouve au-dessus de la vignette :

$('#montagnePetit').mouseover(function() {

… celle-ci est dissimulée avec la fonction fadeOut() et l'image la remplace progressivement avec la fonction fadeIn() :

$(this).fadeOut(1000);
$('#montagneGrand').fadeIn(1000);

Inversement, lorsque la souris se déplace en dehors de l'image, cette dernière disparaît et la vignette la remplace progressivement :

$('#montagneGrand').mouseout(function() {
  $(this).fadeOut(1000);
  $('#montagnePetit').fadeIn(1000);
});

Galerie d'images

Vous voulez exposer des photos sur un site Web ? Rien de tel qu'une galerie d'images. Voici le code utilisé :

<style type="text/css">
  img 
  {
    padding: 5px;
  }
</style>

<img src="miniPaysage1.jpg" id="paysage1.jpg" class='miniature'>
<img src="miniPaysage2.jpg" id="paysage2.jpg" class='miniature'>
<img src="miniPaysage3.jpg" id="paysage3.jpg" class='miniature'>
<img src="miniPaysage4.jpg" id="paysage4.jpg" class='miniature'>
<img src="miniPaysage5.jpg" id="paysage5.jpg" class='miniature'><br />
<img id="grand" src="paysage1.jpg" />

<script src="jquery.js"></script>
<script>
  $(function() {
    $('.miniature').css('border','5px white solid');
    $('img:first').css('border','5px black solid');
    $('.miniature').click(function() {
      $('img').css('border','5px white solid');
      $(this).css('border','5px black solid');
      var nom = $(this).attr('id');
      $('#grand').attr('src',nom);
    });  
  });
</script>

Pour faire fonctionner ce programme, vous devez disposer de cinq images et des vignettes associées. Les vignettes sont affichées sur une même ligne à l'aide de balises <img>. Par défaut, la première vignette est sélectionnée et l'image de grande taille est affichée dans la partie inférieure de la page, comme à la figure suivante.

Une galerie d'images en quelques lignes
Une galerie d'images en quelques lignes

Avez-vous remarqué le nom des identifiants des cinq vignettes ? paysage1.jpg, paysage2.jpg, etc. Vous vous demandez certainement pourquoi avoir choisi ces noms. Il s'agit là, nous allons le voir, d'une astuce pour alléger (oui, c'est possible !) l'écriture du code jQuery.

Dès que le DOM est disponible, une bordure blanche épaisse de 5 pixels est affichée autour des cinq vignettes et une bordure noire épaisse de 5 pixels est affichée autour de la première vignette :

$('.miniature').css('border','5px white solid');
$('img:first').css('border','5px black solid');

Quelle étrange pratique ! Pourquoi afficher une bordure blanche pour ensuite la remplacer par une bordure noire ?

La première instruction affiche une bordure blanche autour de tous les éléments de classe miniature. C'est-à-dire autour des cinq vignettes. Cet affichage a un seul but : décaler les vignettes horizontalement de telle sorte qu'elles restent à la même place lorsque l'utilisateur cliquera par la suite sur l'une d'entre elles. Vous comprenez mieux maintenant le pourquoi de cette première instruction. Quant à la deuxième instruction, elle encadre la première vignette. C'est en effet elle qui est affichée par défaut à l'ouverture de la page.

Lorsqu'une des miniatures est cliquée :

$('.miniature').click(function() {

…il faut effacer le cadre affiché autour de la vignette précédemment sélectionnée. Une instruction se charge d'effacer tous les cadres :

$('img').css('border','5px white solid');

L'instruction suivante affiche un cadre autour de la vignette qui a été cliquée. Remarquez l'utilisation du mot-clé this :

$(this).css('border','5px black solid');

Un peu plus haut, vous avez remarqué à quel point l'identifiant des vignettes était étrange. Il est temps de mettre à profit cette étrangeté. L'instruction suivante définit la variable nom et y stocke l'attribut de l'image qui a été cliquée :

var nom = $(this).attr('id');

Pour afficher cette image, il suffit de modifier en conséquence l'attribut src de l'image de grande taille :

$('#grand').attr('src',nom);

Diaporama automatique

Dans un chapitre précédent, nous avions travaillé sur un diaporama basique, et je vous avais dit que nous reviendrions dessus. Il est désormais temps ! Arrivés à ce point dans la lecture de ce cours, vous en savez assez pour comprendre le code d'un « vrai » diaporama.

<style type="text/css">
  img 
  { 
    position: absolute; // Les images vont se superposer
    left: 0px; // A gauche
    top: 0px; // et en haut de la feuille
    display: none; // Par défaut, elles ne seront pas affichées
  }
</style>

<img src="paysage5.jpg" id="img5">
<img src="paysage4.jpg" id="img4">
<img src="paysage3.jpg" id="img3">
<img src="paysage2.jpg" id="img2">
<img src="paysage1.jpg" id="img1">

<script src="jquery.js"></script>
<script>
  $(function() {
    var i=0;
    affiche();

    function affiche() {
      i++;
      if (i==1) precedent = '#img5'
           else precedent = '#img' + (i-1);
      var actuel = '#img' + i;
      $(precedent).fadeOut(2000);
      $(actuel).fadeIn(2000);
      if (i==5) i=0;          
    }

    setInterval(affiche, 2000);
  });
</script>

Essayer

La partie la plus importante du code réside dans la définition de la fonction affiche(). Lorsque le DOM est disponible, la variable i est définie et initialisée à 0. Dans la suite du code, cette variable sera utilisée pour pointer successivement sur les cinq images du diaporama. Puis la fonction affiche(), responsable de l'affichage d'une image, est appelée. Mais voyons voir ce qui se cache dans cette fonction.

Tout d'abord, la variable i est incrémentée. Lors de la première exécution de la fonction affiche(), elle aura donc pour valeur 1 :

function affiche() {
i++;

Si la variable i vaut 1, la variable precedent est initialisée à #img5. Dans le cas contraire, cette variable est initialisée à #img suivi de la valeur de i-1 :

if (i==1) precedent = '#img5';
else precedent = '#img' + (i-1);

Pourquoi différencier le cas i=1 des autres cas ? Tout simplement pour que la « boucle puisse boucler » ou, en d'autres termes, pour que les images se succèdent de la première à la cinquième, puis que la boucle soit à nouveau exécutée. La variable actuel est initialisée avec #img suivi de l'index i. Elle vaudra consécutivement #img1, #img2, #img3 et #img4 :

var actuel = '#img' + i;

Maintenant, on sait quelle image doit disparaître (precedent) et quelle image doit apparaître (actuel). Il ne reste plus qu'à utiliser un fadeOut() et un fadeIn() :

$(precedent).fadeOut(2000);
$(actuel).fadeIn(2000);

Lorsque la cinquième image est atteinte, il faut réinitialiser la boucle en affectant la valeur 0 à la variable i :

if (i==5) i=0;

Une dernière chose : pour que les images s'enchaînent automatiquement, il suffit d'exécuter la fonction affiche() à intervalles réguliers :

setInterval(affiche, 2000);
  • $.trim() supprime les espaces au début et à la fin de la chaîne passée en argument.

  • charAt() retourne le caractère qui se trouve à une position donnée dans une chaîne. Indiquez le nom de la chaîne suivi d'un point et de la fonction charAt(), et précisez la position du caractère entre les parenthèses.

  • Pour sélectionner le ou les éléments qui contiennent un mot ou un texte particulier, utilisez le pseudo-sélecteur :contains.

  • Enfin, pour remplacer un texte par un autre ou un élément par un autre, utilisez la méthode replaceWith().

Exemple de certificat de réussite
Exemple de certificat de réussite