HTML JavaScript


January 19, 2022, Learn eTutorial
1096

In this HTML tutorial, you will learn all about how to use JavaScript in HTML. We will also discuss the various ways to include JavaScript in HTML.

What is the use of JavaScript in HTML?

Client-side scripting is a term that describes the sort of computer programs that are run by a user's web browser. The most widely used client-side scripting language on the internet is JavaScript (JS). The <script> element is used to embed or reference JavaScript within an HTML document in order to improve user experience by adding interactivity to web pages. Form validation, producing alert messages, constructing picture galleries, showing hide content, DOM manipulation, and many other things are some of the most prevalent uses of JavaScript.

How to Add JavaScript to HTML Pages?

JavaScript can be directly included in an HTML page or stored in an external script file and referenced from inside the HTML page. The <script> element is used in both approaches.

Including JavaScript in the HTML document

Simply add the code as the content of an <script> element to embed JavaScript in an HTML document.
 


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script>
        document.getElementById("welcome")[removed] = "Hello World!";
    </script>
</body>
</html>
 

Output:


Hello World

Referencing External JavaScript File

You may alternatively put your JavaScript code in a different file (with a.js suffix) and use the src attribute of the <script> element to call that file in your HTML document. If you want the same script to appear in numerous HTML documents, this is a good option. It saves you from having to do the same thing over and over again, and it makes maintaining your website lot easier.

The <script> element must be empty when the src property is given. Simply stated, you can't use the same <script> element in an HTML document to embed JavaScript and link to an external JavaScript file.


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script src="welcome.js">
    </script>
</body>
</html>
 

Output:


Hello World

What is the use of NoScript Element in HTML?

The <noscript> element is used to provide alternative content for users who have deactivated JavaScript in their browser or who are using a browser that does not support client-side scripting. Aside from <script>, this element can include any HTML components that can be found in the <body> element of a standard HTML page.


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script>
        document.getElementById("welcome")[removed] = "Hello World!";
    </script>
     <noscript>
        <p>Oops! This website requires a JavaScript-enabled browser.</p>
    </noscript>
</body>
</html>
 

In the above example if the browser doesn’t support the JavaScript then it will display the content in the noscript element