How to add JavaScript to HTML

JavaScript is one of the scripting languages which is used to make interactive and modern web pages. Without any need of additional plugins, modern web browsers support JavaScript with built-in engines.

Furthermore, while working with web files, JavaScript needs to be executed along with HTML. This can be done either by including inline JavaScript code within the tag of the HTML file or you can add JavaScript through an external file. JavaScript tag either used in the head section of HTML file or in the body section, it only depends where you want to load JavaScript. JavaScript can be written within tags to keep out of the main content of HTML files. If you need JavaScript to execute across a web page layout then the script is usually called into the body section.

JavaScript can be used in numerous ways in web pages like validation of the form, creating warning alerts, and much more. In this article, we will go through how to incorporate JavaScript into HTML files in depth.

Following are the ways to incorporate JavaScript into HTML files.

Embedding code

The …tag is used to add JavaScript into web pages which helps to wrap JavaScript within the HTML programs. The code of Javascript can be either under the body section or head section depending on the structure of the application.

Example1: JavaScript in head section

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/1-20.jpg" data-lazy- height="146" src="data:image/svg xml,” width=”580″>

Example2: JavaScript in the body section

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/2-20.jpg" data-lazy- height="147" src="data:image/svg xml,” width=”517″>

Inline code

When you need to call a function into HTML attributes then an inline code of JavaScript is used. JavaScript code can be used directly in various events like OnMouseover(), OnClick(), and many more. Main points should be kept in mind while using inline scripts:

• Useful for small scripts or scripts which only execute within one file.
• Difficult to read and understand if scripts are larger or used in several pages.

Example1: This example shows how to incorporate JavaScript into HTML without tags.

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/3-20.jpg" data-lazy- height="119" src="data:image/svg xml,” width=”487″>

Example2:

In the above example, whenever the user loads the web page the script displays an alert message showing the current date.

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/4-18.jpg" data-lazy- height="165" src="data:image/svg xml,” width=”571″>

External file

JavaScript code can be written in a separate file with an extension of “.js” and then included in the HTML file. JavaScript file name can be included in the “src” attribute of the script. External files of JavaScript code can be reusable. Therefore, separate files for JavaScript code save you from rewriting the same software program. External files are much easier to manage.

Example:

In this example, there are two files, index.html, and datescript.js. External file i.e. datescript.js included in the body section of the HTML file named as index.html. JavaScript named datescript.js is used to show the current date whenever the user loads the web page. Both .html and .js files are placed in the same folder.

Index.html

Datescript.js

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/5-17.jpg" data-lazy- height="147" src="data:image/svg xml,” width=”566″>

Conclusion

In this article, we demonstrate how to add JavaScript into HTML files. Subsequently, we discussed each method in-depth in order to incorporate JavaScript into your web pages. We discussed three ways for adding JavaScript into HTML files i.e. inline code, external files, and embedding code. Examples are also provided for each method to help you understand.