Re: Javascript Best Practices Document v1.0

Matt Kruse a écrit : 
http://www.JavascriptToolbox.com/bestpractices/

I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. 

Good idea! I support such initiative.

Their code
was littered with document.all and eval,

You're most likely right. The top nr 1 problem with DHTML/javascript code on the web is still the recourse to document.all. Still today, in this very newsgroup, a lot of people are still promoting it in the name of supporting MSIE 4 ... which I think is just stupid. Less than 0.5% of internet/web users worldwide are still using MSIE 4 and the chances that some DHTML/javascript stuff can effectively work on MSIE 4 is very slim. So, I'd recommend to ditch document.all everywhere... including in this newsgroup.

for example, and I wanted to create 
a practical list of best practices that they could easily put to use.

The above URL is version 1.0 (draft) that resulted. IMO, it is not a replacement for the FAQ, but a more practical guide for fixing some of the problems that commonly get pushed into web sites.

Any comments?

PS: Ignore the formatting. It's ugly, for now ;) 

The formatting is ok for me.


1- I think you should start with something as basic as explaining that document.all is bad, wrong, deprecated, obsolete, etc..

2- The web standards way to reference a form input element is:

document.forms.namedItem("formname").elements.namedItem("inputname")

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1689064

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-21069976

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479

3- "All forms should have a name attribute. Referencing forms using indexes, such as document.forms[0] is bad practice."
name attribute for form was dropped in XHTML specification. So you may want to add such nuance/relativity in there.

4- <form name="myform">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
will trigger a validation markup error with a DTD strict.

5- "To fix this problem, Javascript needs a hint to tell it to treat the values as numbers, rather than strings. Subtracting 0 from the value will force javascript to consider the value as a number, and then using the + operator on a number will perform addition, rather than concatenation."
I think you may be in fact teaching a wrong trick. What's wrong with offering to use parseInt(strValParam, indexParam) to achieve exactly what you want to achieve... which is converting a string into an integer
or to use parseFloat(strValParam).

6- "This is why 'return false;' is often included at the end of the code within an onClick handler."
I would remove that sentence. The sentence does not perfectly make sense. Also, we have no idea what the doSomething() function does exactly...

7- "Often, links will just contain href="#" for the sake of simplicity, when you know for sure that your users will have javascript enabled."
This is what a lot of people denounce also as bad coding practices. A link should be a link. A rose should be a rose. And href="#" is just bad practice IMO.
Addendum: I see that you later discourage that practice.

8- IMO, you do not sufficiently explain why href="javascript:..." is bad. May I recommend some of the reasons listed here:
http://developer.mozilla.org/en/docs/DOM:window.open#Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E

9- In your "Detecting Browser Versions" section, you may want to give more references:
- Browser identification approach (aka "browser sniffing"): not best, not reliable approach
http://www.mozilla.org/docs/web-developer/upgrade_2.html#BrowserIdent
- Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-developer/upgrade_2.html#ObjectFeatDetect
- Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html
- Browser Detection and Cross Browser Support (in particular, sections 5 and 6):
http://developer.mozilla.org/en/docs/Browser_Detection_and_Cross_Browser_Support

10-
"The rules for using document.all are
2. Only fall back to using document.all as a last resort
3. Only use it if you need IE 5.0 support or earlier "
but IE 5.0 supports getElementById. The only possible reason to use document.all is if you absolutely need to code for IE 4.x. And why would you want to do some DHTML which would (could possibly) work in IE 4.x?
I don't see a reason for using document.all anymore.

Regards,

Gérard
--
remove blah to email me
.

Relevant Pages