This series will take you from zero to being confident in writing and working with jQuery and JavaScript.
Welcome!
The goal of this course is to take you, you beautiful front end developer you, from someone with very little or no jQuery or JavaScript knowledge and up you to someone who is quite comfortable working with and writing …
In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a “real” website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script></script> and then we perform a …
One way to think of jQuery is the “Select and Do” library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do.…
In CSS, you can select all <h1></h1> elements on the page with this:…
We’ve talked a good bit about selectors. A jQuery selector like $(“h1”) will select all <h1></h1> elements on the page. But what about… when it doesn’t? Here’s an example of when that selector would fail:…
jQuery can select anything that CSS3 can select. But it doesn’t stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors…
As we’ve talked about, jQuery can be thought of as a “select and do” library. We’ve talked about selecting quite a bit, so now let’s talk about some doings. Remember that pattern basically looks like this:…
It came up very briefly in the last video: how do you stop the browser from jumping down when you click a hash link? That is the default browser behavior, and fortunately, with JavaScript, we can tell the browser not …
The concept of getters and setters in JavaScript is just one of those things you should understand. They are nice in jQuery because the API is so consistent that once you get it, you can pretty much just guess how …
Another concept video! This is “just one of those thing” you need to understand in jQuery. It is actually a bit unique to jQuery, in that other popular JavaScript libraries in the past have not done it this way.…
If you first dabbled with jQuery many years ago, it might have been it’s ability to do animation. That was perhaps one of jQuery’s first big draws. These days, CSS can do animation as well with fairly decent browser support …
Everybody’s favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code.
Take for example the animation we used in …
Handling events is another one of those big reasons to use jQuery. There are some cross browser differences in how to do, which jQuery normalizes into one simple API, while enforcing some best practices.
There is essentially one method you …
Since we just talked about events, now is a good time to mention custom events. All the events that we’ve talked about so far are “real” events so to speak. Events that originate in the DOM based on real things …
We’ve talked a number of times now about little touches in the jQuery API that are really quite nice. Everything is well considered and refined. Chaining definitely falls into that category. Once you start using it and understand it, it …
Ajax ranks pretty high up there on the biggest reasons to use jQuery. Not only does jQuery fix the cross-browser issues, it makes the syntax very easy to use and understand.
In this video we take a stab at explain …
We talked about GET in the last video but didn’t give POST enough attention. So I thought we’d do that here. The big difference with POST is that you nearly always need to pass along data with the request. That …
There is a good chance that out in the “real world”, the #1 thing you use Ajax for is sending and receiving JSON data. And for good reason. JSON doesn’t presume any visual structure like HTML does. It’s just raw …
One thing I want to make absolutely clear in this series is that none of us should be anti vanilla JavaScript. “Vanilla” meaning “raw” or “native” JavaScript. JavaScript that runs in the browser without any frameworks or libraries or anything …
Data. In the world of jQuery, it’s all about bits of information that are attached directly to elements (rather than, say, a variable with onus only to itself). There is a ton of ways to save bits of data on …
If you learn any major bit of front end architecture philosophy from this series, learn this one. Just change classes. In this screencast we start going down a major rabbit hole of JavaScript only to stop, catch ourselves, and use …
Templating is an important part of working with JavaScript applications. It’s fairly common that data is available to you, but not in a format that is ready display on screen. That is commonly (but not always) data in the JSON …
We left off in the last video with a bit of a tangled mess. All in one block of JavaScript we were mixing data retrieval, display and business logic, and templating. In this video we’re going to start breaking those …
We covered templating with Handlebars in the last video. But Handlebars isn’t the only templating solution on the block. In this video we’ll use the templating available in Underscore.
Why? Well one reason is that you might already be …
We’ve done a pretty good job so far of getting organized. Getting our HTML broken out in a template was a big step. We’re longer muddying the waters so to speak. Our different bits of functionally in JavaScript are broken …
Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on …
Now that we’ve looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like:…
Now that we understand the basics of plugin development, we can dig a little deeper. Because ultimately a plugin is a function, it provides us the scope we need to organize. Remember when we got our house in order when …
We’re going to bring it back out to a normal text editor in this screencast, just as we started. In a “real world” situation, these things are true:
You made it!
Thanks so much for taking the course. I hope you’ve learned enough about jQuery and JavaScript that your confidence level in it has risen and you know there is nothing to be afraid of.
Remember, the jQuery …