How to add JavaScript to HTML

Guide to how to add JavaScript to HTML – JavaScript, sometimes known as JS, is a scripting language (also known as client-side scripting) that is commonly used in web development to generate modern and interactive web pages. The term “script” is used to describe non-standalone programming languages, such as JavaScript, which runs on the client system.

To put it another way, the term scripting refers to languages that require the assistance of another language to execute. JavaScript scripts, for example, cannot be run without HTML or without being embedded in HTML code.

In websites, JavaScript is used to create warning messages, build picture galleries, manipulate the DOM, validate forms, and more.

Adding JavaScript to HTML Pages

There are following three ways in which users can add JavaScript to HTML pages.

  1. Embedding code
  2. Inline code
  3. External file

Method 01: Embedding code

To embed JavaScript code in HTML pages, we may use the HTML <script>…../script> tag, which wraps JavaScript code inside the HTML programme. Because it fully relies on the structure of the web page that the users use, users may also define JavaScript code in the <body> tag (or we can say body section) or the <head> tag.

With the aid of an example, we can better understand how to add JavaScript to HTML.

Example 01:

<!DOCTYPE html >  
<html>  
<head>  
<title>Softhunt.net</title>  
<script>  
document.write("Welcome to Softhunt.net Tutorial Website");  
</script>  
</head>  
<body>  
<p>In this example we saw how to add JavaScript in the head section </p>  
</body>  
</html>  

Output:

Embedding code example

We can also define the JavaScript code in the tags or body section. Let’s understand through an example.

Example 02:

 <!DOCTYPE html >  
<html>  
<head>  
<title>Softhunt.net</title>  
</head>  
<body>  
<script>  
document.write("Welcome to Softhunt.net Tutorial Website");
</script>  
<p> In this example we saw how to add  JavaScript in the body section </p>  
</body>  
</html>  

Output:

Embedding code body example

Method 02: Inline code

This approach is often utilized when we need to call a function via the HTML event properties. Many situations (or events) require us to enter JavaScript code directly, such as the OnMover event, OnClick event, and so on.

Let’s look at how we can use JavaScript directly in the HTML without utilizing the <script>…. /script> tag, using an example.

Example 03:

 <!DOCTYPE html >  
<html>  
<head>  
<title>Softhunt.net</title>  
</head>  
<body>  
<p>  
<a href="#" onClick="alert('Welcome to Softhunt.net Tutorial Website');">Click Me</a>  
</p>  
<p> in this example we saw how to use inline JavaScript or directly in an HTML tag. </p>  
</body>  
</html>  

Output:

Inline code JavaScript to HTML Example

Method 03: External file

We may alternatively create a separate file with the (.js) extension to store the JavaScript code and then use the src attribute of the <script> element to incorporate/include it into our HTML content. When we want to use the same code in multiple HTML documents, it comes in handy. It also spares us from having to write the same code over and over again, making web page maintenance easier.

Let’s have a look at an example for easier understanding

Example 04:

index.html:

 <html>  
<head>  
<meta charset="utf-8">  
<title>Softhunt.net</title>  
</head>  
<body>  
<form>  
<a href="#" onclick="display()">Click Me</a>/>  
</form>  
<script src="index.js">  
</script>  
</body>  
</html>  

index.js:

function display() {  
  alert("Welcome to Softhunt.net Tutorial Website");  
  }  

Output:

External file JavaScript to HTML Example

Both of the programs above are stored in the same folder, but you may save JavaScript code in a different location by specifying the address/path of the (.js) file in the src attribute of the <script> tag.

Conclusion of Adding JavaScript to HTML

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

Suggested Articles:

  1. How to Use PHP in HTML Pages

Leave a Comment