Christian Heilmann - Beginning JavaScript with DOM Scripting and Ajax, Second Edition

About the Authors

Russ Ferguson is a freelance developer and instructor in the New York City area. His interest in computers goes back to Atari Basic, CompuServe, and BBS systems in the mid 1980s. For over 10 years, he has been fortunate to teach at Pratt Institute, where subjects have been as diverse as the student body. Working in New York has given him the opportunity to work with a diverse group of companies whose projects ranged from developing real-time chat/video applications for start-ups to developing and managing content-management systems for established media and advertising agencies like MTV and DC Comics.

Christian Heilmann grew up in Germany and, after a year working with people with disabilities for the Red Cross, spent a year as a radio producer. From 1997 onwards, he worked for several agencies in Munich as a web developer. In 2000, he moved to the US to work for eToys. After the dot-com crash, he moved to the UK, where he led the web-development department at Agilisys. In April 2006, he joined Yahoo! UK as a web developer. He is now Principal Developer Evangelist of the Mozilla Developer Network in the lovely town of London, England. You can find out more about him on his website: http://christianheilmann.com/ .

About the Technical Reviewer

Dr. Paddy Byers is an independent developer and consultant with a long-standing interest in web technology and the mobile web in particular. He has been prominent in a series of efforts to enable web applications to deliver the same functionality and experiences as native apps, including authoring the BONDI specification and participating in multiple World Wide Web Consortium (W3C) API standardization groups. Paddy now develops extensively with server-side JavaScript using node.js and is an active contributor in the open-source ecosystem around it.

Paddys programming experience includes working with a wide range of platforms and languages going back over 30 years. He trained originally as a mathematician, and he maintains an academic interest in security, privacy, and formal assurance.

Acknowledgments

I want to thank everyone at Apress for the help in putting this together: Louise for giving me a chance to work on this, Anamika for keeping me on track, and Paddy for helping me explain everything better. I really appreciate it.

I also need to thank my family for being supportive after a rough year and, more recently, dealing with me as I worked on this.

APPENDIX A

Debugging JavaScript

In this appendix, I will introduce you to some tricks and tools to debug your JavaScript code. It is very important to get acquainted with debugging tools, because programming consists to a large extent of trying to find out what went wrong a particular time. Some browsers help you with this problem; others make it harder by having their debugging tools hidden away or by returning cryptic error messages that confuse more than they help. Some of my favorites include philosophical works like Undefined is not defined or the Microsoft Internet Explorer (IE) standard Object doesnt support this property or method.

Common JavaScript Mistakes

Lets start with some common mistakes that probably every JavaScript developer has made. Having these in the back of your head when you check a failing script might make it a lot quicker to spot the problem.

Misspellings and Case-Sensitivity Issues

The easiest mistakes to spot are misspellings of JavaScript method names or properties. Classics include getElementByTagName() instead of getElementsByTagname() , getElementByID() instead of getElementById() , and node.style.colour (for the British English writers). A lot of times the problem could also be case sensitivityfor example, writing keywords in mixed case instead of lowercase.

If( elm.href ) {
var url = elm.href;
}

There is no keyword called If , but there is one called if . The same problem of case sensitivity applies to variable names:

var FamilyGuy = 'Peter';
var FamilyGuyWife = 'Lois';
alert('The Griffins:\n'+ familyGuy + ' and ' + FamilyGuyWife );

This results in an error message stating familyGuy is not defined, because there is a variable called FamilyGuy but none called familyGuy .

Trying to Access Undefined Variables

I talked about it in the second chapter of the book: you define variables either by declaring them with or without an additional var keyword. (The latter is necessary to define the scope of the variable.) Keep in mind that strict mode will prevent you from implicitly declaring variables (variables without the var keyword). Because of this, it is recommended that you use the var keyword for every variable.

Stewie = "Son of Peter and Lois";
var Chris = "Older Son of Peter and Lois";

If you try to access a variable that hasnt been defined yet, youll get an error. The alert() in the following script throws an error because Meg is not defined yet:

Peter = "The Family Guy";
Lois = "The Family Guy's Wife";
Brian = "The Dog";
Stewie = "Son of Peter and Lois";
Chris = "Older Son of Peter and Lois";
alert( Meg );
Meg = "The Daughter of Peter and Lois";

This is easy when it is an obvious example like this one, but how about trying to guess where the bug in the following example is?

exampleFamilies.html

function getFamilyData( outptID, isTree, familyName ) {
var father, mother, child;
switch( familyName ) {
case 'Griffin':
father = "Peter";
mother = "Lois";
child = "Chris";
break;
case 'Flintstone':
father = "Fred";
mother = "Wilma";
child = "Pebbles";
break;
}
var out = document.getElementById( outputID );
if( isTree ) {
var newUL = document.createElement( 'ul' );
newUL.appendChild( makeLI( father ) );
newUL.appendChild( makeLI( mother ) );
newUL.appendChild( makeLI( child ) );
out.appendChild( newUL );
} else {
var str = father + ' ' + mother + ' ' + child;
out.appendChild( document.createTextNode( str ) );
}
}
getFamilyData( 'tree', true, 'Griffin' );

Chromes developer tools will tell you that there is an error in line 23 outputID is not defined, as shown in .

on line 23

However, if you look at the code in line 23 as shown in , nothing seems to be wrong.

shown with a highlight on line 23

The culprit is a typo in the function parameter, highlighted in , which means that outputID is not defined but outptID is.

parameter that caused the error

Typos in parameters are a very confusing bug, because browsers tell you the error occurred in the line where the variable is used and not where you made the mistake.

Incorrect Number of Closing Braces and Parentheses

Another common mistake is not closing curly braces or keeping an orphaned closing brace in the code when deleting some lines. Say, for example, you dont need the isTree option any longer and you remove it from the code:

exampleCurly.html

function getFamilyData( outputID, familyName ) {
var father, mother, child;
switch( familyName ) {
case 'Griffin':
father = "Peter";
mother = "Lois";
child = "Chris";
break;
case 'Flintstone':
father = "Fred";
mother = "Wilma";
child = "Pebbles";
Next page