Interagir avec le HTML

Formation Soyez un druide du JavaScript !

Tutorial Thumbnail

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.


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