RFD: How To Recognize Bad Javascript Code

Jeremy J Starcher said the following on 1/1/2008 5:37 AM:

On Tue, 01 Jan 2008 05:28:51 -0500, Jeremy J Starcher wrote:

(Request for Discussion)

I've put together a guide that I hope will help novice coders avoid the
same hair pulling that I went through.


And it would really help if I included

URL: http://www.mopedepot.com/jjs/HowToRe...criptCode.html

HTML Comments.
Will cause problems when XHTML is used.

Script tag usage.
text/javascript is an obsolete (although valid) MIME type.

href:javascript.
Drop #1, they all fall into the "Too stupid to know better" category.

document.write.
Avoid it. Period.
Tables produced with document.write are indicative of an idiot programmer.
Buttons/links? document.createElement, .appendChild, no document.write

Local vars.
No example of a correct way.

Line ending semicolons.
That entire section is incorrect.
Do you have a URL for the assertion that Brendan Eich (and others)
intentionally left out statement ending semi-colons to "make it
easier to learn"?
As for minification, that is an indication of bad coding practices.

Use of eval.
The use of eval itself usually indicates bad coding, but not always.
Whether it is a bad use of it or not depends on how it is used.
And a beginner can't possibly know.

Is this a good use of eval?
function convertToDecimal(fraction){
return eval(fraction)
}

Where fraction is a fraction that you need converted to decimal? It can
be written like this:

function convertToDecimal(fraction){
var numerator = fraction.substring(0,fraction.lastIndexOf('/'))
var denominator = fraction.substring(fraction.lastIndexOf('/')+1)
return (numerator/denominator)
}

Testing shows that eval is a lot quicker but a newbe could never know
that it was actually a "good use" of eval.

Browser detection.
Spelling error with interfer versus interfere.

DOCTYPE.
No version of IE, not just IE7, handles it that way.

JSLint.
JSLint is a tool that attempts to make sure you code
according to the preference and style that Douglas Crockford
prefers.

Things you didn't cover:

The use of the "with" operator.
Use of "new Function".

There are, inevitably, more things you didn't cover.

Personally, I think a "Best Methods" document is of far more value than
a "Bad Methods" document. Then, you aren't showing people bad ways to do
things, you are showing them the best ways to do things. And even though
I don't agree, totally, with Matt's, I keep it in my signature for that
very reason.


--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Anthony Levensalor wrote:

Thomas 'PointedEars' Lahn posted :
[snip]
1. "Depreciated script tag usage"

a. The word you were looking for is _deprecated_, not "depreciated".


Well, if we're being anal, Thomas, "_deprecated_" is not a word.
"deprecated" is, though.

Enclosing text with the underline character is used in Usenet to mark text
as an underlined correction because in plain text the usual text formatting
is not available. Your Thunderbird and mine even have a feature implemented
that formats text that way if the parser encounters that syntax. The same
goes for `*...*' (bold, usually meant as emphasis) and `/.../' (italic, also
emphasis).

b. The term you were looking for is `script' _element_, not "tag".
Elements consist of tags (start tag, close tag) and content:

http://www.w3.org/TR/REC-html40/intr...t.html#h-3.2.1

Funny thing is, I looked that page up and down buddy, and I didn't see
anything about a script _element_ anywhere. Maybe your underscore is broken.

Maybe you are an idiot. (See, *now* I said it.)

c. Your example `script' elements are empty where they should have
content. At least that should be indicated in some way.

Pretty sure that's already been under discussion regarding the type
attribute. Please read before you post, as you like to say.

The reaction of the OP says otherwise. So much for reading.

