We Keep Coding

Is there any need to learn JavaScript DOM methods for web development, now we have jQuery et al?

With the availability of JQuery, is there any need to learn direct DOM manipulation with Javascript in order to be a professional web developer/site builder/etc.?
This probably could be asked with Prototype, MooTools, etc. too, but I'm not familiar with them apart from their names.

Note: This question was rephrased so
my answer reflects the initial
question but I kept on adding.
Absolutely. Jquery IS Javascript and while it does abstract a lot of the cross-browser DOM discrepancies, one is still prone to the same exact parsing errors, scope misunderstandings, and so forth.
Using jQuery without knowing basic DOM knowledge or necessary Javascript knowledge is what I would consider dangerous, somewhat like giving a very powerful gun to a child who just may accidentally shoot himself in the foot without knowledge of how to use such a powerful tool the proper way.
A person that's taught straight with jQuery would have absolutely no idea how to debug issues if the error being thrown refers to anything in the DOM. For something as simple as comparing to see if an element is another element ( for things like current state ), they would try something maybe like:
if ( $('a.current') == $('a.current') ) { }
Which would return false since two unique jQuery objects are created. If they had known how to grab the reference to the DOM nodes they could have just done $('#el')[0] == $('#el')[0].
Anytime you use a jQuery plugin and run into some mysterious behaviour, without DOM knowledge you pretty much have to rely on someone else to help you out. Developers with DOM knowledge would be more able to debug and know the root of the problem, so you're only setting yourself up to lose more time scratching you head puzzled in jQuery land.
Furthermore, if one wishes to ever get to a high knowledge level and not just be an ordinary joe jQuery developer then he would greatly need a vast knowledge of the DOM discrepancies and Javascript in general otherwise you're limiting your skill level by a huge margin.
If you stick around Stackoverflow for awhile you'll see this in day to day questions, in which people who took the easy shortcut lack the basic JS/DOM knowledge necessary to solve their issues.

In some circumstances, you could conceivably not want the overhead of a DOM manipulation library.
E.g. for mobile development, mobile internet connections are still a bit slow at the moment, so you might want to save bandwidth by forsaking a library and going with native DOM code. (And possibly save a bit of execution time, as mobile devices are currently a bit slower at running JavaScript than desktop computers.)
But the devices, libraries and internet connections should all get faster as time goes on, so I reckon it’s unlikely you’ll do a lot of direct DOM scripting in mainstream day-to-day web development.

If you don't want to learn the underlying basics, sure it is :)
If you're not interested in how stuff works, sure it is....
If you want to cry for help each time you hit the limits of jQuery, sure it is!
If you want to depend on people here answering you simple questions, sure it is :D (reps for us...)
"The fool wonders the wise man asks."
In other words, know how the tools you use work, otherwise you'll end up with a horrible dependency.

You can use a library like jQuery with little knowledge of Javascript and almost no knowledge of the DOM, but that will only get you as far as the library lets you. You will only be able to do things that others have done before you.
Knowing how the underlying system works will also let you use the library more efficiently. Knowing what the library has to deal with lets you know why there is a big performance difference for certain ways of using the library, and why some things doesn't work at all.

There's a great many things that jQuery simplifies for you, but knowledge of the underlying JavaScript that jQuery calls can make things a little faster:
$('<div />').appendTo($('body'));
and
$(document.createElement('div')).appendTo($('body'));
are both equivalent, but the latter is a shade faster (albeit only in the order of milliseconds), since you're using JavaScript directly, rather than having jQuery calling document.createElement() on your behalf. Again, this is definitely a ridiculous micro-optimisation.
Other examples are working with Date, Math and string objects/functions. jQuery doesn't implement replacements for these (wisely so, since they're fairly easy to work with already).

Shortcut programming languages am I missing something?

