I am new to javascript etc so may be this is dumb question.
I was looking into JQuery-UI tutorials and they have:

<script src=".10.3/jquery-ui.js"></script>     
<link rel="stylesheet" href=".10.3/themes/smoothness/jquery-ui.css" />    
<script src=".9.1.js"></script>    
<script src=".10.3/jquery-ui.js"></script>

If I can include js code like this, why would I ever need to download the jquery library?

I am new to javascript etc so may be this is dumb question.
I was looking into JQuery-UI tutorials and they have:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>     
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />    
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

If I can include js code like this, why would I ever need to download the jquery library?

• javascript
• jquery
• html

• save that js file and use in your site or wherever you want – qwr Commented May 12, 2013 at 12:05
• @QWR:Actually the tutorial has:<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>. You mean download all files? – Jim Commented May 12, 2013 at 12:08
• Better use googleapis.com link as stated in answers, because it should be faster and some visitors can have it already in cache from another website which use it, so it will load faster. – Pavel Štěrba Commented May 12, 2013 at 12:09
• @MahmoudFarahat:You mean you guys writing in jquery never download it? You use urls? – Jim Commented May 12, 2013 at 12:09
• 3 MahmoudFarahat - No I wouldn't do that. You'll find that one day your site breaks because jQuery updated and deprecated some of the functionality you're using in your scripts. Always use a specific version rather than the "latest" – ahren Commented May 12, 2013 at 12:12

3 Answers 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>

When you use a CDN, the users don't have to download the jquery file again as they most probably already have it cached.

The code in second script tag checks if the jquery was available from CDN or not, and falls back to local copy of jquery on your machine.

If you wanted to work locally, it's better to have a local copy.

What you're looking at is called a CDN - a Content Delivery Network. It's beneficial because it allows potential caching of the resource across multiple websites, as well as not counting towards your same-network limit imposed by the browser.

The HTML5 Boilerplate does it a bit differently:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>

As you can see, we're using a protocol-relative path, so if you were to look at your work locally (without running a local server), your browser would hang while it tried to find the resource on the file:// protocol. Another good reason to have a local copy.

It depends on your project setup and requirements. From my experience I have found the following reasons to download 3rd party js libraries, that are otherwise publicly available:

• Intranet Systems. If the application is an intranet system that has no access the to outside world, then a local copy is a must

• Restricted Hosting Environment. If for some reason the hosting environment cannot access certain adresses with resources for the app, or is explicitly configured not to, then local copies are the way to go

• Performance. If the connection to the original library url is slow, and caching is not enabled on the clients (a rare or very specific case), perhaps the application would need to maintain its own copy

A different approach is to have a content delivery network (CDN) that is set up in a way to specifically serve your application with resources. Then, it is the CDN's responsibility to use the most appropriate way of fetching the resources. The application only needs to have access to the CDN. This is a preferred solution for many systems as the content management is decoupled from the application and also because CDN-s perform better with most browsers.