The jQuery Library

Libraries in Programming

JavaScript is a full-featured programming language all by itself, but there are many tasks that programmers creating JavaScript need to do a lot which are not in the “core” language that is built into web browsers.

Every programming language is like this: the language itself lets programmers solve problems, but as the language is used, it becomes clear that some tasks must be done often (at least by programmers creating certain kinds of programs: others might have different common problems).

It would be inefficient for every programmer, or even each project/company to solve these problems separately. So, developers often publish their solutions to frequently-encountered problems in code libraries (or just libraries). These libraries can be used by other programmers so they don't have to re-solve the same problems.

The ways JavaScript is used have evolved considerably since it was first introduced. Because of this, there are some libraries that are used very frequently to take care of things that almost every JavaScript program needs to handle. We will be starting with one that contains some basics that we'll need (and adding more later in the course).

jQuery

JQuery is a very common JavaScript library (used on a majority of the most-visited web sites). It makes several common tasks easier for the programmer: manipulating the HTML page, using events, animation.

We start by including the jQuery library, in the same way we include any other JavaScript code in the page: by using the <script> element and indicating its URL.

<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>

Including the jQuery library like this defines a function called jQuery that will do lots of useful stuff, if we know how to use it.

Here is a complete page that uses the jQuery library:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>First jQuery Page</title>
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>
<script src="jquery-event.js"></script>
</head>
<body>
<h1>First jQuery Page</h1>
<p>This is paragraph one.</p>
<p>This is the second paragraph.</p>
<p>Paragraph 3.</p>
</body>
</html>

And the JavaScript file jquery-event.js that goes with it:

say_hello = function() {
  alert('Hello world!')
}
setup = function() {
  jQuery('p').click(say_hello)
}
jQuery(document).ready(setup)

You can have a look at this first page with jQuery and see how it behaves.

There are lots of new concepts in this JavaScript file. It probably makes sense to take a look line-by-line.

say_hello = function() { … }

Just like before, this creates a function named say_hello. Also like before, this function can be called with say_hello() to run the code inside the { … }.

alert('Hello world!')

This one line is the code that runs when the say_hello function is called. As before, it pops up an alert window with the phrase “Hello world!”.

setup = function() { … }

We are defining this function to do the work of setting up the JavaScript behaviour on the page (thus the name “setup”). It will be called after the browser loads the page (because we'll trigger that in the next lines of code).

jQuery('p').click(say_hello)

The jQuery function is used to select some part(s) of the page. The function call jQuery('p') selects every <p> element on the page.

Following with .click(…) sets the behaviour we want when those elements are clicked: in this case, we give it the say_hello function. (We don't want to call the function right now, so we don't say say_hello(). We just want to give jQuery the function it should call later, so we just give it the variable that holds it.)

jQuery(document).ready(setup);

This line gets everything started. The jQuery(document).ready(…) idiom gives a function that should be called once the browser finishes loading the page (i.e. it is “ready”). In our case, we want the setup function called when the page is ready, so we indicate it here.

This jQuery is similar to the previous: it selects something (in this case the document special value, referring to the entire page), and connects some event (the document being ready, as opposed to being clicked as above) to a function.

The jQuery function can also be called $, so jQuery('p') and $('p') are synonymous. We'll use jQuery here, since it looks more like other function names.

Notice that we didn't use the onclick attribute in HTML here, but connected the logic to the HTML with jQuery. This puts all of the logic in the JavaScript file where it belongs, and leaves only content in the HTML. It also prevents repetition, since we can modify all of the pharagras at once, instead of having to say something for each <p> on the page. We will continue to do things this way, and you should as well.

Have another look at this first page with jQuery, and the JavaScript code it uses. Make sure you see how the behaviour unfolds: when the page is loaded, the setup function is called to hook up the other events; it connects the say_hello function to the click event on all of the paragraphs; when you click a paragraph say_hello is called and does something you can actually see.

This might not be the most exciting behaviour you have ever seen on a web page, but we have something working. We will explore a few more things we can do with jQuery in the next section, Working with jQuery.

Naming jQuery Objects

This jQuery code is actually equivalent to the above: you can take each part and put it in a variable if you want, but it's not always necessary.

setup = function() {
  all_paragraphs = jQuery('p')
  all_paragraphs.click(say_hello)
}
jquery_doc = jQuery(document)
jquery_doc.ready(setup)

The last two lines here were done in one line the the example above. This code takes the jQuery(document) object and stores it in a variable jquery_doc, and then uses the object's ready function.

If you prefer this style, then you're welcome to store and name some all of your intermediate objects, but it becomes tedious. The point for now is that something like jQuery('p') is just a JavaScript object: it can be stored in a variable, or can have its .click function called, or both. There's nothing magical about the code jQuery('p').click(say_hello): it's just doing a couple of things in one line.