I'm seeing a rise in the number of projects online that require additional "short" syntax to generate underlying code (commonly HTML and JS), and every time I see another pop up I wonder if I'm missing something.
Surely the additional time taken to learn and remember these shortcodes is lost when passing projects between different team members (designers et al) who then have to relearn basic languages such as HTML and JS?
Point in question: YAML being used for generating templates, and projects (such as) CoffeeScript used to generate Javascript. I'm just wondering if other Stackoverflow folk think that there's major benefits to this granular level of abstraction, or if there's a feeling that these types of projects have any lifespan, considering the improvements in the base technologies (I'm thinking HTML5 / CSS / JQuery) here. Have markup languages not evolved enough to really warrant these?
Realise this isn't really a question as such, but would be interested to hear the community viewpoint. I'm sure there are genuinely good reasons for these types of projects when creating self generating code, but outside of that, I'm puzzled - with many folks using them day to day. Is this a bandwagon worth jumping on?

Personally I don't think that it's worth it as most things you can do in javascript are already simplified by libraries such as jQuery. As far as their lifespan goes it's hard to tell. However, as long as you know javascript, and you understand the code output, moving to a new project that isn't using CoffeeScript for example is a simple matter of taking the output code with you.

Any sufficiently complicated program contains an implementation of Lisp.
This is the ideology that Lisp and friends promote over many years. Basically, you're discouraged to code any application logic in a "raw" language. Raw languages are universal and low level, so your logic quickly gets verbose and contaminated with lots of code needed to support the language itself.
Instead, create a DSL that suits your application best and code your logic, and nothing but the logic, in this DSL. Hide all nasty language details behind the DSL. This makes the logic much easier to improve and support.
On the other side, things like Coffescript, Groovy etc are IMO the wrong way to go. They are basically trying to create new universal languages but with a "better" syntax, however, this doesn't solve the fundamental problem - these languages still describe abstract calculations rather than your problem domain. A more productive way is to have a very basic underlying language and a well-developed macro facility that would simplify creating DLSs. This is how lisp itself works, another example of this approach is Haxe/Neko.

In my opinion I prefer jQuery for writing short JS instructions and prevent everyone from bloating the final product. I don't like css frameworks because we are building huge portals and you don't always need all of the stuff hidden inside these. I prefer writing modular css based on some common rules like using clearfix for clearing an using a css reset. :)

