Who is the conqueror? JavaScript or jQuery

Have you ever walked down a hallway in the dark and found yourself lost? JavaScript and jQuery create the same sense of loss and confusion. When discussing these topics people will say the funniest things about the two. The general notion about them that I have come across is: 

I hate JavaScript, we should get rid of it. I love jQuery since it's so much easier and less complicated to use than JavaScript!

What's so funny about the above statement is that without JavaScript there would be no jQuery. All good tools have a foundation and without a doubt JavaScript has created a lot of modern day tools that assist in building features into our website and online application experience. So why the confusion around JavaScript? That is what's being discussed in this article.

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.

What is jQuery?

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software, licensed under the MIT License. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

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.

Remember that the biggest difference between jQuery and JavaScript is that jQuery has been optimized to work with a variety of browsers automatically. Unfortunately, JavaScript still has some issues with cross-browser compatibility due to poor JavaScript implementation practices on the part of web browser developers.

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

jQuery 

$ (‘#myId’) .css (‘background’, ‘red’);

JavaScript :

function changeBackground(color) {

      document.getElementById(‘myId’).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 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, Safari to name a few.

The main advantages to adding jQuery to your toolset would be:

• Browser compatibility – doing something like .attr() is much easier than the native alternatives, and won’t break across browsers.
• Simplification of usually complicated operations – if you’d like to see a well written cross browser compatible version of an XHR method, take a look at the source for $.ajax – for this method alone it’s almost worth the overhead of jQuery.
• DOM selection – simple things like binding events & selecting DOM elements can be complicated and differ per-browser. Without a lot of knowledge, they can also be easily written poorly and slow down your page.
• Access to future features – things like .indexOf() and .bind() are native javascript, but not yet supported by many browsers. However, using the jQuery versions of these methods will allow you to support them across browsers.

Personally I think you should learn the hard way first. It will make you a better programmer and you will be able to solve that one of a kind issue when it comes up. Once you implement it with pure JavaScript then using jQuery to speed up development is just an added bonus.

If you can do it the hard way then you can do it the easy way, and not vice versa. That applies to any programming paradigm.

Don’t forget to tell me which technology you use while developing web applications. Please leave your comments, feedback and suggestions in the comments section below.

HAPPY CODING💓