Programming & technology

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

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

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:

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:

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”

Since i’m going to write some code for the client side, I have to start learning OO javascript. What makes me surprise the most is how it is written. here are some codes i have tested:

as you can see in the code, i only create one function, however i can call in different ways. This is how dynamic Javascript is. Really Really dynamic!!!!