JavaScript in Object-Oriented Way

Here’s my presentation slide during barcamp phnom penh 2009:

progress bar using JavaScript

Here’s a littile progress bar I’ve created using JavaScript. I’ve use JavaScript setInterval() to increase the progress bar & clearInterval() to stop progress bar.

//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
);

HTML – Tab Index

The tabIndex property sets or returns the tab index for a text field. The tab order defines the order the elements appear if you navigate the page using the “tab” button on the keyboard.

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:

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

    <label for="email">Your E-mail</label>
    <input class="txt" 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>

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

JavaScript Inheritance: modify property in parent class

In the following code, there’s a problem which is faced when we’re using inheritance through prototype.

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:

Hi! I am Votoria
I am Female
Hi! I am Sam
I am Female

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:

Hi! I am Votoria
I am Female
Hi! I am Sam
I am Male

Javascript Array.filter

filter(): runs a function on every item in the array and returns an array of all items for which the function returns true.

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”

javascript setInterval & clearInterval

An example to demonstrate how start interval & stop it using javascript.

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)
        }
);

Create object in javascript using JSON

Here’s how we create javascript object using Javascript Object Notation (JSON). After the code below is executed, it would show alert windows with text “Borey Lim”

//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();

CSS div make a table like

In table of height 500px, if we have 2 rows and we set the first one 100px, the second will fill in the rest of the space. In CSS, we can all so make our div behave the same as table. Here sample code:

<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>

Cloud computing

Cloud computing is a style of computing in which dynamically scalable and often virtualised resources are provided as a service over the Internet.

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/

flexible constructor in JavaScript

Javascript provides flexible constructor. Below are sample code that implement the flexible constructor:

var Student = function(_department, _course, _year){
	department = _department || "";
	course = _course || "";
	year = _year || "";

	this.set_department = function(_department){
		department = _department;
	}

	this.set_course = function(_course){
		course = _course;
	}

	this.set_year = function(_year){
		year = _year;
	}

	this.display_information = function(){
		console.log("Information of the student:");
		console.log("Department: " + department);
		console.log("Course: " + course);
		console.log("Year: " + year);
	}
}

//constructor
var obj_student = new Student("Computer Information Scince", "ICT", "2");
obj_student.display_information();

var another_obj_student = new Student();
another_obj_student.set_department("Technology");
another_obj_student.set_course("BIS");
another_obj_student.set_year("Foundation");
another_obj_student.display_information();

Sample output:

Information of the student: Department: Computer Information Scince Course: ICT Year: 2 Information of the student: Department: Technology Course: BIS Year: Foundation