In this article, you will learn how to add 3 Ways on how to add javascript to HTML document.
JavaScript (JS) is client-side scripting language that is used for web applications development in order to create interactive and resoonsive web pages.
The term "Script" used simply means that JavaScript is not a standalone language i.e it requires support from other languages before it can function as a language.
For example, JavaScript programs cannot get executed without the help of HTML or without integrated into HTML code.
However, though JavaScript is not a standalone language, it can still be used to leverage server resources. Take for instance, a case where you need to valid email address or user password. With Javascript, the round trip to server is avoided.
You might like
Simple Javascript Calculator
You can add javascript to your HTML page using any of the following three ways.
- External file
- Embedding code
- Inline code
External JavaScript File is a text file that is created having Javascript codes as its content and saved as ".js" file extension.
When this file is created, it can be included or reference in the HTML document using the src attribute of the script tag. External JavaScript File is very helpful if we want to use the same code in more than one HTML documents. It also saves you from the stress and time 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.
First, you should create a folder that will contain the external Javascript file and the HTML pages as well.
Your folder should be name
"Javascript Practical" and should have sub-folder name
"script"
If you need steps on how to create a folder then check
Now that you have created the folder and subfolder, open a Notepad and type or paste the following codes
function hi()
{
alert ("Hi, welcome to Javascript External file Usage");
}
Now save it as "hi.js" inside the script subfolder you created earlier.
Also, you should create the HTML document as depicted below
<html>
<head>
<title>Referencing External JavaScript File</title>
<script src="script/hi.js"></script>
</head>
<body>
<form>
<input type="button" value=">>Ok>>" onclick="hi();"/>
</form>
</body>
</html>
Output
Note; external JavaScript file only contains JavaScript code and nothing else, even the opening and closing script tags are also not used in it.
For you to embed JavaScript code into your HTML pages, you can either wrap all your javascript codes inside the opening and closing script tag of the HTML or define JavaScript code in the body tag.
To get this more clearly, we should dive into a simple example.
In this example, we are going to we are going to sum two numbers.
<!DOCTYPE html>
<html>
<head>
<title>Embedding Javascript Codes</title>
<script>
function add(){
var num1 = 4;
var num2 = 4;
document.write("The sum of 4 + 4 is: " + parseInt (num1) + parseInt(num2));
}
add();// autorun the add function
</script>
</head>
<body>
</body>
</html>
Output:
The sum of 4 + 4 is: 8
How to add JavaScript to html
We can also define the JavaScript code in the body tags or body section as shown below
<!DOCTYPE html >
<html>
<head>
<title>Embedding Javascript Codes</title>
</head>
<body>
<script>
function add(){
var num1 = 4;
var num2 = 4;
document.write("The sum of 4 + 4 is: " + parseInt (num1) + parseInt(num2));
}
add();// autorun the add function
</script>
</body>
</html>
Output:
The sum of 4 + 4 is: 8
This method is commonly used when we have to call a function in an HTML element's event attributes.
Let's see with the help of an example, how we can add JavaScript directly in the html without using the script tag.
<!DOCTYPE html >
<html>
<head>
<title>Javascript Inline Code Example</title>
</head>
<body>
<input type="button" value="Test Inline Javascript Code" onClick="alert('Welcome to Emmason Community!');"/>
<p> in this example we saw how to use inline JavaScript or directly in an HTML tag. </p>
</body>
</html>
Output
That is all. Thanks for reading!