JavaScript VS JQuery

Couple of days back during my evening tea, I was having whatsapp conversation with my friend when she mentioned that she is working on a new project and is confused of which one should she use Javascript or JQuery? This was not the first time I heard this question, rather it is the question that is put forward a lot when people are thinking about learning languages or methods to bring interactive content into their web sites. So up till there it was fine but she didn’t stop!!!
She: “I don’t like Javascript, it is pretty confusing but JQuery is good.”
Me: “But do you know without JavaScript there is no JQuery” ?
So here I am going to share my findings on the subject.

What is JavaScript?
JavaScript is the most popular scripting language on the internet that works in all major web browsers. In past JavaScript had issues with each web browser having its own way of implementing it, that created lots of bugs and developers needed to spend lot of time fixing those bugs. Which made it hard to work with. But it is not an issue anymore, since all the major web browsers conform to a standard.
JavaScript is mainly but not only used for putting interactive content in your website. Slideshows and other interactive components are typically done using JavaScript. The implementation of JavaScript allows client-side scripts to interact with the users, control the browser, alter the document content that is displayed and communicate asynchronously. JavaScript has also been used for server-side programming, game development, and even creating desktop applications.
JavaScript is a multi-paradigm language, supporting object-oriented, imperative and functional programming styles. It is the common term for a combination of the ECMAScript programming language plus some means for accessing a web browser's windows and the document object model (DOM).It is classified as a prototype-based scripting language with dynamical typing first-class functions. JavaScript is also capable of running on the platforms that are not web-based like PDF documents, site-specific browsers, and desktop widgets.

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 a fast, concise, cross platform JavaScript Library designed to simplify the client-side scripting of HTML. It simplifies HTML document traversing, event handling, animating, DOM elements selection, and Ajax interactions for rapid web development. JQuery is free, open source software, licensed under the MIT License. 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. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. Used by over 80% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

Which one is better? JavaScript Vs JQuery
Which is the best JavaScript or JQuery is a contentious discussion. Professional web developers spend a lot of time debating whether JavaScript or jQuery is appropriate in a given situation. But the answer is neither. Both have their roles. There are applications however very few where JQuery was not the right tool and what the application needed was straight JavaScript development. But for most websites JQuery is all that is needed. What a web developer needs to do is make an informed decision on what tools are best for their client. Someone first coming into web development does need some exposure to both technologies just using JQuery all the time does not teach the nuances of JavaScript and how it affects the DOM.

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. Using JavaScript all the time slows projects down and because the JQuery framework has ironed most of the issues that JavaScript will have between each web browser it makes the deployment safe as it is sure to work across all platforms. So though either option can be used to create the exact same effects, but often jQuery can do it with fewer lines of code. JQuery is an extremely powerful library that provides all the tools necessary to create beautiful interactions and animations in web pages, while empowering the developer to do so in an accessible and degradable manner.

JQuery example changing the background color of a body tagTo 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 Example
$ (‘body’) .css (‘background’, ‘#ccc’);

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

One line of code can change how a project will interact with a user with very little effort. A web developer can change the background of your page it makes things very easy and for a customer it assists in the speed and development of their application or website. To write a function to achieve the same goal which is displayed above would take the developer longer as they would have to test it in different browsers and so on. Granted this is a small example but to create a complex arrangements of code the testing is less and in JQuery the hard work and codes set are already complete and have been tested.