We can also place some scripts in the body tag and some in the head tag if required.
Scripts placed in the head tag.
All the scripts placed in the head tag will be called only when the user triggers an event or when the function in the script is called.
Consider the following example. I had written a javascript function in the head section. This function will be called only when the user clicks on the button(code for buttons and other controls will be written usually in the body tag) on this webpage.
<html>
<head>
<title>example for scripts written in head section</title>
<script type="text/javascript">
function message()
{
alert("You had triggered an event by clicking the button now. so the function message() in the head section is called onclick of the button and i am displayed here, Nice meeting you")
}
</script>
</head>
<body>
<form>
<input type="button" value="click me to check what happens" onclick="message()">
</body>
</html>
Copy the above code to a notepad and save it with .html extension. Now open the saved file from Internet Explorer. You will get an output similiar to the following output. When you get the button click on it to see the alert box. So here the button is written in body and alert box is written in head. When u click on the button the function containing the alert box in the head section will be called.
Scripts placed in the body tag.
All the scripts placed in the body tag will be called as soon as the page loads. For example if you create a html document with the script in the body tag it will be loaded as soon as the html page opens.
Consider the following example.
I had written a JavaScript code in between the body tags. Save the following code in a notepad with .html extension and check out what is happening. As soon you open the page in Internet Explorer (IE), whatever we had written in between the body tag appears. But whereas if we write the same code in head section it will be called only when the event is triggered or the function is called.
<html>
<head>
<title> Examples for scripts written in body section <title>
</head>
<body>
<script type="text/javascript">
document.write("This message is written when the page loads")
<script>
</body>
</html>
Type the above code in a notepad and save it with .html extension. You will get an output similiar to the following one.
External JavaScript files
If we are coding a large piece of code or if the same JavaScript code written in one Html document has to copied to many other HTML documents, in such cases instead of typing it in every HTML document we can create a separate file which has the JavaScript code in one file and can save it with .js extension instead of .htm extension.
Now after creating this .js file we can insert it in all the HTML documents.
Following is an example of how to insert an external .js file to HTML document.
<html>
<head>
</head>
<body>
<script src="myfile.js">
</script>
<p>
This is an example for inserting an external js file to html doc.here myfile.js is the external javascript file.here we had inserted it in the body tag. We can insert in the same way to the head tag also.
</p>
</body>
</html>
For running the above code you have to create a javascript file with name myfile.js and give the path where the file is placed in your computer in the src attribute.
Usually the path of the external file is given in the src attribute.
