Intro to jQuery

Demo starter files

jQuery is a widely used javascript library that simplifies DOM manipulation and javascript syntax. It's fast, lightweight (loads quickly), and extensible, meaning anyone can author plugins that add additional functionality to the library.

Ok, I think I just threw a bunch of potentially new terms at you.

The DOM, or Document Object Model, is basically the same as saying the structure of the HTML. It's also often referred to as the document tree. If you haven't thought of it this way yet, visualize the HTML of a web page as a tree. The <html> element is the root element, and each additional element is a branch, with more elements branching off as we get further into nested elements.

A library, or framework, is a large collection of functions and definitions that make a certain tasks easier to do in a given programming language. A plugin is basically the same thing, only smaller and more specific.

An analogy might be helpful here. If you're building a house, the library or framework is like a pre-constructed foundation. In fake pseudo-code let's call this "import foundation". You don't have to do any digging, and a logical size and footprint are already laid out for you, so you can get right to work building the actual house, which is much more important to you.

A plugin in this analogy would be like "import kitchen". This is a smaller, single-purpose room that comes with a pre-installed refrigerator, range, dishwasher, etc. You can still customize things like the cabinet materials and appliance colors, but again you save a lot of time by not building them yourself.

The additional benefit of using libraries, frameworks and plugins, is that they're often open source. This means lots of people have used them, and experienced people have likely contributed to making the code fast, efficient, and well documented.

Javascript

Where HTML is used for the structure and content of a web page, and CSS is for the layout and appearance, javascript is used for behavior and interactivity.

Despite its name, javascript actually has very little in common with Java, which is an entirely separate language.

Javascript is a scripting language which (among other things) means that it's interpreted and not compiled. Compiled languages must be converted into machine-code to run, but interpreted languages are read as normal plain text files - just like HTML and CSS.

Javascript is a client-side language. This means that script files are downloaded and run on your computer by the browser. Server-side programming languages exist– well, you can guess. They're run by the server and are almost always invisible to the client.

Because javascript is client-side, and written in plain text, it's very accessible. Just like HTML and CSS, we can very easily take a look at the scripts that are driving a given web site.

Other Uses

The primary function of javascript is interaction with the document tree, which all happens within the context of a browser. Being the only language available in the browser, it has become widely used, stable, and fast. However, since it's familiar to so many developers and becoming a more mature language, javasctipt's uses now extend well beyond the web page. Node.js is an implementation of javascript for dynamic server-side applications and build tools. There are even frameworks that can convert javascript into native apps for iPhone and Android!

Syntax

Javascript syntax is a little bit more particular than HTML and CSS, but the basics aren't too hard.

  • Whitespace is ignored, even more so than in HTML and CSS
  • Statements in javascript always end with a ; similar to CSS
  • It's also case sensitive, so pay close attention when naming your own variables and functions!

Because whitespace is ignored, programmers are encouraged to space things out as much as needed to make the code readable.

We won't be stripping the whitespace from any of our code in this class, but there are a number of tools out there to minify your scripts when they're all finished. Minifying means all of the whitespace is removed, which makes the code much harder to read, but also reduces the size of the file. Computers ignore all of the white space anyway.

Most developer tools now have a "pretty-print" function which automatically formats minified script files.

jQuery

A Little Background

jQuery is a javascript library that simplifies the use of many common tasks in javascript. Tasks that normally take several lines of not-so-friendly "vanilla" javascript can be accomplished with significantly less typing and with better readability. Hence the jQuery slogan - write less, do more. It was first launched in 2006 by John Resig, who's still on the team of jQuery's developers. It's now the most widely used javascript library in the world.

The jQuery web site has really great documentation of everything at your fingertips using jQuery.

  • Here's the starter tutorial on how jQuery works. We'll do something very similar to this together, using my demo files, to get you up and running.
  • learn.jquery.com has textual explanations with sample code that can walk you through the basics and best practices.
  • You'll probably spend more time referring to the API Documentation though. It has definitions of all of the methods, events, etc. available in jQuery, with simple demos showing what they do.

Diving In

Great so how do we get started using it?

Actually you don't even need to download jQuery to use it. Source jQuery from the Google CDN (content delivery network).

It's free, it will often load faster than sourcing it from your own server, and many users will already have it cached in their browser thanks to other sites that use it.

The jQuery core library doesn't include all of the superfluous animation effects you might want to use though. Those are part of jQuery UI, which is an add-on library. jQuery UI includes another .js file, and a stylesheet. We will also source these from the Google CDN.

Here are some helpful terms to know when getting started, and reading the API Documentation:

  • jQuery Object - the DOM element(s) you're targeting inside $().
  • Method - a method is anything you can do with an object. jQuery has tons of methods for manipulating objects.
  • Function - a chunk of code to be executed. Functions can be called right away, or defined with a name and reused later.
  • Event - something that happens on the page. Mouse clicks and hovers are events.
  • Event Listener - a function that is triggered when an event happens.
  • Callback function - a function that executes when another function finishes.
  • Chaining - One of the most powerful aspects of jQuery. Methods can be chained together to happen in sequence, similar to a callback function.

About Animations

jQuery is great for very simple animations, but it has trouble with more advanced animations, and with animating lots of things at once.

CSS transitions and animations are better optimized to use the computer's GPU, and spawn separate threads for certain calculations, making them far more efficient. Don't be afraid to use jQuery to animate things! But it's a good idea to use CSS transitions if you have the option.

There are other javascript libraries aimed specifically at animation that are more efficient like CSS. GSAP, velocity.js, and d3.js are some of the most popular. Velocity is even a drop-in replacement for jQuery's .animate() function.

Very advanced animation and visualization is all done in javascript using libraries like these.

Plugins

There are tons of jQuery plugins, but here are a few of the most popular: