//Create dom
var bar = document.createElement("div");
progressBar = document.createElement("div");
with(bar.style){
    width = "200px";
    height = "10px";
    position = "absolute";
    border = "1px solid #949DAD";
};

with(progressBar.style){
    width = "0px";
    height = "100%";
    background = "#D4E4FF none repeat scroll 0 0";
};

bar.appendChild(progressBar);
document.body.appendChild(bar);

//start setInterval
var x = window.setInterval(
	function(){
                progressBar.style.width = parseInt(progressBar.style.width) + 5 + "px";
            //stop interval when progress bar width = 200
            if(parseInt(progressBar.style.width) == 200) clearInterval(x);
	},
	40
);

Given the scenario that we have a webpage which has many links & a form for users to complete. In this case we see that the main focus is the form not the links before the form. If users were to use tabkey to browse to the form, it would take many keypress before users are able to go to form. We can solve our problem by specifying the tabindex property.

Here’s a simple example:

<pre><form>
    <label for="name">Your Name</label>
    <input value="" id= "name" name="name" type="text" tabindex = "1">

    <label for="email">Your E-mail</label>
    <input value="" name="email" id="email" type="text" tabindex = 2>

    <label for="mobile">Your mobile</label>
    <input value="" name="mobile" id="mobile" type="text" tabindex = -1 >

    <label for="message">Message</label>
    <textarea rows="4" cols="30" name="message" id="message" tabindex = 3></textarea>
</form>
</pre>

“tabindex = -1″ will make the tab not go though the field when the user clicks tabkey.

Now, we have a parent class Person, and we have a child class Student which inherit from Person. As a default, we want to set gender to “Male”.

var Person = function(){
    this.object = {"name": "", "gender": "Male"};
}

Person.prototype.sayHi = function(){
    console.log ("Hi! I am " + this.object.name);
}

Person.prototype.sayGender = function(){
    console.log ("I am " + this.object.gender);
}

var Student = function(){}
Student.prototype = new Person();

var victoria = new Student();
victoria.object.name = "Vitoria";
victoria.object.gender = "Female"
victoria.sayHi();
victoria.sayGender();

var sam = new Student();
sam.object.name = "Sam";
sam.sayHi();
sam.sayGender();

here’s the result:

As we see, the default gender “Male” has been alter to “Female”. we can prevent the default gender in the Person class to be altered by adding “Person.apply(this);” Student class.

After added, the code will look like this:

var Person = function(){
    this.object = {"name": "", "gender": "Male"};
}

Person.prototype.sayHi = function(){
    console.log ("Hi! I am " + this.object.name);
}

Person.prototype.sayGender = function(){
    console.log ("I am " + this.object.gender);
}

var Student = function(){
    Person.apply(this);
}
Student.prototype = new Person();

var victoria = new Student();
victoria.object.name = "Vitoria";
victoria.object.gender = "Female"
victoria.sayHi();
victoria.sayGender();

var sam = new Student();
sam.object.name = "Sam";
sam.sayHi();
sam.sayGender();

here’s the result:

Syntax:

var filteredArray = array.filter(callback[, thisObject]);

var arrayObj = [
            {"uuid": "C3EF0958-F530-0001-4793-1A3917C011DB","name" : "borey", "position": "developer"},
            {"uuid": "f47ac10b-58cc-4372-a567-0e02b2c3d479", "name": "sok", "position": "designer"},
            {"uuid": "C3EF0948-3F50-0001-8E28-C560102CD090", "name": "seiha", "position": "developer"},
            {"uuid": "C3EF094D-CD90-0001-3567-139E1BF01B14", "name": "dara", "position": "manager"},
            {"uuid": "C3EF0953-FCD0-0001-A745-1C3019401ED7", "name": "meta", "position": "developer"}
            ];

var updateValue = function(uuid, newObj){
    var obj = arrayObj.filter(function(obj){ return obj.uuid == uuid;  })[0];
    obj.uuid = newObj.uuid;
    obj.name = newObj.name;
    obj.position = newObj.position;
};

var displayArrayObjectValue = function(arrayObject){
    var length = arrayObject.length;
    for( var i = 0; i < length; i++){
        console.log(arrayObject[i].uuid + ' '+arrayObject[i].name + ' '+arrayObject[i].position);
    }
}

var updatedObjValue = {"uuid": "3EF099C-4940-0001-A0F8-F92E1FC8C430", "name": "ibo", "position": "lead developer"}

console.log('before change: ');
displayArrayObjectValue(arrayObj);

updateValue("C3EF0958-F530-0001-4793-1A3917C011DB", updatedObjValue);

console.log('after change: ');
displayArrayObjectValue(arrayObj);

The code above will update the value of object which has uuid = “C3EF0958-F530-0001-4793-1A3917C011DB”

var x = window.setInterval(
	function(greeting, name){
		var m = document.createElement("div");
                with(m.style){
                    height = "2px";
                    width = "50px";
                    position = "relative";
                    backgroundColor= "green";
                }
                document.body.appendChild(m);
	},
	1000,
	"hello",
	"world",
        document.body.onclick = function(){
	    clearInterval(x)
        }
);

//script to demonstrate creating object in javascript using JSON

var objectDemo = {
	firstName: "",
	lastName: "",
	displayName : function(){
		alert(this.firstName + " " + this.lastName);
	}
}

objectDemo.firstName = "Borey";
objectDemo.lastName = "Lim";
objectDemo.displayName();

<html>
  <head>
    <style>
    #main {
      height: 100%;
      width: 100%;
      position: relative;
    }
    #top{
      background-color: blue;
      height: 200px;
    }
    #bottom{
      background-color: gray;
      position: absolute;
      bottom: 0px;
      top: 200px;
      width: 100%
    }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="top"></div>
      <div id="bottom"></div>
    </div>
  </body>
</html>

A research paper released on October 8th, 2007 by Greg Boss, Padma Malladi, Dennis Quan, Linda Legregni, Harold Hall from IBM states: “Cloud computing is a term used to describe both a platform and type of application. A cloud computing platform dynamically provisions, configures, reconfigures, and deprovisions servers as needed. Servers in the cloud can be physical machines or virtual machines. Advanced clouds typically include other computing resources such as storage area networks (SANs), network equipment, firewall and other security devices.

Cloud computing also describes applications that are extended to be accessible through the Internet. These cloud applications use large data centers and powerful servers that host Web
applications and Web services. Anyone with a suitable Internet connection and a standard browser can access a cloud application.”

Simply said, if you don’t need to have operating system & other software application installed on your device, what you need is a device that support web browser. You can use the application through web browser. One of the good example is eyeOS. eyeOS is one of cloud OS  out there. It’s an opensource project. After spent some hours playing around with it, I’ve got the feeling that i’m in love with it. Here is the website of eyeOS: http://www.eyeos.info/