Loading jQuery | PracticalSeries: Web Development

16.3 Loading jQuery from a web page

There are two ways of loading the jQuery library, the first (and most popular) is for every web page to download the library from a third party web server somewhere on the internet.

This type of server is called a content delivery network (CDN); CDNs are usually a group of geographically distributed servers that are able to provide a very fast delivery of a file or other content.

Generally, it is often faster to download a file from a CDN than it is to hold a copy of the file on your own website and download it from there, this is because CDNs are geared up for a high volume of traffic and very fast deliveries — they have lots of servers with large bandwidths. It also means that the browser can download the CDN files while it is downloading the web page from your site (it does it in parallel).

Browsers will also cache the file from the CDN and since there are a lot of sites that use jQuery, there is a fair chance that the browser may already have downloaded the file and doesn’t need to load it again.

There are several CDNs that host the jQuery library, the main ones are:

StackPath
Google
Microsoft
CDNJS
jsDelivr

The one we are going to use is Google. To my mind it was by far the easiest to use and the best explained.

The second way of loading the jQuery library is to download the version you want from the jQuery website and store it within your own website. You can download the latest version (and other versions) here. You want the compressed (minimised) file for the latest version, 3.3.1 at the time of writing.

The file isn’t very big, version 3.3.1 is 85KB, it looks like this:

Figure 16.13 - jQuery in the raw — Figure 16.13 jQuery in the raw

Not so easy to read, but then again, we don’t have to.

So which to use, the CDN option or the download option?

The answer is generally the CDN option and that is what I’m going to explain here. This seems to be good practice with website development for the reasons explained above.

16.3.1 Loading the jQuery library

The jQuery library is just a bunch of JavaScript code that someone else has written, we don’t need to know how it works, we just need to know how to use the bits we want.

To make the library work, we need the web page to load it, in section 16.1.1, we ran a bit of JavaScript from directly within the web page:

<script>
document.write('<br><center>THIS IS JAVASCRIPT'.fontsize(10).fontcolor('red'));
</script>

That was fine for that tiny bit of code, but to do this properly, we want to load the jQuery library as a file and that is quite easy to do. It is very similar to how we load a CSS file.

The CSS file was loaded with a <link> element, see § 5.4

JavaScript files are loaded with the <scrip>...</script> element, this is the same element used to implement JavaScript directly. This time though we will load the code from a file and we will place the <script> element within the <head> element (the same place we load the CSS files). The format is this:

<head>
...
    <script src="URL or Path/FileName"></script>
...
</head>

The src (source) attribute tells the browser where to get the file, this can either be a filename or filename and path within the website or it can be a URL to some offsite location where the file is stored.

In our case we want to use a CDN to deliver the jQuery library, so that begs the question where do we get the address?

The answer is from the jQuery website, follow this link to the jQuery download page (a Google search for jQuery download will find it).

Scroll down to the Other CDNs section (it’s near the bottom):

Figure 16.14 - jQuery CDN list — Figure 16.14 jQuery CDN list

I want to use the Google CDN, so click that link (highlighted) and this takes you to the Google CDN link page for jQuery, this is the link

https://developers.google.com/speed/libraries/

It opens the page at the jQuery section:

Figure 16.15 - Google Hosted Libraries — Figure 16.15 Google Hosted Libraries

This website is the Google Hosted Libraries website, it is the Google content distribution network and it gives links to all the various JavaScript libraries that Google hosts.

The one we want is jQuery (the page will open at the correct position), the link we want is the latest version, this is always at the top. At the time of writing the latest version of jQuery was 3.3.1.

We just need to copy the snippet, select the text as shown in Figure 16.15 and copy it with ctrl+c (I’ve reproduced the snippet below):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Now paste it into the web page in Brackets, in my case I’m using the web page 99-00-typicals.html.

The HTML looks like this (the script line is shown in green):

Loading the jQuery library html

<html lang="en">                              <!-- Declare language -->
    <head>                                    <!-- Start of head section -->
        <meta charset="utf-8">                <!-- Use unicode char set-->

<!-- **************************************************************************
     HEAD SCRIPT AREA
     ***********************************************************************-->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- **************************************************************************
     HEAD CSS LOAD
     ***********************************************************************-->
       <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css">
       <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">
<!-- **************************************************************************
     TITLE
     ***********************************************************************-->
        <title>Website template typicals | PracticalSeries: Web Development</title>
    </head>

Code 16.1 Loading the jQuery library

Add the line and preview the web page.

How can we tell if it’s worked?

If it has worked and you used the 99-00-typicals page, all the slow scrolling will be working (click a TOC link), you might have to refresh the browser window to force a re-load (hit f5).

If you are developing you own page, you won’t yet have any code to demonstrate the library. So let’s add some.

Add the following:

Test code for jQuery

<html lang="en">                              <!-- Declare language -->
    <head>                                    <!-- Start of head section -->
        <meta charset="utf-8">                <!-- Use unicode char set-->

<!-- **************************************************************************
     HEAD SCRIPT AREA
     ***********************************************************************-->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script>
           window.onload = function() {
               if (window.jQuery) { // jQuery is loaded
                   alert("Woohoo!");
               } else {             // jQuery is not loaded
                   alert("d'oh!");
               }
           }
        </script>

<!-- **************************************************************************
     HEAD CSS LOAD
     ***********************************************************************-->
       <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css">
       <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">
<!-- **************************************************************************
     TITLE
     ***********************************************************************-->
        <title>Website template typicals | PracticalSeries: Web Development</title>
    </head>

Code 16.2 Test code for jQuery

Save the file and re-load the web page, if it’s worked, this will happen (Woohoo!):

Figure 16.16 - jQuery is loaded properly — Woohoo — Figure 16.16 jQuery is loaded properly — Woohoo

If it hasn’t worked, you get D’oh!:

Figure 16.17 - jQuery hasn’t loaded — D’oh! — Figure 16.17 jQuery hasn’t loaded — D’oh!

Now take that bit of code out, we don’t want it doing that all the time.