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> sections.
- Script in and external file and then include in <head>...</head> section.
In the following section we will see how we can put JavaScript in different ways:
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="Say Hello" />
</body>
</html>
|
This will produce following result:
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 in the <body>
portion of the 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 web page body </p>
</body>
</html>
|
This will produce following result:
Advertisements
Hello World
This is web page body
|
JavaScript in <body> and <head> sections:
You can put your JavaScript code in <head> and <body> section altogether 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="Say Hello" />
</body>
</html>
|
This will produce following result:
Advertisements
Hello World
|
JavaScript in External File :
As you begin to work more extensively with JavaScript, you will
likely find that there are cases where you are reusing identical
JavaScript code on multiple pages of a site.
You are not restricted to be maintaining identical code in multiple HTML files. The
script tag provides a mechanism to allow you to store JavaScript in an external file and then include it into your HTML files.
Here is an example to show how you can 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>
|
To use JavaScript from an external file source, you need to write
your all JavaScript source code in a simple text file 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")
}
No comments:
Post a Comment