Wednesday, March 07, 2007

The Mark Of The n00b

When I'm debugging or otherwise vetting someone's JavaScript work, I tend to look for evidence that indicates:

  1. the author is new to JavaScript, and/or
  2. the author cut-and-pasted this code

Neither of these are showstoppers, especially if the result is a neat-o web application or widget. But it does tend to drive me a little nuts sometimes.

Case in point: using "javascript:" in HREFs, a pet peeve of mine. It's not technically incorrect and it "just works" almost all modern browsers. It's just "wrong," in the same way that using <b> instead of <strong> is "wrong" and using TABLEs for layout is "wrong."

It's wrong from a craft point of view. It's the JavaScript equivalent of "eh, let's just shove the table markup into the database along with the content."

(Worse yet is "JavaScript:" (camel-cased) or something like "onclick='JavaScript:...'" I don't know of a single browser that falls over when the latter is used, but when someone sends me broken code to debug that has "JavaScript:" in the event handlers, the first thing I wonder is, "hm, what else is being overlooked here?")

Thing is, I don't expect JS newbies to know this stuff* because other than some tongue-clucking from old JS cranks like myself, there aren't any hard consequences.

And you. Do you have any favorite "mark of the newbie" things that drive you insane?

* that's why I run this blog

8 Comments:

At 2:58 PM, Blogger sammysunset said...

I'm interested to hear an argument about this, since if you don't use something to the effect of:

<a href="javascript:void(functionToRun());">

Then I can only assume you wish people to use:

<a href="#" onclick="javascript:functionToRun();">

... which causes a page jump every time someone clicks on a link. If someone wanted a link to activate a javascript function on the page, how else would you recommend they do so and still retain valid html (i.e. an anchor tag requires an href)?

 
At 3:00 PM, Blogger sammysunset said...

I, actually, just found your return:false; post.

So, if we have several links on a page, they should all point to non-existent page anchors (i.e. #) rather than run javascript natively in the href parameter? I understand that href stands for Hypertext Reference... would you argue that that is grounds enough not to warrant using javascript calls within an href parameter?

 
At 3:21 PM, Blogger Unknown said...

I have to agree with buckrogers on this, I use href="javascript: void(0);" in allmost all of my links in an ajax/dhtml context. I do so for the exact same reason, that being using href="#" causes a page jump if the user scrolled down before clicking. It also appends an empty anchor to the end of the url. From a user standpoint, javascript: void(0); seems the way to go to me, but if you have a better way that doesn't cause a page jump, please let me know...

I love your blog by the way, and it's always nice to find decent content amongst a sea of useless muck.

 
At 2:57 AM, Blogger Unknown said...

<strong> is not better than <b>...
<b> is a font style element, <strong> is a phrase element. Both are recommended to be replaced by stylesheets. I don't see why one is better than the other ?

 
At 2:29 AM, Blogger Da Scritch said...

Yep.
Told about it in French.

Pour les lecteurs francophones :
http://dascritch.net/blog.php/post/2007/08/22/Pour-quelques-Javascripts-de-plus#chap-0

la faute originelle vient de Netscape

 
At 11:38 AM, Blogger Kit Sunde said...

You shouldn't mix structure and logic in the first place.

 
At 3:11 PM, Blogger jdunck said...

Ahem:
http://youngpup.net/archived/popups.html

 
At 8:57 AM, Anonymous Anonymous said...

@Syrion
Right on your first point, wrong on your second.
They do both have (arguably) meaningful uses (although 99.99% of the time, < b > really won't!)
http://green-beast.com/blog/?p=222

But javaScript in anchor tags (or *any* tag, for that matter), either in href, or onClick/onWhatever is bad, from a "craft" point of view.

Web developers should completely separate HTML from JavaScript in the way that inline CSS should also be avoided... In XHTML 1.1, for example, onClick/onWhatever is actually invalid.

Developers should use addEventListener and attachEvent in javascript to set up the onClick/onWhatever events.

 

Post a Comment

<< Home