October 10, 2012 - jQuerification

A place to discuss things that were on our weekly Web Wednesdays show

October 10, 2012 - jQuerification

Postby raw10 » Mon Oct 15, 2012 11:11 am



This last Web Wednesday was "sponsored" by jQuery, which may have been a bit of a stretch for beginning web designers. Let's take this opportunity to work on demystifying jQuery and JavaScript a little bit, and maybe post up some code examples of how to implement a simple jQuery plugin.

So, let the demystification begin.

What is JavaScript?

A web page is simply a document viewed in a web browser. It has some special markup that allows for formatting, styling, media, and things like linking to other pages. This is cool and all, but it became abundantly clear that in order to build more functional user interfaces using the web there needed to be some means of modifying the page once it had been loaded into the web browser.

Enter JavaScript (read the history). It's a confusing name, because it really has little to do with the Java programming language. JavaScript is simply the means to make changes to a web page once it has been loaded into the browser.

Before CSS gained a foothold, the most common use of JavaScript was to handle swapping images on mouseovers. Not the proudest moment for JavaScript, but there you go. But you can see how the page is being modified by the script. One image becomes another when the user moves the mouse over a link.

Like everything else that makes up a web page (HTML, images, CSS, etc.), any scripts need to be loaded into the browser before they can be used. And the browser reads a file just like you do: top to bottom, following instructions as it goes. If it encounters a script, the browser dutifully attempts to execute it, even if the rest of the page hasn't finished loading yet.

But at its core, remember that JavaScript lets you modify a page after it has been loaded.

Enter jQuery

So, what is jQuery all about?

It turns out that, just like CSS and HTML, web browsers can implement JavaScript differently. And doing some basic things with JavaScript can be annoyingly difficult. Suppose you wanted to do something to all elements on a page with the class "monkey". JavaScript doesn't have a "getElementsByClass" method (remember you can have multiple items with the same class on a page). It only has "getElementByID".

jQuery simplifies, standardizes, and provides a library of standard stuff you can do with JavaScript. Stuff like selecting all of the elements on a page by class:

Code: Select all
$(".monkey")


You can see that the selector works very much like a CSS selector, making it a bit more intuitive to learn if you already know CSS.

Now, there are other JavaScript toolkits like jQuery out there. But jQuery is the most popular by far.

Implementing a jQuery Plugin

Okay, now that you know what jQuery is, how do you use it?

You may not be writing your own jQuery functions to start with, but suppose you wanted to implement a popular lightbox or image gallery plugin on your site. Let's take Fancybox as an example.

Here is what you need in order for this to work:

  • jQuery
  • The plugin JavaScript and any assets (CSS and images)
  • Some JavaScript to associate the plugin with something on your page

So let's go through it in order.

1. Include jQuery

jQuery is very commonly used, and Google hosts it for lots of sites. Get the URL from Google just by searching for "jquery google" and clicking on the result for Google Hosted Libraries > jQuery: https://developers.google.com/speed/libraries/devguide#jquery. Copy and paste the code snippet into your page before any jQuery plugin scripts and just before the closing </body> tag of your document:

Code: Select all
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  </body>
</html>


2. Include the Plugin

Now we need to include the plugin code. For Fancybox, download and unzip the code, then upload just the "source" folder to your website. Call the folder "fancybox" (for obvious reasons). Fancybox has both a CSS and JS files, so both need to be included. Put the CSS in the <head> and the JS immediately after the jQuery declaration.

Code: Select all
<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen">
  </head>
  <body>
    ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="fancybox/jquery.fancybox.pack.js"></script>
  </body>
</html>


3. Make it Work

Now your site is ready to use Fancybox. Let's actually add the HTML and then call the plugin. You'll first need something to bind the plugin to, which in this case is a thumbnail image linked to a larger image for viewing in the lightbox.

Code: Select all
<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen">
  </head>
  <body>
    ...
    <a href="images/largeImage.jpg" title="This is a caption" class="monkey"><img src="images/thumbnail.jpg" alt="Thumbnail /></a>
    ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="fancybox/jquery.fancybox.pack.js"></script>
    <script>
      $(document).ready(function() {
        $(".monkey").fancybox();
      });
    </script>
  </body>
</html>


Okay, we have the thing we're binding the plugin to, then we actually call the plugin to work on it. The whole $(document).ready thing is just to wait until the entire page has been loaded into the browser before executing whatever it is. You'll also notice that I used a bizarre class name ("monkey") to illustrate that the class name doesn't matter. You could have used the class name "fancybox" as easily, but the class name really doesn't matter to the functioning of the plugin.

One final note. When implementing anything to do with the web, and especially JavaScript, make use of a console to see if there are any errors. Firebug for Firefox or the Chrome Inspector work great.

See you next time!
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to Web Wednesdays

Who is online

Users browsing this forum: No registered users and 1 guest

cron