Posts

jQuery vs. JavaScript

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

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!

What is Javascript?

Key Takeaways

JavaScript is a programming language. It’s one of the three front-end languages. JavaScript is responsible for the “behavior” of your Website. It’s how HTML elements and CSS style animate and move around on the page.

There are many popular JavaScript frameworks (i.e., free code to help you succeed). Some of the popular JavaScript frameworks include: jQuery, AngularJS, Backbone.js, and Handlebars.

Your Assignment

Additional Resources to Keep You Learning

Web Hacking Tools: Proxies

Let’s take a look at HTTP proxies, the core tool for web app hackers. When you’re getting started as a hacker, an HTTP proxy is an application that runs between the browser and the server, allowing you to intercept, view, and modify HTTP requests and responses.

My favorite proxy to use is a tool called Burp, which is free and can be downloaded here (http://portswigger.net/). The free version is all we need.

Here is how you setup Burp:

First, download and run Burp locally (it’s a java app, so you may need to install the Java JRE if you don’t already have it). Next, we have to configure a few settings to ensure our browser uses Burp. I prefer to use Firefox with Burp, you can set it up without having to change system-wide settings which affect a number of programs.

After starting Burp, click on the “Proxy Tab”, then on “Options”:

Make sure the “Proxy Listeners” is running and make note of the interface, by default it is 127.0.0.1:8080. Next, scroll down to the “Intercept Client Requests” and “Intercept Server Responses” sections. Make sure the top level “Intercept requests based on the following rules” and “Intercept responses based on the following rules” are both checked. Additionally, you will want to check the third checkbox under “Intercept Server Responses” which states “Or Request Was Intercepted”. Your settings should match the screenshot below:

This will let Burp capture both the browser requests and the server responses. Next, we need to setup Firefox to use Burp as a proxy. Click on “Firefox”, then “Preferences”.

Now click on the Advanced Icon, then the Network button. It should look like the screen below:

Finally, the last step is to change the network settings. Under Connection, Configure how Firefox connects to the Internet, click on the settings button.

Change the settings so it matches the screenshot below. Select Manual Proxy Configuration and set the IP address and Port to match Burps settings, which defaults to 127.0.0.1 port 8080. Check the box to “use this proxy server for all protocols”. Finally, remove the settings in the box which says “No Proxy for” to make sure we capture local traffic (such as requests and responses to our local rails app). Click OK and then you’re all set!

Now, let’s test our setup and make sure it works. Back in Firefox, enter google.com and click Enter. If everything is setup correctly, then the browser should just hang there, waiting for the website. Your request has been captured by Burp! Go back to Burp, and you should see the HTTP request to Google in the proxy, then Intercept tab. Make sure you’re looking at the right screen on Burp. There are a ton of options, but it should look like the screen below:

Now, click the Forward button to send the request to the server. You should almost immediately get the server’s response. You then need to click the Forward button again to send the server response to the browser:

The server response to our original request to google.com is a 301 redirection (“Moved Permanently”), which tells our browser in the location header to go to www.google.com. The browser now automatically makes this request for us and you can safely forward on this request and the response. Google once again makes another redirection, this time to the SSL version of google. However, this presents a problem.

In order for Burp to connect to SSL sites, it intercepts the connection and presents its own SSL certificate to the browser. That way, Burp can still decrypt the HTTP request and response even through SSL is being used. However, the browser is smart enough to tell whether or not the SSL certificate is valid and will provide a warning to the user that the SSL certificate is not valid for the site:

Since we know we are using Burp to intercept the request, we can click on “I Understand the Risks” and then the “Add Exception” button, adding Burps SSL certificate. Next click on “Confirm Security Exception” so that the browser will let us use Burp for this SSL connection. A word of warning: Be careful when accepting this and make sure you are using Burp, otherwise do not add the exception.

Ok, now the browser makes the SSL request, which is once again captured in Burp. Keep forwarding the requests and responses until the browser shows the Google homepage.

Congratulations, you have now just taken your first step to being a web hacker!

Before we move on to hacking our first site, lets go over a few quick items that can sometimes cause problems.

Common Problems and Solutions

1. Website doesn’t show in browser

Burp will capture every request and response and wait for you to forward it to either the server or the browser. Often times, these requests and responses will queue up in Burp, and it looks like the browser has stopped responding or you cannot access the site. If you run into problems and it seems like its not working, check the proxy tab in Burp and make sure there are no requests queued up. If you are not going to manually inspect the requests and responses for a little while, its useful to toggle off the intercept mode which will just allow the requests and responses to flow freely.

2. Weird Traffic

Occasionally when using Burp, you will notice a few web requests you didn’t make. This is traffic that is either sent from a browser plugin, or from the browser itself. If you setup the proxy to be the system proxy, then you may also get other interesting traffic from other applications. Most of this traffic is harmless, but it’s useful to know what chatting plugins or applications you have on your system that are making requests. Sometimes these requests leak sensitive information so they may require a deeper inspection.

3. Proxy is refusing connections

Burp is setup and running, and the browser is configured to use Burp, but when making a request to a website in the browser you get an error message that the proxy is refusing connections. Generally this occurs because you have the wrong IP address or port for the proxy, or it’s not running. Double check both the proxy settings and the browser settings and make sure they line up.

4. No server responses

Often times you will see the browser request but not the server response. When this happens, more than likely you missed the setting in Burp to intercept the server responses. Go back to Burp, go to the Proxy tab, then the Options tab, scroll down and make sure that the “Intercept Server Responses” settings match the settings shown above.

OK, now that we have a proxy running, we can intercept traffic. Let’s start hacking away.