Vous en avez assez d'écrire plusieurs lignes de code HTML similaire ? Si vous l'êtes, vous pouvez automatiser le processus en utilisant des littéraux de modèle en JavaScript. Voyons comment nous pouvons le faire.
Disons que vous avez plusieurs boîtes qui sont en fait des hyperliens et que vous souhaitez en créer plusieurs.
Une façon consiste simplement à copier et coller le code HTML et à apporter des modifications à une section particulière du code. Cette approche peut fonctionner pour de petits projets, mais si votre projet est assez grand, cela peut devenir un gâchis.
Alternativement, vous pouvez créer votre propre générateur HTML en utilisant des modèles littéraux en JavaScript qui généreront du code HTML pour vous !
modèle littéraux en JavaScript
Les littéraux de modèle en JavaScript ne sont que des littéraux de chaîne qui vous permettent d'intégrer diverses expressions dans la chaîne. Ils sont enfermés dans des backticks. Pour incorporer une expression, la syntaxe va comme ceci,
Créons maintenant le générateur HTML.
Créez des champs de saisie respectifs pour l'URL du lien, le titre et une balise. Vous pouvez également ajouter vos propres champs de saisie si vous le souhaitez.
Ensuite, créez un champ de zone de texte textarea dans lequel le code résultant sera affiché ainsi qu'un bouton pour copier le code dans le presse-papiers.
JavaScript
Nous allons créer une fonction nommée generate(). Cette fonction a trois paramètres — title, url et tag. Il prendra la valeur du titre, de l'url et de la balise (tag) que nous avons saisie dans le champ en tant qu'arguments.
function generate(title, url, tag){
//code
}
De plus, nous utiliserons des littéraux de modèle et nous intégrerons le title, l'url et la balise tag dans la chaîne. Ensuite, définir la valeur du champ de résultat sur la chaîne qui est générée.
Tout cela aura lieu après que l'utilisateur aura cliqué sur le bouton de génération donc ajoutons-lui donc un eventListener.
Afin de copier le code de la zone de texte, nous pouvons définir une fonction appelée copy(), puis appeler la fonction lorsque l'utilisateur clique sur le bouton « copier dans le presse-papiers ».
voici un bref demo
Maintenant, vous pouvez copier le code dans votre projet principal. Ce n'est qu'un des cas d'utilisation des littéraux de modèle. Vous pouvez faire beaucoup de choses en utilisant des littéraux de modèle en JavaScript. Ils vous facilitent la vie en tant que développeur JavaScript.
je suis disponible sur @twitter , et linkedin , vous pouvez me contacter , je vous reponds en 24h ... merci et n'oubliez pas de partager autour de vous ..
Prochaine Formation
Apprenez le développement web en pratiquant Pendant ces vacances 2021, les jeunes togolais qui s'intéressent de pret ou de loin au développement web sans encore avoir la possibilité d'apprendre concrètement l'ESSENTIEL peuvent profiter pour se lancer. C'est l'occasion de démystifier les langages et outils des professionnels du web à travers 180minutes/jr de pratique pendant 2 semaines. Ce programme exceptionnel est offert par TogoDevelopers et la SDFAcademy.
Merci