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éveloppeur](/Img/Shared/arthur.png)
Pas vraiment, tu as déjà fait des chaines de caractères en javascript?
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
{"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éveloppeur](/Img/Shared/arthur.png)
C'est le nom en anglais de l'apostrophe, simple quote, et du guillemet, double quote.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
Oui on peut, et c'est bien plus pratique pour s'y retrouver.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Interpolation de variables
Effectivement, et le deuxième c'est l'interpolation de variables.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
ça :
{"language":"text/javascript","content":"let prenom = \"Aurélien\";\nlet chaine = \"Bonjour\" + prenom;","filename":""}
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
Exactement de la même façon.
Ajout de l'élément dans le DOM
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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éveloppeur](/Img/Shared/arthur.png)
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