• 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 !

TP : Mise en forme d'une page Web

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

Avec ce TP, je vous propose de réviser les techniques de sélection et de mise en forme étudiées dans cette partie mais également dans les parties précédentes. Il s'agit d'une révision générale, en somme. Le but sera de modifier une page Web via un formulaire.

Instructions pour réaliser le TP

Avant toute chose, je vais vous montrer à quoi va ressembler le rendu final de ce TP. Pour ça, regardez la figure suivante.

Cette page n'attend plus que votre code jQuery
Cette page n'attend plus que votre code jQuery

La page est composée de deux balises <div>. La première contient des informations textuelles et une image. La deuxième contient un formulaire composé de plusieurs listes déroulantes, d'une zone de texte et de deux boutons de commande. Lorsque l'utilisateur agira sur les contrôles du formulaire, le contenu de la première balise <div> devra être mis à jour en conséquence.

Rassurez-vous, je vous fais grâce du code HTML/CSS. Ce que je vous demande ici, c'est de donner vie aux éléments du formulaire en effectuant les actions nécessaires en jQuery lorsque l'utilisateur sélectionne une valeur dans une liste déroulante ou clique sur un bouton. Le tableau suivant résume la fonction des différents contrôles du formulaire.

Contrôle

Effet dans la première balise <div>

Couleur de fond

Modification de la couleur de fond en utilisant la valeur qui se trouve dans l'attribut « value » de la balise <option> choisie.

Texte

Modification de l'attribut de tout le texte.

Police

Modification de la police de tout le texte.

Police 1e phrase

Modification de la police de la première phrase.

Prem caract phrases

Modification des caractéristiques du premier caractère de chaque phrase.

Mot en rouge

Écriture en caractères rouges du mot spécifié dans le premier paragraphe. Par exemple, si l'utilisateur tape « 10 » dans la zone de texte, le dixième mot du premier paragraphe doit apparaître en caractères rouges.

Bordure images

Affecter une bordure aux images.

RAZ formulaire

Remettre à zéro le formulaire et la mise en forme de la première balise <div>.

Voici le code HTML/CSS sur lequel vous allez travailler :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mise en forme</title>
    <style type="text/css">
      #contenu
      {
        width: 500px;
        height: 450px;
        border: 1px black solid;
        float: left;
        margin-right: 10px;
        overflow-y: auto;
      }
      #controles
      {
        width: 300px;
        height: 450px;
        border: 1px black solid;
        float: left;
      }
      #controles div{
        margin-bottom: 10px;
      padding: 5px;
      }
      label{
        float: left;
        width: 140px;
      }
      #image
      {
        width: 110px;
        height: 110px;
        margin-left: 100px;
      }
      p 
      { 
        padding-left: 5px; 
        padding-right: 5px; 
        font-family: 'Times New Roman';
      }
    </style>
  </head>
  <body>
    <div id="contenu">
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
    <div id="image"><img src="zozor.png"></div>
      <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </p>
      <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    <div id="controles">
      <div>
        <label for="couleur-fond">Couleur de fond</label>
        <select id="couleur-fond">
          <option value="#FFFFFF">Blanc</option>
          <option value="#9FFEF1">Bleu</option>
          <option value="#9FFECE">Vert</option>
          <option value="#FAFE9F">Jaune</option>
        </select>
      </div>
    
      <div>
        <label for="texte">Texte</label>
          <select id="texte">
            <option value="Normal">Normal</option>
            <option value="Gras">Gras</option>
            <option value="Italique">Italique</option>
            <option value="Souligne">Souligné</option>
          </select>
      </div>
      
      <div>
        <label for="police">Police</label>
        <select id="police">
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
        </select>
      </div>
      
      <div>
        <label for="police-prem-phrase">Police 1e phrase</label>
        <select id="police-prem-phrase">
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
        </select>
      </div>
      
      <div>
        <label for="prem-car-phrases">Prem caract phrases</label>
        <select id="prem-car-phrases">
          <option value="Normal">Normal</option>
          <option value="Gras">Gras</option>
        </select>
      </div>

      <div>
        <label for="mot">Mot en rouge</label>
        <input type="text" id="mot" size="2">
        <button id="couleurMot">OK</button>
      </div>

      <div>
        <label for="bordure-images">Bordure images</label>
        <select id="bordure-images">
          <option value="Rien">Rien</option>
          <option value="Simple">Simple</option>
          <option value="Double">Double</option>
        </select>
      </div>

      <div>
        <button id="raz">RAZ formulaire</button>
      </div>
    </div>

    <script src="jquery.js"></script>
    <script>
      // Entrer les instructions jQuery ici
    </script> 
  </body>
