Assignment 2 – Include jQuery

Include the jQuery javascript library into your index.html

Required Reading

JavaScript Code Conventions (continue to read this as the course progresses)

Tizag: Javascript Sytax Tutorial

Getting started with jQuery tutorial (we will do this together)

Lecture Notes

External Hosts

In the old days, when including a 3rd party JavaScript library, you would download it from the creator’s website, upload it to your own server and then reference the path on your own site within your html code. This was primarily done for the following reasons:

Bandwidth Expense
Insuring Stability on Your Site
Reduces Domain Lookups (faster load)

For a lot of smaller libraries, you might still end up doing it this way. However, for larger, more widely used libraries (the core JavaScript libraries), you can use a few services that offer library hosting. I like to use Google’s:

Google AJAX Libraries API

Google keeps up to date copies (and archives) of all the major javascript libraries, which you can hotlink directly to on your site.

Advantages of Hosted Libraries

Caching: chances might be high (depending on your demographic) that your user has already visited a site which is using the same hotlink
Save bandwidth on your server
Avoid domain request timing restrictions (2 at a time issue)

There are two ways to include a library from Google:

Example Use #1

Using the Google JS API loader:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    // Load jQuery
    google.load("jquery", "1.4.2");
</script>

Example Use #2

It’s faster to load the library you want directly. Here, I am going to load the minified jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Where to put JavaScript

Think about timing
Always at the bottom of the document (before the closing body tag)

Timing Events

JavaScript is generally used to handle user interaction and other events that happen as the user interacts with the site. It’s very important to understand events in order to use JavaScript effectively.

A few native events:

onClick: when an element is clicked
onMouseOver: when an element is moused over
onMouseOut: when an element is moused out
onBlur: when an element loses focus
onFocus: when an element gains focus
onLoad: when an element loads it’s content (useful for image load detection, script load detection, etc)

document ready

Since we are using jQuery, we bind javascript code to events easily, without worrying about cross browser issues.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>JavaScript Lecture 02: Element Access Demo</title>
</head>
<body>
<div id="box1"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// code here is run in line with html loading
$("#box1").html("added before document finished loading");
$("#box2").html("can't find this yet -- it hasn't loaded");
</script>
<script type="text/javascript">
$(document).ready(function(){
	// the document has loaded all the html elements in the dom, ready for adding on javascript handlers
        $("#box3").html("now we can access box3, even though it comes later in the page");
});
</script>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

How jQuery Works

Let’s go over this tutorial so we can make sure we have a solid jQuery foundation :)

Intellectual Pirates

Lecture 02: Getting Started with Libraries

Assignment 2 – Include jQuery

Required Reading