11 JavaScript Tips You May Not Know

#1 Use less dots.
Every dot that you place in your script represents at least one procedure call that has to be executes in the background.
So locally cache object references.
if( document.getElementById( fieldName ).value == “oldValue” ) {
   document.getElementById( fieldName ).value = “newValue” ;
   document.getElementById( fieldName ).focus();
}
Efficient version above code is
var field = document.getElementById( fieldName );
if( field.value == “oldValue” ) {
   field.value = “newValue” ;
   field.focus();
}
#2 Prevent cashing
<META HTTP-EQUIV=”Expires” CONTENT=”0″>
Preventing the document from being cached ensures that a fresh copy of the document will always be retrieved from the site, even during the user’s current session, regardless of how the user has set the browser’s caching options.
This is useful if the content of the document changes frequently.
#3 Maximized object model references
window.open(); over just open();
When writing a script, you can use the notation of your choice.
However, you should keep in mind that the first specification is much faster.
#4 Close your tags properly.
HTML is a very flexible language.
It never generates errors, and often provides many different ways to accomplish a single task.
But when parsing HTML code, the browser needs to look ahead to find out where the tag ends.
#5 Preload your images.
If you’re going to create an animation or a rollover, you’ll probably want to preload the necessary images.
onLoad event handler to cache the images after the entire page has completely loaded.
#6 Counting elements in a document
You need to use the tags method of the document.all array.
The tags() method retrieves all HTML elements of a particular tag from the document.all array.
It returns an array of elements. The following line will populate the given array with all DIV/FONT elements:
var divArray = document.all.tags(“DIV”);
var fontArray = document.all.tags(“FONT”);
#7 Dot notation V/s Array notation
You can use the array notation for both properties and methods.
The general syntax is:
objectReference[“propertyName”]
objectReference[“methodName”]([arguments])
It is important to understand the array notation because sometimes it is the only alternative.
You must use the array notation when you need to reference the name of the property through a variable.
Suppose the variable str holds the string “write”. Instead of document.write(), you can use:document[str]() However, you cannot use
document.str() because it is equivalent to
document[“str”]().
#8 Images array
The document.images object reflects the images on a web page.In a frame-based page, each frame has its own document object.Not only are all the images in a document packed into one object, but each image is also an object of its own.
Thus, you can refer to an image in one of the following ways:
document.images[i] // array notation
document.images.imageName // property notation
Given image tag defined like this:
<IMG SRC=”anything.gif” HEIGHT=”100″ WIDTH=”100″>
Let’s suppose the this code defines the third image on the page.
The following references reflect that image:
document.images[2] // array notation
document.images.anything // property notation
If you decide to use the array notation, be prepared to change the indices in your scripts whenever you add a new image before an existing one.
Therefore,its recommend to use property notation.
#9 Extracting the Document’s HTML
The textRange object is very powerful, as it supports a wealth of properties, objects, and methods.The htmlText property includes the html code of the text range.
If we create a text range for a whole document, this property will include the HTML code of the whole document.
var range = document.body.createTextRange();
alert(range.htmlText);
#10 Adding more options to <select>
When you want to add an option, first create a new Option object:
newOption = new Option();
Then populate its text property. Let’s concatenate a number to the string “Option”:
newOption.text = “Option ” + optionNo;
And finally, let’s add the new option to the Select object above:
Select.add(newOption, 0);
#11 The Comma Operator
You can use the comma operator to force the evaluation of a set of expressions.
Sometimes called a parameter delimiter because it is used in delimiting multiple arguments in a function call:
var a = (b = “Hello”, alert(“Hi”), “Howdy”);