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