How to add JavaScript in HTML?

Leave a Comment / JavaScript / By

In this blog, you will learn to add JavaScript in HTML. JavaScript is one of the scripting languages that is used in web development to create modern and interactive web pages. There is a lot of difference between JavaScript and java so don’t consider them one language.

JavaScript is also known as JS. JavaScript programs cannot be executed on their own. They are always executed with the help of HTML code.

There are three ways to add JavaScript in HTML:-

  1. Embedding code
  2. Inline Code 
  3. External File
JavaScript

Let’s Discuss each Way to add JavaScript in HTML one by one:-

  1. Embedding Code:- To add this type of JavaScript in HTML, we use the <script> tag inside the HTML file. We can add this tag in the <body> as well as in the <head> tag usually depending on the structure of the website. The code and output for both types are:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Embedded Code</title>
        <script>
            document.write(“Welcome to our Blog”)
        </script>
    </head>
    <body>
        <h1>CodeBlockx</h1>
        <h3>Solution of all your coding problem</h3>
    </body>
</html>

OUTPUT

Index1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Embedded Code</title>
    </head>
    <body>
        <h1>CodeBlockx</h1>
        <h3>Solution of all your coding problem</h3>
        <script>
            document.write(“Welcome to our Blog”)
        </script>
    </body>
</html>

OUTPUT

Types of JavaScipt

2. Inline code:- This type of code of JavaScript is used when we have to use call functions in the HTML event attribute. The code and output of this type will be:- 

Index2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Inline Code</title>
    </head>
    <body>
        <h1>CodeBlockx</h1>
        <h3>Solution of all your coding problem</h3>
        <a href=”#” onclick=”alert(‘You are on Codeblockx’);”>Click Here</a>
    </body>
</html>

OUTPUT

Inline JavaScript

3. External File:- This type of JavaScript is used to make a different file for JavaScript with the extension .js. This file is added to the HTML file with the help of the src attribute under the script tag. This file is very helpful as it helps to reuse the code and helps in the easy maintenance of the website. The code for this type of file will be:-

Index3.html

<!DOCTYPE html>
<html>
    <head>
        <title>External File</title>
    </head>
    <body>
        <h1>CodeBlockx</h1>
        <h3>Solution of all your coding problem</h3>
        <form>
            <input type=”button” value=”Click Here” onclick=”show()”>
        </form>
        <script src=”script.js”>
           
        </script>
    </body>
</html>

Script.js

function show(){
    alert(“You are on Codeblockx”)
}

OUTPUT

External JavaScript

Hope this blog was helpful to you and you have got an answer to adding javaScript in HTML. If you want to learn about adding CSS in HTML. You can check out our detailed blog on it.

Thank you for visiting our blog. If you have doubts related to any coding questions then let us know in the comments section. We will answer them as soon as possible.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *