WEB150 » Lecture 02: Getting Started with Libraries

Update: October 14th, 2010

Assignment 2 - Include jQuery

Include the jQuery javascript library into your index.html

Required Reading

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 :)

No comments yet.
You must be logged in to post a comment.
TOP