HTML documents contain the JavaScript codes. You are provided with a choice to select the place you want to include your JavaScript code in a given HTML document. But to practice uniformity and to make your code more understandable for the audience, there are some standard sections allotted to include your JavaScript code in a given HTML document:
- First section: <head>___</head> (Script in between the head tags.)
- Second section: <body>___</body> (Script in between the body tags).
- Third section: body>___</body> and <head>___</head> (Script in between the head and the body tags).
- Fourth way: The main script file is written in a separate file (located external), then the script file is included in the section between the head tags.
First Section: <head>___</head>
When the JavaScript code is designed to be executed on certain events, meaning the application performs actions when the user interacts with the trigger of that respective action, in such conditions, it is recommended to include the script in between the head tags.
Following is an example of a code for which including the JavaScript code in between the head tags is recommended:
<html>
<head>
<script type = "text/javascript">
<!--
function firstattempt() {
alert("First Attempt")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "firstattempt()" value = "Attempt Number" />
</body>
</html>The output for the program is:
Button named- “Attempt Number”
On clicking the button- First Attempt
Second Section: <body>___</body>
When a web page is designed in such a way that the JavaScript runs and alongside loading of the page takes place, this is done to achieve the simultaneous generation of the content of the page when the respective page is loading. In such conditions, it is recommended to include the script in between the body tags. Also, in such cases, functions (any type) cannot be defined, so it is important first to understand the needs and requirements of the web page and then proceed with this option.
Following is an example of a code for which including the JavaScript code in between the body tags is recommended:
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("First Attempt")
//-->
</script>
<p>Body of the web page</p>
</body>
</html>The output for the program is:
First Attempt
Body of the web page
Third section: body>___</body> and <head>___</head>
When there is the requirement for defining a function and also generating the contents of the web page when the respective page is loading, in such conditions it is recommended to properly include the JavaScript code in between both the head and the body tags.
Following is an example of a code for which including the JavaScript code in between both the head and the body tags is recommended:
<html>
<head>
<script type = "text/javascript">
<!--
function firstattempt() {
alert("First Attempt")
}
//-->
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("First Attempt")
//-->
</script>
<input type = "button" onclick = "firstattempt()" value = "Attempt Number" />
</body>
</html>The output for the program is:
First Attempt
Button named- “Attempt Number”
On clicking the button- First Attempt
Fourth Way: JavaScript code stored in an external file
There is no need to write the code for a JavaScript file if the code for that file is already written, you can easily use that file for your project. This is an important feature provided by JavaScript as it saves time and makes the process of developing applications more efficient.
This can be achieved by using script tags that allow storing of your code in external files and then reusing the same external file according to your requirement. These external JavaScript code files can be easily included in your HTML files for multiple projects.
Also, the src attribute is used when using the script tag.
Following is a sample code that is generally used for including external JavaScript files in your HTML files.
<html>
<head>
<script type = "text/javascript" src = "externalfilename.js" >
</script>
</head>
<body>
.......
</body>
</html>You have to follow a certain procedure when writing an external JavaScript file. The file's code must be written in a text file with an extension “.js”. Now, the respective file (saved) can be included in any HTML file with the help of script tags.
The text in between the head tags from the previous example can be written in an external JavaScript file, and then the external file can be included in the HTML file with the help of script tags, and the function will be included. Also, remember to mention the name of the external JavaScript file of the function in the src attribute.
Function text to be included in the external JavaScript file:
function firstattempt() {
alert("First Attempt")
}
