How to add JavaScript to HTML

In this tutorial, we will learn how to add javascript to html file. 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.

Lets move ahead and learn how to add javascipt file to html

Different Ways To Add JS File To HTML File :

There are typically three ways to add JavaScript to a web page:

🡪Embedding the JavaScript code between a pair of <script> and </script> tag.

🡪Creating an external file and add JavaScript file to html with the .js extension and then load it within the page through the src attribute of the <script> tag.

🡪Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

Embedding the Javascript Code

You can embed the JavaScript or Javascript add to html code directly within your web pages by placing it between the <script> and </script> tags. The <script> tag indicates the browser that the contained statements are to be interpreted as executable script and not HTML. Here’s an example:

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Here I AM";
    document.write(greet); 
    </script>
</body>
</html>

Output :

Here I AM

External Javascript Code

You can also place your JavaScript code into a separate file with a .js extension, and then call that file in your document through the src attribute of the <script> tag, like this:

<script src=”js/hello.js”></script>

This is useful if you want the same scripts available to multiple documents. It saves you from repeating the same task over and over again, and makes your website much easier to maintain.

Well, let’s create a JavaScript file named “hello.js” and place the following code in it:

Example :

// A function to display a message
function sayHello() {
    alert("Hello World!");
}
// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

Now, you can call this external JavaScript file within a web page using the <script> tag, like this:

—————————————————————————————————–

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

Javascript Code Inline

You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

However, you should avoid placing large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your JavaScript code difficult to maintain. Here’s an example:

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

How to add JavaScript to HTML If you use same JavaScript in different pages, This is not best things to do. You should create an external JavaScript file instead of writing the same script over and over again.

Make a script file and save with .js extension then you can link the external JavaScript file using src attribute in <script> tag.

<script type="text/javascript" src="custom.js"></script>

<script> – This tag is used to define a script, such as a JavaScript.
type – specify the type of the script i.e. “text/javascript”
src – script file name and path i.e. “custom.js” with the correct path.

Path May be:

Absolute URL – Refer to another website (src=”https://developerhelps/custom.js”)
Relative URL – Refer to a file within a website (src=”/scripts/custom.js”)

Note: To link a JavaScript file with your HTML, you only have to add the source of the script inside the <body> tag or <head> tag.

Javascript in HTML Examples

Example 1 :

<html>
<head>
</head>
<body>

<script type="text/javascript" src="custom.js"></script>
</body>
</html>

Example 2 :

<html>
<head>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>

</body>
</html>

JavaScript Frameworks

A Framework is basically a library of code for a certain language. Generally, the framework abstracts common tasks and makes it easier and faster for designers and developers to write their specific code. Frameworks do not really do anything by themselves, they just provide an easier platform for people to build on.

Common JavaScript Frameworks :

JavaScript File Sizes

Many JavaScript files can tend to be rather large, which can slow down the load time of your page. Popular frameworks usually offer a “minified” version of their code. You should always use this version in your pages because it will have a smaller file size.

Thanks for the reading post. I hope you like and understand the post. If you have any doubt regarding this post please comment below.