Interagir avec le HTML

Formation Soyez un druide du JavaScript !

Tutorial Thumbnail
  1. Tutoriels
  2. JavaScript
  3. Interagir avec le HTML

Dans toute application web, on commence par utiliser les balises HTML pour créer l'affichage de la page web. On peut ensuite utiliser le JavaScript pour interagir avec l'affichage pour :

  • Modifier le contenu ou le style d'une balise,
  • Ajouter ou supprimer des balises,
  • Récupérer les valeurs saisies par l'internaute (formulaire),
  • Gérer les évènements (clics de souris).

Ces opérations sont rendues possibles grâce à la manipulation du DOM par le navigateur.


Sommaire
  1. Qu'est-ce que le DOM ?
  2. Accéder aux éléments du DOM
    1. Les interfaces "Document" et "Element"
    2. Récupérer des éléments par l'attribut "id"
    3. Récupérer des éléments par le nom de la balise HTML
    4. Récupérer les éléments par l'attribut "class"
    5. Récupérer un ou plusieurs éléments à partir de son sélecteur CSS
      1. Le terme "querySelector()"
      2. Le terme "querySelectorAll()"
    6. Accéder au texte contenu dans un élément du DOM avec "textContent"
  3. Modifier le style d'un élément avec la propriété "style"
  4. Créer, ajouter ou supprimer un élément dans le DOM
    1. Créer un élément avec "createElement()"
    2. Insérer un élément dans un autre avec "append()" et "prepend()"
    3. Supprimer un ou plusieurs éléments du DOM avec "remove()"
  5. Activité 1 : Calcul d'IMC - Affichage des informations du patient dans un formulaire HTML
    1. Étape 1
    2. Étape 2
    3. Étape 3
    4. Étape 4
  6. Activité 2 : Calcul d'IMC - Affichage des informations du patient dans un tableau HTML
    1. Étape 1
    2. Étape 2
    3. Étape 3
  7. Activité 3 : Calcul d'IMC - Affichage des données correspondant à une liste de patients dans un tableau HTML
    1. Étape 1
    2. Étape 2

Qu'est-ce que le DOM ?

Le DOM, qui signifie Document Object Model est une interface de programmation pour les documents HTML (ou XML) qui représente le document (la page HTML) sous une forme permettant au JavaScript d'y accéder pour en manipuler le contenu et les styles. Le DOM est créé automatiquement par le navigateur lors du chargement de la page, il correspond à une représentation structurée du document sous forme d'un arbre.


Chaque branche de cet arbre se termine par ce qu’on appelle un nœud (node) qui va contenir les objets avec lesquels on va pouvoir travailler en JavaScript.

Exemple : on considère le code HTML suivant

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon super site !</title>
    </head>
    <body>
        <h1>Bonjour !</h1>
        <p>Comment allez-vous ?</p>
    </body>
</html>


Le DOM de ce document peut être représenté comme une arborescence de nœuds :



Le modèle objet d'un document HTML commence toujours avec l'élément html, c'est le nœud racine du DOM. À partir du nœud racine, le navigateur a créé ici deux branches qui aboutissent aux nœuds head et body.

En continuant ainsi à parcourir cet arbre, on peut dire que :

  • À partir du nœud head, le navigateur a créé une seule branche qui se termine par le nœud title,
  • À partir du nœud body, le navigateur a créé deux branches qui se termine par les nœuds h1 et p.

L'arborescence du DOM se termine par des nœuds correspondants aux textes contenus dans les différentes balises.

De cet exemple, on peut en déduire que le DOM d'un document HTML peut contenir des nœuds qui représentent entre-autre :

  • Un élément HTML, on parle alors de nœud de type ELEMENT_NODE,
  • Un texte, on parle alors de nœud de type TEXTE_NODE.

L’un des intérêts majeurs du DOM et des nœuds va être qu’on va pouvoir se déplacer de nœuds en nœuds pour manipuler des éléments en utilisant le JavaScript.


Avant d'interagir avec le HTML, il faut attendre que le navigateur ait fini de charger le DOM, d'où l'utilisation obligatoire de l'attribut defer dans les balises <script>.
<script src="js/script.js" defer></script>


Accéder aux éléments du DOM

Les interfaces "Document" et "Element"

L'interface Document représente la page web chargée dans le navigateur et sert de point d'entrée dans l'arborescence du DOM. Elle contient notamment les propriétés et les méthodes qui vont permettre au JavaScript d'accéder aux différents éléments du DOM.


Cette interface est automatiquement instanciée pour créer un objet document qui sera directement accessible dans le code JavaScript. L'interface Element représente une partie de la page web. Elle permet de faire référence à un élément du DOM et d'avoir accès à son contenu et son style. Un élément est typiquement constitué d'une balise ouvrante avec ou sans attributs, du contenu et d'une balise fermante.


Exemple :

<h1>Titre principal</h1>
Tout élément du DOM récupéré par le JavaScript sera stocké dans une variable.


Récupérer des éléments par l'attribut "id"

Pour récupérer un élément à partir de attribut id, on dispose de la méthode getElementById() que l'on va appeler depuis l'objet document. Cette méthode renvoie un objet Element qui représente l'élément dont l'attribut id correspond à la valeur spécifiée en argument.

getElementById() permet d'accéder à un élément particulier dès lors qu'il possède un id.

Exemple :

  • Code HTML :
<h1 id="title">Titre principal<h1>
  • Code JavaScript :
const title = document.getElementById('title');



Les variables représentant une référence vers un élément du DOM peuvent être considérées comme des variable à assignation unique, leurs déclarations avec const parait mieux adaptée.


Récupérer des éléments par le nom de la balise HTML

Tout élément peut être aussi récupéré à partir de son nom de balise, pour cela, on dispose de la méthode getElementsByTagName(). Cette méthode renvoie une liste de type HTMLCollection qui contient tous les éléments trouvés dans le DOM et dont le nom de balise correspond à la valeur spécifiée en argument. Chaque élément peut alors être récupéré séparément en indexant la liste retournée.


Exemple :

  • Code HTML :
<p>Voici un premier paragraphe !</p>
<p>En voici le second.</p>
  • Code JavaScript :
const paragraphes = document.getElementsByTagName('p');


Dans cet exemple, la méthode getElementsByTagName() retourne dans la variable paragraphe une liste qui contient les deux éléments correspondant aux deux paragraphes contenus dans le document HTML. Cette variable va retourner une collection HTML dans lequel nous pouvons retrouver les deux paragraphes sous forme de tableau. De plus, le nombre de tableau dans la propriété lenght est présente :



Ainsi, afin d'accéder à chaque paragraphe, il est possible de chercher un paragraphe particulier :

  • paras[0] fait référence au premier paragraphe trouvé dans le document,
  • paras[1] fait référence au deuxième paragraphe trouvé dans le document.



Le terme getElementsByTagName() parcourt toutes les branches du DOM et met à jour la liste au fur et à mesure des éléments trouvés :

  • Code HTML :
<p>Un premier paragraphe</p>
<div><p>Un deuxième paragraphe dans la div</p></div>
<p>Un autre paragraphe</p>
  • Code JavaScript :
const paragraphes = document.getElementsByTagName('p');




Le getElementsByTagName() peut être utilisée aussi depuis l'interface Element pour récupérer des éléments contenus uniquement dans une partie du DOM :

  • Code HTML :
<p>Un premier paragraphe</p>
<div id="div1"><p>Un deuxième paragraphe dans la div</p></div>
<p>Un autre paragraphe</p>
  • code JavaScript :
const div1 = document.getElementById('div1');     // On récupère dans le DOM la partie  correspondant à la div qui a pour id "div1"
const p_div1 = div1.getElementsByTagName('p');    // On récupère la liste des paragraphes contenus uniquement dans cette div



Récupérer les éléments par l'attribut "class"

Tout élément peut être aussi récupéré à partir de son attribut class, pour cela, on dispose de la méthode getElementsByClassName(). Cette méthode renvoie une liste de type HTMLCollection qui contient tous les éléments trouvés dans le DOM et dont l'attribut class correspond à la valeur spécifiée en argument. Chaque élément peut alors être récupéré séparément en indexant la liste retournée.


Exemple :

  • Code HTML :
<h1 id="titre1">Titre principal</h1>
<p class="article">Un premier paragraphe de la classe "article"</p>
<div id="div1"><p>Un deuxième paragraphe qui n'est pas de la classe "article"</p></div>
<p class="article">Un autre paragraphe de la classe "article"</p>
  • Code JavaScript :
