JavaScript – Exercise 04 -External JavaScript Files

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.

  1. Head
  2. Body
  3. 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 main.js. Then create HTML file called ex04.html and link the main.js to ex04.html 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 “Exercise-04” on your Windows desktop.

Step 2: Open the folder, “Exercise-04” and create a text file and save it as “main.js“.

Step 3: Open the file “main.js” 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 “ex04.txt” in the Exercise-04 folder on your Windows desktop.

Step 2: Open the text file and insert the following code and save the file as “ex04.html” in the same location.

<html>
<head>
<title>External JavaScript : Example-04</title>
</head>
<body>
<p> THIS IS TEST FOR EXTERNAL JAVA SCRIPT.CLICK ANYWHERE ON THE PAGE</p>
</body>
</html>

Step 3: Link JavaScript file main.js to the ex04.html file using following code.

Advertisements


<script type="text/javascript" src="main.js">
</script>

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 onload="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

onload = "message()">

from the

  

tag.

Output - HTML Page
Output – HTML Page

You click on the browser window and the following message is printed. If you see the message then external  JavaScript is working.

Output - Final HTML Page after JavaScript executes.
Output – Final HTML Page after JavaScript executes.
Advertisements