Learning jQuery


When jQuery was new (back around 2006–10), it was mighty hard to use JavaScript to rewrite the DOM and get it working consistently in every browser. The jQuery library solved a ton of problems because, under the hood, it had JavaScript functions that took into account almost every bad browser thing that could ruin your day. By using jQuery objects and methods, you could rest easy and be confident that your interactive things would work as intended for just about everybody.

JavaScript has been improved since then, and ES6 JavaScript is far better than all the versions before. Browsers are better now too. Some people question whether we need jQuery at all anymore.

Well, 89.62 percent of the top 10,000 U.S. websites (“top” meaning most traffic) use jQuery today, according to BuiltWith. So you just can’t ignore it.

jQuery Resources

jQuery Cheat Sheet

To specify something, anything, in your HTML:

  • $('.blue') — everything that has a class of “blue”
  • $('#chocolate') — anything with the id “chocolate”
  • $('h2') — every h2 element

When you’ve specified something that way, you’ve created a jQuery object, which automatically has a ton of possible methods, as well as properties.

To apply a jQuery method, such as .hide(), to a jQuery object, such as $('.blue'):

$('.blue').hide();

That hides everything with a class of “blue.” Look up the methods using one of the resources linked above.

Event handlers — you’ll learn about these in any jQuery tutorial. Events are actions initiated by the user, such as scrolling, clicking, and moving the mouse. jQuery can be used to detect an event and then react to it.

Usually you will use event handlers (also called event listeners) together with methods.

Effects are a particular set of jQuery methods that show, hide, or move objects. Show/hide, fadeIn/fadeOut, and slideDown/slideUp are the effects that everyone learns first. They are basic jQuery! Combined with a button and an event handler, effects are used to build accordion menus and other UI elements.

jQuery Plugins

Often there is a jQuery plugin that has already been written and tested to solve a hard problem, such as how to handle scrolling events or how to make a “lightbox”–style slideshow. These useful plugins give us another reason to love jQuery.

A word of warning: Most jQuery plugins are not simple for a beginner. You have to spend time reading the documentation and learning how to use the plugin correctly.

Advertisements

Starting JavaScript!

js

This week, you will start learning JavaScript, the programming language that lets us add interactivity and more to web pages and apps. This is a handy list of resources:

JavaScript has been around since 1995, and random Googling by a beginner is likely to end in tears. There are so many old tutorials and so much outdated advice! You most definitely can learn to use JavaScript, but keep your focus on what is taught in this course and what is asked of you in the assignments. I have tried to streamline it for you.

Note: If you use JSHint, make sure you click “Configure” at the top of the page and select “New JavaScript features (ES6).” Otherwise you will get an error every time you use the let keyword, or any template literal.

Screen Shot 2018-10-08 at 6.29.37 PM

Encourage others to code!

Screen Shot 2016-12-04 at 9.20.04 AM.png

“Hour of Code” is an international effort to get people of all ages to try coding for themselves. The official dates for the big promotion are Dec. 5–11 this year — but the Hour of Code tutorials are online (and free) year-round.

Hour of Code tutorials

You can choose by grade level (even pre-schoolers can play), subject matter (e.g. “language arts”), and length of time. Most tutorials can be completed in an hour or less.

Tip: If you get others to take a leap and try code, you might find yourself in the role of teacher. Guess what? By teaching, you learn more yourself. Give it a shot!

Creative storytelling: Example

Here is another New York Times feature story that uses all kinds of cool code tricks to add interactivity:

Greenland Is Melting Away

Note that the developers did use a framework for this page — it was Foundation, not Bootstrap. They used JavaScript to detect older versions of the IE browser.

They used a JavaScript library named FT Scroller for the scrolling interactions.

There’s a bunch of custom JavaScript to accommodate mobile, disable scrolling effects, and more.

You can even find some code you will recognize if you view source:

Source code - screen capture

New free resource for JavaScript

Code School has a new, free course for learning basic JavaScript:

JavaScript Road Trip

Unlike Codecademy, Code School has some very well-produced videos to help you learn. Like Codecademy, Code School offers an interactive exercise panel where you can try to answer problems, and they award you points if you get these right.

We will be using Code School for learning jQuery.