One point of recommending against `javascript:'
there is that

| it cannot provide a fallback to browsers not running Javascript.

There are other points that I have also mentioned in my FAQ notes last
year. There are also exceptions to be made in special cases.

You know what would be even more helpful? A link or even a hint about
where your big ole FAQ is for those of us not arrogant enough to read
your mind.

[more flames]

*PLONK*


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Jeremy J Starcher said the following on 1/1/2008 12:59 PM:

On Tue, 01 Jan 2008 18:01:51 +0100, Thomas 'PointedEars' Lahn wrote:

<snip>

d. "JavaScript1.2" actually means something in NN4; ask Google.
I have never seen anyone using "JavaScript1.3", though.

I didn't know if that was backwards compatible to browsers today or not.
If memory serves me correctly, it changes some of the array methods.

The most notable thing it did was change comparisons.

var x=2
var y="thirty"
if(x=y){
alert('They are equal')
}

2. 'Using "href:javascript"'

| Using the pseudo-protocol javascript in the href is never valid. Not
| only is such code not valid HTML, [...]

Wrong. The value of the `href' attribute is of type URI. If
`javascript:' syntax would be written as an URI, it would certainly
be valid there. One point of recommending against `javascript:'
there is that

| it cannot provide a fallback to browsers not running Javascript.

There are other points that I have also mentioned in my FAQ notes last
year. There are also exceptions to be made in special cases.

Hmmm... This point has me thinking now. I'll have to ponder the best way
to phrase the URI issue. "Valid, but not recommended" perhaps.

I'll try and find your FAQ notes. If you are feeling generous I'll take a
donated URL to it.

The group FAQ, and the Notes pages on it, cover just about every aspect
of javascript: protocols.

4. 'Not ending lines in a semi-colon ";"'

