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!

satya - Fri Oct 12 2012 09:11:43 GMT-0400 (Eastern Daylight Time)

line1 character1 invalid

line1 character1 invalid

satya - Fri Oct 12 2012 09:14:34 GMT-0400 (Eastern Daylight Time)

jquery document.ready common mistake

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);

satya - Fri Oct 12 2012 09:15:37 GMT-0400 (Eastern Daylight Time)

Protect your global name space. See this link

Protect your global name space. See this link

satya - Fri Oct 12 2012 09:16:17 GMT-0400 (Eastern Daylight Time)

Use firebug or an equivalent for your browser

Use firebug or an equivalent for your browser

satya - Fri Oct 12 2012 09:16:38 GMT-0400 (Eastern Daylight Time)

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

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

satya - Fri Oct 12 2012 09:36:11 GMT-0400 (Eastern Daylight Time)

Be very careful how you use the 'this' variable in jquery callback functions

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.

satya - Fri Oct 12 2012 09:45:40 GMT-0400 (Eastern Daylight Time)

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

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

satya - Fri Oct 12 2012 22:11:13 GMT-0400 (Eastern Daylight Time)

Remember, ajax introduces an extra argument to the server


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.

satya - Fri Oct 12 2012 22:14:23 GMT-0400 (Eastern Daylight Time)

Look out for useless spurious text nodes that get inserted in xml documents


<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.

satya - Sun Oct 14 2012 09:08:10 GMT-0400 (Eastern Daylight Time)

Forget to pass parameters to a function that is expecting them

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.

satya - Sun Oct 14 2012 09:14:18 GMT-0400 (Eastern Daylight Time)

Example


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

<a onClick="dosomething()">

when it should have been

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

satya - 5/2/2014 10:53:38 AM

Pay attention to field names: misspelling may not result in an error


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.

satya - 5/5/2014 2:17:31 PM

Be very consistent naming variables in javascript objects

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.

satya - 5/5/2014 2:19:20 PM

Fix the nasty for loop above


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...