const p_article = document.getElementsByClassName('article');


Dans cet exemple, getElementsByClassName() retourne dans la variable p_article la liste de tous les éléments contenus dans le document HTML et qui ont la classe "article".



Comme pour getElementsByTagName(), la méthode getElementsByClassName() parcourt toutes les branches du DOM et met à jour la liste au fur et à mesure des éléments trouvés.

Exemple :

  • Code HTML :
<h1 class="titre">Titre principal</h1>
<p class="article">Un premier paragraphe de la classe "article"</p>
<div id="div1">
    <h2 class="titre">Sous titre</h2>
    <p>Un deuxième paragraphe qui n'est pas de la classe "article"</p>
</div>
<p class="article">Un autre paragraphe de la classe "article"</p>
  • Code JavaScript :
const titres = document.getElementsByClassName('titre');




De même, getElementsByClassName() peut être utilisée depuis l'interface Element pour récupérer des éléments contenus uniquement dans une partie du DOM.

Exemple :

  • Code HTML :
<h1 class="titre">Titre principal</h1>
<p class="article">Un premier paragraphe de la classe "article"</p>
<div id="div1">
    <h2 class="titre">Sous titre</h2>
    <p>Un deuxième paragraphe qui n'est pas de la classe "article"</p>
</div>
<p class="article">Un autre paragraphe de la classe "article"</p>
  • Code JavaScript :
const div1 = document.getElementsById('div1');                // On récupère dans le DOM la partie  correspondant à la div qui a pour id "div1"
const titres_div1 = div1.getElementsByClassName('titre');     // On récupère la liste des éléments qui ont la classe "titre" uniquement dans cette div



Récupérer un ou plusieurs éléments à partir de son sélecteur CSS

La dernière possibilité de récupérer un élément du DOM est de le faire en le ciblant avec le sélecteur CSS qui lui est associé.


Rappel :

Un sélecteur CSS permet de désigner un ou plusieurs éléments du code HTML sur lesquels s'applique une règle CSS. Un sélecteur CSS peut être un sélecteur simple ou composé, ou encore une chaîne de sélecteurs simples ou composés séparés par des combinateurs qui correspondent aux signes > ou + ou espace blanc.


Exemples de sélecteurs CSS :



Le terme "querySelector()"

Pour récupérer un élément du DOM à partir de son sélecteur CSS, on dispose de la méthode querySelector(). Cette méthode renvoie le premier élément trouvé dans le document qui correspond au sélecteur ou au groupe de sélecteurs spécifiés.


Voici un exemple :

  • Code HTML :
<h1 class="titre">Titre principal</h1>
<p class="article">Un premier paragraphe de la classe "article"</p>
<div id="div1">
    <h2 class="titre">Sous titre</h2>
    <p>Un deuxième paragraphe qui n'est pas de la classe "article"</p>
</div>
<p class="article">Un autre paragraphe de la classe "article"</p>
  • Code JavaScript :
/*
*  On récupère dans le DOM le premier élément dont l'attribut class est égal à "titre"
*/
const titre1 = document.querySelector('.titre');


/*
*  On récupère la balise <div> dont l'attribut id est égal à "div1"
*/
const div1 = document.querySelector('#div1');


/*
*  On récupère la première balise <p> se trouvant dans la balise <div> 
*  dont l'attribut id est égal à "div1"
*/
const p_div1 = document.querySelector('#div1 p');


Aperçu dans la console du navigateur :




La méthode querySelector() peut se substituer à la méthode getElementById().

Exemple :

const div1 = document.getElementsById('div1');
const div1 = document.querySelector('#div1');          // Équivalent du getElementById()


Le terme "querySelectorAll()"

Il existe également la méthode querySelectorAll() qui permet de récupérer la liste des éléments qui correspondent au groupe de sélecteurs spécifiés :

  • code HTML :
<h1 class="titre">Titre principal</h1>
<p class="article">Un premier paragraphe de la classe "article"</p>
<div id="div1">
    <h2 class="titre">Sous titre1</h2>
    <p>Un deuxième paragraphe qui n'est pas de la classe "article"</p>
    <h2 class="titre">Sous titre2</h2>
    <p>Un troisième paragraphe qui n'est pas de la classe "article"</p>
