Loading Multiple JavaScripts on the same page

Grammaticus · 07-26-2010, 09:05 PM

Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js

script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate.

script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page.

The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting).

At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads.

Any help would be appreciated!

Philip M · 07-26-2010, 09:24 PM

This topic has been covered many times in this forum.

http://www.javascriptkit.com/javatut...iplejava.shtml
http://www.dyn-web.com/tutorials/combine.php
Or you can simply fire a set of functions when the page loads.

Code:

<script type="text/javascript">
window.onload = function() {
functionOne();
functionTwo();
}
</script>

"When I was a kid I used to pray every night for a new bike. Then I realised that The Lord doesn't work that way, so I stole one and asked him to forgive me."

Grammaticus · 07-26-2010, 09:46 PM

I'm sorry, I need a little bit more guidance on how to use this...

Code:

<script type="text/javascript">

I get this; this is what I'm currently using for the single javascript I have implemented and working.

Code:

window.onload =  function(){

So this here is saying "When the window loads, do the following:", yes?

Code:

functionOne();
functionTwo();

Here's what I don't understand - how do I call up to three different JavaScripts here?

Code:

script_a.js;
script_b.js;
script_c.js;

Is that how that would work? And within the code, how do I make sure that the right function loads when the script is called? There are multiple functions feeding into the main output function in each script - how do I get that one function to load when the script is called?

Old Pedant · 07-26-2010, 10:28 PM

You don't call the actual *files*. You do, indeed, need to know the name of the function to be invoked *from* each file.

If each of those files is currently doing its own window.onload=xxxx, then you simply can find those lines and combine the xxxx's as Philip showed you.

Grammaticus · 07-26-2010, 10:47 PM

Okay, I've got that code in the header now, but I'm unclear on how to specify two different external sources for each function.

Old Pedant · 07-26-2010, 11:10 PM

Quote:

Originally Posted by Grammaticus

Okay, I've got that code in the header now, but I'm unclear on how to specify two different external sources for each function.

Sorry. You've lost me. Are you asking how to tell that "universal" onload:

Code:

<script type="text/javascript">
window.onload = function() {
    functionOne();
    functionTwo();
}
</script>

where functionOne and functionTwo are?? You don't need to. The names must be unique, so JS will find them, whichever file they are in.

If your names aren't unique, then you've got problems. Not insurmountable ones, but problems.

Grammaticus · 07-27-2010, 12:58 AM

Okay, now I'm lost... well, even more lost than I was before

. Let me see if I can try to explain myself a little better.

In this block of code:

Code:

<script type="text/javascript">
window.onload = function() {
    functionOne();
    functionTwo();
}
</script>

FunctionOne resides in a file called "script_a.js".

FunctionTwo resides in a file called "script_b.js".

I don't understand how I use this to say "look for FunctionOne in script_a.js".

Assumption: Based on the "<script type=...>" syntax, I'm assuming that this code goes in the HTML header. If that's incorrect, I would appreciate the clarification.

Old Pedant · 07-27-2010, 01:52 AM

Maybe I'm lost, too.

I have *assumed* that you have gotten this far:

Code:

<html>
<head>
<script type="text/javascript" src="script_a.js"></script>
<script type="text/javascript" src="script_b.js"></script>
<script type="text/javascript">
window.onload = function() {
    functionOne();
    functionTwo();
}
</script>
</head>
<body>
...
</body>
</html>

And that indeed the two functions are in the two ".js" files, as you described.

And you say that still does nothing?

Grammaticus · 07-27-2010, 02:53 AM

OH! Yes, this works beautifully!

I figured out what was wrong, I accidentally used one of the JavaScript reserved words in one of my function names. But now this is working PERFECTLY, thank you so much!