Web Development
JavaScript vs JQuery - What’s the Difference?

JavaScript vs JQuery - What’s the Difference?

Alexandre Ouellette

When I first started learning to code, I found it difficult to navigate through the terminology, jargon, and acronyms that seems to accompany every technology I played with. And it can get even harder when things sound very similar, or operate in a similar ecosystem.

One of my earliest questions was “What is the difference between JavaScript and JQuery?” Are they one and the same or are they completely independent?

In this article, we will demystify that question, and leave you with a better understanding of what both of these technologies are, as well as the benefits of using both of them. Let’s dive in!

What exactly is JavaScript?

The simple answer is: JavaScript is a programming language, much like Python and Ruby.

Another question novices often find themselves asking is, “So, JavaScript is just like Java, right?” However there is no relation between the programming language Java and JavaScript, other than a little bit of syntax and an unfortunate naming choice.

text-cta

JavaScript was created in the mid-90s, by Brendan Eich while working at a company called Netscape as part of the Netscape Navigator project, an early web browser. The language was standardized in June of 1997, when Ecma International released the first version of its standard, which included JavaScript as one of its implementations.

JavaScript has since then been widely considered as the language of the web. It can be run by all modern web browsers without needing any additional plugins.

It has also exploded in popularity in the past couple of years. It has been used to develop front-end frameworks to help developers create complex web applications, to develop native applications and it has even started to be used server-side, thanks to projects such as Node.js.

There seems to be no better time than now to learn JavaScript and I can’t encourage you enough to take a look at it.

Alright, so what is JQuery then?

JQuery is a library, written in JavaScript, that is used to simplify front-end code that manipulates HTML.

Wow, there was quite a bit of jargon in that definition. Let’s take a minute to define some of it.

A library, like where I get books?

In programming, a library is a collection of useful code, grouped together to be reused later. Libraries have a well defined interface, that makes it easier to perform the functions it was designed to do. They generally make it so you have to write less code to accomplish the same amount of work.

So let’s say you wanted to write a program, which at some point saves some data to your hard drive. You could write that entire program yourself, which would be quite a bit of work. Or you could use libraries someone already created, to make some parts of that program easier to code.

Like the code that actually writes the data on your hard drive would be quite complicated to implement and would require you to know how to work with low level programming. But if someone already figured it out and made that code available, that would be a library you could add to your program so you don’t have to think about it.

Perfect, now what is front-end code?

Typical web applications can be thought of as having two parts. The server-side and the front-end.

The server-side code is code your users never see. It’s the code that is responsible for the logic of your application, the code that saves data to a database, etc.

The front-end code is your web page and everything that your user sees. It includes the HTML that gives your web page it’s structure, the CSS that makes that page look great and the JavaScript, or in our case the JQuery, code that gives it functionality.

Got it, so what does JQuery do exactly?

JQuery makes it easier for you as a developer to interact and modify your HTML and the data it contains. For example, let’s say you want to disable that button so it can’t be clicked again. You could do that with the following JQuery code:

$(“#my-button”).prop(“disabled”, true);

JQuery is used twice in there. The first being the selector, which is represented by the $. This will go through your web page and it will return an HTML element with the id “my-button” if there is one. Then through the use of the .prop method, it will change that element’s properties, to include the disabled property with a value of true. And voilà, you can’t click your button anymore.

As you can see, the code above looks just like JavaScript and that’s because JQuery is written in JavaScript, which makes its syntax really similar. Furthermore, it can be used in any web page that JavaScript could be, as long as you include it as part of your webpage’s code.

We could also accomplish the same thing as above with normal JavaScript by writing the following code:

document.getElementById(“my-button”).disabled = true;

Though the code isn’t that much more complicated for our simple example, I would need a much more complicated explanation to explain what document refers to and why we can use the getElementById function on it.

JQuery’s $ effectively replaces JavaScript’s document.getElementById, so you don’t have to worry about it. Plus it saves you quite a bit of typing. :P

Plain JavaScript examples get a lot longer when you try to implement some more complex features, such as event handling or AJAX calls. I recommend you look at JQuery’s documentation to learn more about those advanced use cases and how much work JQuery can really save you.

The JQuery Foundation also has a lot of other libraries to simplify other aspects of front-end development. Such as their JQuery UI library, which allows developers to easily create User Interface elements that are commonly used in web sites, such as date pickers, menus and popup boxes. These elements require a tremendous amount of work to implement in JavaScript alone.

Any downsides to JQuery I should be aware of?

It is important to note that even though it is one of the most popular JavaScript libraries used on the web today, JQuery does have its limits. It is very useful in small or medium applications but large codebases written exclusively with JQuery can get unwieldy, due to its lack of imposed structure.

The newly developed front-end frameworks make it easier to write large, complex front-end applications and are a good alternative to JQuery for large codebases.

Where should I go from here?

As you learn to code and work on building your development skills, I highly recommend dedicating quite a bit of your time towards JavaScript. It has gained so much popularity recently and has evolved into a much more versatile and useful language, which makes it worth learning.

And I would also recommend looking through JQuery’s documentation to see if it can be applied in your next project. I recommend the JQuery UI library, it has saved me quite a bit of work in the past and it will always have a special place in my heart.

If you want to learn the basics and set up your coding environment, take our free 7-day Web Development Email Short Course.

Happy coding!

What You Should Do Now

  1. If you’d like a step-by-step intro to find out if web dev is right for you - sign up here for our free 7-day web dev short course.
  2. If you are interested in becoming a Web Developer check out our web development course (you'll learn the essential skills employers need).
  3. If you’d like to speak to an expert Career Advisor for free about how you can really get a new job in tech - connect with us here.

If you enjoyed this article then so will your friends, why not share it...

Alexandre Ouellette

Alexandre Ouellette

Contributer to the CareerFoundry Blog

Alexandre Ouellette has been working in the tech industry for around five years, and right now is working as an IT Technician in Ottawa, Canada. He studied web development with CareerFoundry.