JavaScript code can be included anywhere in an HTML document. But there are following best ways to include JavaScript in HTML files.
In the following sections we will see how JavaScript can be included differently:
In the
If you want to run a script on some event, when the user clicks somewhere, like, then the head of the script should look like this:
<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 the following results:
JavaScript in the
If a script is required for page loading so that the script generates page content to run, place the script in the
section of the document. In this case, it is not necessary to use all the functionality defined by JavaScript:<html> <head> </head> <body> <script type="text/javascript"> <!-- document.write("Hello World") //--> </script> <p>This is web page body </p> </body> </html>
JavaScript in the
You can put JavaScript code in the
and sections exactly 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>
In JavaScript external file:
When you start working more extensively with JavaScript, you may find that there are situations where you reuse the same JavaScript code in multiple pages of your site.
You are not limited to keeping the same code in multiple HTML files. The script tag provides a mechanism that allows JavaScript to be stored in an external file and then included into an HTML file.
Here is an example to illustrate how to use script tags and the src attribute to include an external JavaScript file in HTML code:
<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 all the JavaScript code in a simple text file ".js" using an extension, and then include the file as shown above.
For example, you can keep the content of filename.js in the following file, and then use sayHello function in the HTML file after including the filename.js file:
function sayHello() { alert("Hello World") }