Le templating literals
Nous allons maintenant voir une autre façon de créer de nouveaux éléments dans le DOM avec le templating.
Je 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?
Oui, 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.
Double quoi?C'est le nom en anglais de l'apostrophe, simple quote, et du guillemet, double quote.
Et 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.
Backtick?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":""}
Ok, 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":""}
Hum, 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":""}
Ah 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.
Et du m'as dit deux avantagesInterpolation de variables
Effectivement, et le deuxième c'est l'interpolation de variables.
L'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?
Euh, tu peux parler français?ça :
{"language":"text/javascript","content":"let prenom = \"Aurélien\";\nlet chaine = \"Bonjour\" + prenom;","filename":""}
Ah 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":""}
Ah 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":""}
Et ça marche?Exactement de la même façon.
Ajout de l'élément dans le DOM
Ok, 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.
Mais... 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 :
Ok, 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.
Effectivement, 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.
Et 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.
Ok 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