|
May 1, 2007
I was recently asked to fix a problem on a very complex set of pages. The pages hosted either Windows Media Player (if the client uses Internet Explorer to access the site) or a Flash MP3 Player (if the client uses FireFox or a Mac to access the site). It's a frames based page too, which makes it more compex to debug.
The basic problem had to do with playing a 30 second preview of the song. The original code started the 30 second preview 90 seconds into the song. This is good because it allows the listener preview the middle of the songs instead of the 30 seconds at the beginning of the song which may be sparse and start off slow, etc. If the song was very short, less than 90 seconds long, this created a problem - nothing would play. You'd be surprised how many CDs have a track that's short.
I started working on fixing the problem and in turn created my own problem to work through. So I ended up making one of the easiest mistakes to make with JavaScript and, for me, one of the hardest to catch - spelling or capitalization errors with variable names.
Another error that's easy to make but sometimes very hard to find deals with scope. No, not the mouthwash! Scope in programming refers to which sections of code access, or refer to, which variables if there are two variables with the same name.
Spelling and Capitalization Errors:
In JavaScript, a variable named sTemp1 is not the same as a variable named stemp1 or Stemp1. When you refer to a variable in code, you have to spell it and capitalize it the exact same way.
Spelling / Capitalization Example:
| var sTemp1; | | | var nCount = 0; | | | nCount = nCount + 4; | <-- Valid Statement | | nCount = ncount + 4; | <-- Will not work and most likely will cause an error. | | sTemp1 = "Fred was here!"; | <-- valid statement | | alert(sTemp1); |
<-- valid statement | | alert(stemp1); | <-- Will not work and most likely will cause an error. |
|
In most cases these types of errors will trigger an error message. If you view your page in Firefox or Netscape and open the JavaScript Console or Error Console, you can easily click on the error and see the HTML source with the offending JavaScript line highlighted.
Sometimes (as in the pages I was working on) no error is generated, the code just stops executing. In this case, I kept moving an Alert statement (an alert statement makes a message box appear with a message) down through the code and various functions until I got to the last statement that was executing and even then it took me a while to see the capitalization error (sometimes you can't see the tree for the forest!).
Scope:
The concept of scope can be very hard to grasp. Scope is not specific to JavaScript, it is inherent in all programming languages. Simply stated, it means that if you define a variable in a function and you have another variable with the same name at a higher level, or outside of the function, then the code inside the function will use the variable in the function (its local variable) and the other code will use the other variable. Sometimes this is exactly what you want, other times it's not, and it's easy to miss a local declaration of a variable that has the same name as another variable (especially on a complex project that you didn't write). You can spend hours trying to figure out why the variable you're changing is not reflecting the change when in fact, you're dealing with two different variables.
Scope Example:
var x;
var sTemp;
function AddIt(nInput)
{
addIt = nInput + x;
}
Function SubtractIt(nInput)
{
Var x = 9;
SubtractIt = nInput - x;
}
x = 0;
sTemp = addIt(2);
alert(sTemp);
sTemp = SubtractIt(2);
alert(sTemp); |
This example will output the following messages:
2
-7
The 2 being the returned value from the call to addIt(2), and the -7 being the returned value from the call to SubtractIt(2). The function SubtractIt uses its local variable x, not the global variable x that's equal to 0. This is a very simple example to demonstrate the concept.
Frames and Scope:
It's possible to share or access variables across frames (frames based pages, or iFrames) as long as the source for each frame is on the same site (otherwise you run into security issues). I recommend that in most cases the shared variables are defined at the top most frame or the hosting page if we're dealing with iFrames, in the head section. You can refer to the variable with "parent.Variable name" from the other frames or from an embedded iFrame. It's even easier to create scope issues under this scenario because you have multiple files to edit and can loose track of variable names that you're accessing in another frame.
Scope and External JavaScript files:
If you use a script statement to load an external JavaScript file, I've noticed that global variables in the included file don't seem to be all that global. Putting them in the topmost frame or the main HTML file usually fixes the issue.
I hope this helps save you some time and frustration!
However, if all this leaves you scratching your head and feeling more frustrated, then you need to check out my online video based courses that show you step by step how to make web pages, use CSS, JavaScript, PHP, etc...
Introduction to Web Site Creation: You Can Create Professional Looking Web Pages After Watching My Online Training Course. Click Here for More Info...
Introduction to Web Site Scripting: Discover How Easy it is to Make Web Pages that Accept Information, Offer Selection Choices, Accept Simple Orders, Automate your Business, etc. Teaches JavaScript, Forms, PHP, and More. Click Here for More Info...
Make Money Online: Step by Step Home Study Course for finding and/or creating products and Selling Online to Create Your Own Business.
Click Here for More Info...
Fred
About the Author
Fred Black is an experienced programmer, web site developer, online business operator, systems integrator, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.
|
Posted by Fred on May 1, 2007 | Printer-Friendly
TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/44
Assigned Categories:
Web Site Design, HTML, CSS
Related Entries:
|
You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact. |
|
Comments:
-
You're a life saver Fred! We have a set of javascript files where each file contains the menu for a particular product. The problem is that when you change the links, you also have to change the server name since we test the links first in development before putting in production. and we do the changes and testing for several diff products so imagine the difficulty changing the server name in every javascript!
fortunately, for me, i read your tip. i substituted the actual server names with a variable and assigned the value on the calling html file. it worked! now i only have to change the value in the html file, in just one place, instead of several files. :)
is it possible though to put the variable in a javascript file and be used by another javascript file? both files are external files included in an html code.
thanks
-
|
|
Post A Comment
|
|
Insert your name and e-mail to receive a short notice each time I make a new post.
NOTE: You will receive a confirmation email. You must click the link in the email to subscribe. Please check your spam folder(s) if you don't receive the email.
| |
|
|
|
|
|
|
|
|
|
|
|
|
| | 
From Fred...
