How to link an external JavaScript file

In this tutorial, we show you how to link an external JavaScript file (file extension end with .js) to web page.

Note
In HTML, you can either embed JavaScript on web page or external JavaScript file, or implemented both ways together.

1. External JavaScript file

Create a new file end with “.js” file extension, and put JavaScript code inside. That’s all, you just created an external JavaScript file :)


//file : hello.js

function sayHelloToThisPerson(name){
	alert('hello : ' + name);
}
//run above js function when this js is loaded
sayHelloToThisPerson('mkyong');

2. Include it in web page

To include above hello.js file in your web page, add a new <script> with src attribute :


<html>
	<head></head>
	<body>
		<h1>JavaScript is funny</h1>
		<script type="text/javascript" src="hello.js"></script>
	</body>
</html>

P.S Make sure the “src” attribute is pointing to the correct external js file path.

3. Demo

link external javascript file to web page
Performance
You can put “script” tag inside the “head” or “body” tag, however, to make your page load faster, it’s always recommended to put the “script” tag at the end of your page content.

Download Source Code

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
6 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
ChristianAhmad KhanAtherJSJD Recent comment authors
newest oldest most voted
JS
Guest
JS

Thanks a Lot… Couldn’t find an easier explanation and such an easy to follow sample anywhere. Exactly wat i needed!!

Christian
Guest
Christian

God bless you my friend.

Ahmad Khan
Guest
Ahmad Khan

Can you please tell me how can i run a pop ad script code on onload page. i am using popads code on my site that run on onclick event i want to run that code on Onload page can you help about that issue

Ather
Guest
Ather

How to add it in jsp . i am using netbeans ide

JD
Guest
JD

Hi,I am a starter at javascript and I’m strugling with external javascript. Please can u help me in the follwing: //This is for 1 page// var images=new Array(); images[0]=new Image(); images[0].src=”Bob1.jpg”; images[1]=new Image(); images[1].src=”Bob2.jpg”; images[2]=new Image(); var step=0; function slide() { document.images.slideImage.src = images[step].src; if (step<2) { step++; } else{ step = 0; } } window.onload = setInterval(slide, 2000); } //…and this for another page// window.onload = init; function init(){ var button = document.getElementById("enterNameButton"); button.onclick = handleButtonClick; } function handleButtonClick() { var textInput = document.getElementById("NameTextInput"); var Name = textInput.value; alert("Hello " + Name); } So I want both to work… Read more »

anu
Guest
anu

If we want to keep javascript files in a folder in eclipse..then how do we link the same from a jsp page …I am doing my project in Eclipse..
Thank You..