Executing separate .js files

Question

I am trying to learn how different .js files can be included in a HTML file, so that my code becomes more modular. I am following this page Can we call the function written in one JavaScript in another JS file?. I am confused at one point, that if I include files like this:

<script language="javascript" src="a.js"> 
<script language="javascript" src="b.js">

If a.js contains:

function alertOne() {
   alert("one");
}

and b.js contains:

function alertTwo() {
   alert("two");
}

then do I need to separately call the functions in HTML file or just including the files like <script language="javascript" src="b.js"> this, would execute alertTwo() function?

Including a Javascript file is essentially the same as just including the Javascript straight into the HTML, the function will **not** auto execute once included. — Nunners, Jan 27 '14 at 13:43
By the way. Did you try it by yourself? This is quite easy to test, IMO. — MrUpsidown, Jan 27 '14 at 13:47
Yes, I tried it myself and I couldn't understand the point, see my comment in Anthony's answer — user227666, Jan 27 '14 at 13:48

score 3 · Accepted Answer · answered Jan 27 '14 at 13:42

3

Your JavaScript files are just declaring the functions. If you want them to actually execute then yes, you'd need to call them at some point. Whether that's inside another .js file, inside a <script> tag in your HTML page, or as part of an event handler on an element, is up to you and depends on what exactly you want.

answered Jan 27 '14 at 13:42

Anthony Grist

38,173
8
62
76

Then what is the point of including the files like ` – user227666 Jan 27 '14 at 13:47
@user227666 Separate .js files makes it easier to re-use and maintain the code. Let's say you wanted those functions in *all* of your pages; if you just put the functions inside ` – Anthony Grist Jan 27 '14 at 13:50
You didn't get my point. Suppose, I have only 1 HTML file and 2 `.js` files like `a.js` and `b.js` like above. So, if I had to call the functions separately for execution then is there any point of ` – user227666 Jan 27 '14 at 13:55
@user227666 Yes, those files declare the functions. You can't call/execute a function if it hasn't been declared first, you'll get an error. You could move the contents of those files into the HTML page instead, but you'd still have to execute the function separately and you'd also be moving into what I discussed in my previous comment. – Anthony Grist Jan 27 '14 at 14:04

score 3 · Answer 2 · answered Jan 27 '14 at 13:44

3

The code

function alertTwo() {
   alert("two");
}

declares a function that can be called later

The code:

function alertTwo() {
   alert("two");
}
alertTwo();

declares a function, and then immediately calls it.

The code:

(function alertTwo() {
   alert("two");
})();

declares a function that immediately calls itself.

It doesn't matter if your code is directly in the HTML file, or included via script tag. Nothing is "executed" or done special via script tag. It's effectively like saying "paste the stuff from that file here."

answered Jan 27 '14 at 13:44

veddermatic

1,082
7
15

Then what is the point of including the files like ` – user227666 Jan 27 '14 at 13:49
There are three major reasons to include script files: one, to keep your HTML page from being 34,124 lines long if you have a lot of javascript. Two, say page A, B, and D need the functionality of __z.js__ but pages C, E, F, G, H and K do not. Why include the file and make another HTTP request for the javascript if it's not needed? Thirdly, if your javascript is copied into 20 different HTML files, and ti changes, you update 20 files... if it's included from a single `.js` file, you update once. – veddermatic Jan 27 '14 at 13:53

score 0 · Answer 3 · answered Jan 27 '14 at 13:46

0

The function alertOne() in a.js can be called from b.js if both a.js and b.js are included in your HTML.

answered Jan 27 '14 at 13:46

MrUpsidown

21,592
15
77
131

Executing separate .js files

3 Answers3