The difference between JS and jQuery

See as https://blog.udemy.com/jquery-vs-javascript/

JQuery vs. JavaScript: What’s the Difference Anyway?

Many aspiring web developers want to know what the differences between JavaScript and jQuery actually are. After all, they both start with a J, but are there other similarities as well? It may surprise you to learn that JavaScript and jQuery are actually the same thing. In a nutshell, jQuery is a set of JavaScript libraries that have been designed specifically to simplify HTML document traversing, animation, event handling, and Ajax interactions.

That said, in order to use either one of these scripting languages you need a solid foundation in JavaScript. If you are unfamiliar with using JavaScript for web development, check out JavaScript Made Easy. Once you understand how to use JavaScript, you might find that jQuery meets most of your needs and requires much less coding than conventional JavaScript might require.

In this article, you will learn what JavaScript is, what jQuery is, and which scripting language is the better choice for your future web development projects.

What is JavaScript?

JavaScript is a scripting language that was designed for use within a web browser. Typically, JavaScript is used for interface interactions. Slideshows and other interactive components are typically done using JavaScript.

JavaScript has many other uses as well. If you are familiar with using the Google email client Gmail, you have experienced the power of JavaScript firsthand. Many of the additional features and functionalities that make Gmail such a popular email solution are created using JavaScript.

The uses of JavaScript don’t stop there, however. JavaScript has also been used for server-side programming, game development, and even creating desktop applications.

Years ago, JavaScript was popular but web developers were not entirely sold on the idea of using it simply because every web browser would render JavaScript content in a different manner. Newer standards now force all web browsers to implement JavaScript uniformly; saving developers time and frustration trying to debug code for a specific web browsing client.

Dynamic content is the hot topic in web development right now. Dynamic content refers to content that constantly changes and adapts to specific users whenever possible. For example, JavaScript can be used to determine if a website visitor is using a computer or a mobile device before deciding whether or not to render the mobile version of the website. It’s these small things behind the scenes that create genuine value in using JavaScript to create dynamic web pages.

What is jQuery?

Before jQuery was developed, web developers created their own custom frameworks in JavaScript. This allowed them to work around specific bugs without wasting time debugging common features. This led to groups of developers creating JavaScript libraries that were open source and free to use.

JQuery is simply a specific library of JavaScript code. There are many other JavaScript code libraries such as MooTools, but jQuery has become the most popular because it is so easy to use and extremely powerful.

While many web developers confuse JavaScript and jQuery as two separate programming languages, it is important for you to realize that they are both JavaScript. The difference is that jQuery has been optimized to perform many common scripting functions and it does so while using fewer lines of code.

So Which One Should You Use?

Professional web developers spend a lot of time debating whether JavaScript or jQuery is appropriate in a given situation. The truth is that there is no correct answer. Either option can be used to create the exact same effects, but often jQuery can do it with fewer lines of code.

As a general rule, jQuery is sufficient for most web development projects. There will be some projects that require traditional JavaScript; however, these are few and far between as of late. Although jQuery maybe the better choice in most scenarios, as a novice web developer you should still take the time to learn both JavaScript and jQuery.

Although using JavaScript exclusively can slow down project completion time significantly, it’s important to realize how JavaScript works and how it affects the Document Object Model (DOM). 

To see this difference in action, consider the following example that is designed to change the background color of a body tag using jQuery and JavaScript respectively:

jQuery

$ (‘body’) .css (‘background’, ‘#ccc’);

JavaScript

Function changeBachground(color) {
        Document.body.style.background = color;
}
Onload=”changeBackground (‘red’);”

Can you see how in a large, complex web development project it makes more sense to use jQuery? A single line of code accomplishes what it takes four lines of code to accomplish in JavaScript and this doesn’t even account for the extra time you might spend debugging this short piece of code to work across popular web browsers including Internet Explorer, Firefox, Chrome, and Safari.

Is jQuery the answer to all of your scripting needs? For most projects – yes. For those few projects that require the specific functions only available in traditional JavaScript, you can quickly adapt your style to include JavaScript code when needed.

Remember that although 99% of your web development projects will work perfectly fine using jQuery, there will be a small percentage that does require JavaScript. As a result, it would be wise to study both so you can transition between the two as needed to provide a better web development service to your clients.