Comment lier JavaScript à HTML
JavaScript est un langage de script très populaire qui est utilisé à la fois sur le côté client que sur le côté serveur. JavaScript est nécessaire pour nos pages Web car il rend notre page Web interactive.
Il existe trois exigences de base pour devenir un développeur frontal:
- Html,
- CSS,
- Javascrip
HTML est raccourci pour le langage de balisage hyper texte qui fournit une structure à notre page Web et CSS donne un style à nos pages. Enfin, JavaScript comme mentionné précédemment rend notre page Web interactive. JavaScript aide également à modifier HTML et CSS.
Maintenant, une question se pose que comment pouvons-nous lier / connecter JavaScript avec HTML. Aujourd'hui, dans cet article, nous explorerons presque toutes les façons dont nous pouvons lier JavaScript à HTML.
Qu'est-ce qu'une balise de script?
Avant d'entrer dans la solution de la façon de lier JavaScript à HTML, regardons la balise de script.
Le La balise est utilisée pour intégrer les scripts côté client qui sont javascript. Cette balise a des éléments de script ou des références à un autre fichier de script à l'aide de l'attribut SRC.
Syntaxe
Ceci est une balise de script avec un attribut SRC dans lequel nous pouvons fournir un nom de fichier que nous voulons référencer.
Utilisation de JavaScript dans le fichier html
Nous pouvons lier JavaScript à HTML en ajoutant tout le code JavaScript dans le fichier html. Nous y parvenons en utilisant la balise de script qui a été expliquée plus tôt. Nous pouvons mettre la balise soit à l'intérieur de la tête du HTML ou à la fin du corps. C'est totalement à nous où nous voulons le mettre et quand nous voulons que JavaScript se charge. Les programmeurs appellent généralement la balise de script chaque fois qu'ils souhaitent générer du contenu ou appliquer une action. Donc, en regardant le code suivant, c'est une bonne pratique de charger JavaScript après le corps HTML.
Regardons un exemple:
Exemple
Dans cet exemple, nous avons d'abord créé un bouton dans HTML. Nous définissons un événement pour cliquer. Chaque fois qu'un utilisateur clique sur ce bouton le myfunc () La fonction sera activée. Après cela, nous avons mis un étiqueter. Tout le code JavaScript est allé ici. Nous mettons une fonction avec le nom de myfunc () où nous avons montré une alerte.
Toutes nos félicitations! Nous avons réussi à lier JavaScript avec HTML en ajoutant du code JavaScript à l'intérieur de la balise de script.
Cette méthode est bonne pour les petites pages Web ou une page Web. Cependant, à mesure que votre application Web augmente, le code de script va également grossir et il deviendra vraiment difficile à gérer et à lire. La solution consiste à écrire JavaScript dans un fichier JavaScript séparé dédié et à fournir la référence du fichier JavaScript dans le fichier html.
Utilisation de JavaScript dans un fichier externe
L'utilisation d'un fichier externe pour des scripts plus grands est bénéfique car nous pouvons diviser notre code en différentes pages JavaScript ainsi que dans différents fichiers. Il est réalisé en faisant référence au nom de fichier JavaScript dans l'attribut «src» de la balise de script dans le fichier html.
Changeons un peu l'exemple précédent. Le code restera le même. Nous ferons un autre fichier JavaScript par le nom de «Code.JS ". Nous allons mettre tout le code JavaScript dans le «code.Fichier JS »et fournissez le" code.référence js »dans le fichier html.
Par exemple
Nous avons référencé le «code.js”Fichier à l'aide de l'attribut Src de étiqueter.
Maintenant le code.js déposer:
fonction myfunc ()alert ("vous avez cliqué sur moi");
Le résultat sera le même que l'exemple précédent i-e.
Avantages du fichier JavaScript externe
Indiquez officiellement certains des avantages après avoir discuté du fichier JavaScript externe:
- Il sépare notre code HTML et notre code JavaScript
- Le code JavaScript devient lisible et maintenable.
- Un autre avantage est que les fichiers JavaScript mis en cache agissent pour accélérer le chargement de la page.
Sélecteurs javascript
Dans les exemples précédents, nous avons pris l'aide d'un événement. Supposons que nous ne voulons pas ajouter un événement et nous voulons sélectionner un élément dans le fichier HTML. JavaScript nous aide en offrant différentes options à ce sujet qui sont appelées sélecteurs JavaScript.
Sélecteurs javascript La fonction principale est de sélectionner un élément HTML et d'effectuer différentes actions à ce sujet en fonction de nos besoins. JavaScript offre différentes options pour cela, l'une d'elles est l'ID.
Nous pouvons donner à un élément un attribut ID dans HTML puis y accéder en javascript. Nous accédons en javascript par:
document.getElementById ("idname");L'identification est unique et utilisée pour un seul élément.
JavaScript nous donne également la possibilité de sélectionner un élément à l'aide d'un attribut de classe. Nous pouvons utiliser le nom de classe pour différents éléments. La syntaxe est:
document.queySelector (".nom du cours");Une autre option que JavaScript nous donne consiste à accéder aux éléments JavaScript à l'aide de noms de balises. Syntaxe pour accéder aux noms de balises:
document.getElementsByTagName ("p");
Exemple:
Html
Javascrip
const btn = document.getElementById ("btn");btn.addEventListener ("click", function ()
alert ("vous avez cliqué sur moi");
)
Dans cet exemple, nous avons accédé à l'élément bouton à l'aide de GetElementById (). Après cela, nous mettons un événement que chaque fois qu'un utilisateur clique sur le bouton, une alerte doit être affichée.
Nous pouvons atteindre la même sortie si nous utilisons:
const btn = document.queySelector ("btn");Il convient de garder à l'esprit que nous devons définir l'attribut de classe dans l'élément bouton.
Conclusion
Lier JS avec HTML rend votre site Web dynamique et interactif. Dans cet article, nous vous avons appris à lier JavaScript à HTML. Nous avons discuté des deux principales façons d'atteindre cette tâche.
Le premier était d'utiliser JavaScript dans le fichier HTML. Le second utilisait JavaScript en dehors du fichier HTML à l'aide d'un fichier JavaScript. Pour être un développeur frontal, il est nécessaire de travailler à la fois dans HTML et JavaScript et cet article vous a montré comment les lier à la fois.