Asv3's Blog

September 18, 2009

Flexibility & JavaScript

Filed under: front-end, javascript — Tags: , , , , , — asv3 @ 10:03 pm

JavaScript is the most flexible and widely used language in current era of Internet, nobody expected JavaScript to grow this fast and wide, hence I say JavaScript is kind of under-developed but over used technology. But that doesn’t take the beauty of flexibility away from JavaScript even though security remains major concern in its implementation. Every day it keeps me interesting with it’s abilities, every time I think why did I miss that part it. In all it’s the most flexible language for OO coding, here is the small example which shows how you can easily organize and maintain JavaScript code.

 

Say I have to define 2 functions walk and run. you can define them as follows.

function walk(){

    // do walking

}

 

function run(){

    // do running

}

 

If you are defining this function as part of a Man class, code looks like this

var Man=function(){

    //….

};

 

Man.prototype=function(){

    // do walking

};

 

Man.prototype.run=function(){

    // do running

};

 

/* Usage */

 

var ravi=new Man();

ravi.walk();

ravi.run();

If you want class encapsulated in one declaration you can do

 

var Man=function(){

    //….

};

Man.prototype={

    walk:function(){

        // do walking

    },

    run:function(){

        //do running

    }

}

What’s next you can add a method to Function object that can be used to declare methods.

Function.prototype.method = function(name, fn) {

    this.prototype[name] = fn;

};

var Man= function() {

    //do something

};

Man.method(‘walk’, function() {

    //do walking

});

 

Man.method(‘run’, function() {

    //do running

});

 

As we saw earlier, flexibility of JavaScript is enviable, here every thing is an object (except primitive data types) and you can add attributes and methods to these Objects at any point of time, execution. You can even add methods and attributes to Functions as well. Here is an example:

function displayError (message){

    displayError.numTimesExecuted++;

    alert(message);

}

displayError.numTimesExecuted = 0;

here is another example with prototype:

function Man(weight, height){

    this.height = height;

    this.weight = weight;

}

 

Man.prototype={

    getHeight:function(){

        return this.height;

    },

    getWeight:function(){

        return this.weight;

    }

}

 

/* Initiating the class */

 

var ravi = new Man (80,164);

var suresh = new Man (75,169);

 

/* add new method to Class */`

Man.prototype.getGreeting=function(){

    return "Hi your height and weight is " + this.getHeight() +"  and " + this.getWeight() + " respectively";

}

ravi.getGreeting();

//output "Hi your height and weight is 164 and 80 respectively"

Object Oriented Javascript

Filed under: general — Tags: , , , , , — asv3 @ 9:35 pm

I keep hearing now a days, OO Javascript is the buzz word, may be the time has come to think that who-ever can implement OO concepts in Javascript rule the front-end development. Is that completely true? I don’t think so, whatever technique people are using to do OO Javascript are outdated techniques in ActionScript. We with ActionScript started using prototype long before even Flash MX 2004 and ActionScript 2 arrived. That was the only way to write manageable code in ActionScript by then.  I remember doing some games using such methods, we used to use #initclip #endinitclip to define ActionScript code that need to be executed before MovieClip is initialized. All done, but it’s OO Javascript creating a wave now in Front-End development. But I can say it’s time for us to do some thing interesting with JavaScript, when every body telling the OO JS is cool, that should have some thing super cool in it. Please join us in exploring super cool features on JavaScript in coming days.

Process of Converting an Design into HTML mocks.

Filed under: front-end — Tags: , , , , , , — asv3 @ 3:28 pm

Feasibility Study: Go through the mock and see if there are any unique element which you haven’t tried earlier, if it is there, make a note and do a feasibility study of that element, and speak with mock creators how the mock work. If every thing is fine, Just move on next step.

Basic GRID: It’s recommended to use YUI CSS Grids because they work well with all A grade browsers and well supported and documented. download reset-fonts-grids.css from YUI library, depending on the page width set id of the container div to “doc” to “doc4”, you can use custom width as well, but widths defined in the grids are good enough to cover all most all layouts, so you don’t have to worry too much on custom tweaking layouts. After that depending on the number of columns and left/right column with set class of container div to “yui-t1” to “yui-t6”. Here is list of doc ids and yui-t classes with measurements.

  • div#doc creates a 750px page width.
  • div#doc2 creates a 950px page width.
  • div#doc3 creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)
  • div#doc4 creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.
  • div.yui-t1 creates a narrow column on the left with 160px width.
  • div.yui-t2 creates a narrow column on the left with 180px width.
  • div.yui-t3 creates a narrow column on the left with 300px width.
  • div.yui-t4 creates a narrow column on the right with 180px width.
  • div.yui-t5 creates a narrow column on the right with 240px width.
  • div.yui-t6 creates a narrow column on the right with 300px width.

Start with header: Divide header section using YUI nesting grid structures, you can use “yui-g” to “yui-gf”. Here are the details with partition measurements.

  • div.yui-g – Standard Nesting Grid – tells two children to each take up half the available space.
  • div.yui-gb – Special Nesting Grid B – tells three children to each take up a third of the available space.
  • div.yui-gc – Special Nesting Grid C – tells the first of two children to take up 66% of the available space.
  • div.yui-gd – Special Nesting Grid D – tells the first of two children to take up 33% of the available space.
  • div.yui-ge – Special Nesting Grid E – tells the first of two children to take up 75% of the available space.
  • div.yui-gf – Special Nesting Grid F – tells the first of two children to take up 25% of the available space.

most popularly used grid partition is “yui-g” which splits given area into 2 equal parts, consider using the grid whichever suits well for you, keep in mind, if you are using YUI grids, you really don’t have to bother about clearing divs etc. But there can be a exception, but handle it case wise.

Follow same kind of partitions for Body and Footer, you will have Basic Grid ready with you now.

Blog at WordPress.com.