Some common Gotchas in JavaScript
Over the past month I've been heavily involved in scripting. The application I'm writing is 80% JavaScript, 20% .NET. Because of this, my DOM, JavaScript, and CSS knowledge has been increasing steadily, and I've found some common errors that many Developers have encountered.
First off, I just found out the other day that JavaScript/Jscript are implements of the ECMAScript specification. (There's a bit of semi-useless knowledge for ya).
I know that's not a "Error", but I do love useless knowledge. So asside from the mundane issues like case-sEnSiTiViTy, braces, quotes and escape characters...let's see some Gotchas.
Gotcha #1: Adjusting CSS styles through JavaScript.
Many sites use JavaScript to dynamically change the width/height of elements based on the browser size. This is very useful if you want your screen to take up the maximum aloted space without having to really grind your head into the sand with CSS. So seeing something like the bottom is quite common (except for the error in the bottom line):
document.getElementById("menu").style.width = menuWidth+ "px";
document.getElementById("menu").style.height= menuHeight+ "px";
document.getElementById("menu").style.background.position= "top";
The issue with this is the last line: style.background.position. Many web developers assume this is correct. However, it's an illegal identifier in ECMAScript. To get around this you need:
document.getElementById("rightSide").style.backgroundPosition = "top";
Basically, when you see a CSS style with dashes, - , get rid of the dash, and capitalize the next letter.
Gotcha #2: Equal is not always Equal
For C# programmers, this is a no-brainer. However, I know everyone has made this mistake. If you are a C# programmer, and you make this mistake, you'll most likely spend tons of time looking elsewhere and not at the common logic sections. Let me explain:
var myAge = 26;
var yourAge = 29;
if(myAge = yourAge)
{
alert("Wow, I'm " + myAge + " as well, which is the same age as you!");
}
else
{
alert("We're not the same age. That's too bad.");
}
The error here is the myAge = yourAge. This statement will compute and assign yourAge to myAge. seeing myAge is now greater than 0, it will go into the if statement. This a very common mistake in JavaScript. So.. what happens if yourAge was 0? Well it ould hit the else of this if statement. Why? because in logic, anything not 0 is true. 0 is the only false. That means that -1 is true, -2 is true, 238523 is true, and -1385325.23 is true. 0 if false.
Gotcha #3: Do not self close a script tag!
This is bad:
<script src="JS/gpsManagerLayout.js" type="text/javascript" />
This is good:
<script src="JS/gpsManagerLayout.js" type="text/javascript"></script>
The first example (self closing script) will work in some browsers, but IE will complain like the evil step sister! You'll get partial script execution errors, and sometimes the page won't even display. So what actually happens? IE loads the first script, and then continues to look for a closing </script> tag. Ohhh Yes you understand now. IE will most likely miss every other <script> declaration you have because it wants it's </script> tag like I want coffee right now... coffee.... Ok, So what happens if no closing script tag is found (</script>)? IE assumes every bit of script, markup, styles etc. that you have to be logic... logic errors. Which means you'll get the nice "Error on Page" in the bottom left hand side which will give you an utterly useless message.
Gotcha #4: Variable Definitions
I had this a lot the other day. I was trying to work with the slider control in the AjaxToolkit and I needed to add a valueChanged event. I was doing:
var slider = $find("sPlayback");
slider.add_valueChanged(playbackDrag);
But what was happening 70% of the time was that my slider was not loaded up when this script was ran - giving me an error. I had to change it to:
var slider = $find("sPlayback");
if(slider)
{
slider.remove_valueChanged(playbackDrag);
slider.add_valueChanged(playbackDrag);
}
I also put this inside a function when I need to access the slider so that I can make sure it's loaded, and there, before I use it.
Another common issue with undefined variables is the following:
var Ninja = {
ninjaName: "This is my Name",
ninjaFunction: function() { alert("The Ninjas name is: " + ninjaName + ");}
};
You might think this is ok. However, the ninjaFunction has no idea what ninjaName is. To fix this you need to use the "this" identifier which tells the objects function to use the objects actual variable.
The right way:
function test
{
var Ninja = {
ninjaName: "This is my Name",
ninjaFunction: function() { alert("The Ninjas name is: " + this.ninjaName + ");}
};
}
JavaScript is a very sensitive scripting language, but a very useful one for web developers. If you have not yet downloaded FireFox or FireBug, I urge you to download them. They are the best tools for debugging JavaScript and web sites.