Demo starter files
- Whitespace is ignored, very much like HTML and CSS
;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.
That whitespace does take up a little bit of extra file space, so it's very common for programmers to minify scripts when they're all finished. Minifying means removing all of the whitespace, which reduces the size of the script file, but also makes it virtually impossible for humans to read. We won't worry about stripping the whitespace from any of the scripts in this class.
Most developer tools have a "pretty-print" function, which automatically reformats minified script files back into more human readable spacing.
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 the structure of the HTML. It's also often referred to as the document tree. If you haven't thought of it this way, the HTML of a web page is often visualized 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. It's basically "boilerplate" code that saves you from reinventing the wheel every time you start a new project.
A plugin is almost the same thing, only smaller and more specific to a certain task.
An analogy might be helpful here too.
Say you're starting a new project - to build a house. That's a lot of work to do completely from scratch! You have to design the floor plan, dig a hole for the foundation, build the foundation brick by brick, and go from there. A library or framework is like a pre-constructed foundation. In fake pseudo-code let's call this "import foundation". With this you don't have to do any digging, and a logical size and footprint are already laid out for you (probably by someone who knows even more about building houses). This lets you skip a lot of the hard planning and base work, and get right to 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, compatible, and well documented.
A Little Background
The jQuery web site has really great documentation of everything at your fingertips when 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.
- Once you're familiar with the basic syntax, you'll probably spend more time referring to the API Documentation. It has definitions of all of the methods, events, etc. available in jQuery, with simple demos showing what they do.
Great so how do we get started using it?
- Link to the jQuery library in your document
- Link to a script file of your own, or embed your script between
<script>tags in the HTML. This is the same idea as linking to a stylesheet or your own, or typing CSS between
To start using jQuery, it needs to be loaded in your html, like a style sheet or other external resource. Luckily we don't even need to download jQuery to do this. We can get jQuery from the Google CDN.
There are a few advantages to sourcing jQuery from Google instead of your own server. It's free, it will often load faster than 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 style sheet. We will also source these from the Google CDN for this demo.
Once you've linked jQuery, which sets everything up, you can also get started typing your own script file(s).
Now may be a good time to switch over and do the demo!
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.
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.
Plugins for jQuery (and others that don't require jQuery at all) can be found on the Resources page.