JavaScript and JQuery, What is the difference?

You are here

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.

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 JavaScript and JQuery people will say the funniest things about the two, one quote I heard a long time ago on the subject:

 JavaScript I hate, what we should do is get rid of it. But JQuery I love!

What is so funny about the above statement is 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. Why the confusion around this subject of JavaScript?, that is what is being discussed in this article.

What is JavaScript?

JavaScript is a computer language that is used inside your web browser. It is dominantly used for interface interactions (meaning the flashy moving parts inside your  website). If you have every seen a slide show on the internet like the image below it is more likely to be JavaScript Scripting that will be doing the hard work behind the scenes. But JavaScript can do much more if you have a Gmail account with Google the email client uses JavaScript to create the features and functionality creating a rich user experience. Being a very powerful computer language it has the advantage of being easy to learn so a new developer can pick it up in a very short amount of time. It was created to be very readable and flexible, Wikipedia have a great description of JavaScript. In the past, JavaScript had issues with each web browser having its own way of implementing it, this created bugs and developers would spend more time fixing the bugs. This made it hard to work with. Today that is not so much of an issue as all the major web browsers conform to a standard meaning that these bugs are not great issues anymore.

Below is an example of a JavaScript Image Slide Show.

 Slide Show Example that is using JavaScript

 

What is JQuery?

Before JQuery, developers would create their own small frameworks (group of code) this would allow all the developers to work around all the bugs and give them more time to work on features, so the JavaScript frameworks were born. Then came the collaboration stage, groups of developers instead of writing their own code would give it away for free and creating JavaScript code sets that everyone could use. That is what JQuery is, a library of JavaScript code. The best way to explain JQuery and its mission is well stated on the front page of the JQuery website which says:

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

As you can see all JQuery is, is JavaScript. There is more than one type of JavaScript set of code sets like MooTools it is just that JQuery is the most popular. Which is better to use JavaScript or JQuery? This is a question that is constantly asked.

JavaScript vs JQuery

Which is the best JavaScript or JQuery is a contentious discussion,  really the answer is neither is best. They both have their roles I have worked on online applications 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. 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.

JavaScript and JQuery Examples

One of the great advantages of JQuery or another JavaScript framework is the speed in which code can be written. One line of code can change how a project will interact with a user with very little effort. In Example One below 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 in Example Two 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. 

Example One JQuery changing the background color of a body tag

 $('body').css('background', '#ccc'); 

Example Two JavaScript function to change the background color with the onload function that would need to placed into the body tag

function changeBackground(color) {
   document.body.style.background = color;
}
onload="changeBackground('red');"

To see how  JavaScript works as language, W3C has the best resource and to understand JQuery and how its API can get help, go to  JQuery documentation.

Should I user JavaScript or JQuery?

Using JavaScript or JQuery really depends on the circumstances but for most applications JQuery will suit the needs of the developer. As you can see the quote at the start of this article was really inaccurate and that developer had a lot to learn about web development (I should have kept my mouth shut). I have learned at Purencool Website Development to discuss the clients needs first this allows for an educated and efficient decision to be made so that your online vision can become a reality. If you  would like to know more about Purencool Website Development Services or products like Purencool Iticket contact us