//
var arr = ['x','y','z'];

for (var count = -1, l = arr.length, obj; obj = arr[++count], count < l;) {
  alert(obj);
}

// alerts x, y, z
//

Nothing wrong with conventional looping technique, but this is to explore JavaScript’s expressiveness!!!

A nice example to explain closure.

//
// define a function which preserves data (count)
//
var CreateCounter = function(){
   var count, f;
   count = 0;
   f = function(){
      count = count+1;
      return count;
   }
   return f;
}

// create objects which remembers its own counter
var counter1 = CreateCounter();
var counter2 = CreateCounter();
alert(counter1());  // 1
alert(counter1());  // 2
alert(counter1());  // 3

alert(counter2());  // 1
alert(counter2());  // 2
alert(counter2());  // 3

alert(counter1());  // 4
alert(counter1());  // 5
alert(counter2());  // 4

Nice article about closure found at http://www.jibbering.com/faq/faq_notes/closures.html

// function definition
function alertHi(name) {
   alert('hi! '+name);
}

// storing string
var name = 'rajakvk';

// storing number
var age = 26;

// storing function
var sayHi = alertHi;

// now sayHi is also function, you can call it like
sayHi();   // hi

Here is example to use function as parameter

// define a function to call a function twice
// here function f passed as parameter
var callTwice = function(f,x) {
   return f(f(x));
}
var addTen = function(x) {
   return x+10;
}
// here function addTen used as value 
var y = callTwice(addTen, 2);   // 22

// Parent class definition
var Human = function(name, age) {
    this.name = name;
    this.age = age;
}

// Child class definition
var Indian = function(name, state){
    if(name) this.name = name;
    this.state = state;
}

// Extending
Indian.prototype = new Human('raja',22);

// Creating instance of child class with own name property
var tamilian = new Indian('kvk','TN');

// Creating another instance of child class without own property
var cbe_ian = new Indian('','TN');

alert(tamilian.name);  // kvk
alert(tamilian.age);   // 22
alert(tamilian.state); // TN
alert(cbe_ian.name);   // raja

1. undefined is a type.
2. undefined type has only one value. that values is undefined.
3. There is a global variable called undefined
4. global undefined variable has default value undefined
5. global undefined variable is not a constant
6. undefined is not a keyword

1. typeof undefined \\undefined

2. undefined = 1; alert(typeof undefined !== 'undefined'); // false

3. var name = undefined;  \\ global variable undefined is assigned to name

4. alert(name); \\ undefined, that means undefined global variable has value undefined

5. undefined = 'rajakvk';  \\ we can change value

6. var undefined = 'rajakvk';  \\ no syntax error
    var if = 'rajakvk';  \\ SyntaxError: missing variable name

Interface provides a way to define what methods an object should have but not how it should be implemented. Interface allows to group objects based on what features they provide.

Javascript does not come with built-in support for interface. So in JavaScript it has to be manually ensure that a given class implements an interface.

Three ways to ensure interface in JavaScript:

• Comments,
• Attribute checking,
• Duck typing

/*
interface BasicMember {
    function isMajor(age);
    function isCitizen(ssn);
}
interface GoldMember {
    function havingVisaCard(ccn);
}
*/
var RentACar = function(user, vehicle) { // implements BasicMember, GoldMember
    // ...
}
// Implement the BasicMember interface
RentACar.prototype.isMajor = function(age) {
    // ...
};
RentACar.prototype.isCitizen = function(ssn) {
    // ...
};
// Implement the GoldMember interface
RentACar.prototype.havingVisaCard = function(ccn) {
    // ...
};

How to create custom events in javascript using jQuery framework? This post trying to answer this question.

HTML construction: There are four DIVs (tl, tr, bl, br) absolutely positioned at four corners within a master DIV (container) with gray background. Each absolutely positioned DIV contains one empty div with class ‘error’ and one button.

<div id="container">
	<div id="tl">
		<div class="error"></div>
		<input id="top-left" type="button" value="submit"/>
	</div>
	<div id="tr">
		<div class="error"></div>
		<input id="top-right" type="button" value="submit"/>
	</div>
	<div id="bl">
		<div class="error"></div>
		<input id="bottom-left" type="button" value="submit"/>
	</div>
	<div id="br">
		<div class="error"></div>
		<input id="bottom-right" type="button" value="submit"/>
	</div>	
</div>

CSS construction:

#container{width:100%;height:100%;position:fixed;}
#tl, #tr, #bl, #br{width:200px;height:200px;position:absolute;background-color:#eee;}
#tr{top:0;right:0;}
#rl{top:0;left:0;}
#br{bottom:0;right:0;}
#bl{bottom:0;left:0;}

var customEvent = (function(){
	$(function(){
		customEvent.init();
	});
	var errorHandler = function(e){
		var formErrorFlag = true;
		if(formErrorFlag) 
			$(this).trigger('formError');
	}
	var customErrorHandler = function(e){
		$('.error').html('error at '+e.target.id).css('color','Red');
	}
	return {
		init: function(){
			$("input:button").bind('click',errorHandler);
			$("input:button").bind('formError',customErrorHandler);
		}
	};
})();

But if you want to pass a parameter with myFunction
setTimeout(myFunction(para), myTimeoutInMilliSeconds); // won't work

The javascript closure comes as a great rescue.
setTimeout(function(){myFunction(para)}, myTimeoutInMilliSeconds);

This is best example of using closure.

// function definition
function foo(){
  // variable declaration and initialisation
  var a, b = 0;
}

here b is global because

// JavaScript will interpret as follows
var a = (b = 0);

Variable declaration only goes to variable a but not b. So here the variable b becomes global. A better solution would be

// declare both first
var a,b
// assign values after
a=b=0;

Is it helpful?

function foo() {
  var x = 1;
  if (x) {
    (function () {
      var x = 2;
      // some other code
     }());
  }
  // x is still 1.
}

If it is strange to you, here are some clues

var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10;
  }
  alert(foo);
}
bar();

If it surprises you that the answer is “10″? Here goes another

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
alert(a);

is it terrified to see the browser alert “1″? here goes last one…

Try the following in Firebug:

var x = 1;
console.log(x); // 1
if (true) {
  var x = 2;
  console.log(x); // 2
}
console.log(x); // 2

This is because JavaScript has function-level scope.
One more concept is variable hoisting. The simplest example is

function foo() {
  bar();
  var x = 1;
}

is actually interpreted like this:

function foo() {
  var x;
  bar();
  x = 1;
}

I know, this post will not give you fair idea what Im talking about. But run the code in firebug, if you are curious, please dig on these keywords in google javascript hoisting, javascript scope.

The main purpose of this post is to invoke your curiosity. Happy JavaScripting !!!