The argument in favor of the trailing `;' is flawed in two regards:
a) not every line should be ended with a semicolon but every *statement*;

I code in C. I know that. Somewhere it got lost between brain and
keyboard. Maybe I've been using "one statement per line" scripting
languages too much.

The argument of "This is the way it works in <other> language", isn't an
argument when it comes to Javascript.

b) minifiers should not be used. See previous discussions.

I knew that was going to come up. I'm tempted to yank that whole section
out, except that style-wise I -really- like having the semicolon there.
Code without it grates on me.

It should be pulled.

5. "Use of eval"

| Using eval to parse JSON works well. While there are some security
| concerns, they can be easily addressed.

There are two other uses where using eval() is considered appropriate.
One is making arbitrary computations with user input,

Yes, I should mention that. While I've only seen it used for "trivial"
calculator applications, I suppose it would be the basis for an Javascript
spreadsheet or something.

See my other reply. eval will beat "traditional" methods of computation
hands down. And the example I posted is a very simple example.

using try/catch. The try/catch is faster when available.

try/catch is another of the things you didn't cover. Don't use it.

A reasoning for the statement that the security concerns could be
easily addressed is missing.

I'll toss in this link: <URL: http://www.json.org/json2.js > In my
reading, I haven't heard of anyone finding holes in it.

There is a non-eval alternative to JSON.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Jeremy J Starcher wrote:

On Tue, 01 Jan 2008 18:01:51 +0100, Thomas 'PointedEars' Lahn wrote:
d. "JavaScript1.2" actually means something in NN4; ask Google.
I have never seen anyone using "JavaScript1.3", though.

I didn't know if that was backwards compatible to browsers today or not.
If memory serves me correctly, it changes some of the array methods.

Care to elaborate?

2. 'Using "href:javascript"'

[...]
There are other points that I have also mentioned in my FAQ notes last
year. There are also exceptions to be made in special cases.

[...]
I'll try and find your FAQ notes. If you are feeling generous I'll take a
donated URL to it.

I finally found the Message-ID in my Sent folder:
<470806F8.2090308 (AT) PointedEars (DOT) de>

document.write(
new Array(
'<ul>',
' <li><a href="Search.html">Search<\/a><\/li>',
' <li><a href="Order.html">Order<\/a><\/li>');
' <li><a href="Help.html">Help<\/a><\/li>');

Ouch. Don't consider the last two lines as they are. Copy-paste error.
Replace them with

' <li><a href="Order.html">Order<\/a><\/li>',
' <li><a href="Help.html">Help<\/a><\/li>',

'<\/ul>'
).join("")
);
}
/script

I'll agree that is better than the table design, but I was trying to
indicate that using Javascript for putting a navigation bar on the screen
shouldn't be done. Augmenting one would be OK.

That would depend on what kind of navigation bar it would be. If it
requires client-side script support as it provides additional features,
then there is nothing wrong in writing it dynamically.

Perhaps a different example would be better. Using Javascript to show a
print button or something.

That would be another example.

5. "Use of eval"

| Using eval to parse JSON works well. While there are some security
| concerns, they can be easily addressed.

There are two other uses where using eval() is considered appropriate.
[...]
the other is
hiding code from script engines that consider it to be syntactically
invalid because they do not support the corresponding language feature.

Oh.. there is an idea. That is the second new thought you've tossed into
my head here. I'm picturing one code branch that runs slowly with a dozen
checks to assert all values are within range and a second code branch
using try/catch. The try/catch is faster when available.

Is that the kind of thing you mean?

Not quite. For example, you would need eval() to hide try...catch from
engines that don't support it but where it is necessary to use it. With
XHR, that would be handling exceptions in creating the ActiveXObject object.

A reasoning for the statement that the security concerns could be
easily addressed is missing.

I'll toss in this link: <URL: http://www.json.org/json2.js > In my
reading, I haven't heard of anyone finding holes in it.

I know the JSON reference implementation but I don't see how that would
provide a reason for your statement that it would be easy to address
security concerns that using eval() with JSON would introduce. Care to
elaborate?


PointedEars

On Tue, 01 Jan 2008 13:13:51 -0500, Anthony Levensalor wrote:

<snip>

Are you a programmer or an English teacher? Oh, you're both! That would
explain a whole bunch.

<snip>

This, right here, this is why people get irritated with you, I think.
Maybe you just like being a pompous arrogant , I dunno, but most other
people don't care for it. You lack that internal filter that says "don't
say that, that's what a pontificating, unmitigated ass would say"

[start way off-topic]

While I don't know Thomas "PointedEars" personally, and won't speak for
him I do know his personality type. Rather than defend him in particular
allow me to say a few words for the entire "have-no-people skills but
really good with machine" type people.

Or not. You said it already. "You lack that internal filter..."

In many cases that is literally true. An unusually high percentage of
people with Asperger's Syndrome enter computer science. Among other
issues, people with Aspergers lack the social graces that the rest of the
population wears.

Once again, I don't know Thomas personally, but I will say this. This
group needs him and people like him. They are the ones who remind us of
the edge cases. They are the ones who will remember weird interactions of
code and will spot flaws long before they become an issue.

When someone says 'All prime numbers are odd' they are the ones who will
remind us of the exception. While their delivery may lack social grace,
it always carries content.

While these people may not always be right, you would do well to listen to
their advice. If, in the end, you cannot see through personality flaws to
the real issues of code and programming then problem is yours. Rude
people cannot offend you. You can choose to be offended.

This is my only post on this particular thread. If you wish to have a
real discussion, feel free to start a new thread called "Gee! Why are
you people so rude?"

[end way off-topic]

On Jan 1, 11:30 pm, Randy Webb <HikksNotAtH... (AT) aol (DOT) com> wrote:

Things you didn't cover:
...
Use of "new Function".

Is there anything wrong with use of "new Function"?

On Tue, 01 Jan 2008 13:30:25 -0500, Randy Webb wrote:

HTML Comments.
Will cause problems when XHTML is used.

Noted. Thanks.

Script tag usage.
text/javascript is an obsolete (although valid) MIME type.

Recently found the discussion on that one. It will be addressed.

href:javascript.
Drop #1, they all fall into the "Too stupid to know better" category.

If this were directed at coders, I'd agree. I'm trying to aim this paper
more at people getting into looking at/learning Javascript and maybe help
them avoid a lot of the crap I waded through.

document.write.
Avoid it. Period.
Tables produced with document.write are indicative of an idiot programmer.
Buttons/links? document.createElement, .appendChild, no document.write

I 99.9% agree with you. I use it once in my code to hide tabs when
Javascript is enabled. Without Javascript defaults to a giant ordered
list. Any other method I found causes a screen flicker as the <ul> first
renders and then is reshaped.

<script type="text/javascript"> document.write('<style
type="text/css">.tabber{display:none;}<\/style>'); </script>

Local vars.
No example of a correct way.

Touche.

Line ending semicolons.
That entire section is incorrect.
Do you have a URL for the assertion that Brendan Eich (and others)
intentionally left out statement ending semi-colons to "make it
easier to learn"?
As for minification, that is an indication of bad coding practices.

Ok, Ok -- it gets ripped. Was a coin toss on it going in first time round.

Use of eval.
The use of eval itself usually indicates bad coding, but not always.
Whether it is a bad use of it or not depends on how it is used.
And a beginner can't possibly know.

<snip>
Thomas had a few comments that have been thinking over the eval issue.
I'm still pondering.. but you bring up valid points as well.

Browser detection.
Spelling error with interfer versus interfere.
*nods*

DOCTYPE.
No version of IE, not just IE7, handles it that way.
Meant to say that.

The use of the "with" operator.
Food for thought. I've avoided the with operator since the ancient days

of Pascal, so I don't even see code in it. Barely aware that JS had one.

Use of "new Function".
I don't see this one too often.

There are, inevitably, more things you didn't cover.

Personally, I think a "Best Methods" document is of far more value than
a "Bad Methods" document. Then, you aren't showing people bad ways to do
things, you are showing them the best ways to do things. And even though
I don't agree, totally, with Matt's, I keep it in my signature for that
very reason.

I won't quibble the need for a "Best Methods" document, but I was trying
to fill a different need. I see a "Best Methods" as a document aimed at
coders. I'm trying to aim at people who don't code yet.

It is my goal to have an easy-to-understand list of things that should
throw up red flags when you see them in code. If too many code snippets
have these red flags, skip onto the next site.

Not to name names, but had I the skill to recognize
<URL: http://www.dynamicdrive.com/ > for what it was, I wouldn't have had
to unlearn so much.

Thomas 'PointedEars' Lahn posted :

Enclosing text with the underline character is used in Usenet to mark text
as an underlined correction because in plain text the usual text formatting
is not available. Your Thunderbird and mine even have a feature implemented
that formats text that way if the parser encounters that syntax. The same
goes for `*...*' (bold, usually meant as emphasis) and `/.../' (italic, also
emphasis).

