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?
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 clientuses 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.
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 MooToolsit 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 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 colour of a body tag
$('body').css('background', '#ccc'); Example Two JavaScript function to change the background colour 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,W3Chas the best resource and to understand JQuery and how its API can get help, go to JQuery documentation.