JavaScript Tutorial: Nine traps that make mistakes easily

From Nine Javascript Gotchas, the following are Nine traps that JavaScript is prone to mistakes. Although it is not a very profound technical problem, please note that it will make your programming easier, that is, make life easier. I will give some comments on some traps.

1. last comma

For example, in this Code Section, note that the last comma should be good in terms of Linguistics (this is acceptable for a dictionary similar to the data type in python ). Internet Explorer reports syntax errors, but it is not detailed. You can only scan thousands of lines of code.

<Script>
Var theObj = {
City: "Boston ",
State: "MA ",
}
</Script>

2. the reference of this will change.

Such as this Code:

<Input type = "button" value = "Gotcha! "Id =" MyButton ">
<Script>
Var MyObject = function (){
This. alertMessage = "Javascript rules ";
This. ClickHandler = function (){
Alert (this. alertMessage );
}
}();
Document. getElementById ("theText"). onclick = MyObject. ClickHandler
</Script>

The answer is not "JavaScript rules", as you wish ". When executing MyObject. ClickHandler, this row is red in the Code. The reference of this actually points to the reference of document. getElementById ("theText. It can be solved as follows:

<Input type = "button" value = "Gotcha! "Id =" theText ">
<Script>
Var MyObject = function (){
Var self = this;
This. alertMessage = "Javascript rules ";
This. OnClick = function (){
Alert (self. value );
}
}();
Document. getElementById ("theText"). onclick = MyObject. OnClick
</Script>

Essentially, this is the JavaScript scope issue. If you see it, you will find that there are more than one solution.

3. Identify thieves

Do not use variable names with the same HTML id in JavaScript. The following code:

<Input type = "button" id = "TheButton">
<Script>
TheButton = get ("TheButton ");
</Script>

IE will report an undefined object error. I can only say: IE sucks.

4. Replace the string with only the first match

The following code:

<Script>
Var fileName = "This is a title". replace ("","_");
</Script>

In fact, the result is "This_is a title". In JavaScript, the first parameter of String. replace should be a regular expression. Therefore, the correct method is as follows:

Var fileName = "This is a title". replace (// g ,"_");

5. mouseout means mousein

In fact, this is caused by event bubbling. In IE, there are mouseenter and mouseleave, but they are not standard. The author suggests that you use library, such as YUI, to solve the problem.

6. parseInt is based on the hexadecimal system.

This is common sense, but many people ignore parseInt and have a second parameter to indicate the hexadecimal notation. For example, parseInt ("09"), if you think the answer is 9, it is wrong. Because, here, the string starts with 0 and parseInt processes it in octal. In octal, 09 is invalid, false is returned, and Boolean value false is converted to a value of 0. therefore, the correct method is parseInt ("09", 10 ).

7. for... in... will traverse everything

There is a piece of code like this:

Var arr = [5, 10, 15]
Var total = 1;
For (var x in arr ){
Total = total * arr [x];
}

Running well, isn't it? But one day it quit, and the returned value is NaN, dizzy. I just introduced a library. It turns out that this library has rewritten the prototype of Array. In this way, our arr has no more attribute (method) than that of... in... it will be traversed. Therefore, this is safer:

For (var x = 0; x <arr. length; x ++ ){
Total = total * arr [x];
}

In fact, this is also an example of the damage caused by prototype of the pollution basic class.

8. Event processor traps

In fact, only the event processor used as the object property will exist. For example, the code window. onclick = MyOnClickMethod will re-write the previous window. onclick event and cause IE content leakage (sucks again ). Before IE supports DOM 2 event registration, we recommend that you use libraries to solve the problem, such as using YUI:

YAHOO. util. Event. addListener (window, "click", MyOnClickMethod );

This should also be a common sense problem, but it may be easy for new users to make mistakes.

9. Focus poocus

Create an input text element and move the focus to it. It is reasonable to say that such code should be natural:

Var newInput = document. createElement ("input ");
Document. body. appendChild (newInput );
NewInput. focus ();
NewInput. select ();

However, IE will report an error (sucks again and again ). The reason may be that the element is not available when you execute fouce. Therefore, we can delay the execution:

Var newInput = document. createElement ("input ");
NewInput. id = "TheNewInput ";
Document. body. appendChild (newInput );
SetTimeout (function () {// here I used closure to rewrite it. If you are interested, you can compare it with the original article.
Document. getElementById ('thenewinput'). focus ();
Document. getElementById ('thenewinput'). select () ;}, 10 );

In practice, there are many more JavaScript traps, mostly because the parser implementation is not in place. These things generally do not appear in textbooks. They can only be shared by developers. Thank God, we live in the Internet era. We can find answers to many problems in Google.