jQuery in html file vs jQuery in my js file?

Question

I'm currently developing a project of mine, and added recently jQuery to it. I have a standard html file for my webpage, and a .js external file with all my JavaScript scripts. The jQuery I'm now using is between the head tags of my html page, and I wanted to know if there is any way for me to include it in the .js file with all the other scripts... I've tried to do so, but it doesn't work... Probably it's just because I don't know how to do it, so if someone could tell me how to do it properly I'd be thankful.

Answer 1

JavaScript files don't include other JavaScript files. It's the job of the HTML file to include the scripts it needs. So you'd just include the jQuery script first, then your second:

<script type="text/javascript" src="http://somelinktojquery"></script>
<script type="text/javascript" src="yourscript.js"></script>

By including them in this order, you can use jQuery code in your script since by the time your script is loaded jQuery will already have been loaded. (If you tried including them in the opposite order then any jQuery code in your script would fail because the interpreter doesn't know about jQuery yet at that time.)

Answer 2

The jQuery I'm now using is between the head tags of my html page, and I wanted to know if there is any way for me to include it in the .js file with all the other scripts

You should add the jQuery file and the JS file each time you need to use them (and in this order). Take the code out of here to include the latest version of jQuery: jQuery CDN

Answer 3

You have a few options, that will depend on the phases of your project as well as its size and complexity of it. Including js files inside other js files is not one of them.

First, do you really need to put jquery in the head section? If you included your scripts just before the </body> closing tag, it would speed up the loading of the DOM, giving your visitors the impression the page is loading faster. Here is a discussion on the subject: Should Jquery code go in header or footer?

During the development phase

You can include the jQuery unminified version from a CDN alongside a fallback if the CDN is inaccessible (for the case you want to develop without needing an internet connexion):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

Source: .

As performance is usually not critical during the development phase, I encourage you to keep your scripts in separate files (ideally following the module design pattern). Just include them sequentially with <script src="path/to/your/script"></script> tags. It will help you keep your code organised and let you see what you are including, in what order, etc.

For the production phase

You'll want to keep the number of requests to the same server and the size of the scripts as low as possible. You can use Minification to concatenate all your files into one compressed version. You could use YUI Compressor, jsmin or UglifyJS for simple minifying.The Closure Compiler and AjaxMin provide more advanced feature like code optimisation. Here's a comparison.

You can still include jQuery from a CDN, but this time minified:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery.min"><\/script>')</script>

Or just minify jQuery with the rest of your other scripts.

Extra

If you need a more elaborate javascript dependencies loading mechanism, take a look at requirejs or browserify.