When I first started learning to code, I found it difficult to navigate through the terminology, jargon, and acronyms that seem 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’re going to demystify that question, and leave you with a better understanding of what both of these technologies are, as well as the benefits of using them. Let’s dive in!
- What exactly is JavaScript?
- So what is JQuery then?
- Perfect, now what is frontend code?
- What does JQuery do exactly?
- Downsides to JQuery to be aware of
- Where should I go from here?
1. 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?” Unfortunately not—there’s no relation between the programming language Java and JavaScript, other than a little bit of syntax and an unfortunate naming choice.
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 frontend 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, which makes it a full-stack language. If you’d like to learn more about how that works, then our beginner’s guide to Node.js will explain all.
It’s consistently up at the top of Stack Overflow’s most-wanted languages list. What’s more, our research on JavaScript developer salaries shows that this language is a nice earner, too.
All in all, 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. In this video Abhishek, one of our in-house developers, takes you through the first steps:
2. So what is JQuery then?
JQuery is a library, written in JavaScript, that is used to simplify frontend 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.
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.
Another example of a popular JavaScript library is React.js, which you can learn more about in our React guide.
3. Perfect, now what is frontend code?
Typical web applications can be thought of as having two parts—the backend (server-side) and the frontend. Knowing the difference between the two is essential to being a web developer.
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 frontend code is your web page and everything that your user sees. It includes the HTML that gives your web page its structure, the CSS that makes that page look great, and the JavaScript, or in our case the JQuery, code that gives it functionality.
4. 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 i.d. “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 can, 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!
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 websites, such as date pickers, menus and popup boxes. These elements require a tremendous amount of work to implement in JavaScript alone.
5. Downsides to JQuery to be aware of
It’s 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 frontend frameworks make it easier to write large, complex frontend applications and are a good alternative to JQuery for large codebases.
6. 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’re looking to read a bit more on JavaScript and similar languages, have a look at these articles: