There are many ways to insert JavaScript into an HTML document. One way is to add the script directly to the HTML document.This method is called adding an “Inline script”.
You can add an inline script at any place within an HTML document, but most web developers like to place the scripts in three locations.
- Head
- Body
- Footer
You have already seen examples of online scripts in exercise 1, exercise 2 and exercise 3.
There is another way to add a JavaScript to an HTML document which is adding an external JavaScript file reference to the HTML page.To help you understand this, we will create a JavaScript file and save it as <span style="color:#cf2e2e" class="tadv-color">main.js</span>. Then create HTML file called <span style="color:#cf2e2e" class="tadv-color">ex04.html</span> and link the <span style="color:#cf2e2e" class="tadv-color">main.js</span> to <span style="color:#cf2e2e" class="tadv-color">ex04.html</span> document.
External JavaScript Document
In this section, you will create a JavaScript file called main.js file and save it to a folder on your desktop.
Step 1: Create a folder called <span style="color:#cf2e2e" class="tadv-color">"</span><span style="color:#cf2e2e" class="tadv-color">Exercise-04</span><span style="color:#cf2e2e" class="tadv-color">"</span> on your Windows desktop.
Step 2: Open the folder, <span style="color:#cf2e2e" class="tadv-color">"</span><span style="color:#cf2e2e" class="tadv-color">Exercise-04</span><span style="color:#cf2e2e" class="tadv-color">"</span> and create a text file and save it as <span style="color:#cf2e2e" class="tadv-color">"</span><span style="color:#cf2e2e" class="tadv-color">main.js</span><span style="color:#cf2e2e" class="tadv-color">".</span>
Step 3: Open the file <span style="color:#cf2e2e" class="tadv-color">"main.js"</span> again and insert the following JavaScript and save it again.
function message()
{
document.write( "<h1>" + "This is another message from External JavaScript" + "</h1>");
document.write("This is paragraph one!");
document.write("This is paragraph two!");
document.write("This is paragraph three!");
}Step 4: Close the file.
Linking JavaScript File to HTML
The next step is to create an HTML file and then link the JavaScript file to the HTML using a reference.
Step 1: Create a new text document called <span style="color:#cf2e2e" class="tadv-color">"ex04.txt"</span> in the <span style="color:#cf2e2e" class="tadv-color">Exercise-04</span> folder on your Windows desktop.
Step 2: Open the text file and insert the following code and save the file as <span style="color:#cf2e2e" class="tadv-color">"ex04.html"</span> in the same location.
Step 3: Link JavaScript file main.js to the <span style="color:#cf2e2e" class="tadv-color">ex04.html</span> file using following code.
<html>
<head>
<title>
External JavaScript : Example-04
</title>
</head>
<body onclick="message()">
<p> THIS IS TEST FOR EXTERNAL JAVA SCRIPT.</p>
<p>CLICK ANYWHERE ON THE PAGE.</p>
</body>
</html>Step 4: Save and close the file.
The final html page should look like the following.
<html>
<head>
<title>
External JavaScript : Example-04
</title>
<script type="text/JavaScript" src="main.js">
</script>
</head>
<body onclick="message()">
<p>THIS IS TEST FOR EXTERNAL JAVA SCRIPT.</p>
<p>CLICK ANYWHERE ON THE PAGE.</p>
</body>
</html>Output to the Browser
To see the output of the HTML and working of external JavaScript, open the HTML file in a browser. You must get the result similar to the following figure, before the onload event. To see this HTML page remove <span style="color:#cf2e2e" class="tadv-color">onload = "message()"</span> from the tag.
You click on the browser window and the following message is printed. If you see the message then external JavaScript is working.
