Javascript Best Practices JavaScriptIEAccessIDEAMicrosoft

URL: http://www.javascripttoolbox.com/bestpractices/

Matt Kruse
October 10, 2005
Version 1.0

Introduction

This document will explain some important Javascript concepts and show the preferred way of handling common situations and problems. It should be read by anyone developing web applications and using javascript.

Square Bracket Notation

Objects properties in javascript can be accessed in two ways: Dot notation and Square bracket notation.

Dot notation

MyObject.property

Square bracket notation

MyObject["property"]

With dot notation, the property name is hard-coded and cannot be changed at run-time. With bracket notation, the property name is a string which is evaluated to resolve the property name. The string can be hard-coded, or a variable, or even a function call which returns a string property name.

If a property name is being generated at run-time, the bracket notation is required. For example, if you have properties "value1", "value2", and "value3", and want to access the property using a variable i=2:

This Will Work

MyObject["value"+i]

This Will Not

MyObject.value+i 

For convenience and consistency, using square-bracket-notation instead of dot-notation is a good practice to get into.

Referencing Forms And Form Elements

The correct way to reference a form input element is:

document.forms["formname"].elements["inputname"]

All forms should have a name attribute. Referencing forms using indexes, such as document.forms[0] is bad practice.

If you will be referencing multiple form elements within a function, it's best to make a reference to the form object first and store it in a variable.

var theform = document.forms["mainForm"];
theform.elements["input1"].value="a";
theform.elements["input2"].value="b";

Referencing Forms From Element Handlers

When you are validating an input field using onChange or similar event handlers, it is always a good idea to pass a reference to the input element itself into the function. Every input element has a reference to the form object that it is contained in.

<input type="text" name="address" onChange="validate(this)">
function validate(input_obj) {
    // Reference another form element in the same form
    if (input_obj.form.elements["city"].value=="") {
         alert("Error");    
         }
}

By passing a reference to the form element, and accessing its form property, you can write a function which does not contain a hard reference to any specific form name on the page.

Problems With Concatenation

In javascript, the + operator is used for both addition and concatenation. This can cause problems when adding up form field values, since Javascript is a non-typed language. Form field values will be treated as strings, and if you + them together, javascript will treat it as concatenation instead of addition.

Problematic Example

<form name="myform">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>

function total() {
    var theform = document.forms["myform"];
    var total = theform.elements["val1"].value + theform.elements["val2"].value;
    alert(total); // This will alert "12", but what you wanted was 3!
  }

To fix this problem, Javascript needs a hint to tell it to treat the values as numbers, rather than strings. Subtracting 0 from the value will force javascript to consider the value as a number, and then using the + operator on a number will perform addition, rather than concatenation.

Fixed Example

<form name="myform">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>

function total() {
    var theform = document.forms["myform"];
    var total = (theform.elements["val1"].value-0) + theform.elements["val2"].value;
    alert(total); // This will alert 3
}

Using onClick in <A> tags

When you want to trigger javascript code from an anchor tag, the onClick handler should be used. The javascript code that runs within the onClick handler needs to return true or false back to the tag itself. If it returns true, then the HREF of the anchor will be followed like a normal link. If it returns false, then the HREF will be ignored. This is why "return false;" is often included at the end of the code within an onClick handler.

Correct Syntax

<a href="javascript_required.html" onClick="doSomething(); return false;">go</a>

In this case, the "doSomething()" function will be called when the link is clicked, and then false will be returned. The href will never be followed for javascript-enabled browsers. However, if the browser does not have javascript enabled, the javascript_required.html file will be loaded, where you can inform your user that javascript is required. Often, links will just contain href="#" for the sake of simplicity, when you know for sure that your users will have javascript enabled. Otherwise, it's always a good idea to put a local fall-back page that will be loaded for users without it disabled.

Sometimes, you want to conditionally follow a link. For example, if a user is navigating away from your form page and you first want to validate that nothing has changed. In this case, your onClick will call a function and it will return a value itself to say whether the link should be followed.

Conditional Link Following

<a href="/" onClick="return validate();">Home</a>
function validate() {
    return prompt("Are you sure you want to exit this page?");
}

In this case, the validate() function should always return either true or false. True if the user should be allowed to navigate back to the home page, or false if the link should not be followed. This example prompts the user for confirmation, then returns true or false, depending on if the user clicked OK or Cancel.

These are all examples of things NOT to do. If you see code like this in your pages, it is not correct and should be fixed.

What Not To Do

<a href="javascript:doSomething()">link</a>
<a href="#" onClick="doSomething()">link</a>
<a href="#" onClick="javascript:doSomething();">link</a>
<a href="#" onClick="javascript:doSomething(); return false;">link</a>

Eval

The eval() function in javascript is a way to run arbitrary code at run-time. In almost all cases, eval should never be used. If it exists in your page, there is almost always a more correct way to accomplish what you are doing. The rule is, "Eval is evil." Don't use it.

Detecting Browser Versions

Some code is written to detect browser versions and to take different action based on the user agent being used. This, in general, is a very bad practice.

The better approach is to use feature detection. That is, before using any advanced feature that an older browser may not support, check to see if the function or property exists first, then use it. This is better than detecting the browser version specifically, and assuming that you know its capabilities. An in-depth article about this topic can be found at http://www.jibbering.com/faq/faq_notes/not_browser_detect.html if you want to really understand the concepts.

Don't Use document.all

document.all was introduced by Microsoft in IE and is not a standard javascript DOM feature. Although many newer browsers do support it to try to support poorly-written scripts that depend on it, many browsers do not.

There is never a reason to use document.all in javascript except as a fall-back case when other methods are not supported.

Only Use document.all As A Last Resort

if (document.getElementById) {
    var obj = document.getElementById("myId");
}else if (document.all) {
    var obj = document.all("myId");
}

The rules for using document.all are

1. Always try other standard methods first
2. Only fall back to using document.all as a last resort
3. Only use it if you need IE 5.0 support or earlier
4. Always check that it is supported with "if (document.all) { }" around the block where you use it.

Getting And Setting Form Values

The method used to get and set form values depends on the type of form element. A detailed explanation of how to correctly access form controls can be found at http://www.jibbering.com/faq/faq_notes/form_access.html.

In general, it is a good practice to use generalized getInputValue() and setInputValue() functions to read and write values to form elements. This will make sure that it is always done correctly, and situations that otherwise might cause confusion and errors are handled correctly. For example, forms with only 1 radio button in a group, or multiple text inputs with the same name, or multi-select elements.

The getInputValue() and setInputValue() functions are part of the validations.js library from the Javascript Toolbox. The most current version of these functions and other validation functions can be found at http://www.javascripttoolbox.com/validations/.

Additional Resources

The comp.lang.javascript FAQ has many common questions and answers about javascript. It is a great resource to check if you have what you think might be a FAQ.

For general-purpose libraries and examples, see The Javascript Toolbox.

If you want to really exploit the javascript language and use advanced techniques, read about Javascript Closures.

---

end