Is it necessary to learn JavaScript before learning jQuery? [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Is it a good idea to learn JavaScript before learning jQuery?
I am about to start learning JavaScript. However one friend suggested me to go in for jQuery instead since he says future is jQuery. I heard that jQuery is created from JavaScript.
In short, give me one simple reason why developers like me should invest in JavaScript. What is its future?

Part of being a good programmer is having an interest in understanding how things work. You can't understand how JQuery works without knowing JavaScript.
A good programmer has a diversity of skills. Knowing both the JQuery way to do things and the JavaScript-only way makes you more versatile.
Most employers who are looking for someone who knows JQuery are probably also looking for someone who knows ordinary JavaScript.
You can never achieve true expertise in JQuery without understanding JavaScript.
Sometimes even a fairly lightweight framework is more than you need.
If you don't ever learn to do things the hard way, you won't appreciate what's so great about doing it the easy way.
Moreover, if you start by learning to do things the easier way, you'll have that much harder a time motivating yourself to learn to do it the hard way.
Learning the language first without the fancy frameworks builds character.
Who knows, maybe you'll want to make your own framework someday. Or even work on a new version of JQuery. To do that, you'll need to know the language.

jQuery is JavaScript and yes, it makes things a lot easier for you and you can use it without much JavaScript knowledge, and yes, it will probably become even more popular in the future.
BUT: Wherever is jQuery, there will be JavaScript. jQuery is "just" a tool. You still need "plain" JavaScript to solve some problems, e.g. string manipulation.
Imho: You cannot master jQuery if you don't master JavaScript.
And there will be situations where jQuery might be not the best solution, e.g. when you really need high performance.
For me, this is similar to other questions I read here on SO about web frameworks and programming languages, like: Do I have to learn/know PHP if I want to use [Zend | symfony | CodeIgniter].
Seriously: If you don't understand the basics, you cannot use a tool efficiently.

JQuery is a library, written in Javascript, the language. It is almost always the case that learning the library without learning the language is impractical if not impossible, irrespective of the library and the language in question.

jQuery will come and go.
You are a web developer, right? Javascript is huge. Think how much time people spend using a web browser. The entire time they are interfacing directly with html dom, css, and javascript. Or, less and less, flash and "actionscript" (which is basically javascript).
Learn javascript, learn css, learn the dom. Refer to ecma-262 versions 3 and 5 and publications by w3c and whatwg. Read mozdev, cross-check msdn.
After that, take a look at jQuery if you want. You will probably find that you don't need it for 99% of the stuff people use it for.

Every browser has its own implementation of Javascript ( the language ) and the DOM ( library for manipulating elements on the page ). Because of the inconsistency of each browsers Javascript + DOM with another, jQuery ( created with Javascript ) was created as a wrapper that internally deals with these inconsistencies so you can use the easy API.
Underneath the hood, most of your problems are already solved for you so you don't have to think about issues like:
invoking functionality for the DOM ready event
a consistent way of attaching event handlers for click, mouseover and other events, attaching multiple functions to the same action
returning the proper values for elements as well as viewport ( window ).
Because jQuery is a Javascript library you won't master it without mastering Javascript. See my previous answer for recommendations for learning Javascript.

You do not need to know JavaScript in order to use jQuery.
This depends what you want of course.
If you want to put together web pages and don't consider yourself the 'programming type' or you simply don't like JavaScript, then don't bother, spend your time where it will matter most.
Your also asking this question on a site where majority of users are developers so your going to get a lot of people who say you should learn JavaScript, I say learn it if it interests you.
There are pleanty of jQuery solutions out there and support so that you don't need JavaScript.

jQuery IS JavaScript. When you are writing jQuery, you are writing in javaScript. All a library like jQuery consists of is a premade collection of functions you can use in your JavaScript programs.
So, you have to know JavaScript syntax and the core language in order to use jQuery at all. A good book for that is Douglas Crockfords the Good Parts.
What you do not need to know as much about is the DOM API, since that is mainly what jQuery smooths over for you. It helps a lot to understand the concepts of the DOM, though. You still need to know what an element is, and what attributes are.
You also need to know about CSS in order to use jQuery effectively. The key concepts here are classes, IDs, positioning, visiblity and display, among others.

Yes you CAN use jQuery without knowing JavaScript. In fact, I knew very little about JavaScript originally but by using jQuery it sparked my interest to learn it and so I did. Years later I can say I am very proficient with both.

As you progress in your programmer expertise you would find that you go from library writer to library user. This is quite natural and OK. When you are starting off, all you have is the basics. You write your code in terms of those basics and over time find that you need to bunch common code in a library for easier reuse.
Sometime later you find that someone has already done just that and created a library that's even better than yours. You then switch from being library writer to library user. jQuery is one such library and you really need to know JavaScript to be able to draw a line in your head as to where jQuery is and where JavaScript is.
My advice, in light of the above, would be to learn the underlying technology before getting started with the library (which is what jQuery is). However in this case I would make an exception - skip DOM manipulation. DOM is a stupid abstraction and will have you tear your hair out in no time flat. jQuery wraps it up quite nicely, might as well get stuck into that after you understand JavaScript basics.

you can read this
edit
However one friend suggested me to go
in for jQuery instead since he says
future is jQuery.
If you go for jQuery, of course you are still learning Javascript...
You can not understand jQuery if you can not understand how Javascript works.
Some programmers learning jQuery wihtout the knowledge of javascript thought that they are learning a new programming scripting language. But they did not know that jQuery is not. They are just using jQuery as a tool. They are still coding Javascript...
If you want your Javascript codes to be cross-browser,
with less hassle, go for jQuery... but still you need the basic (or at least) knowledge of Javascript.

Ideas for a comprehensive Javascript assignment

I am likely to be part of the teaching team for the web programming course at my University next semester and I was wondering what kind of Javascript assignment to hand out to the students. The course is not an introductory one from a programming perspective.
It is assumed that the students are familiar with OOP, data structures and algorithms, functional programming concepts and working knowledge of networking protocols (HTTP included). This is the first course in which they come in contact with JavaScript
I was thinking to give out something framework-specific (using jQuery perhaps) that involves DOM traversal, some animations and AJAX. The three questions I have in mind are:
should they use a framework or should I have them write vanilla JavaScript?
should I focus more on the functional programming part and on the prototypal inheritance part (more on the language than on working with the DOM)?
how do I automate testing for this? It's better if they have a clear idea on how they will be evaluated. Also, automated testing ensures objectivity and saves me time :).
Outcome
I made them do Tic Tac Toe as a jQuery plugin and the results were mostly satisfactory (70% of the students submitted, generally the submissions were ok).
To prevent copying code from the net, I thought out an API which they had to implement. At least, they'd have to understand the code they found on the net before copy&pasting it into the methods :).
I used QUnit for automated testing, but I also tested each assignment manually because this was the first JavaScript assignment they'd had and I wanted to give relevant feedback.
Thank you all for your ideas, they all helped a lot.
Cheers,
Alex

I think its useful for the students to know fundamentals about the language before working with frameworks. They need to know about JS Scopes, closures, prototypes, the memory model, and everything that makes JS unique.
After that, introduce them to frameworks and the DOM. They'll appreciate them much more since they'll be able to understand the implementation.
As for testing, automated testing might be easy if you have them generate a DOM that you can walk and validate. Mozilla might be able to help you out, esp with JSUnit. You can find info here

I always like the idea of making games to learn new programming concepts. You get a well-defined problem domain that's as simple or complex as you need it, and it's usually more interesting and fun to implement than other problems.
When I wanted to learn Ajax programming I used jQuery and Java server-side to implement the game of chess. It was a fun project, but pretty complicated (at least for me, but I'm primarily a server side programmer). I think something like Tic-Tac-Toe would be substantially simpler, and might be a good idea for a project assignment.
As for the 3 questions:
If this is the only JavaScript assignment, then I'd probably use vanilla instead of jQuery. But if they have a chance to do some assignments before this, I'd consider jQuery, because it just makes JavaScript so much less annoying, and it's also good to know jQuery for future employment possibilities.
I'd place an equal emphasis on both the language and the DOM, because the primary purpose of the language IS to work on the DOM, and the DOM does take some getting used to.
I think Selenium might work for the testing you're trying to do. JsUnit could also be used for unit testing the individual methods.

Start off with vanilla JavaScript to learn the basics. You don't want to create a group that relies on any particular framework that wouldn't know how to do things without it.

I would most definitely have them write vanilla JavaScript. It will encourage all students to better understand the abstractions that frameworks/libraries provide in particular environments i.e. for the most part, in the browser working with the DOM.
I highly recommend having a good text for the course. Object Oriented JavaScript by Stoyan Stefanov is in my mind a great text for learning the language, including some of the topics that many people have difficulty with (prototypes, objects, closures, inheritance, etc). I've read numerous JavaScript books and feel that this particular text best balances the core of the language and it's application in the modern client-side development realm.
You may then want to look at dissecting certain pieces of the source of a particular JavaScript library to gain insight into patterns and practices used in a real-world scenario.

I would have them write vanilla javascript AND also learn how to use jQuery. jQuery is javascript after all, and they need a working knowledge of the language anyway. They'll also need to become SWAT (skills with advanced tools), and I believe anyone not using one of the JS frameworks (or at least their own!) in today's environment is at a serious disadvantage.
See answer 1. I'd teach them about prototypal inheritance in vanilla JS, and about DOM manipulation in jQuery.
Automated testing could be achieved in several ways. 1: produce the correct output given some sample code to start with for the parts that deal with learning JS. 2: for the parts that deal with jQuery, you could provide a reference image for how you expect the result to look, provide an original document, and have them recreate the reference image using jQuery manipulation... sort of like the ACID tests http://acid3.acidtests.org/

Should they use a framework or should I have them write vanilla JavaScript?
To me, it is overwhelmingly import that people new to the language start with the language proper, not modified versions or advanced/fancy libraries that do a lot of the work for you. Besides, if you're starting off not working with the DOM, then you're not getting much benefit from using almost any library, as the bulk of most JavaScript libraries has to do with handling the DOM. Also, it's easier to spot "bad" or ill-performant code when teaching and learning in a "vanilla" environment since you don't have libraries abstracting away the nitty-gritty.
Should I focus more on the functional programming part and on the prototypal inheritance part (more on the language than on working with the DOM)?
Yes! On one hand, the DOM is not not that big of a deal; yet it is also the core of what JavaScript is used to interact with. For starters, I suggest that if you're going to be using a browser environment, you should initially avoid the DOM by using Firebug's console.* methods for output so that you can focus on the "functional programming part and on the prototypal inheritance" and other core concepts. After these core concepts have been covered, then start introducing the DOM. It's best to introduce the DOM later as time will need to be dedicated to cross-browser compatibility, which will only confuse the subject if you are trying to teach the core concepts in tandem.
How do I automate testing for this? It's better if they have a clear idea on how they will be evaluated. Also, automated testing ensures objectivity and saves me time :).
Before (and after) the DOM is introduced, you could use something like JSUnit. Also, see this question: Automated Unit Testing with JavaScript. Once you introduce the DOM, you may want to have the students generate a document that you can walk and validate as SB suggested.

Learning JavaScript... Should I skip straight to the good stuff (the frameworks)?

I learnt HTML/CSS a good few years back, then PHP a little later. I've recently become interesting in web development again, just started playing with frameworks like Django and RoR. I'm curious as to how much time/effort I should spend learning straight JS before looking at frameworks. I've been reading through a let of articles called Mastering AJAX by Brett McLaughlin which seems quite good, but I'm seeing a lot of stuff (such as cross browser compatibility - even for things like XMLHttpRequest) coming up which look like they would be non-issues if using a framework.
So, should I keep reading through these articles and try to build stuff using basic JS, or should I just start looking into jQuery and the like?
Also, I've been watching a few videos regarding GWT from Google I/O. I've been learning Java over the last year, built a few medium sized apps in it. I'm wondering if GWT is something that's worth going straight to, along with gQuery?

Starting with the basics of JavaScript is a good idea, IMHO.
Read JavaScript: The Good Parts, by Douglas Crockford. Very, very good book.
You should also check out Douglas Crockford's web site.
I also had to come back here and mention this in an update:
Douglas Crockford presented an illuminating talk about JavaScript - past, present, future - at the Microsoft MIX10 conference earlier this year. You'll find the full video for Crockford's talk at Microsoft MIX10 - The Tale of JavaScript. I Mean ECMAScript.

No.
Just as when you are learning to program you are taught first C/Pascal then Java/C++ and finally Python/Ruby/Smalltalk/Lisp, and when learning any language you start with simple language constructs, you should first learn ECMAScript, then learn DOM and finally frameworks.
Why? Because you'll have a deeper understanding of the language, and will be able to debug things that might seem odd unless you've got that learning experience.
If you are a seasoned developer, you can speed up each phase, but don't skip them, or you will have problems due to not fully understanding the small oddities.
Javascript is an interesting and fun language, but can act rather odd at times (Date has bitten me a couple of times in the ass).
Use frameworks to avoid repetitive tasks and to simplify your code, but not as a starting point. Simplicity is a final goal, not the starting point, and frameworks are for that, simplicity, not for learning a language. Frameworks are intended for simplifying things for experienced developers.
Learning the differences between browsers (DOM implementations) will allow you to debug your framework. That is priceless.
I've been learning Java over the last
year...
Javascript is not Java. Never was never will.
Even if you can compile to Javascript from Java, it's still a framework, don't jump into it unless you already know what you are doing.

I think "both." Mix it up. Play around with a framework. You'll get stuck when you try to do something real, so you'll pick up some JavaScript to figure it out.
A lot of the good jQuery books teach you JavaScript along the way.

This is one of the best videos for beginner javascript developers that understand how to program in other languages:
It's a talk the John Resig did last year at Northeastern, most of it is devoted to talking about core javascript, then the last quarter of the talk jumps into jQuery:
http://video.google.com/videoplay?docid=-7485992465859932389&ei=jhZUSu73OpfSrQLgyYV3&q=john+resig&hl=en
It's actually a really interesting tech talk and presentation since he does live examples and Resig is pretty good at presenting.
Like others in this question, I also highly recommend reading Javascript: The Good Parts for a better understanding.

Yes, jumping straight to framework-based programming instead of DOM is a good idea.
I started doing JS before any major frameworks like jQuery came along, and was reluctant to switch at first, but when I first started using jQuery, it felt so good to be able to write selectors and stuff and not have to worry about cross-browser compatibility.
However, there are some areas of JS where frameworks wouldn't be available. One of them is in userscripting, where you have to make your script work on a site you don't control. Another such one is the use of JavaScript in applications such as XUL.
Overall, I suggest you start with some trivial JS applications, then switch to jQuery instead of going on to the complex topic of DOM.

What makes you think that the frameworks are the good stuff and the JavaScript is not?
If you ask me, I will say that JavaScript is a real fun language and you should learn it first. JavaScript has received bad rap because it was mainly used for browser scripting and those browsers were buggy making people think that JavaScript sucks.
Crockford says that JavaScript is the world's most misunderstood language.
If your prior experience is with PHP (or any non functional language for that matter), the concept of 'first class functions' will really give you an 'aha' moment. 'Closure' will be another tool which will simplify your code and will make you wonder why all languages don't have it. Prototype inheritance will show you that there are alternatives to OOP. I would definitely suggest that you learn JavaScript first before you jump to any frameworks. I must add that you will also have to learn the concepts (first class functions/closure/prototype inheritance), to use any JS framework efficiently as all frameworks exploit the features of JavaScript.
To learn JavaScript, get Crockford's 'JavaScript, The Good Parts' book and try to learn the language using a standards compliant browser (say Firefox [with FireBug], Safari, Chrome) without focusing on DOM manipulation. This presentation by Simon Wilson is also good.
Once you have a good feel for the language, move on to the next step i.e. manipulating the DOM. I would personally suggest that you try to do some DOM manipulation using bare bone JavaScript to get better understanding of the DOM and the pain points involved. [E.g., when I attach a method to onClick of event, 'this' doesn't refer to what I think it refers to?]
After you have suffered a little bit of pain by doing DOM manipulation by hand, move on to a JavaScript framework which removes all the pain and makes JavaScript fun again. Personally, I would highly recommend jQuery over other frameworks.
And if you have any questions while on your JavaScript journey, you can always ask them on SO! :) Good luck.

I wouldn't touch any framework in any language until I have good basic understanding of underlying technology. Worth type of coder is one that uses tool without a knowledge.
JavaScript has somewhat sad history but in its latest incarnation it's surprisingly powerful and even fascinating language. I say - learn it well, then use whatever framework suits your current needs

It depends on where you want to invest your time. Ideally, we're all expert in assembly language, but that's not realistic or practical. We have to pick our battles. Then generally we attack each other for picking the wrong battle, which we call "cargo cult coding."
Personally, out of all the things I could spend a lot of time banging my head against, the intricacies of cross-platform JavaScript seemed less interesting and rewarding than other choices, so I decided to jump straight to jQuery. I'm happy with how it worked out.

I had the same background as you. After 6 months of MooTools I found out that mootools was indirectly teaching me "vanilla" javascript.
I've heard people say that mootools feels more like plain ol' javascript than jquery (after all, jquery's tagline is "jQuery is designed to change the way that you write JavaScript.").
I'd recommend starting with a framework. Plenty of the best javascript developers use frameworks. Once you're comfortable there you'll likely be able to pick up the others frameworks and plain ol' javascript quite readily.