[jonursenbach]

What's wrong with using jQuery?

[Jare]

Nothing in general, but the way it is used for this tutorial adds nothing and obscures some of the topics.

Original jQuery code:

  var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                        "' height='" + CANVAS_HEIGHT + "'></canvas>");
  var canvas = canvasElement.get(0).getContext("2d");
  canvasElement.appendTo('body');

'Native' code:

  var canvas = document.createElement("canvas");
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  var context = canvas.getContext("2d");
  document.body.appendChild(canvas);

Similar misgivings about the use of a jQuery plugin to read the keyboard later in the article.

[Stratoscope]

It's not good jQuery code either.

* The naming convention is terrible. 'canvasElement' sounds like it would be the canvas element, yes? No, it's the canvas jQuery object!

* Use of hard-to-read string concatenation.

* Use of .get(0) - use [0] instead.

And some non-jQuery objections:

* Unfortunate line continuation style that is hard to maintain (What if you change the length of the canvasElement variable name? You have to re-align it!) and falls apart in a proportional font.

* Inconsistent use of single vs. double quotes. I recommend single quotes for JS strings and double quotes for HTML attributes. Do it the other way around if you prefer, but at least pick one and stick with it!

* I'm reading the code out of context, but I'm guessing that CANVAS_WIDTH and CANVAS_HEIGHT are "constants". Why are they being used directly in the code like this? Shouldn't this code be wrapped up in a function that takes those as parameters?

Ignoring that last objection for the moment, I might write the jQuery version like this:

  var $canvas = $('<canvas>'), ctx = $canvas[0].getContext('2d');
  $canvas
      .width(CANVAS_WIDTH)
      .height(CANVAS_HEIGHT)
      .appendTo('body');

You're right, of course, that in this particular example jQuery has little or no advantage over direct DOM manipulation, but if they are going to offer a jQuery example, it ought to at least be a good one.

BTW the $ prefix on a variable containing a jQuery object is a very common practice in jQuery code. It's especially useful when you need both the jQuery object and the corresponding DOM element (assuming a single-element selector like '#foo'). Then you can use $ on the jQuery object and the same name without the $ for the DOM element:

  var $footer = $('#footer'), footer = $footer[0];

[mibbitier]

That jQuery code is so horrible. What about if CANVAS_WIDTH is from an insecure source? Maybe someone sets it to include some of its own <script> tags or other tomfoolery.

HTML shouldn't feature in javascript code IMHO.

[leeoniya]

jQuery, while hugely popular, is not a standard.

[dmorgan]

You might want to lookup the term "de-facto standard":

http://en.wikipedia.org/wiki/De_facto_standard

[leeoniya]

your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming.

[dmorgan]

>your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage.

I'm afraid the points you make are not gonna help with my condescending tone.

50% usage? That's a HUGE success for a de-facto standard. There are even _official_ standards with much LESS use (SOAP comes to mind). So, the "50% non usage" part means absolutely nothing.

>you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming

Even if that was true, it would be irrelevant. Yes, a standard is only a standard is some SPECIFIC field. RS-232 is a standard, but has no bearing on, say, building construction. And those ANSI Screw size standards have no bearing at all in software: http://www.engineersedge.com/screw_threads_chart.htm

That doesn't make them any less standard.

That said, your examples are also false. jQuery can and IS used in nodejs AND in firefox extension programming. And presummably Firefox OS programming. Some examples:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scr...

http://stackoverflow.com/questions/491490/how-to-use-jquery-...

[JamisonM]

Shouldn't the point of the "web platform" be that they make de-facto standards like JQuery obsolete? It seems to me that the examples and information on this site should be based on code that will work on all browsers without an intermediary between the code and the software these vendors (mostly) produce.