9. JavaScript: External JavaScript Files

Now its time to move one step ahead and put javaScript code in one separate file and html code in another file. This technique helps to manage code in better way. Lets see how we can do that.

Create a file with name ExternalJSFile.js. js stands for javascript where you can add all javaScript code.

Open javaScript file and add following line and save it.

alert("Hello from external javascript file");

Create HTML file and include ExternalJSFile.js file in it.

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

Remember that to keep everything simple, save your html and javaScript file in same folder.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>Understand Programming</title>
   </head>
 
   <body>
      <script type="text/javascript" src="ExternalJSFile.js"> </script>
   </body>
</html>

Execute html file in your browser, if everything is configured, you shall see the alert message from javaScript file.

 

Download file from GitHub