Ok. What I'm about to relate aren't necessarily rules to be obeyed or anything like that, but just stuff that I've learned from my own experiences with coding javascript that, well, make my life easier.

VariablesAlways declare variables with var this is just good consistency, and not doing so CAN cause errors in certain situations (it's a scope issue).

End of lines Please, use semicolons. I know javascript doesn't require them, but use them anyways. It makes code easier to read and EVERY other C-based scripting language requires them

Functions and parametersWhenever possible, use a function. Likewise, if something is variable, use a parameter. Functions and parameters are the basic building blocks for any successful javascript...er...uh...script.

Share the workload It may seem ironic at first, but 3 short functions are more efficient than one long procedural function. Especially if tasks get repeated. This becomes more important if you start making methods and objects of your own.

Global variables Did you know that all global variables are also properties of the window object? They are! What does this mean? Well, it means that we can create global variables from inside a function. In fact, let's make a function that exists JUST to create new global variables

This concept should go hand-in-hand with the previous topic, Functions and Parameters.

Create referencesIf you have any code that accesses a DOM object that you need to use more than once, create a reference. It's for more efficient than running getElementbyId() a bunch of times, or accessing your object via some collection such as [images or [url="http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/links.asp"]links](http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/images.asp). Example

For those of you that don't know, my variable o is not a copy of the object or anything like this, but just a label of sorts with which I can use it to address the object it's referencing. (don't use the with statement)

The parseInt() function A very handy function indeed, but what happens here?

var myString = "010";
var myNum = parseInt( myString );

Does myNum now equal 10? Noooo. myNum is now equal to 8. Why? Becase parsenInt does it's best to guess the proper radix based on the input (8, 10, or 16), and a number like 010 looks octal. It's the leading zero in the string that trips up parseInt() here. It is not very well known that parseInt can take a second parameter. You guessed it, the radix.

var myString = "010";
var myNum = parseInt( myString, 10 );

This gives us what we expect, myNum is now equal to 10.

For loops Always initialize each variable you need, rather than calling on a property in the loop's conditional. For example, instead of this

This way, the myString.length property is retrieved only once, and not at each iteration of the loop. Ok, now for my favorite way to do For loops of this nature. Did you know that when you assign a variable a value there is also a return value? That return value is a Boolean indicating if the data was succesfully stored into the variable or not. <EDIT> See notes regarding this statement in the posts below </EDIT> If you need to retrieve a value from the array or string (like above) then your for loop can look like this

Remember, the middle portion of the for loop just needs to evaluate as true for the loop to proceed. Neat, eh?

While loops I won't say much here, but if you are performing some type of breaking condition inside a For loop, you probably need a while loop instead.

Switch statements don't have to break after each case Sometimes the pesky behavior of [switch statements can be a blessing. Imagine that I wanted you to create a function then when passed an integer between 0 and 10 would return a countdown-style string? How would you do it? If you remembered that switch statments proceed until they see a [url="http://msdn.microsoft.com/library/en-us/script56/html/js56jsstmbreak.asp?frame=true"]break](http://msdn.microsoft.com/library/en-us/script56/html/js56jsstmswitch.asp?frame=true), you might use one something like this

This differs somewhat from using the java script: pseudo-protocol or just putting a hash (#) in the href. The method above will still allow the link to be usable if the user has javascript turned off and more importantly, search engine spiders can follow this link

Use bubbling to your advantage Let's say that you have about 100 images onto which you want to apply some events, like onmouseover and onmouseover for a rollover-type className change. Instead of attaching each event to each image, use the events bubbling to make your life easy.

Confused? Well, because both the onmouseover and onmouseout events bubble, that means that the DIV that contains all our images is hit with the events too, so we can capture thm there, and filter out the events that we don't want, and keep the ones we do.

Creating HTML stringsIf you are creating HTML as a string whether performing an innerHTML operation or whatever, use single quotes to delimit the HTML string. Why? Because proper HTML should have double quotes around attribute values, and using single quotes to delimit the HTML keeps you from having to do lots of escaping.

Consult your references Always check with documented sources if you are unsure about something. I once spent 2-3 minutes creating a function that would reverse all the items in an array. Lo and behold, the reverse() method for arrays has been around since version 3 browsers.

A Constructor constructor Here's a neat little trick for you advanced JS folks out there. Ever wanted to create your own object without having to define a unique constructor function? Well, you can! Check this out...

Well, I'm sure if I sat here long enough I could come up with a dozen more things, but hey, you guys got what came to my head today

Edit:

2003.08.15 - Two new tips posted!

Conditionals If you are doing some sort of comparison conditional, where one operand of that conditional is a literal, like if ( someVar == "someString" ) or if ( myNum == 3 ), it's actually better to list the literal operand first:

if ( "someString" == someVar )if ( 3 == myNum )

Why? Because if you mistype the equality operator (==) and instead type the assignment operator (=) -- a fairly common typo, then you will discover this error at runtime. Tracking down the cause of these errors can be difficult, but switch the order of your operands and the mistake of assigning a variable to a literal error instantly and give a useful line-number (even in IE!)

The hidden power of setTimeout For some reason, many, many, MANYpeople don't know that the first argument for the setTimeout (and setInterval) function doesn't have to be a string. In fact, it is much more powerful when you send a function pointer, or, a reference to a function (passing it by name), instead.

So, instead of

setTimeout( "loop()", 1000 );

do it this way

setTimeout( loop, 1000 );

Now, if we get creative, we can solve the issue of passing arguments to a setTimeout-called function, which I've seen many times. As I'm sure some of you know, the variables you are trying to pass will lose scope (unless they are global). The method to our madness will be the anonymous function.

Once again, instead of

setTimeout( "loop(counter)", 1000 );

We use

setTimeout( function() { loop(counter); }, 1000 );

I know what you're thinking -- "Why can't I use setTimeout( loop(counter), 1000 ) ???". I'll tell you why: because that, my friend, is a function call, and if you remember, I said we need to pass a function pointer. Since we declare an anonymous function that itself calls loop(), then we are legitimately passing the proper reference, AND maintaining the power to call the function. It's like having your cake and eating it too!

Here endeth the tips.

Enjoy, and happy coding

Edit:

Re: jofa's post. Although I agree with the concept of hiding javascript from browsers that don't support it, I think it's important to note that XHTML 1.0 Strict does not allow for the language attribute on SCRIPT elements

Originally posted by beetle Did you know that when you assign a variable a value there is also a return value? That return value is a Boolean indicating if the data was succesfully stored into the variable or not.

Somebody's got to do it. That statement is incorrect. The return value is whatever was assigned.

Type this in your location bar:javascript:alert(window.myprop = 'hi')

You'll get an alert with the message "hi".

You can do compound assignments:

myVar1 = myVar2 = myVar3 = "some value";

because of this fact (assignment goes from right to left, so it works out).

The reason your charAt() loop ends is because:

"hello".charAt(10) == ''

An empty string. And an empty string typecasts into a boolean true value, which is what is happening at the end of each iteration in your loop.

JScript was origionally based on netscape documentation, but due to features and functionality was not re-created by Microsoft properly, which resulted in discrepancies between jscript 1.0 and javascript 1.1. Since then JavaScript was submitted and has become known as ecmaScript(ECMA-262). Because of this standardization, it is now perceived that javascript is Netscapes implementation and Jscript is Microsofts...23JavaScriptecmaScriptJScript

Just a note on the JS with statement...I've seen quite a number of advanced programmers (with wide experience in OOP) state, unequivocally: "Don't use it." It jiggers the scope chain, can produce unwanted results, and is almost always unnecessary. From the above:

M = Math;
{
myVar = M.abs(M.sin(x) * M.PI + M.cos(y) / M.E);
}

You can, of course, add static Math functions/constants of your own to streamline coding.

I actually disagree. Although the advice is well-intentioned, it can ultimately cause many problems.

First of all, to properly do script-loaded javascript functions - you must assign a function pointer to the onload event, and not a function call.

window.onload = functionName;

Notice, no parentheses. However - what happens when you have two or more scripts that both do the same thing? Well, the event-assignment that comes latest in source order will override any previous declarations - just like over-writing a variable.

Solutions? Well, one can adopt the new methods for aggregating events onto a handler, such as Microsoft's attachEvent() and the W3C-approved addEventListener(). However, these do not come without their own stigmas. First, you must write an abstraction or sniffer-type mechanism to make sure each browser uses the method it supports. Second, even then, some browsers don't support either method (such as IE-mac, and NS4).

I find the easiest and most compatible solution is to combine all onload function-calls int a common init() function. Every browser with JS support can see/use it, and it's super-easy to setup. Just take all your onload script events and move them like this

function init()
{
function1();
function2();
}

Etc. This also allows you to send parameters to your function much easier than using either method discussed above (which would involve another abstraction or using anonymous functions). The next step is to make sure you the body tag's onload event points to init() and that any window.onload events point there as well

window.onload = init;
-or-
<body onload="init();">

If you have several assignments, it doesn't matter, because you are just assigning the same value.

I'll read the rest of your post when my heads in that place (which is clearly wasn't when I wrote mine)

[edit]discounting my () typo, there's nothing about my post that precludes its use as the final init call.

I didn't say that several functions should all be lined up on the back of the precursive window.onload call. I just gave it as a one-shot example.

My suggestion was merely about dealing with the onload event and how best to address it for site-wide functions whilst keeping code and markup as separate as possible.

Had I found the need to call several onload functions I surely would have done the same as you and wrapped them all into another function and called that function during the window.onload call.

Still, as I said, my example does not preclude its use in the form of your init/init() example.Your example purports to debunk mine only to end up in the same place, giving the same options, one of which is preferable to the other- the illustration of which was the sole purpose of my original post.[/edit]

Fair enough. I just wanted to make sure those reading this understood possible complications - particularly because using window.onload = functionName; is one of if not THE primary cause of javascript conflicts.

In the end, the ability to aggregate events is the most desirable choice - but the tech isn't quite there yet to make it a "best" solution.

Can any one of you please tell me how can i make any file downloadable. so i need to use any specific tag or javascript function which will be invoked on any event like onclick, etc.I know that i can give a link to a file of unknown extension and it will ask for the download but if i want to make a HTML file to be downloadable.

The idea behind this is that function objects converted to strings always have a name, even the anonamous events assigned inline.

Assigning "....onmouseover="alert(this.onmouseover.toString());"..." to a link will alert "function onmouseover(event){...." in Firefox, or "function anonymous(){...." in Internet Explorer. If you split() this string(I just like arrays...) & shift() off everything up to & including the first ) found, you now have just the object {} as a string which you can stash in an "onmouseover2" attribute. Now in the event that would normally overwrite the original event you end with eval(this.onmouseover2); to call a truely anonamous function that you have stashed with the overLoad.