Home >Web Front-end >JS Tutorial >Example of inserting JavaScript code in HTML_Basics
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 93f0f5c25f18dab9d176bd4f6de5d30e... 3c7b149cc556f883a18b3c490b028d4e section of JavaScript:
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 6c04bd5ca3fcae76e30b72ad730ca86d... dbf4a1b9d12965251b02d12dd197d73e section:
If a script is required for page loading so that the script generates page content to run, place the script in the 6c04bd5ca3fcae76e30b72ad730ca86d 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 6c04bd5ca3fcae76e30b72ad730ca86d and 93f0f5c25f18dab9d176bd4f6de5d30e sections:
You can put JavaScript code in the 93f0f5c25f18dab9d176bd4f6de5d30e and 6c04bd5ca3fcae76e30b72ad730ca86d 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") }