Develop Reference

How to combine all js external script tag to one?

I have to combine all the script tag to one for page speed purpose. I tried merging all the js files but its causing errors with jquery. Following are few scripts i have used.
<script src="/index_files/jquery_002.js" type="text/javascript"></script>
<script src="/index_files/jquery_003.js" type="text/javascript"></script>
<script src="/index_files/mootools-core.js" type="text/javascript"></script>
<script src="/index_files/core.js" type="text/javascript"></script>
<script src="/index_files/respond.js" type="text/javascript"></script>
Please can anyone help me with this.

There are many ways to go about this...
Google's closure compiler is a nice online version
http://closure-compiler.appspot.com/home
If you use Grunt there are many modules for you, I always use requireJS so I use the JS optimizer that comes with it.
Some Name:
Yui compressor
Google Closure compiler
UlgifyJS (pretty sure it combines files too)
If you give me some more info about your project I could help you further.

You could do this multiple ways:
Combine the files using some sort of tool. Closure Compiler is great, or look at something like webpack or rollup for more complex applications
Utilize HTTP/2 to make it equivalent. All modern browsers support HTTP/2 out of the box. You can use this to your advantage by doing server push, which will reduce the number of requests made to the server. Read more here. Note that while this doesn't technically combine the files, it combines them into one request.
Inline them into your body. This would make them one file, but it's generally a bad idea. (looking at you AMP) As for why see #4
Don't! As caching becomes more and more common, combining scripts, especially library scripts, together, can be wasted bandwidth, as User Agents will likely already have jQuery cached. This can be used in conjunction with HTTP/2 for great effect

Splitting code into different Javascript files

I am working on a Javascript/HTML5 canvas based game and so far my JS code is 1200+ lines long.
I am using lots of Objects and lots of different function as well so a question came to my mind.
Is there any possible way to have separate objects in separate JS files and a main file where I would refer to those separated objects in their own JS files? I just want to keep my code simple cause it is starting to look a little messy.
Thank you

Like akluth said, you can use external libraries to "load" your external Javascript files.
If you don't wish to use any of these then it's the gool'ol fashioned JS way: You include all your external files like so:
<script type="text/javascript" src="external/file.js"></script>

You can use requireJS for this - it allows you to seperate your code into AMD modules which can be easily used accross your project.
To have optimized and minified code in your production environment you can use r.js, the requireJS optimizer which allows you to concat all your modules into one minified and uglified file.

The simple answer is yes. You can place each object and its properties and methods in its own file loading each file as Jarrod suggests.
<script type="text/javascript" src="external/main.js"></script>
<script type="text/javascript" src="external/obj1.js"></script>
<script type="text/javascript" src="external/obj2.js"></script>
where 'external' is a directory in the same folder as your HTML file.

Organizing library dependencies in JavaScript best practice

What are peoples thoughts on the best way to organize dependencies in javascript? I know the basics but have some more specific questions. From reading Douglas Crockford and other posts around here, I know to put script tags as late in the body as possible,use minifying, combining all the client-side code into one .js file where applicable, etc.
What is the best way to use libraries though? Say for instance you do the following:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="somelib.min.js"></script>
<script type="text/javascript" src="myappcode.min.js"></script>
Could this be considered too many script tags? Say that myappcode.min.js is dependent on but also modifies certain parts of somelib.min.js -- should you just combine those into one file?
Also is it possible or even a good idea to reference one .js file such as a library inside another .js file, as opposed to just putting one script tag before another in order to reference it in the latter? Coming from a C# background I know that JavaScript is parsed sequentially as opposed to starting in a main() method and proceeding -- so I am guessing the script approach is pretty standard, but wanted to make sure.

You can merge those JavaScript tags into a single tag while still being able to keep all the JS library files separate if you write a JavaScript handler. Check the code for the JS handler in the UC Mobile Web Framework for an example of how you might do this.

It depends on the person looking at it. I don't think 3 script tags is bad, although it's known that reducing the number of HTTP requests improves a websites loading speed (as it decreases the overhead of each individual request).
I would not merge files just for the sake of merging them in my development project. When uploading to a production server however, I'd merge the files together to reduce the number of script tags necessary as you shouldn't care about readablity/etc in a production environment.

Loading a single javascript file from multiple files

