Some JavaScript Concepts
I named this tutorial 'Advanced Javascript Tutorial' - and till now nothing about it was that advanced. So I insert this chapter at the end to justify the title. Over the years javascript evolved and now some rules/conventions have to be followed when programming javascript for the web. These conventions will help your script to function in the best possible manner. The advantage of following rules are given below.
- Maximum Cross-Browser Compatibility
- More structure to the code
- Increased Readabily
- Increased Reusablity
- World Peace
I had ignored some or most of the principles said here in my earlier scripts because I want to keep those examples as simple as possible. I am including these here so that when you program you will do it with the best possible methods. Please remember that these are not iron clad rules but rather helpful principles.
Good Programming Practices
This applies for JavaScript as it does for all other programming languages - follow the practices that are upheld by the programming communities - for eg. Clear Variable/Function Names - use variable names like 'a_good_variable_name' instead of a generic 'a'. Comments - Comment your code - solves a lot of problems latter on. Indentation and white spaces -
for(var i=99; i>1; i--) {
if(i < 100) {
alert(i+" bottles of beer on the wall...");
} else {
alert("How in the whole wide world did this happen?");
}
}for(i=99;i>1;i++) { if(item<100) alert(i+" bottles of beer on the wall...");
else alert("How in the whole wide world did this happen?"); }Use W3C Standard code
Read the standards on W3C.org - and follow them. Even if your script fails on two or three obscure browsers, remember that you are doing the world a great service by using W3C code. I know that this is a tall order - but try anyway. Even I fail at this.
Object Detection instead of Browser Detection
When you start programming in javascript, will notice that certain features of JavaScript will work in some browsers and wreck in others. You will have to write a bit of browser specific code to make your code work in both browsers - this is were Browser Detectionn comes in. If you want to use an advanced bit of script, you first have to check whether a browser supports the objects you want to use.
A small example...
Press any key on your keyboard - the browser will capture the key that you have pressed.
function getKey(e) {
var code;
if(!e) var e = window.event;
if (e.keyCode) {
//Modern browsers use the 'keyCode' property to get the key that was pressed
code = e.keyCode;
}
else if (e.which) {
//Older Browsers(Netscape) uses the 'which' property to do the same.
code = e.which;
}
var character = String.fromCharCode(code);
var msg = "Character you pressed was ";
msg+="<span style='color:red;font-weight:bold;'>"+character+"</span>";
document.getElementById("keyarea").innerHTML = msg;
}
<body onkeypress="getKey(event)">and
<div id="keyarea">Press any key.</div>I hope that the comments in the code makes stuff clear - if not, the red parts should read like this...
if ('e.keyCode' is supported by your browser...) {
do this
}
else if('e.which' property is supported..) {
use that.
}If you fail to use this method and view your page in a browser that does not support your code, the browser will promptly and proudly display an error message. You don't want that - even if a script does not work, you don't want your users to know that - do you?
Event Handlers
I will hesitate before asking you to follow this rule - because I myself don't follow it all the time. Event handlers are the statements that run when a certain event occurs. For example...
Inline :<a href="#" onClick="doSomething()">Test</a>Traditional :
element.onclick = doSomething;W3C Model :
element.addEventListener ('click',doSomething,false);The advice is to use the Traditional model - the inline method is reliable but since this method requires you to write JavaScript code in your XHTML page, you must not use it. You may have noticed that I did not use the W3C model - this is because that it is not supported by IE - while the Tradition model is supported by all major browsers.
And now... the twist
The above principles are easier said than done. Good, W3C scripts using Level 1 DOM can break on older browsers. Your clean, beautiful and commented codes is too big and will slow the loading of the pages. There are many obstacles to following the above principles - and that is why I said that these are only principles and not rules. You will have to make your own decisions on where and when to use these principles.
blog comments powered by Disqus