</html>

Essayer

La figure suivante représente l'image que j'ai utilisée, mais vous pouvez évidemment en utiliser une autre (dans ce cas attention aux dimensions).

L'image que j'utilise pour ce TP
L'image que j'utilise pour ce TP

Votre travail va consister à écrire quelques (!) lignes de jQuery à la fin du document. N'hésitez pas à relire les parties du cours qui vous aideront à résoudre ce TP. Et maintenant, c'est à vous de jouer !

Correction

J'espère que tout s'est bien passé et que vous n'avez pas rencontré de difficulté majeure dans ce TP. Comme toujours, je vous propose une solution. Il se peut que vous soyez partis dans une autre direction et que vos codes fonctionnent à la perfection. Dans ce cas, considérez ce que je propose comme une solution alternative.

Pour faciliter la lecture de la correction, je l'ai scindée en autant de sous-sections que de contrôles dans le formulaire. Vous pouvez tout lire ou vous reporter à la sous-section qui correspond à un traitement qui vous en a particulièrement fait baver.

Couleur de fond

Cette fonctionnalité ne devrait pas vous avoir posé de problème. Voici le code que j'ai utilisé :

$('#couleur-fond').change(function() {
  var cf = $('#couleur-fond option:selected').val();
  $('#contenu').css('background-color', cf);
});

Lorsque l'utilisateur sélectionne une entrée dans la liste déroulante #couleur-fond :