I know.

Maybe you are an idiot. (See, *now* I said it.)

Could be, definitely. I've been called worse by better.

The reaction of the OP says otherwise. So much for reading.

Yup, I got thumped on this one.

*PLONK*

That actually wasn't meant to be a flame. That was meant to help you
become someone we could all adore.


~A!

Jeremy J Starcher posted :

This, right here, this is why people get irritated with you, I think.
Maybe you just like being a pompous arrogant , I dunno, but most other
people don't care for it. You lack that internal filter that says "don't
say that, that's what a pontificating, unmitigated ass would say"

[start way off-topic]

While I don't know Thomas "PointedEars" personally, and won't speak for
him I do know his personality type. Rather than defend him in particular
allow me to say a few words for the entire "have-no-people skills but
really good with machine" type people.

[snip]


Jerry,

First, I liked your doc, and the comments on it so far have taught me a
lot. I haven't commented because I lack the experience to intelligently
do so

As for Thomas, I was sniping. He irritates me. I really didn't want to
do anything in that post but irritate him, apologies for sidetracking
the discussion of your work. I hate to see someone put so much effort
and labor into something to have someone be so callous about it.

~A!

In comp.lang.javascript message <pan.2008.01.01.17.58.59.532824 (AT) yahoo (DOT) sp
am.me.not.com>, Tue, 1 Jan 2008 12:59:00, Jeremy J Starcher
<r3jjs (AT) yahoo (DOT) spam.me.not.com> posted:

I'll try and find your FAQ notes. If you are feeling generous I'll take a
donated URL to it.

It is commonly considered polite and prudent to read a newsgroup for a
while, and to seek its FAQ, *before* posting to it. The FAQ of this
group is readily found by reading the group (and otherwise), and links
to its Notes.

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.