javascript common errors

For mere mortals or the occasional or reluctant practitioner of Javascript this page documents some common errors. Needless to admit that I made all of them! More than once!

line1 character1 invalid

Consider this 


$(document).ready(somefunc());

The problem is 


$(document).ready(somefunc());

Very likely what you intended to do was to loose the function braces like below 


$(document).ready(somefunc);

Protect your global name space. See this link

Use firebug or an equivalent for your browser

Yes! you can debug javascript and css in ie! Use F12 to invoke the tools

Especially when that callback function is inside your class! The "this" in your callback is the "this" as passed by jquery. This will be different from the "this" variable of your own class.

As a result it may be a good practice to name your callback methods as "someCallback"

Inside the "somecallback" you will likely to use "that" and "this" variables. The "this" will refer to the jquery context and "that" will refer to the aliased "this" of your own class.

Yes sometimes I forget to return from a method when I needed to


Extra arg: "_"=some-random-number

apparently to deal with caching. So if yo see this node you don't have to spend a few hours how this got introduced. 


<nice-node>
   <nice-child>dddd</nice-child>
</nice-node>

this will turn into


<nice-node><#text>
   <nice-child>dddd</nice-child>
</nice-node>

Especially all modern browsers. So if you are traversing the DOM, be aware.

Especially if you are using a variable like "this". when I am developing new functionality I improve my implementation by taking additional arguments but forget to pass the new arguments where I am calling the function. And if this argument is "this", you get passed some "this" but not what you wanted. 


function dosomething(clickedElement)
{
  $(element)...
}

<a onClick="dosomething()">

when it should have been

<a onClick="dosomething(this)">
</code></pre>


function convertArrayToString(optionArray)
{
    var s = "";
    for (i=0;i<optionArray.legth;i++)
    {
        var option = optionArray[i];
        alert("option:" + option);
        s += "|" + option.questionid + "," + option.questionoption;  
    } 
    return s;
}

When "legth" should have been spelled "length"

wonder if strict declaration will point this out.

Also note there may be more declarative and functional ways of iterating arrays.

run time may not tell you that attribute doesn't exist.

for example "abcXyz" is different from "abcxyz" and js may not tell you. (I don't know if "strict" checks these errors. 


function convertArrayToString(optionArray)
{
    var s = "";
    for (var i=0;i<optionArray.legth;i++)
    {
        var option = optionArray[i];
        alert("option:" + option);
        s += "|" + option.questionid + "," + option.questionoption;  
    } 
    return s;
}

Notice the "var" declaration. without this a subsequent for loop may overset your variable "i" as its scope gets propagated!!! Unexpected...