En Javascript, la gestion des interface utilisateur peut se faire directement dans un système de Class qui vont injecter du HTML dans le DOM.
On peut dynamiser l’affichages des datas en utilisant une des fonctionnalités de Javascript ES6, c’est le Template String.
Bref rappel sur ce qu’est que le Template Sting
Il d’agit d’une manière d’afficher les variable avec du text standard. C’est une nouvelle méthode de concaténation.
let name = 'toto'
console.log(`Salut je m’appel ${name}`)
Jusque la c’est bon mais je vais vous monter que l’on peut aller beaucoup plus loin avec cette nouvelle feature d’ES6.
Utiliser le Template Sting pour faire de calcule
Voici une exemple très parlant qui montre comment faire des calcule en utilisant la technique du Template String
let a = 50
let b = 10
console.log(`${(a+b)/2}`)
// 30
Construit du HTML avec le Template String
Ecrire du HTML en JS est un supplice. Maintenant il y à le Template String :
let name = 'toto'
let block = `
<h1>Hello ${name}</h1>;
<p>C’est trop cool le Template String</p>
`;
document.body.innerHTML = block;
Faire de boucle avec avec le Template String
Une autre caractéristique de cette feature c’est que l’on peut imbriquer cette syntaxe pour effectuer des opération complexe comme des boucle!
let fruits = ['pomme', 'poire', 'orange']
let list = `
<p>Liste de fruits (${fruits.length})</p>
<ul>
${fruits.map((fruit, index)=> {
return `<li id="${index}">${fruit}</li>`
}).join(' ')}
</ul>
`;
Les conditions avec le Template String
let fruits = ['pomme', 'poire', 'orange']
let list = `
<p>Liste de fruits (${fruits.length})</p>
<ul>
${fruits.map((fruit, index)=> {
return (fruit !== 'pomme') ? `<li id="${index}">${fruit}</li>` : null
}).join(' ')}
</ul>
`;
On peut aussi utiliser les conditions habituelles de javascript pour effectuer des tests
Cela fonctionne super bien et permet donc de pouvoir générer du HTML très facilement avec du Javascript. On peut Même imaginer des fonction ou méthode dédiée qui retournent le bloc HTML construit à la façon « pure function ».
Je vous laisse vous amuser avec cette feature ES6 et vous retrouve tout bientôt avec d’autre infos pratiques
Vous retrouverez tous les autres articles traitant du même sujet dans la section Programmation
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.