Hello guys! afternoon and welcome to another section of my tutorial post on JavaScript. In my last tutorial i talked about how to enable javascript on various browsers and now we are going to be talking about JavaScript that is how and where to place our JavaScript codes in our Html documents.
There is a flexibility given to include JavaScript code anywhere in an Html document. But there are following most preferred ways to include JavaScript in your Html file.
- Script in <head>....</head> section.
- Script in <body>....</body> section.
- Script in <body>....</body> and <head>....</head> section.
- Script in an external file and then include in <head>....</head> section.
In the following section below we will see the various ways in which we can put JavaScript in our Html document.
You can also read our tutorial post on: How to enable JavaScript
JavaScript in <head>....</head> section:
If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello () {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Click" />
</body>
</html>
<head>
<script type="text/javascript">
<!--
function sayHello () {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Click" />
</body>
</html>
JavaScript in <body>....</body> section:
If you need a script to run as the page loads so that the script generates content in the page, the script goes to the <body> section of the Html document. In this case you would not have any function defined using JavaScript:
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is the body of the document</p>
</body>
</html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is the body of the document</p>
</body>
</html>
JavaScript in <body> and <head> section:
You can put your JavaScript code in <body> and <head> section all together as follows:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello () {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Click" />
</body>
</html>
<head>
<script type="text/javascript">
<!--
function sayHello () {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Click" />
</body>
</html>
JavaScript in External File:
As you begin to work extensively with JavaScript, you will likely find out that there are cases where you are reusing identical JavaScript code on multiple pages of a website.
You can also read our tutorial post on: JavaScript Syntax
You are not restricted to be maintaining identical code in multiple Html files. The script tag provides a mechanism to allow you store JavaScript in an external file and then include it into your Html file.
Below is an example to show how to include an external JavaScript file in your Html code using script tag and its src attribute:
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.............
</body>
</html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.............
</body>
</html>
To use JavaScript from an external file source, you need to write your all JavaScript source code in a simple text with extension ".js" and then include that file as shown above.
For example, you can keep following content in filename.js file and then you can use sayHello function in your Html file after including filename.js file:
function sayHello() {
alert("Hello World")
}
alert("Hello World")
}
Alright guys we have come to the end of this tutorial post on JavaScript placement, see you in my next tutorial on JavaScript and thanks for reading. Feel free to drop your questions in the comment box below.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available. Bye for now.