</div>
<p class="article">Un autre paragraphe de la classe "article"</p>
  • code JavaScript :
/*
*  On récupère tous les  éléments du DOM qui correspondent à une balise <p>
*/
const paras = document.querySelectorAll('p');


/*
*  On récupère  tous les éléments du DOM dont l'attribut class est égal à "titre"
*/
const titres = document.querySelectorAll('.titre');


/* 
*  On récupère tous les éléments qui correspondent à une balise <p> et qui se trouvent à l'intérieur
*  de la balise <div> dont l'attribut id est égal à "div1"
*/
const paras_div1 = document.querySelectorAll('#div1 p');

Dans chaque cas, querySelectorAll() retourne dans la variable correspondante une liste qui contient les éléments ciblés par le sélecteur CSS utilisé. Chacun de ces éléments est accessible en indexant cette liste.


Voici un aperçu de la console du navigateur :

  • Liste des éléments contenus dans la variable paras :


  • Liste des éléments contenus dans la variable titres :


  • Liste des éléments contenus dans la variable paras_div1 :




La méthode querySelectorAll() peut se substituer aux méthodes getElementsByTagName() et getElementsByClassName().

Par exemple, les instructions getElementsByTagName('p'); et querySelectorAll('p'); sont identiques :

const paras = document.getElementsByTagName('p');
const paras = document.querySelectorAll('p');            // Équivalent du getElementsByTagName("p")


De même que les instructions sont identiques :

const titres = document.getElementsByClassName('titre');
const titres = document.querySelectorAll('.titre');      // Équivalent du getElementsByClassName("title")



Les termes querySelector() et querySelectorAll() peuvent être utilisées aussi depuis l'interface Element pour récupérer des éléments contenus uniquement dans une partie du DOM :

  • Code HTML :
<p>Un premier paragraphe qui n'est pas dans une div</p>
<div>
    <p>Un deuxième paragraphe qui est dans la première div</p>
    <p>Un troisième paragraphe qui est dans la première div</p>
</div>
<div><p>Un quatrième paragraphe qui est dans la deuxième div</p></div>
<p>Un dernier paragraphe qui n'est pas dans une div</p>
  • Code JavaScript :
const document_div = document.querySelector('div');       // On récupère la première div du document HTML
const div_Paras = document_div.querySelectorAll('p');     // On récupère tous les paragraphes contenus dans la première balise <div>


Aperçu dans la console du navigateur :




Accéder au texte contenu dans un élément du DOM avec "textContent"

La propriété textContent permet de récupérer et de modifier le texte contenu dans un élément du DOM. Pour cela, il faut définir une référence vers l'élément en question puis utiliser la propriété textContent sur cette référence.


Voici un exemple :

  • Code HTML :
<p id="p1">Bonjour je m'appelle John</p>
  • Code JavaScript :
const p1 = document.getElementById('p1');    // Référence vers le paragraphe dont on veut récupérer le texte
let texte_p1 = p1.textContent;               // Récupération du texte dans la variable texte_p1


Aperçu dans la console du navigateur :




Afin de modifier le texte contenu dans un élément, il suffit alors de modifier la valeur de textContent :

const p1 = document.getElementById('p1');    // Référence vers le paragraphe dont on veut récupérer le texte
let texte_p1 = p1.textContent;               // Récupération du texte dans la variable texte_p1
texte_p1 = texte_p1 + " et j'ai 21 ans.";    // Modification du texte
p1.textContent = texte_p1;                   // Mise à jour du texte dans le  paragraphe


Aperçu dans la console du navigateur :




La page Web correspondant au fichier HTML est également mise à jour en direct :




Modifier le style d'un élément avec la propriété "style"

