Commentaires

Le templating literals



Nous allons maintenant voir une autre façon de créer de nouveaux éléments dans le DOM avec le templating.

Arthur, l'apprenti développeurJe ne sais pas pourquoi mais ce mot templating literals me fait peur, je sens que ça va être compliqué...

Pas vraiment, tu as déjà fait des chaines de caractères en javascript?

Arthur, l'apprenti développeurOui, c'est assez simple
{"language":"text/javascript","content":"let chaine = \"Hello World\";","filename":""}



C'est bien ça, on peut faire une chaine de caractères avec des simple ou double quote.

Arthur, l'apprenti développeurDouble quoi?

C'est le nom en anglais de l'apostrophe, simple quote, et du guillemet, double quote.

Arthur, l'apprenti développeurEt tu ne peux pas dire apostrophe ou guillemet?

Je pourrais, mais il faut prendre l'habitude des termes anglais, car on les retrouve partout sur internet dès qu'on fait des recherches. Donc avec des simple ou double quote on peut faire des chaines de caractères classique, mais il y a un troisième caractère qui permet lui aussi d'en faire, mais avec des avantages, c'est le backtick.

Arthur, l'apprenti développeurBacktick?

L'accent grave si tu préfères, on peut donc faire :

{"language":"text/javascript","content":"let chaine1 = 'Hello World';\nlet chaine2 = \"Hello World\";\nlet chaine3 = `Hello World`;","filename":""}


Arthur, l'apprenti développeurOk, je ne vois pas de différence...

Passage à la ligne


Par ce que dans cet exemple il n'y en a pas, mais il y a bien deux différences avec les backtick, la première étant que l'on peut définir une chaine de caractères sur plusieurs lignes, alors qu'on ne peut pas le faire avec des simples ou doubles quotes :

{"language":"text/javascript","content":"// erreur\nlet chaine1 = 'Hello \nWorld';\n\n// erreur\nlet chaine2 = \"Hello \nWorld\";\n\n// ok\nlet chaine3 = `Hello \nWorld`;","filename":""}


Arthur, l'apprenti développeurHum, d'accord mais je ne vois pas trop l'utilité...

Si on reprend notre exemple précédent de card avec titre, image, description et date, ça va être pratique !

{"language":"text/javascript","content":"let chaine = `<div class=\"card\">\n\t\t\t\t <span class=\"title\">Titre de la card</span>\n\t\t\t\t <img class=\"picture\" alt=\"Texte alternatif de l'image\" src=\"https://www.training-dev.fr/Img/Shared/training-dev-v3_250.png\">\n\t\t\t\t <span class=\"description\">Description de la card</span>\n\t\t\t\t <date class=\"date\">Date de la card</date>\n\t\t\t </div>`;","filename":""}


Arthur, l'apprenti développeurAh oui je comprend, on peut même faire l'indentation du html?

Oui on peut, et c'est bien plus pratique pour s'y retrouver.

Arthur, l'apprenti développeurEt du m'as dit deux avantages

Interpolation de variables



Effectivement, et le deuxième c'est l'interpolation de variables.

Arthur, l'apprenti développeurL'interpo quoi?

Interpolation, encore une fois c'est un gros mot pour quelque chose de simple et très pratique. Tu as déjà du voir la concaténation de variables?

Arthur, l'apprenti développeurEuh, tu peux parler français?

ça :
{"language":"text/javascript","content":"let prenom = \"Aurélien\";\nlet chaine = \"Bonjour\" + prenom;","filename":""}


Arthur, l'apprenti développeurAh oui je m'en sert tout le temps !

Mettre un plus après une chaine de caractère et ajouter une variable c'est ce que l'on appelle de la concaténation. Pour notre HTML ça pourrait être pratique :

{"language":"text/javascript","content":"let card = {\n\ttitle : \"Le logo de training-dev\",\n\timg : {\n\t\tsrc: \"https://www.training-dev.fr/Img/Shared/training-dev-v3_250.png\",\n\t\talt: \"logo training-dev\",\n\t},\n\tdescription: \"Voici le nouveau logo de training-dev\",\n\tdate: \"21/02/2022\"\n}\n\nlet chaine = `<div class=\"card\">\n\t\t\t\t <span class=\"title\">` + card.title + `</span>\n\t\t\t\t <img class=\"picture\" alt=\"` + card.img.alt + `\" src=\"` + card.img.src + `\">\n\t\t\t\t <span class=\"description\">` + card.description + `</span>\n\t\t\t\t <date class=\"date\">` + card.date + `</date>\n\t\t\t </div>`;","filename":""}


Arthur, l'apprenti développeurAh oui c'est bien ça !

Oui, mais grâce aux backtick, il y a encore plus pratique avec l'interpolation, pour cela, il suffit de préciser une variable au milieu de ${<variable>}

{"language":"text/javascript","content":"let card = {\n\ttitle : \"Le logo de training-dev\",\n\timg : {\n\t\tsrc: \"https://www.training-dev.fr/Img/Shared/training-dev-v3_250.png\",\n\t\talt: \"logo training-dev\",\n\t},\n\tdescription: \"Voici le nouveau logo de training-dev\",\n\tdate: \"21/02/2022\"\n}\n\nlet chaine = `<div class=\"card\">\n\t\t\t\t <span class=\"title\">${card.title}</span>\n\t\t\t\t <img class=\"picture\" alt=\"${card.img.alt}\" src=\"${card.img.src}\">\n\t\t\t\t <span class=\"description\">${card.description}\"</span>\n\t\t\t\t <date class=\"date\">${card.date}\"</date>\n\t\t\t </div>`;","filename":""}


Arthur, l'apprenti développeurEt ça marche?

Exactement de la même façon.

Ajout de l'élément dans le DOM



Arthur, l'apprenti développeurOk, il ne reste plus qu'à l'afficher si je ne me trompe pas? Toujours avec appendChild?

Et bien non, car appendChild attend comme paramètre un objet Node, sauf que là on a une chaine de caractère, donc ça ne fonctionnera pas.

Arthur, l'apprenti développeurMais... Pourquoi on fait ça alors si ça ne peut pas fonctionner?

Il y a d'autres façons d'ajouter les éléments au DOM, on peut par exemple modifier le innerHTML d'un élément :



Arthur, l'apprenti développeurOk, effectivement ça a l'air efficace !

Et si on compare au final j'ai fait la même chose que précédemment, mais en beaucoup moins de ligne de code et nettement plus facile à reprendre pour modifier.

Arthur, l'apprenti développeurEffectivement, mais encore une fois, à quel endroit va s'ajouter l'élément?

Là j'ai remplacé le innerHTML donc le contenu précédent a été supprimé et à la place j'ai mis le nouveau contenu. On pourrait aussi utiliser l'opérateur += pour ajouter l'élément à la fin du innerHTML.

Arthur, l'apprenti développeurEt si on veux l'ajouter au début?

Et bien comme précédemment il y a une méthode insertAdjacentHTML qui fonctionne exactement comme insertAdjacentElement, mais avec une chaine de caractère HTML au lieu d'élément Node.

Arthur, l'apprenti développeurOk j'ai tout compris, par contre je vais être honnête, je préfère largement cette méthode à la précédente, je ne comprend pas pourquoi tu ne m'as pas montré ça directement.

Comme je te l'ai dit, chaque méthode à ses avantages et inconvénients, pour le moment nous n'en avons vu qu'un seul, le templating est plus facile à réaliser et le code plus facile à reprendre. Mais il y en a d'autres ! J'ai terminé cette partie
Demander de l'assistance