Best way to write Javascript Function

Here is always a new way of writing JavaScript Functions
Long were the days, when was start scripting for IE and Netscape. Firefox does not exist in that era and I got a bad habit of writing inline JavaScript functions like onclick=”javascript:alert(hi!);”

So, what is the best way to write JavaScript functions

1] onClick=”javascript: function(‘value’);”
2] onClick=”function(‘value’);”
3] onClick=”return function(‘value’);”

Well to start of,
1] First, onClick=”javascript: function(‘value’);”
I believe that putting JavaScript inline has been depreciated by W3C.

Not in HTML, but as braces cause problems with XML parsers you are encouraged to use only external scripts in XHTML.

The use of the javascript: pseudo-protocol identifier is probably unnecessary in most cases — just keep in mind that it is valid for those times when you may need to use it. The semicolon is also probably unnecessary in most cases but, again, I would recommend that you make a habit of always using it — as it is good programming practice to do so.

Please stop just making things up. Its a pseudo-protocol identifier because it’s aping the protocol part of a URL and it applies to a construction such as:

Open Sesame

And that construction was never really valid, though it used to work (and it doesn’t work anymore). And you will not find your construction in any HTML or JavaScript specification.

If you are coding of IE, it will work on all the version as it’s IE is very forgiving in terms of standards

2] Second, onClick=”function(‘value’);”
This is normal way of writing JavaScript. It will work on all W3C complaint browsers
There, in means simple, on clicking on function(‘value’), it will do some JavaScript function.
But, this function will not return any value, which will cancel that event.

In JavaScript, event raise by link, buttons, div, etc can be cancel if the return value is false
If you write
, here submit button will never submit form, as function is returning false.

But in above 2nd example, it will work as it doesn’t return any value.

3] Third, onClick=”return function(‘value’);”
As mention above, whenever you need to return value to the event, you will use return keyword with the function.
Here, note it, JavaScript is funny language, null, undefined, false and 0 means all the same thing for it.
So, when if(someobj) is evaluated, it will check for obj, if it doesn’t find it, it would return ‘undefined’ and javascript engine will consider it as false.
If some object is return, it doesn’t mean any of this value null, undefined, false and 0, and engine will evaluate true.
So, here the point is whatever your function return, and as long it’s not null, undefined, false, 0. Event won’t cancel and would be executed.
If you want more elaborate way of canceling the event, you could write
window.event.returnValue=false;
You could also read http://ryancannon.com/design/css_plus_js/cancelling-events-with-javascript where he has describe different way of canceling the event in JavaScript and which browser support it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s