I'm trying to load a single javascript in pieces by calling the javascript from external separate files, and was wondering the best way to go about doing this. Specifically, this is a just a basic google maps page, and I want to organize the code a little better. I'm hoping to split the marker variables up into groups and store those groups of variables in separate files, then call those files within the main javascript header of the page. I want to restrict this code to just html and javascript to maintan its simplicity for the purpose of future updates by individuals less than knowledgeable in this area. I don't do a whole lot of coding with JavaScript so, if there already is a built-in function for this, that would be great. This is purely aesthetic, just to make the code a little cleaner. Any help or suggestions would be appreciated. Thanks.

If I understand you right, you don't want to call one JavaScript files from several another JavaScript files. You want just save some groups of variables. Well, you can save it - with a server-side database or, may be, with http://www.w3.org/TR/webstorage/ or http://www.w3.org/TR/IndexedDB/

You can add references to external files:
<html>
<head>
<script type="text/javascript" src="colorGradient.js"></script>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="kml2.js"></script>
<style type="text/css"> ... </script>
</head>
<body>
....
</body>
</html>

You can try a "feature loading" and/or "on-demand javascript loading" framework. Since you're trying to use Google maps, I would recommend you use the Google Loader API which works very closely to what you're seeking.
for example: With a simply JS you can do the following....
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
... and it will load the multiple files.

Splitting up you code for your development is a good idea. There for, there are a lot of frameworks to help you organize your code with the help of MVC and psudo MVC models.
Try:
http://maccman.github.com/spine/
or
http://documentcloud.github.com/backbone/
But what prevents you from having everything in one file on the production environment?
Its easier on the server requests. And you want to integrate this in your build process anyway...
But if you insist in on adding them to the DOM you can do this of course:
document.write(unescape('%3Cscript src="yourfile.js"%3E%3C/script%3E'))
this will add
<script src="yourfile.js"></script>
to your dom

If I understand your question correctly, you would like to split up a single script into multiple .js files. As far as I know, this should work fine as long as you include a tag to load each file. You may need to load the files in order (i.e. don't include a file that calls a function that has not been difeined yet).
However, be aware that splitting up your script will result in more calls to the server, which will slow down page load. In most cases, just including a few scripts won't even make a noticible difference in load time.

Use wildcard in src attribute of <script> tag?

Ok, stupid question and I don't think it's possible but, I have this markup at the top of my .aspx page...
<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.core.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.droppable.js" type="text/javascript"></script>
Wouldn't it be nice if I could replace that with this...
<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.*.js" type="text/javascript"></script>
ie use the * as wildcard.
Obviously as this is JS I could just throw all those scripts into one big script and load that but I don't really fancy doing that.
Anyone else have a technique for tidying up masses of script refs? Or do we just live with it?

As far as I know this is not possible, simply because, the browser would need to know exactly what files to request.
The browser would essentially have to brute force your server with requests hoping to get lucky.
I'd suggest using Google's closure compiler to merge all similar, if not all, javascript files into a single file. It will be slightly large, but would cut down on http request.
With some profiling you could find a balance between which files are needed most commonly and speed.
UPDATE (from comments)
I'm generally reluctant to offer adding a new javascript library to solve the issue of too many javascript libraries :) Plus this just seemed like the more straight forward solution. Current we use the Google closure API to compress and merge all our javascript and CSS and build time with ANT. Works a charm. This can also be done to some extent direct with apache2 virtual host/htaccess (see html5boilerplate.com) for examples and limitations

Nope, not in the way you're thinking of. You could do something that's similar if you're using JavaScript loaders (e.g. RequireJS or LabJS), since you can then condense each file into an array and loop through them, or, if you're feeling ambitious cook up some protocol between the front and back ends to support this.
Nonetheless, this is not recommended as it's not easy to maintain. If your problem with combining the files into a single one is with the effort, then JS minifiers (e.g. UglifyJS or Closure Compiler) may solve your problem.

Actually, as somebody else may have mentioned, you could add your own script file in there and do something like add the paths to an array, loop through it calling getScript for each item.
$.getScript('ajax/test.js', function() {
alert('Load was performed.');
});

ie use the * as wildcard.
No. Well, not unless you want to configure your server to pass a URL which includes a * character through a script that resolves it and bundles up all the JS on the fly.
Obviously as this is JS I could just throw all those scripts into one big script and load that but I don't really fancy doing that.
It's a good solution. Generally you would want to do this as part of a build script for the site, and throw in a call to a minifier at the same time.

I would omit type="text/javascript"
The "type" attribute is required in HTML 4, but optional in HTML5.
But I still think that merging src is impossible (as of HTML5 and CSS3)

You could just copy the contents of all the jquery.ui.* files into one file. As an added bonus, your pages would load slightly faster.