I’ve been asked this quite a number of times recently – should a web developer learn JQuery or Javascript first?  And presumably pick up the other later.

This question would likely apply to other Javascript libraries or frameworks (e.g. Bootstrap).

In other words, does starting with the fun and useful application of Javascript (JQuery) and seeing web pages come to life help to ease one into the drudgery of learning to program?

I have to admit that I’m a programmer first, thus I would fall into the Javascript first camp somewhat by default. My immediate reaction would therefore have been, “Javascript first, duh.” But I wanted to think it over.

My tendency is to learn the hard, foundational stuff first, then move on to the easier stuff later. It’s a bit like learning to do long division on paper, then moving on to use a calculator.

On the flip side, I admit using a ton of JQuery plug-ins way before I learned to use JQuery itself or even got deep into Javascript. This was driven by the desire to find the absolute best image slider for my ASP.NET website without having to do any coding. So I know there will be people that can quite cheerily create a really nice image slider on a webpage using a few lines of HTML without knowing any programming whatsoever, and it’s fantastic that they can do this, and often for free or very little money.

However, if you want to go beyond simple plug-ins on a page, you rapidly run into needing Javascript knowledge:

• Any really useful functionality will still be written in Javascript; you need to declare variables, use loops and other constructs
• JQuery IS Javascript, it’s not an either/or, it just is a simplification of what you can do in Javascript. It lets you code less to do the same thing, which is the hallmark of a good framework
• Some of JQuery’s syntax of passing functions as parameters and nesting of functions within functions or objects can look very intimidating visually (and tough to unravel mentally) compared to starting with Javascript first
• Knowledge of things like events, event listeners, the DOM, etc. are still required in order for a page to do something useful
• Understanding how something works at a basic level I feel is crucial so that you know how a framework simplifies it for you (the long division argument above) – for example, knowing that a JQuery function might be implemented as 3-4 lines of Javascript code takes some of the mystery out of JQuery
• There are many other frameworks based on Javascript, so learning the root Javascript language will help you understand how these frameworks work
• Debugging is facilitated by knowing the underlying Javascript code – sometimes an error will occur in the JQuery code that you’ll have to figure out why.

So, for budding web designers, I’m firmly in the bottom-up “learn some programming basics first” camp, which can be done conveniently with Javascript, and then learn the simplifications later. I was also supported in this view by hearing responses to my question, “Did you actually know what you were typing, or were you just guessing and fiddling with your JQuery code until you got it to work?”

There can be a dividing line – learn programming basics, then move to DOM events and listeners, manipulating DOM elements, and once you’re comfortable writing a couple of simple interactive pages, dive into JQuery and see how those same things can be simplified substantially. You’ll understand those magic incantations better.

The only real exception is if you are going to strictly use the framework to do some of the fun UI plug-in stuff – if you can figure out how to tweak your HTML to add a JQuery plug-in, go right ahead and good luck!