Attach external JavaScript file to html web page

Today’s topic is,

Attach external JavaScript file to html web page

You’ll be learning the very basics of HTML – How to Attach or Link an external JavaScript file to your HTML web page.

Attach external JavaScript file to html - PepFryWhat is JavaScript?

This Scripting Language was developed by Netscape to enable Web Authors/Creators to design user interactive websites. JavaScript interacts with HTML source code, since JavaScript is embedded inside HTML, thus enabling Web authors to develop sites with dynamic content.

Advantage of using JavaScript file

Again here, you can use the same JavaScript on numerous Web pages instead of applying the same Script on every pages. Attaching JavaScript files are very much useful when you are using dynamic websites that runs over CMS(Content Management System).

How to create an External JavaScript file?

If you have Dreamweaver follow these steps:

  •  Open Dreamweaver
  •  Go to the File menu and click New OR press Ctrl+N
  •  It will promt you with several options, please click on JavaScript
  •  Save(Ctrl+S) it on your local drive

If you do not have Dreamweaver follow these steps:

  •  Right click on your Desktop, click on New next click on Text Document
  •  Rename it to something as you wish, let it be Script.js
  •  Do not forget to add .js at the very end, that makes it a JavaScript file

How to attache/link that external JavaScript file to your Web page?

Attach external JavaScript file to html - PepFry

Attach external JavaScript file to html

  •  Open you HTML file
  •  Go to the top of the file, find </head>
  •  Apply the following code

There will be so many confusions like:

  •  What if your JavaScript is somewhere else in your hard drive?

See screenshots below to understand where the JavaScript should be placed and how to attach when JavaScript files are placed elsewhere.

1) When your JavaScript is in the same level as your HTML file use the below way of linking

Attach external JavaScript file to html - PepFry

Attach external JavaScript file to html



To show that your JavaScript file is in the same level as your HTML file- we directly access the Script file. So, it tells that:

  • Since, your HTML file and Script file are in the same level
  • Directly access your script file

2) When your JavaScript is in the next level after your HTML file use the below way of linking

Attach external JavaScript file to html - PepFry

Attach external JavaScript file to html



To show that your JavaScript file is a level ahead from your project folder – we directly insert a  /[Forward slash]. So, it tells that:

  • First to go inside the JS folder directly – since, your HTML file and JS folder are in the same level
  • Then access your script file

3) When your JavaScript is in the previous level before your HTML file use the below way of linking

Attach external JavaScript file to html - PepFry

Attach external JavaScript file to html



To show that your JavaScript file is a level back from your project folder – we insert .. [double period] before the the /. So, it tells that:

  • First to go back a level from your project folder
  • Then go into the JS folder there
  • Finally access your script file

Done! your JavaScript is attached to your Web page.

Hope absolute beginners would have found this tutorial “Attach external JavaScript file to html web page“much useful! Thanks for going through thoroughly.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">