Comment ajouter JavaScript à HTML

Comment ajouter JavaScript à HTML
JavaScript est l'une des langues de script qui est utilisée pour fabriquer des pages Web interactives et modernes. Sans avoir besoin de plugins supplémentaires, les navigateurs Web modernes prennent en charge JavaScript avec des moteurs intégrés.

De plus, tout en travaillant avec des fichiers Web, JavaScript doit être exécuté avec HTML. Cela peut être fait soit en incluant le code JavaScript en ligne dans la balise du fichier HTML, soit vous pouvez ajouter JavaScript via un fichier externe. Tag javascript utilisée dans la section tête du fichier HTML ou dans la section Body, cela ne dépend que de l'endroit où vous souhaitez charger JavaScript. JavaScript peut être écrit dans des balises pour garder le contenu principal des fichiers HTML. Si vous avez besoin de JavaScript pour s'exécuter sur une disposition de page Web, le script est généralement appelé dans la section Body.

JavaScript peut être utilisé de nombreuses façons dans les pages Web comme la validation du formulaire, la création d'alertes d'avertissement et bien plus encore. Dans cet article, nous allons parcourir comment intégrer JavaScript dans les fichiers HTML en profondeur.

Voici les moyens d'intégrer JavaScript dans des fichiers HTML.

Code d'intégration

La balise… est utilisée pour ajouter JavaScript dans les pages Web qui aide à envelopper JavaScript dans les programmes HTML. Le code de JavaScript peut être soit sous la section corporelle ou la section de tête en fonction de la structure de l'application.

Exemple 1: JavaScript dans la section tête



titre de la page



Cet exemple montre comment inclure JavaScript dans la section Head



Sortir:

Exemple2: Javascript dans la section du corps



titre de la page



Cet exemple montre comment inclure JavaScript dans la section Body



Sortir:

Code en ligne

Lorsque vous devez appeler une fonction dans des attributs HTML, un code en ligne de JavaScript est utilisé. Le code JavaScript peut être utilisé directement dans divers événements comme OnMouseOver (), OnClick () et bien d'autres. Les points principaux doivent être gardés à l'esprit lors de l'utilisation de scripts en ligne:

  • Utile pour les petits scripts ou scripts qui ne s'exécutent que dans un fichier.
  • Difficile à lire et à comprendre si les scripts sont plus grands ou utilisés en plusieurs pages.

Exemple 1: Cet exemple montre comment incorporer JavaScript dans HTML sans balises.



titre de la page



Code en ligne


Cet exemple montre comment inclure en ligne JavaScript sans balises de script.



Sortir:

Exemple2:



titre de la page




Dans l'exemple ci-dessus, chaque fois que l'utilisateur charge la page Web, le script affiche un message d'alerte montrant la date actuelle.

Sortir:

Fichier externe

Le code JavaScript peut être écrit dans un fichier séparé avec une extension de «.js ”puis inclus dans le fichier html. Le nom du fichier JavaScript peut être inclus dans l'attribut «SRC» du script. Les fichiers externes du code JavaScript peuvent être réutilisables. Par conséquent, des fichiers séparés pour le code JavaScript vous évitent de réécrire le même logiciel. Les fichiers externes sont beaucoup plus faciles à gérer.

Exemple:

Dans cet exemple, il y a deux fichiers, index.html et datescript.js. Fichier externe I.e. datescript.js inclus dans la section corporelle du fichier HTML nommé comme index.html. Javascript nommé datescript.JS est utilisé pour afficher la date actuelle chaque fois que l'utilisateur charge la page Web. Les deux .html et .Les fichiers JS sont placés dans le même dossier.

Indice.html



Date




Datescript.js

Soit Date = new Date ();
document.corps.innerhtml = "

Date: "+ Date +"

"

Sortir:

Conclusion

Dans cet article, nous montrons comment ajouter JavaScript dans des fichiers HTML. Par la suite, nous avons discuté de chaque méthode en profondeur afin d'incorporer JavaScript dans vos pages Web. Nous avons discuté de trois façons d'ajouter JavaScript dans des fichiers HTML I.e. code en ligne, fichiers externes et code d'intégration. Des exemples sont également fournis pour chaque méthode pour vous aider à comprendre.