$('#couleur-fond').change(function() {

… on récupère la valeur stockée dans l'attribut value de la sélection :

var cf = $('#couleur-fond option:selected').val();

Cette instruction est essentielle. Elle sera utilisée tout au long de cette correction. Le sélecteur est particulièrement remarquable à mon avis. Jugez un peu : #couleur-fond option:selected signifie « l'élément d'identifiant #couleur-fond dont la balise enfant <option> est sélectionnée ». Ce simple sélecteur fait référence à la balise <option> choisie par l'utilisateur dans la liste déroulante. Pour connaître la valeur affectée à son attribut value, il suffit d'appliquer la méthode val() à ce sélecteur !

La valeur retournée est une couleur directement exploitable. Il suffit donc de l'affecter à la propriété background-color de la première balise <div> pour modifier la couleur de l'arrière-plan :

$('#contenu').css('background-color', cf);

Texte

L'affectation des attributs gras, italique et souligné au texte contenu dans la première balise <div> n'est guère plus compliquée. Il vous suffit de savoir quelles propriétés CSS utiliser :

  • font-weight pour le gras ;

  • font-style pour l'italique ;

  • text-decoration pour le soulignement.

Voici le code utilisé :

$('#texte').change(function() {
  var te = $('#texte option:selected').val();
  if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');
  if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
  if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline');
  if (te == 'Normal') {
    $('#contenu p').css('font-weight', 'normal');
    $('#contenu p').css('font-style', 'normal');
    $('#contenu p').css('text-decoration', 'none');
  }
});

Lorsque le contenu de la liste déroulante #texte change :

$('#texte').change(function() {

… l'attribut valeur de l'entrée sélectionnée par l'utilisateur est mémorisé dans la variable te :

var te = $('#texte option:selected').val();

Si l'entrée « Gras » a été sélectionnée, la propriété font-weight est initialisée à bold :

if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');

Si l'entrée « Italique » a été sélectionnée, la propriété font-style est initialisée à italic :

if (te == 'Italique') $('#contenu p').css('font-style', 'italic');

Si l'entrée « Souligné » a été sélectionnée, la propriété text-decoration est initialisée à underline :

if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline');

Enfin, si l'entrée « Normal » a été sélectionnée, il faut réinitialiser les propriétés font-weight, font-style et text-decoration :

if (te == 'Normal') {
  $('#contenu p').css('font-weight', 'normal');
  $('#contenu p').css('font-style', 'normal');
  $('#contenu p').css('text-decoration', 'none');
}

Police

Si vous avez passé avec succès les deux étapes précédentes, la modification de la police utilisée dans la première balise <div> sera un vrai jeu d'enfant. Un simple coup d'œil au code HTML permet de constater que l'attribut value des différents <select> contient le nom de la police à utiliser :

<select id="police">
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="Arial">Arial</option>
</select>

Il suffira donc de récupérer ce nom et de l'affecter à la propriété font-family de la première balise <div>. Voici les quelques lignes de code jQuery utilisées :

$('#police').change(function() {
  var ff = '"' + $('#police option:selected').val() + '"';
  $('#contenu p').css('font-family', ff);
});

Lorsque l'utilisateur sélectionne une valeur dans la liste déroulante #police :

$('#police').change(function() {

… la valeur de l'attribut de la balise <option> sélectionnée est mémorisée dans la variable ff :

var ff = '"' + $('#police option:selected').val() + '"';

Pour modifier la police utilisée dans les paragraphes de la première balise <div>, il suffit d'affecter cette valeur à la propriété CSS font-family de toutes les balises <p> :

$('#contenu p').css('font-family', ff);

C'est aussi simple que cela !

Police de la première phrase

Enfin quelque chose de plus difficile ! Quoique… Ici, seule la police de la première phrase doit être modifiée. Si vous avez buté sur cette problématique, prenez le temps de réfléchir à ce qui la différencie de la précédente…

Vous avez trouvé ? C'est le sélecteur qui va faire toute la différence. Observez bien le premier paragraphe. Il contient une (et une seule) phrase. Sélectionner la première phrase va donc revenir à sélectionner le premier paragraphe ! Voici le code utilisé :

$('#police-prem-phrase').change(function() {
  var ppp = $('#police-prem-phrase option:selected').val();
  $('#contenu p:first').css('font-family', ppp);
});

Lorsqu'une valeur est sélectionnée dans la liste déroulante #police-prem-phrase :

$('#police-prem-phrase').change(function() {

… la valeur de l'attribut value de la balise <option> sélectionnée est mémorisée dans la variable ppp :

var ppp = $('#police-prem-phrase option:selected').val();

Cette valeur est affectée à la propriété CSS font-family du premier paragraphe de la première balise #contenu :

$('#contenu p:first').css('font-family', ppp);

Premier caractère des phrases

À mon avis, cette problématique a dû vous occuper un certain temps. J'espère que vous avez survécu à l'épreuve. Quelle idée, me direz-vous, mettre en gras la première lettre de chaque phrase ! Si vous vous rappelez ce qui a été dit sur la séparation des éléments contenus dans une chaîne, vous êtes sur la bonne voie. Que diriez-vous de partager le contenu des paragraphes sur les caractères « . », ou, en d'autres termes, à la fin de chaque phrase ? Il vous suffira ensuite d'appliquer un traitement particulier au premier caractère des différentes valeurs ainsi isolées et… le tour sera joué. Voici le code que j'ai utilisé :

$('#prem-car-phrases').change(function() {
  var pcp = $('#prem-car-phrases option:selected').val();
  if (pcp == 'Gras') {
    $('p').each(function() {
      var tableau = $(this).text().split('. ');
      if (tableau.length == 0) {}
      else {
        var tableau2 = $.map(tableau, function(el, ind) {
          if (el[0] != null) return '<b>' + (el[0]) + '</b>' + el.substring(1) + '. ';
        });  
        $(this).html(tableau2.join(''));
      }  
    });
  }

  if (pcp == 'Normal') {
    $('p').each(function() {
      var unPar = $(this).html();
      if (unPar.indexOf('<img') == -1)
        $(this).text($(this).text());
    });
  }

});

Ne soyez apar le nombre d'instructions : je vais tout vous expliquer !

Lorsque l'utilisateur sélectionne une valeur dans la liste déroulante #prem-car-phrases :

$('#prem-car-phrases').change(function() {

… cette valeur est mémorisée dans la variable pcp :

var pcp = $('#prem-car-phrases option:selected').val();

Si l'utilisateur a sélectionné la valeur « Gras » :

if (pcp == 'Gras') {

… on applique un traitement à chaque paragraphe du document :

$('p').each(function() {

La première étape du traitement va consister à diviser les phrases dans un tableau en utilisant la fonction split() :

var tableau = $(this).text().split('. ');

Si le paragraphe ne comporte aucune phrase, le tableau ne contient aucun élément. Sa longueur est donc égale à 0. Dans ce cas, aucun traitement ne doit être effectué puisque le paragraphe ne contient aucune phrase :

if (tableau.length == 0) {}

Dans le cas contraire, la fonction map() est appliquée au tableau pour mettre en gras le premier caractère de chaque phrase. Le résultat de la fonction map() est stocké dans la variable tableau2 :

else {
  var tableau2 = $.map(tableau, function(el, ind) {

Si la valeur examinée n'est pas nulle, il s'agit d'une phrase qui doit être traitée. Dans ce cas, le premier caractère est entouré des balises <b> et </b> et du reste de la phrase diminué du premier caractère. Enfin, un point et une espace sont ajoutés à la fin de la phrase, puisqu'ils avaient été supprimés par la méthode split() à l'étape précédente :

if (el[0] != null) return '<b>' + (el[0]) + '</b>' + el.substring(1) + '. ';

Les éléments contenus dans tableau2 sont alors rassemblés et la chaîne HTML obtenue remplace le paragraphe qui était sélectionné :

$(this).html(tableau2.join(''));

Vous êtes toujours là ? Je l'espère, car seule la moitié du traitement a été effectuée. Il faut encore écrire quelques lignes de code pour réagir à la sélection de la valeur « Normal » dans la liste déroulante #prem-car-phrases. Je vous rassure tout de suite : le code à écrire est bien plus simple à comprendre que celui qui vient d'être écrit.

Lorsque la valeur « Normal » est sélectionnée dans la liste déroulante :

if (pcp == 'Normal') {

… un traitement est appliqué à tous les paragraphes du document :

$('p').each(function() {

Dans un premier temps, le code HTML du paragraphe est mémorisé dans la variable unPar :

var unPar = $(this).html();

Si ce code ne contient pas une balise <img> :

if (unPar.indexOf('<img') == -1)

… cela signifie qu'il contient du texte dans lequel le premier caractère de chaque phrase a pu être mis en gras par l'utilisateur. Un traitement particulier doit donc lui être appliqué. Nous allons utiliser une astuce de programmation : en affectant au paragraphe sa version texte (et non HTML), toutes les balises HTML qu'il pourrait contenir sont supprimées :

$(this).text($(this).text());

Mot en rouge

Il se peut que cette mise en forme vous ait également posé quelques problèmes. Cependant, si vous avez suivi ce que je viens de dire, tout vous semblera bien plus simple. Je vous mets sur la voie : pour séparer les mots du premier paragraphe, la fonction split() semble tout indiquée…

Voici le code que j'ai utilisé :

$('#couleurMot').click(function() {
  var mot = $('#mot').val();
  var tableau = $('p:first').text().split(' ');
  var tableau2 = $.map(tableau, function(el, ind) {
    if (ind+1 == mot) return ('<font color="red">' + el + '</font>')
    else return(el);
    });  
    $('p:first').html(tableau2.join(' '));
});

Lorsque le bouton #couleurMot est cliqué :

$('#couleurMot').click(function() {

… le nombre tapé dans la zone de texte #mot est mémorisé dans la variable mot :

var mot = $('#mot').val();

Les mots sont séparés entre eux par des espaces. C'est donc une espace que nous utiliserons comme séparateur dans la fonction split(). Le résultat de la séparation est stocké dans la variable tableau :

var tableau = $('p:first').text().split(' ');

Il ne reste plus qu'à appliquer un traitement spécial au mot désigné par l'utilisateur en utilisant la méthode map(). Le résultat est stocké dans la variable tableau2 :

var tableau2 = $.map(tableau, function(el, ind) {

Lorsque l'index de l'élément est égal à la valeur entrée dans la zone de texte #mot (à un près puisque le décompte se fait à partir de 0), le mot est entouré par une balise <font> dans laquelle l'attribut color est initialisé à « red » :

if (ind+1 == mot) return ('<font color="red">' + el + '</font>')

S'il s'agit d'un autre mot, aucun traitement ne lui est appliqué :

else return(el);

Enfin, le premier paragraphe est remplacé par le contenu de la variable tableau2, après avoir assemblé ses éléments via la fonction join() :

$('p:first').html(tableau2.join(' '));

Vous voyez qu'il n'y avait rien de compliqué dans ce traitement.

Bordure des images

La bordure des images est définie avec la propriété CSS border. Selon la valeur sélectionnée dans la liste déroulante #bordure-images, une bordure simple, double ou aucune bordure est appliquée à l'image contenue dans la première balise <div>. Voici le code utilisé :

$('#bordure-images').change(function() {
  var bi = $('#bordure-images option:selected').val();
  if (bi == 'Rien') $('img').css('border', '2px solid white');
  if (bi == 'Simple') $('img').css('border', '2px solid red');
  if (bi == 'Double') $('img').css('border', '5px double red');
});

Lorsque l'utilisateur sélectionne une valeur dans la liste déroulante #bordure-images :

$('#bordure-images').change(function() {

… cette valeur est mémorisée dans la variable bi :

var bi = $('#bordure-images option:selected').val();

Si la valeur « Rien » a été sélectionnée, une bordure blanche épaisse de 2 pixels est affichée autour de l'image. Si elle existait, la bordure précédente est effacée, car la bordure blanche s'affiche sur un arrière-plan de couleur blanche :

if (bi == 'Rien') $('img').css('border', '2px solid white');

Le principe est le même pour les deux autres valeurs :

if (bi == 'Simple') $('img').css('border', '2px solid red');
if (bi == 'Double') $('img').css('border', '5px double red');

Remise à zéro du formulaire

Pour remettre à zéro le formulaire, vous avez peut-être écrit de nombreuses lignes de code jQuery pour parvenir à un résultat certes correct, mais qui aurait pu s'écrire en une seule ligne ! Si vous vous demandez quelle instruction j'ai bien pu utiliser, je dois bien avouer que j'ai eu recours à une astuce : tout le contenu du document est remis à zéro si on rafraîchit la page. Il suffit donc d'utiliser une instruction qui provoque le rafraîchissement de la page lorsque le bouton #raz est cliqué :

$('#raz').click(function() {
  location.reload();
});

Le code jQuery complet

Voici le code jQuery dans son intégralité, afin que vous ayez une vue d'ensemble :

$(function() {
  // Couleur de fond
  $('#couleur-fond').change(function() {
    var cf = $('#couleur-fond option:selected').val();
    $('#contenu').css('background-color', cf);
  }); 

  // Texte
  $('#texte').change(function() {
    var te = $('#texte option:selected').val();
    if (te == 'Normal') {
      $('#contenu p').css('font-weight', 'normal');
      $('#contenu p').css('font-style', 'normal');
      $('#contenu p').css('text-decoration', 'none');
    }    
    if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');
    if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
    if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline');
  });         
  
  // Police
  $('#police').change(function() {
    var ff = '"' + $('#police option:selected').val() + '"';
    $('#contenu p').css('font-family', ff);
  });         

  // Police 1e phrase
  $('#police-prem-phrase').change(function() {
    var ppp = $('#police-prem-phrase option:selected').val();
    $('#contenu p:first').css('font-family', ppp);
  });         

  // Premier caractère des phrases
  $('#prem-car-phrases').change(function() {
    var pcp = $('#prem-car-phrases option:selected').val();
    
    if (pcp == 'Normal') {
      $('p').each(function() {
        var unPar = $(this).html();
        if (unPar.indexOf('<img') == -1)
          $(this).text($(this).text());
      });
    }
    
    if (pcp == 'Gras') {
      $('p').each(function() {
        var tableau = $(this).text().split('. ');
        if (tableau.length == 1) {}
        else {
          var tableau2 = $.map(tableau, function(el, ind) {
            if (el[0] != null) return '<b>' + (el[0]) + '</b>' + el.substring(1) + '. ';
          });  
        $(this).html(tableau2.join(''));
        }  
      });
    }    
  });         

  // Mot en rouge
  $('#couleurMot').click(function() {
    var mot = $('#mot').val();
    var tableau = $('p:first').text().split(' ');
    var tableau2 = $.map(tableau, function(el, ind) {
      if (ind+1 == mot) return ('<font color="red">' + el + '</font>')
      else return(el);
    });  
    $('p:first').html(tableau2.join(' '));
  });         

  // Bordure des images
  $('#bordure-images').change(function() {
    var bi = $('#bordure-images option:selected').val();
    if (bi == 'Rien') $('img').css('border', '2px solid white');
    if (bi == 'Simple') $('img').css('border', '2px solid red');
    if (bi == 'Double') $('img').css('border', '5px double red');
  });         

  // RAZ du formulaire
  $('#raz').click(function() {
     location.reload();
  });
});

Essayer

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