La propriété style est définie dans l'interface HTMLElement, elle permet de définir les styles en ligne d'un élément HTML (les styles seront placés dans la balise ouvrante de l'élément). Cette propriété retourne un objet représentant l'attribut style dont les propriétés JavaScript représentent les propriétés CSS de l'élément.


Pour modifier une propriété CSS d'un élément du DOM, il faut définir une référence vers l'élément en question puis utiliser la propriété style sur cette référence et enfin désigner la propriété qui doit être modifiée avec la nouvelle valeur.


Exemple :

  • Code HTML :
<p id="p1">Bonjour je m'appelle John.</p>
  • code JavaScript :
const p1 = document.getElementById('p1');    // Référence vers le paragraphe dont on veut modifier une propriété CSS
p1.style.color = 'white';                    // Modification de la couleur du texte contenu dans le paragraphe p1
p1.style.background = 'black';               // Modification de l'arrière plan du texte contenu dans le paragraphe p1
p1.style.fontSize = '25px';                  // Modification de la taille de la police


Après avoir passé les différentes instructions JavaScript, le CSS de notre balise #p1 a été modifié. Nous pouvons le constater en inspectant le code HTML du site :



Le JavaScript a ajouté dans la balise l'attribut style avec toutes les propriétés qui ont été modifiées.

Voici également le rendu visuel du navigateur :




Les noms utilisés avec style pour définir les propriétés CSS doivent respecter la norme "Lower Camel Case" : elles doivent être écrites sans espace ni tiret, avec une majuscule au début de chaque mot sauf pour le premier.

Par exemple, la propriété CSS background-color s'écrira backgroundColor.


La propriété style ne permet pas de récupérer le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section ou des feuilles de style externes.


Créer, ajouter ou supprimer un élément dans le DOM

En JavaScript, il peut être intéressant de manipuler les éléments du DOM en JavaScript comme la création, l'ajout ou la suppression d'éléments. Cela peut être assez sympas dans le cadre de créer un système afin d'ajouter dynamiquement en JavaScript du texte dans une balise <div> (un système de commentaire par exemple).


Créer un élément avec "createElement()"

Pour créer un nouvel élément HTML en JavaScript, on dispose de la méthode createElement() de l'interface Document. Cette méthode doit être appelée depuis l'objet document et va prendre en argument une chaine de caractère qui correspond au nom de l'élément HTML (tagName) que l'on souhaite créer.


Exemple :

const newPara = document.createElement('p');


Cette instruction a permis de créer une nouvelle balise <p> qui ne contient pour l'instant ni attribut ni texte et qui n'a pas encore été inséré dans le DOM.

Pour insérer du texte dans ce nouvel élément, on pourra utiliser la propriété textContent

const newPara = document.createElement('p');
newPara.textContent = 'Je suis un paragraphe créé en JavaScript !';


Insérer un élément dans un autre avec "append()" et "prepend()"

Les méthodes append() et prepend() permettent d'insérer un nouvel élément à l'intérieur d'une balise.


  • prepend() permet d'insérer le nouvel élément en tant que premier enfant de la balise sélectionnée (juste après la balise ouvrante),
  • append() permet d'insérer le nouvel élément en tant que dernier enfant de la balise sélectionnée (juste avant la balise fermante).

En voici un exemple :


  • Code HTML :
<body><div><p>Je suis un paragraphe créé en HTML !</p><div>
</body>
  • Code JavaScript :
// Définition de la référence vers la div dans laquelle on veut insérer les nouveaux éléments
const div = document.querySelector('div'); 

// Création des paragraphes à insérer  
const newPara1 = document.createElement('p');       
const newPara2 = document.createElement('p');

// Initialisation du contenu textuel des paragraphes
newPara1.textContent = 'Un paragraphe créé en JavaScript, placé devant la balise <div>.';              
newPara2.textContent = 'Un autre paragraphe créé en JavaScript, placé à la fin de la balise <div>.';

// Insertion du premier paragraphe au tout début de la div
div.prepend(newPara1);

// Insertion du second paragraphe à la fin de la div
div.append(newPara2);


Aperçu dans la console du navigateur :




Supprimer un ou plusieurs éléments du DOM avec "remove()"

La méthode remove() permet de retirer un élément dans l'arborescence du DOM.

Exemple :

newPara2.remove();   // Supprime le paragraphe newPara2 du DOM


On peut également utiliser cette fonction pour supprimer une liste d'éléments.

Par exemple, on souhaite supprimer tous les paragraphes contenus dans le bloc div.

let paras = div.querySelectorAll('p');    // On sélectionne tous les paragraphes contenus dans le bloc div

for (let i = 0; i < paras.length; i++) {
    paras[i].remove();                    // On va parcourir la liste des paragraphes pour les supprimer un à un
}


Activité 1 : Calcul d'IMC - Affichage des informations du patient dans un formulaire HTML

Dans un premier temps, on souhaite afficher les informations du patient dans une page Web en utilisant un formulaire. Avec votre code du projet "IMC", il est demandé de créer un formulaire visuel pour le client.


Étape 1

Créez le formulaire dans le fichier HTML :

  • Tous les éléments du formulaire doivent être codés à l'intérieur d'un bloc <form></form>,
  • On peut regrouper les éléments à l'intérieur d'une balise fieldset pour l'affichage d'un cadre autour des éléments avec un titre.
<form><fieldset><legend>Visualisation des informations du patient</legend><!-- Les éléments du formulaire --></fieldset>
</form>


  • La largeur du formulaire peut être ajustée en ajoutant dans le fichier CSS une règle fixant la valeur de la propriété width pour la balise <fieldset> :
fieldset {
  width: 500px;
}


Visualisation du résultat :




Étape 2

Les informations du patient seront affichées dans le formulaire en utilisant des balises <p>, pour chacune de ces balises on la complétera avec un texte qui correspond à l'information qu'elle contient et une balise <span> avec un attribut id pour afficher la valeur.


Exemple :

<p>Nom : <span id="nom"></span></p>

Complétez le formulaire de manière à ce que toutes les informations du patient puissent être affichées dedans.


Aperçu du résultat :




Étape 3

Complétez le fichier CSS en ajoutant une règle qui permet d'afficher en plus gras le texte contenu dans la balise <span> représentant l'IMC. Développez les instructions JavaScript qui correspondent à la définition de la classe Patient :

  • Le constructeur de cette classe devra initialiser les propriétés qui caractérisent le patient : nom, prenom, age, sexe, taille et poids,
  • En plus du constructeur, cette classe comprendra :
  • La méthode calculerIMC() pour à mettre à jour la propriété imc,
  • La méthode interpreterIMC() pour retourner l'interprétation de l'IMC en tenant compte de la correction à apporter selon le sexe du patient (cf. Codage d'un constructeur d'objet pour le calcul de l'IMC, 2ème version).
Attention : dans cette version, les méthodes calculerIMC() et interpreterIMC() ne seront plus des fonctions internes et devront donc pouvoir être appelées directement depuis l'objet.


Créez l'objet objPatient à partir des données suivantes :




Développez les instructions qui permettent de définir les références vers les balises <span> contenues dans le formulaire.


On notera ces références text_xxx avec xxx désignant la propriété associée (par exemple, text_nom pour la référence vers la balise <span> qui contient le nom du patient).

Développez les instructions qui permettent de mettre à jour le texte contenu dans les balises <span> du formulaire avec les valeurs des propriétés de l'objet objPatient.

Testez ensuite votre programme et vérifiez que les valeurs sont bien affichées dans le formulaire.




Étape 4

Pour afficher l'IMC, on souhaite utiliser des couleurs différentes selon la situation dans laquelle se trouve le patient :




Afin de spécifier la couleur du texte, nous utiliseront une chaine de caractères qui contient le code couleur en hexadécimal :

  • Dénutrition : #FF6600
  • Maigreur : #FFCC00
  • Corpulence normale : #008000
  • Surpoids : #FFCC00
  • Obésité modérée : #FF6600
  • Obésité sévère : #FF0000
  • Obésité morbide : #660000

Rendu visuel :




Développez les instructions JavaScript qui permettent d'adapter la couleur du texte qui sera affiché pour l'IMC en fonction de la situation du patient.


Activité 2 : Calcul d'IMC - Affichage des informations du patient dans un tableau HTML

On souhaite maintenant afficher les informations du patient en utilisant un tableau HTML.


Étape 1

Remplacez le formulaire par un tableau dans le fichier HTML :

  • Le contenu du tableau doit être codé à l'intérieur d'un bloc <table></table>,
  • Pour créer une ligne dans le tableau, on utilise la balise <tr>,
  • Pour ajouter des cellules, on utilise la balise <td>.

Exemple d'un tableau regroupant les données d'utilisateurs :



Voici un exemple de la structure d'un tableau HTML :

<table>
    <thead>
        <tr>                    <!-- Ligne contenant les en-têtes du tableau -->    
            <th>Nom</th>        <!--    Colonne #1    -->
            <th>Prénom</th>     <!--    Colonne #2    -->
            <th>Âge</th>        <!--    Colonne #3    -->
        </tr>
    </thead>
    <tbody>
        <tr>                    <!-- Première ligne du tableau -->
            <td>Reese</td>      <!--    Première cellule de la première ligne   -->
            <td>John</td>       <!--    Deuxième cellule de la première ligne   -->
            <td>21 ans</td>     <!--    Troisème cellule de la première ligne   -->
        </tr>
        <tr>                    <!-- Deuxième ligne du tableau -->
            <td>Martin</td>     <!--    Première cellule de la deuxième ligne   -->
            <td>Harold</td>     <!--    Deuxième cellule de la deuxième ligne   -->
            <td>30 ans</td>     <!--    Troisème cellule de la deuxième ligne   -->
        </tr>
        <tr>                    <!-- ........ -->
            <td>Miller</td>     <!--    ........   -->
            <td>Alice</td>      <!--    ........   -->
            <td>25 ans</td>     <!--    ........   -->
        </tr>
    </tbody>
</table>


Étape 2

Les informations du patient seront affichées dans le tableau en utilisant pour chaque cellule un identifiant qui correspond à l'information qu'elle contient.


Créez la structure du tableau HTML de manière à :

  • Attribuer à toutes les cellules leur identifiant,
  • Que le texte affiché dans les cellules représentant l'IMC et son interprétation soit affiché en gras.

Nous pouvons appliquer un code CSS minimaliste afin de visualiser convenablement le tableau :

table {
  border-collapse: collapse;
}

th, td {
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}


Aperçu du résultat :



Étape 3

Modifiez le code JavaScript afin de mettre à jour le contenu des cellules du tableau avec les valeurs des propriétés de l'objet objPatient.


Codez les instructions JavaScript qui permettent d'adapter selon la situation du patient la couleur du texte affiché dans les cellules qui contiennent l'IMC et son interprétation.

Testez votre programme et vérifiez que les valeurs sont bien affichées dans le tableau.




Activité 3 : Calcul d'IMC - Affichage des données correspondant à une liste de patients dans un tableau HTML

On souhaite afficher dans une page Web et à l'aide d'un tableau HTML les données concernant une liste de patients, ces données étant stockées dans un tableau JavaScript.


Étape 1

Créez le tableau dans le fichier HTML en lui attribuant l'identifiant "patients_IMC". Ajoutez uniquement dans ce tableau la ligne qui contient les entêtes. Les lignes contenant les données seront créées dynamiquement par le code JavaScript.

Recopiez dans le fichier CSS, les règles CSS définies pour le tableau dans le projet précédent. Recopiez dans le fichier js, les instructions JavaScript qui correspondent à la définition de la classe Patient.


Étape 2

Créez les objets représentant les patients qui seront mis dans la liste à partir du tableau suivant :




Déclarez et initialisez le tableau tabPatients avec ces objets. Développez ensuite la fonction ajouter_Patient(patient). Cette fonction doit retourner un élément HTML correspondant à la ligne qui sera ajoutée au tableau dans la page Web. Cette ligne devra contenir toutes les cellules dans lesquelles seront affichées les informations du patient.


Pour cela, dans la fonction ajouter_Patient(patient) on devra :

  • Créer l'élément HTML correspondant à la ligne du tableau qui devra être ajoutée,
  • Créer dans un tableau les éléments HTML correspondant aux cellules qui devront être ajoutées à la ligne précédente,
  • Attribuer aux différentes cellules les valeurs correspondant aux informations contenues dans l'objet représenté par le paramètre patient,
  • Modifier la propriété CSS qui permet d'afficher en gras le texte pour les cellules représentant l'IMC et son interprétation,
  • Attribuer à ce même texte la couleur qui correspond à la situation du patient,
  • Ajouter les cellules à la ligne,
  • Retourner la ligne.

Codez les instructions qui permettent d'appeler la fonction ajouter_Patient(prmPatient) pour compléter le tableau HTML avec toutes les informations contenues dans le tableau tabPatients.


Résultat attendu :


Niveau Débutant

Technologie utilisée :

Proposer une modification
Antoine
Par Antoine
Rédigé le Vendredi 28 Octobre 2022