• Medium

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 5/18/20

TP : Mise en forme d'une page Web

Log in or subscribe for free to enjoy all this course has to offer!

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'attributvaluede 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:selectedsignifie « l'élément d'identifiant#couleur-fonddont 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 attributvalue, il suffit d'appliquer la méthodeval()à ce sélecteur !

La valeur retournée est une couleur directement exploitable. Il suffit donc de l'affecter à la propriétébackground-colorde 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-weightpour le gras ;

  • font-stylepour l'italique ;

  • text-decorationpour 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#textechange :

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

… l'attributvaleurde l'entrée sélectionnée par l'utilisateur est mémorisé dans la variablete:

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

Si l'entrée « Gras » a été sélectionnée, la propriétéfont-weightest 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-styleest 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-decorationest 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ésfont-weight,font-styleettext-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'attributvaluedes 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-familyde 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 variableff:

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é CSSfont-familyde 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'attributvaluede la balise<option>sélectionnée est mémorisée dans la variableppp:

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

Cette valeur est affectée à la propriété CSSfont-familydu 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 variablepcp:

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 fonctionsplit():

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 fonctionmap()est appliquée au tableau pour mettre en gras le premier caractère de chaque phrase. Le résultat de la fonctionmap()est stocké dans la variabletableau2:

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 un espace sont ajoutés à la fin de la phrase, puisqu'ils avaient été supprimés par la méthodesplit()à l'étape précédente :

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

Les éléments contenus danstableau2sont 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 variableunPar:

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 fonctionsplit()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#couleurMotest cliqué :

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

… le nombre tapé dans la zone de texte#motest mémorisé dans la variablemot:

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

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

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éthodemap(). Le résultat est stocké dans la variabletableau2:

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'attributcolorest 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 variabletableau2, après avoir assemblé ses éléments via la fonctionjoin():

$('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é CSSborder. 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 variablebi:

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#razest 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 (el == 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

Example of certificate of achievement
Example of certificate of achievement