How to add JavaScript to html

JavaScript, also known as JS, is one of the scripting (client-side scripting) languages, that is usually used in web development to create modern and interactive web-pages. The term "script" is used to refer to the languages that are not standalone in nature and here it refers to JavaScript which run on the client machine.

In other words, we can say that the term scripting is used for languages that require the support of another language to get executed. For example, JavaScript programs cannot get executed without the help of HTML or without integrated into HTML code.

JavaScript is used in several ways in web pages such as generate warning messages, build image galleries, DOM manipulation, form validation, and more.

Adding JavaScript to HTML Pages

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

Embedding code
Inline code
External file

We will see three of them step by step

I. Embedding code:-

To add the JavaScript code into the HTML pages, we can use the <script>.....</script> tag of the HTML that wrap around JavaScript code inside the HTML program. Users can also define JavaScript code in the <body> tag (or we can say body section) or <head> tag because it completely depends on the structure of the web page that the users use.

We can understand this more clearly with the help of an example, how to add JavaScript to html

Example

<!DOCTYPE html >
<html>
<head>
<title> page title</title>
<script>
document.write("Welcome to Javatpoint");
</script>
</head>
<body>
<p>Inthis example we saw how to add JavaScript in the head section </p>
</body>
</html>

Output:

We can also define the JavaScript code in the <body> tags or body section.

Let's understand through an example.

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

Output

II. Inline code:-

Generally, this method is used when we have to call a function in the HTML event attributes. There are many cases (or events) in which we have to add JavaScript code directly eg., OnMover event, OnClick, etc.

Let's see with the help of an example, how we can add JavaScript directly in the html without using the <script>.... </script> tag.

Let's look at the example.

<!DOCTYPE html >
<html>
<head>
<title> page title</title>
</head>
<body>
<p>
<a href="#" onClick="alert('Welcome !');">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

III. External file:-

We can also create a separate file to hold the code of JavaScript with the (.js) extension and later incorporate/include it into our HTML document using the src attribute of the <script> tag. It becomes very helpful if we want to use the same code in multiple HTML documents. It also saves us from the task of writing the same code over and over again and makes it easier to maintain web pages.

In this example, we will see how we can include an external JavaScript file in an HTML document.

Let's understand through a simple example.

<html>
<head>
<meta charset="utf-8">
<title>Including a External JavaScript File</title>
</head>
<body>
<form>
<input type="button" value="Result" onclick="display()"/>
</form>
<script src="hello.js">
</script>
</body>
</html>

Now let's create separate JavaScript file

Hello.js

function display() {
alert("Hello World!");
}

Output

Both of the above programs are saved in the same folder, but you can also store JavaScript code in a separate folder, all just you need to provide the address/path of the (.js) file in the src attribute of <script> tag.

Important points

JavaScript files are common text files with (.js) extensions such as we created and used in the above program.

External JavaScript file only contains JavaScript code and nothing else, even the <script>.... </script>tag are also not used in it.

The HTML noscript Element

The <nosscript> element provides us an alternate way to create content for the users that either have browsers that don?t support the JavaScript or have disabled JavaScript in the browser.

This element can contain any HTML element other than the <script> tag that can be included in the <HTML> element.

Let's understand it more clearly with the help of an example:

Program

<!DOCTYPE html>
<html>
<body>
<h1>Thenoscript element</h1>
<p>If the user have a browser with JavaScript disabled will show the text inside the noscript element and "Hello World!" will not be displayed.</p>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser may not support JavaScript! orJavaScript is disabled in your browser </noscript>

</body>
</html>

In the above program, we have used the javascript to print the message "Hello World!" and also used <nonscript> element to print the message " Sorry, your browser may not support JavaScript! Or JavaScript is disabled in your browser". The <nonscript> element will print this message only if JavaScript is disabled in the user's browser or his browser does not support JavaScript at all.

Let's see what output we get when we run the above given program in the JavaScript enabled browser.

Output

Now, let's see what output we will get when we run the same program in a JavaScript disabled browser (or in a browser that does not support JavaScript).

Output

Example 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript> //This element will print the given message only when the execution of the  <script> tags does not take place.
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>

Let's run the above given program in the JavaScript enabled browser.

Output