JavaScript - Exercise 04 -External JavaScript Files

Table of Contents

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.
Step 3: Link JavaScript file main.js to the ex04.html 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 onload = "message()" 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.

External JavaScript Document

Linking JavaScript File to HTML

Output to the Browser

Ads Blocker Detected!!!