JQuery or JavaScript?

This is a question that quite often gets asked in forums by those just starting out with trying to write their own scripts to define their web page behaviour. That they ask this question shows that they have not yet learnt enough about what JavaScript and JQuery are to realise that the question itself is meaningless. Now there's nothing wrong with not knowing as everyone would be in the exact same situation with regard to anything that they know nothing about.

About the best analogy that I have come up with to describe the relationship between Javascript and JQuery for those asking this question is that JavaScript is like a one storey house and JQuery is like an upstairs extension added to that house. In other words, trying to learn JQuery without first having a reasonable knowledge of JavaScript is like trying to add an upstairs extension onto a house that doesn't exist - what is going to hold it up?

Now there are lots of people who learn JQuery first without first learning JavaScript. These people are the ones visiting forums asking how to do really trivial tasks that can be done in one or two lines of JavaScript but where the person has pehaps a dozen or more lines of JQuery trying to do the same thing but where they can't get it to work and so are asking for help. The answer to their question is of course to learn JavaScript as JQuery can only do some parts of what JavaScript can do.

There is of course nothing that JQuery can do that JavaScript can't do because JQuery is simply a collection of functions written in JavaScript so any code written using JQuery is written in JavaScript - just that it uses that particular set of functions that goes by the name of JQuery to simplify the way that certain common tasks are performed.

The JQuery library provides selected functions for your script to use. Where your script needs to perform many of the tasks that these functions provide then using the jQuery library means that you have to write far less code yourself. Of course if you are only going to use a small fraction of the functions that JQuery provides then you are adding quite a bit of unnecessary overhead to the loading of your page in order to use just a small part of what is in a rather large file but then if you use one of the common copies of the library then many of your visitors will already have the JQuery file cached and so only some visitors will be hit with the extra download. Alternatively when you only need a small fraction of what JQuery provides then using alternative functions to perform just those tasks actually required may be a better option.

Jquery was written to resolve some particular browser compatibility problems between different browsers and also to provide a simplified interface for performing common tasks where JavaScript requires running a number of commands in sequence to achieve the desired result. The compatibility issues are disappearing and as many of the functions provided by JQuery are having equivalent functionality incorporated into JavaScript itself, as a result of this the JQuery library itself is becoming smaller. Internet Explorer 8 is the last of the browsers with significant compatibility issues (running JScript instead of JavaScript) and JQuery 2 by removing the support for IE8 is a much smaller file than its predecessor. The implementation of a new querySelectorAll() function into JavaScript itself provides a much faster way of performing many of the searches that calling JQuery made easy and it uses much the same syntax. So JQuery now uses that call when possible and only uses the much longer and slower way that it originally implemented that processing in older browsers that don't implement this newer JavaScript command.

Now as JavaScript develops there will likely be additional commands that only some browsers support and by using JQuery to use the new commands when available and its own equivalents for older browsers we have one way of being able to write one lot of code that will run more efficiently on browsers that support the latest commands while still at least working for older browsers. Of course we can achieve this same result without JQuery even for things that JQuery can't do by using polyfills. A polyfill is a small piece of code written in JavaScript that adds the new commands if the browser doesn't already support them. Using polyfills means that we can use all the new commands and know that they will work across all browsers including those that don't recognise the command because if the call isn't recognised then a function to perform that taks gets added by the polyfill. Of course not all new JavaScript commands can be added to older browsers using polyfills but those that can't be added via a polyfill can't be used by JQuery either.

So having determined that you can't really use JQuery without knowing at least some JavaScript we get to the point of posing a new question. How much JavaScript do you need to know before starting to learn JQuery?

Here's where you are more likely to get different answers. Some people are of the opinion that you don't need to learn a huge amount of JavaScript before being able to learn and use JQuery.

Now JQuery wasn't around when I learnt JavaScript so I got to quite an advanced level with JavaScript itself before JQuery came along. I had also written and rewritten tutorials to help people learn JavaScript and was actually working on the third version of these tutorials by the time JQuery started to become popular. It was when I got to the stage of writing the fourth version of my JavaScript tutorials that JQuery was popular enough for me to decide to include a series of JQuery tutorials with the JavaScript ones (you will find these at JavaScript by Example). Rearranging and updating what I had in the third version of my JavaScript tutorials to create the fourth gave me over three hundred tutorials covering basic and intermediate JavaScript. I decided to start my JQuery tutorials on the basis that the person reading them already knew what was in all those JavaScript tutorials. The result was that I wrote about a dozen JQuery tutorials that cover all the basics of using JQuery. So few JQuery tutorials were needed because each could refer back to a all of the JavaScript tutorials that cover how to perform the same tasks using ordinary JavaScript.

In my view learning JavaScript to this intermediate level before learning JQuery makes a lot of sense. It means that you will actually understand what each of the JQuery commands are doing and so have a far clearer idea of how and when they should be used than you would have if you learn less JavaScript before learning JQuery.

Others will argue that you don't need to learn as much JavaScript before starting to learn JQuery. I don't see that as much of a saving as it means that you will have a much harder time learning JQuery and will perhaps have to work your way through a hundred or so JQuery tutorials to get to the same point as you'd be at with the dozen Jquery tutorials I wrote. It would also mean that you wouldn't learn all of the alternative ways of carrying out certain tasks some of which JQuery doesn't support at all. For example you can create a heartbeat ajax script to determine within a short period when someone leaves your page using a couple of lines of ordinary JavaScript to signal the server side processing that they haven't left yet whereas a JQuery equivalent would require a lot more JQuery code to call the JQuery library than the plain JavaScript solution requires in total.

The better you know JavaScript the better you can use JQuery. More importantly you will not be trying to get a dozen lines of JQuery calls to do something that a couple of lines of ordinary JavaScript can do.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow