I’ve recently been pushing around the thought of whether I should be learning jQuery before I even attempt javascript or to drop jQuery and learn javascript first…
Thoughts? Opinions?
Anything to shed light on the subject of jQuery vs. Javascript
Javascript is jQuery.
jQuery is really just a piece of code (mind you, a very useful piece of code) written in JavaScript. By learning JavaScript first, it will give you a deeper knowledge of how jQuery works, and jQuery’s limitations. It can only perform tasks that JavaScript can; it just provides you with a more efficient syntax to perform JavaScript functions.
I agree with Travis, except I’ll fix this:
jQuery is Javascript.
jQuery is a bunch of pre-written Javascript, including cross-browser workarounds and shortcuts for developers (not for browsers).
But agreed with Travis that you’ll want to learn Javascript itself before landing in any library. That way, you can choose any library later and while you’ll learn some new syntax stuff and prebuilt functions, any debugging or fixes you need to write yourself, you can. And learn other libraries when needed.
jQuery lets you get up and running quickly, because a lot of the hard stuff in JavaScript is done for you in jQuery. So jQuery is handy for people who don’t want to specialize in JS but still need to use it.
As others have said, the ideal is to know as much as possible about what’s going on, so that you have more flexibility—which means learning JavaScript. But that takes a while (I still haven’t gooten very far with it.)
If you only learn jQuery, you may end up using a gigantic amount of code (the whole jQuery library) to achieve what just a few lines of simple JS could do. So, although jQuery may be the quicker way to get something done, it’s never the most efficient way to use JavaScript, as the user will always be downloading more code than needed.
The benefit that jQuery has is that if you use one of the shared copies of jQuery such as the one Google supplies then a lot of people will already have that downloaded before they even get to your page and so provided that you are actually using the library correctly you can end up with a lot less code for them to actually download for your page to work.
You do need a thorough understanding of JavaScript to use jQuery properly though. I have seen 20+ line scripts people have written using jQuery that could have been done in two or three JavaScript statements without jQuery.
I knew someone would probably say that jQuery will be cached for most people anyway. I guess it’s true, though I still find jQuery sites tend to be slower to load. But I haven’t done any speed tests on this. Far too lazy. 
Possibly because only some of them actually bother to use one of the shared copies and so their visitors have to download the humongous script before the page can finish loading. If more people were to use the shared copy in their sites then there would be more people with it cached.
Of course that still doesn’t stop all those people who use jQuery unnecessarily where the corresponding JavaScript without jQuery is either shorter than the code needed to call jQuery to do it or where the JavaScript would only be slightly longer than the jQuery calls without the actual jQuery library.
Personally I find that I can include everything I need for most web pages with less than 5% of the amount of code that jQuery uses simply by only including the pieces of code I actually need to use.
It’s worth learning Javascript first, since you’ll need to know Javascript anyway if you’re going to use jQuery (because it is Javascript).
I can recommend the book “Javascript: The Definitive Guide” by David Flanigan, and for follow-up reading, “Javascript: The Good Parts” by Douglas Crockford. See if your local library has any copies.
As for jQuery, I think its online documentation is good (but it’ll help if you know Javascript first).
In my opinion, if you want to just copy-paste scripts, learn JQuery. If you want to be albe to modify those script, learn (basic) Javascript first.
You can learn to modify and write jQuery scripts quite effectively without knowing JS proper.
Not based on a lot of scripts I have seen where there are 20 or 30 lines of jQuery to do the same thing as half a dozen lines of ordinary JavaScript.
There are also lots of people trying to use jQuery who don’t know JavaScript and who therefore spend a lot of time asking how to do the simplest of things where a single JavaScript command is all that is required.
To be able to use JQuery you need to know at least the basics of how JavaScript works as otherwise its like trying to drive a road train with 6 trailers on when you never learnt how to drive a car.
Yes, my comment was really based on doing simple things with jQuery, as presented in a book like Novice to Ninja. When I look at scripts for sliding carousels etc., I realize that you still need to understand JS to write that stuff. So I guess it depends on how much you want to do with JS. jQuery is handy for designers who just need to be able to add scripts written by others, perhaps modify them a bit, or to write other simple scripts that rely on the library. It’s certainly a far cry from actually knowing JS properly. (I keep trying to find the time to crawl down that rabbit hole properly.)
I just was searching for this very subject on whether or not to learn JavaScript or jQuery first and I found this thread. I took Kevin Yank’s class a while back when it was first introduced here on Sitepoint called JavaScript Live. I started to grasp a few things about it but I have a really hard time understanding programming. HTML, CSS are much easier to learn. Does anyone have any recommendations on books for someone trying to learn JavaScript coming from a designer’s perspective? Do you think it’s possible for a designer to learn JavaScript? 
Or any other programming language? PHP? Is JavaScript better to learn first then move on to other ones like PHP? I figured if I could at least learn JavaScript though it would help.
I guess designer or not, if you are going to learn a programming language you have to tackle it as a programmer. Of course, jQuery is an easy alternative. Regarding whether to learn JS or PHP, it really depends on what skills you most need. In my (limited) experience, both have about the same learning curve.
I am pretty much a beginner at both, but I can highly recommend Jeremy Keith’s Dom Scripting book (which has recently been updated). It’s an excellent intro to JS. Or, if you just want to be able to do cool stuff without learning the whole language, give jQuery Novice to Ninja a shot.
Do you think it’s possible for a designer to learn JavaScript?
Absolutely. A designer mindset probably has to work harder at it. But designers can at least learn basic programming, if not also advanced.
Or any other programming language? PHP? Is JavaScript better to learn first then move on to other ones like PHP? I figured if I could at least learn JavaScript though it would help.
My husband, who started learning programming in Pascal in Delphi (Pascal was written to be a teaching language), later went through batches of C and C++, learned Assembly for the lawlz (and to build an emulator), and has been programming Perl for over 10 years now… told me I should expect to get frustrated simply by having Javascript (or Perl, as I was learning both as “first languages” at the time) as my first language. This would be partially because most Javascript that does anything is interacting with its API, the DOM. The DOM is buggy and inconsistent between browsers. Javascript itself has plenty of quirks compared to other languages (the biggest difference: no classes, but prototypes of objects… but also only has “float” as numbers, functions are first-class, everything’s an object, C-style blocks without block scope… I think are the other biggies).
Frankly, as someone starting out with pathetically-low math skills and learning programming for the first time, I would have trouble no matter what language it was. There are simply wholly new ideas and ways of thinking in programming that HTML and CSS (being non-programming languages) simply don’t have (hint at in many places, but don’t have).
I’m not a designer really, though I draw and I can build entire markup+CSS structures in my head before actually sitting down to write them (meaning, I feel very comfortable with HTML/CSS), and here’s my experience so far learning Javascript (I’m still a newbie after , what, 3 or 4 years now? But that’s pretty much entirely due to me spending a crapload of time trying to do something in Javascript, and then months and months of having no time to touch it again… forgetting most of what I learned then):
I actually started learning Perl, going through the Llama book (“Learning Perl”). Each chapter introduces basics of the language like variables and statements, blah blah. At the end of the chapter, there are a couple of exercises (and more if you buy a little companion workbook). It’s meant to be used by teachers in a classroom who can further explain stuff.
So okay I get through the first 2 chapters and then they get into loops. And while I thought I got the example, I could not do a single one of the exercises in the back. The answers are in the back, and I’m looking at them and I’m like, well I can read these, but why couldn’t I come up with them?
Later, suddenly had to do stuff with Javascript for the first time. Happened to have Simply Javascript book (the SitePoint book which the JavascriptLive course was based on… the main difference is, instead of using SitePoint’s Core library to deal with IE, they used jQuery, which for me was awesome because now I can either use Core or I know how to integrate vanilla JS into jQuery better) laying around and went though that.
Same things: variables, statements, loops, conditionals, functions. This time, it wasn’t entirely new to me, because Perl was quite similar. Learned more, but missed stuff.
Later, got more time to get back to the Llama. Found that the loops made more sense, and now I could do the exercises, and in more than one way. Which was very exciting (sad, excited by grokking loops, but, meh).
When I next had to do something in Javascript, more made sense regarding functions and closures.
I’d say it was beneficial to learn another language, or maybe it just helped that I had this other resource not written by Javascript people that also explained programming. I started writing in my Perl book what the equivalent Javascript would be for any particular Perl example.
Certainly once you get over that “hump” of the concepts, and once you learn one programming language, learning more that aren’t horribly different is much easier, or at least being able to get around and write stuff that works is easier (learning the details of a language would take way more time).
If you think you’re going to want to learn more languages, go ahead and start looking at one you’re interested in now… esp since, with Javascript being prototyped, you may want early exposure to class-based languages and how they are different. PHP is class-based, as is Python, Ruby, etc. Maybe if you’re interested in a back-end language, go ahead and read the flame-fest threads around teh internets where people scream out why one is better than the other. Sometimes there are good arguments in there, to help you get an idea of what you get from a language. The community is important!!! You don’t learn in a vacuum and you likely won’t develop alone, so a good online (and offline) community for your language is very good to have. Good documentation is also good… PHP is known for php.net which has lots and lots of documentation written in fairly plain English. Many applications for your language as well… for example, if you’re using Linux and want to tinker with the desktop apps, Python is one clear choice. Lots of stuff in Gnome is written in Python. Also programs on Windows.
I’m kinda glad if I want to make some object that’s mostly the same as some other object plus whatever else I want, I don’t have to go off and make some new Class first that does nothing but states the rules. In Javascript, you can just say “I want a new Object and I want it to inherit all these methods and properties from the other one” and it’s done.
Some people are talented in programming and maybe already have a mindset that works because they already think a certain way, but I’d say anyone can learn basically how to think that way and at least be able to write simple things that work. And just as importantly, be able to read complex things and know what they’re doing (and why). I’m not there yet, but I believe I will be.
ralph.m thanks for the recommendation on the books
Stomme poes thanks for explaining in detail how you are learning that really helps. I guess I just need to stick with it and I’ll eventually get it hopefully. I think I’m able to understand more by reading a script than actually being able to write my own at this point, but it’s still very minimal what I can understand. But that’s a start right? Well I’ve got Simply JavaScript the book already and I’m definitely gonna check out that Jeremy Keith book, didn’t know he had written any JavaScript books. Good recommendation about the forums also, I’ve been coming to the forums more and more recently, because it really is super helpful to find out how others approach something or tap into their knowledge of something.
And also: as someone who reads reads reads, I agree wholly with those who say: write, write, write.
Write code, write more code, write still more code. You learn stuff from these books, absolutely. You learn to know what you know from writing code.
Go ahead and try out http://eloquentjavascript.net/chapter1.html it doesn’t focus on DOM scripting til the end. It has a built-in console where you can try out your own code.
Very cool. I like that there’s a built in console. I read the first chapter. I already don’t understand the very first example. How does it come up with 55? When I run the script that’s what I get in the Output window.
How does it come up with 55? When I run the script that’s what I get in the Output window.
You know, I should figure out how to make Firebug work with his console. With any kind of debugging tool like Firebug, Dragonfly etc what you can do is set a breakpoint (a place where the program should pause) and then you can step through each step. In the Firebug/whatever console you’ll see the variables like Total and Count in there, and each step through the loop you’ll see what their values upgrade to. In his console all you see is the result of the final Print statement (after all the loops have finished). One thing you can do is, on his page, click on what looks like a bit of paper to load his code into the right side of the console, then change it: move the print statement to inside the loop, so you can see the result of Total after each loop run!
var total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
print('Total is ' + total);
print('Count is ' + count);
}
“Count” here is, as he’ll later tell you, usually seen in loops as “i” (for incrementer), but for now he uses “count” just so you know what it is.
So count starts at 1 and all it’s doing is counting how many times to run the loop. The conditional (while count’s number is less than, or equal to, 10— keep going). So how many times does the loop run? 10 times. 1-10. Later I think he introduces the more popular “count=0, while count < 10…” which is the same number of times, but starting with 0.
total += count; <– The longer version of this is, total= total+count. The += is a shortcut. Yes, there is a -= too.
So to start:
total=0 and count=1.
while (count <= 10) {
1 is less than or equal to 10, so run the loop.
total += count;
total = 0 + 1 (which is 1, so total is now 1)
count += 1;
count = count + 1, or “increment count by 1”. count was 1, +1 makes it now 2.
Loop goes again, because 2 is still less than or equal to 10.
total = 1 + 2 (so now 3)
count = 2 + 1 (so now 3)
Loop goes again, because 3 is still less than or equal to 10.
total = 3 + 3 (original total + count, so now 6)
count = 3 + 1 (so now 4…)
etc. Count is going up by 1 number each time (which is good, to keep track of each loop), while total starts getting larger (I forget the name of this number sequence but it has a name).
Total starts at 0.
1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55, where total's values at each loop are 1, 3, 6, 10, 15, 21, 28, 36, 45, and 55
Believe me, when I first went through his book, I missed a lot of it too. After watching loops in Firebug or (I started before I had Firebug) actually getting out a pencil and writing out each iteration of the loop (like I did above), they started to click.
Programmers will tell you loops are easy and they are one of the most basic structures in programming. But that doesn’t mean everyone just gets them the first time they play with them.