Posts

jQuery vs. JavaScript

/3 Comments/in /by

Here is a question that floats around a lot when people are thinking about learning languages or methods to bring interactive content into their web sites: What’s the difference between JavaScript and jQuery? So to understand the difference you need to look at a little bit of code.

Now, don’t worry if you don’t understand code. The main point of this is to see how jQuery and JavaScript do the same thing in different ways and what makes jQuery so much easier for some of the things you’ll want to do. Trust us. You’ll be fine.

Coding Interactivity

So let’s say we’ve made a simple web site — it just says “Hello” and “Goodbye” (not a terribly inviting web site, but it’s just here to make a point) — and we want there to be a little bit of interactivity in it. So our web site is built of three basic frontend languages. You’re going to have a little HTML, a little CSS, and a little JavaScript.

If you’ve seen our earlier video on what JavaScript is, you know it’s there to add interactive elements to the site. It can be complex interactive elements, like a clickable “button” or simpler things like changing the text color when you click on it. Those are all doable because of languages like jQuery and JavaScript.

A Condensed Way to Code

To see the difference between them, let’s look at a simple example of one application of these: making a line of text change color. If we want to do that using JavaScript, this is what the code would look like:

If you don’t code much you’d be forgiven for getting lost in all that! It’s a lot of code for one action and if you’re new to coding, it kind of looks like five lines of nonsense.

The same action in jQuery looks like this:

You can see it’s one line that says “grab this class and add this extra class from CSS to it.” Essentially, it takes all those steps you saw in the JavaScript and makes them into one command.

You can kind of think of it like this. When you have to ask someone to do a task with a lot of steps — like making a pot of coffee — you don’t tell them to do the steps again and again, you just say, “Hey, could you make some coffee?”

That’s jQuery. A group of developers said, “Look. There’s these things we have to do all the time in JavaScript an it takes us five complicated lines every time we have to do that.” And they didn’t want to write five lines every time, so they came up with a way to do that in just a line or two.

Hey could you animate this, please?

This is what we see when we look at jQuery. We see a list of familiar titles — Animate, Delay, Fade-In — all these things that would have taken lots of lines of code in JavaScript, and now you can just click on them and write them out as maybe five or six lines total. That is jQuery in a nutshell. It’s all the functionality of JavaScript, but it simplifies the process immensely.

To get started with jQuery, you just have to type this one bit of code into the header of your project:

It’s kind of like in The Matrix when Neo (aka Keanu Reeves) gets an injection of knowledge uploaded into his brain and he wakes up and is all like “I know kung fu.”

By typing this jQuery line into the top of your code, your code is all of a sudden like, “I know what animate means” and “I know what animate AddClass means” with one line of code.

Takeaways

  • jQuery is a framework that lets you write JavaScript quicker and easier.
  • The developers of jQuery created it to condense common JavaScript tasks into fewer lines of code.
  • You can code most common JavaScript actions using jQuery (and you can actually check out their API page for a complete list of what you can do)
  • It’s easy to install and get the code to understand jQuery.

Why You Should Learn jQuery Before JavaScript

/6 Comments/in /by

I’ve put in over 200+ hours teaching HTML, CSS and JavaScript in the classroom. With each new class of incoming students inevitably someone will ask, “Which should I learn first: jQuery or JavaScript?” Great questions! I’ve experimented teaching jQuery vs. JavaScript both ways and have come to the conclusion that learning jQuery first is the way to go. Here’s why.

What’s the difference between jQuery and JavaScript?

jQuery is a JavaScript library. If that means nothing to you, then let me put it another way:

  • jQuery is a set of tools, written in JavaScript.
  • jQuery is a way of writing JavaScript quicker (…for doing certain types of things).
  • jQuery allows you to do more, with less JavaScript

Learn jQuery First

For beginners, jQuery is likely the right tool for the job. It solves most problems that a beginner developer (and even more expert developers) have. Here’s a few examples of student requests that come into One Month:

  • I want to build an interactive gallery
  • I want to build a Todo list
  • I want to add a fading out effects to my project
  • I want to add some animation to my project

And for all those: jQuery is the right tool!

Learn JavaScript First

With that said, there may be some reasons why you’d want to learn JavaScript first:

  • If you already understand all of the above.
  • If you’re already super motivated to learn and motivated for the long-run (ie. willing to commit 50+ hours). JavaScript will give you a much more solid foundation than learning jQuery.
  • If you have a desired problem that you already know jQuery won’t work for

Decide to go with JavaScript first, and you may get a stronger foundation in the language. But my concern here (from my teaching experience) is that students who start with JavaScript quickly get demotivated. Because the learning curve to build something is higher.

Learning JavaScript before jQuery is like learning Latin before English.

Is one better than the other?

Nope. They’re just two different ways to solving problems.

Think of it like this:

jQuery is like learning how to cook first using a microwave. Sure, you can reheat and prepare quite a few meals using the microwave, but it’s not really “cooking”. You wouldn’t cook Thanksgiving dinner in the microwave, right? Having an education in JavaScript will allow you to understand the fundamentals, as well as when it’s best to use jQuery, and when it’s best to use JavaScript.

So if you’re looking to build something quickly, and it’s not too complicated, you can get started right away using jQuery. If you want to do a deeper dive, take what you’ve learned in jQuery and expand your knowledge by digging into Javascript.

Javascript can be harder to learn and seem more challenging up front. That’s why, as a teacher, I often recommend starting with jQuery — because you’ll also be learning Javascript fundamentals along the way!