Wednesday, March 20, 2013

Native JavaScript | Remove DOM Element (easy!)

Hi, All.
If you'v been surfing my blog for a while, you may noticed that i am kindly a fun of simplifications and this article is not an exclusion from the rules. :)
Usually to remove an element, you need to perform quiet a few actions, as javascript gives you no easy way to do so.
I would like to explain and show how to easy remove DOM Element, don't forget to equip this function and add to your usable function list.
I also would really like if you still save the @author line, but i can forgive about it if you are really care for the code weight and minify the file.
A few actions to take before you remove is to find element, then traverse back to parent then from parent remove it's child. a complete mess - here it is simplified. Let's we move to the function itself and see how does it work.
/**
 * Remove DOM Element easier
 *
 * @author Valentin Ruskevych
 * @since 30 Dec 2012
 * 
 * @example
 *  document.getElementById('a').remove();
 */
HTMLElement.prototype.remove=function(){
 if (this.parentNode)
  this.parentNode.removeChild(this);
};

Let we break the function line by line to purely understand what is going on here.
Line: 1-9: Comments
Line: 10 : Add a new method "remove" to HTMLElement's prototype.
HTMLElement is a object that most page's elements inherits. If you know DOM Model, you probably know it.
Line: 11 : Ensure that the element we want to remove is having parent element by this.parentNode.
this - where comes from? this is belongs to context, and points to element that we called remove on.
example - document.getElementById('submit_button').remove(); - this points on element #submit_button
Line: 12 : finding parent of the element remove() called on, then remove it's child and pass "this" to the removeChild, so that making possible to remove parents child that is element we called remove on. a bit tricky, but, it is javascript :))

Hope i helped you to simplify/solve another problem :)

Sincerely,
VR

Native JavaScript Trim String Function (best performance)

Hi, All.

As we may already notice, sometimes we meet functionality requirements on page, app or extension that is quiet short and simple. There is no taste to load JavaScript Libraries such as jQuery, Prototype, ExtJS or any other. But using native JS made difficult for developers who only experienced with libraries, nowadays is a new trend.
Developer may tell you that he knows javascript, but reality proves that he only knows how to work with jquery and that is the end of his javascript knowledge.
My opinion, if coder tells you that he knows javascript - he must know it's internals.

Native javascript function TRIM to trim strings:

The trim function i'v coded is based on Steven Leviathan's researches and benchmarks of trimming methods.
Under these circumstances, i am not really developed it, but wrapped into a default String object's prototype to allow simpler use of string trimming function.
Take a look at the function, after the function is an example.
/**
 * Trim string method (regex way), based on Steven Levithan researches.
 *      Fastest triming on short strings, different aproach must be used for documents triming.
 * @author Rusevych Valentin
 * @since 16 Dec 2012
 * @return string trimmed.
 */
if (typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function () {
        return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); // fastest method (~8.5ms per 1000 iterations)
    }
}

/**
 * Usage Example
 **/
var s = '  TestString ';
s.trim();
console.log(s);
// output "TestString"


Take it into your file of "usable" functionality.
Sincerely,
VR

Thursday, March 7, 2013

JavaScript - Detect Quirks Mode state in visitor's browser

Hi, All.

Q: Quirks Mode breaks my front-end. Is it possible to detect Quirks Mode state on visitor? A: Yes, Possible. I will show it off right now.

Now much developers knows about javascript properties, only the discovers or the ones with reach experience.
JavaScripts stores inside it's object, all about page(document).
Document has a lot of interesting information, one of these we will take a look at called "compatMode".
// My Detecting method.
var quirks = false;
(function(){
   if(document.compatMode == 'BackCompat'){
      quirks = true;
   }
}())
Why this way? Only quirks mode making troubles. compatMode will have BackCompat value whenever Quirks Mode is on in browser. This making possible to detect any browser with Quirks Mode and perform your DOM/Data manipulations to satisfy the visitor experience. Have fun. Good Luck!

Wednesday, November 7, 2012

PHP Accessing array performance test / benchmark

Hi, All
Today we are going to benchmark array access, the key stored in variable, double quoted and single. Let we go, as usual, we go short and simple! As usual we run 1 million times.

Test Stand:
Hardware:
Intel i7 860 @ 2.8Ghz
Asus P7H55-M PRO
8GB DDR @ 1600Mhz Timings 8-8-8-24
SSD 80GB Intel SA2M080

Software
Windows 7 x64
Apache 2.2.17 (x86)
PHP 5.3.5

Let's begin.

Our test script looks such simple as:
set_time_limit(0);
$time_start = microtime(true);

$arr = array('name'=>'vasya', 'last_name'=>'patrik');
$tmp = NULL;
$i = 0;
while($i < 1000000){
    $tmp = NULL;
    $tmp = $arr["name"]; // different access method
    ++$i;
}
echo number_format(microtime(true)-$time_start, 6, '.', '').' seconds';

First we will run with double quotes. We will use $tmp = $arr["name"].
The results will be quiet interesting, and, as usual we calculate avg time for 10 runs.
First Case: $tmp = $arr["name"]
Result: 0.1790sec.

Second Case: $tmp = $arr['name']
Result: 0.1763sec.

Third Case: $tmp = $arr[$key]
Result: 0.1832sec.

Fourth Case: $tmp = $arr[0](after array refined to use int keys)
Result: 0.1659sec.

PHP Accessing array alternatives benchmark / performance test conclusion:
By the test results you can see that accessing array almost doesn't make sens from performance point of view, as we can see for 1 million assignments of $arr[key] to $tmp the coded runes very quick, 0.16-0.18s. Although makes sens, the fastest way of accessing is by integer key, as not surprisingly accessing array with a key stored in variable the slowest way. Just remember to use int keys whenever is possible, as this way will speed up the execution time of the code.

Sincerely,
Ruskevych Valentin

PHP echo vs print vs printf Performance test / Benchmark / Alternatives

Hi, All
Today we going to test the performance of php's functions: echo versus print versus printf. The test stand as usual, my workstation:)
The test will run 1 million of outputs.

Test Stand:
Hardware:
Intel i7 860 @ 2.8Ghz
Asus P7H55-M PRO
8GB DDR @ 1600Mhz Timings 8-8-8-24
SSD 80GB Intel SA2M080

Software
Windows 7 x64
Apache 2.2.17 (x86)
PHP 5.3.5

Let's begin.

Our test script looks such simple as:
set_time_limit(0);
$time_start = microtime(true);

$i=0;
while($i < 1000000){
    // initial command, whether echo, print of print_r
    ++$i;
}

echo number_format(microtime(true)-$time_start, 6, '.', ''),' seconds \n';

PHP Echo vs Print vs Printf Benchmark results:

* Note: Remember, tests timings are calculated as average based on 10 runs.
Output of string '1' single quoted and double quoted:
echo : Single quotes: 0.111sec. (Double quotes: 0.112sec. )
print : Single quotes: 0.120sec. (Double quotes: 0.120sec. )
printf : Single quotes: 0.468sec. (Double quotes: 0.468sec. )
In the case of sting w/o concatenation, variables, etc. the echo is fastest, while printf is slowest. Also as we can notice the double quotes makes a little difference in execution times. Lets proceed to a bit more complicated benchmarks.

This time we will output 1 character stored in variable for 1 million times, let's see whether we will have the difference.
echo : 0.117sec.
print : 0.128sec.
printf : 0.400sec.
The execution time are growing up, as expected, but printf shown increased performance towards the competitors. Anyways print_r stays slowest option of three.

Case: 'string'.$static_var.'string'.
*Note: static var i assume is 'z', not $i that changes every loop as in next test case.
echo : Single quoted: 0.282sec (Double quoted: 0.261sec )
print : Single quoted: 0.298sec (Double quoted: 0.274sec )
printf : Single quoted: 0.605sec (Double quoted: 0.547sec )
Seems very interesting:) No matter which scenario, the echo is fastest yet.

Next test case will perform string concatenation of three string in a way 'string'.var.'string' (using dots), the var is dynamic variable $i.
In case of printf used %s.
echo : single quoted: 0.481sec. (Double quoted: 0.483sec)
print : single quoted: 0.492sec. (Double quoted: 0.492sec)
printf : single quoted: 0.879sec (Double quoted: 0.879sec)
Conclusion: The echo is fastest yet, while printf is slowest. let's proceed testing other methods.

Next test case is output with commas. ',' rather than concatenating.
Static variable, assumes not changes every loop. Always the same. echo : Single quoted: 0.216sec (Double quoted: 0.243sec)
print : DOESN'T SUPPORT
printf : Single quoted: 0.534sec (Double quoted: 0.572sec)

PHP echo vs. print vs. printf performance/benchmark conclusions:
The conclusion is anyhow the echo is always faster, so preferred way to output data, also you may notice that using single quotes makes the execution a little, but faster. So take it to your coding standard and go with echo and single quotes.

Sincerely,
Valentin Ruskevych

Sunday, November 4, 2012

PHP Switch vs In_Array vs IsSet, Performance test / Alternatives / Benchmark

Hi, All :)
Today I just made a benchmark of PHP's Alternatives of looking up in array with ~30 keys and is around 60 keys. Not that big, but, that is the one i was needed to test for the work ;-)

Test Stand:
Hardware:
Intel i7 860 @ 2.8Ghz
Asus P7H55-M PRO
8GB DDR @ 1600Mhz Timings 8-8-8-24
SSD 80GB Intel SA2M080

Software
Windows 7 x64
Apache 2.2.17 (x86)
PHP 5.3.5

Let's begin.

The goal: Find language and locale by country in predefined values.
Starting point: The switch is used there by one of previous developers.

Test case php's Switch:
set_time_limit(0);
$time_start = microtime(true);
$country='ve';


$iterations = 1000000;
$i=0;
while($i<$iterations){
    $property ='';
    $lang='';
    $locale='';
    switch ($country) {
            case 'ar': $property .= 'ar';  $lang = 'es';  $locale = 'ar';  break; 
            case 'au': $property .= 'au';  $lang = 'en';  $locale = 'au';  break; 
            case 'br': $property .= 'br';  $lang = 'pt-BR'; $locale = 'br';  break; 
            case 'ca': $property .= 'ca';  $lang = 'en';  $locale = 'ca';  break; 
            case 'co': $property .= 'co';  $lang = 'es';  $locale = 'co';  break; 
            case 'fr': $property .= 'fr';  $lang = 'fr';  $locale = 'fr';  break; 
            case 'de': $property .= 'de';  $lang = 'de';  $locale = 'de';  break; 
            case 'hu': $property .= 'hu';  $lang = 'hu';  $locale = 'hu';  break; 
            case 'il': $property .= 'il';  $lang = 'he';  $locale = 'il';  break; 
            case 'it': $property .= 'it';  $lang = 'it';  $locale = 'it';  break; 
            case 'mx': $property .= 'mx';  $lang = 'es';  $locale = 'mx';  break; 
            case 'nl': $property .= 'nl';  $lang = 'nl';  $locale = 'nl';  break; 
            case 'no': $property .= 'no';  $lang = 'no';  $locale = 'no';  break; 
            case 'pt': $property .= 'pt';  $lang = 'pt-PT'; $locale = 'pt';  break; 
            case 'sa': $property .= 'sa';  $lang = 'ar';  $locale = 'sa';  break; 
            case 'za': $property .= 'za';  $lang = null;  $locale = 'za';  break; 
            case 'es': $property .= 'es';  $lang = 'es';  $locale = 'es';  break; 
            case 'se': $property .= 'se';  $lang = 'sv';  $locale = 'se';  break; 
            case 'ch': $property .= 'ch';  $lang = null;  $locale = 'ch';  break; 
            case 'th': $property .= 'th';  $lang = 'th';  $locale = 'th';  break; 
            case 'tr': $property .= 'tr';  $lang = 'tr';  $locale = 'tr';  break; 
            case 'ae': $property .= 'ae';  $lang = 'ar';  $locale = 'ae';  break; 
            case 'gb':
            case 'uk': $property .= 'uk';     $locale = 'uk';  break; 
            case 'us': $property .= 'us';        break; 
            case 've': $property .= 've';  $lang = 'es';  $locale = 've';  break; 
            default: $property .= 'row';     $locale = $country; break; 
    }
    ++$i;
}
$time_end = microtime(true);
echo number_format($time_end-$time_start, 6, '.', '')." seconds - switch 26 options\n";

Test case for php's In_array:
set_time_limit(0);
$time_start = microtime(true);
$country='ve';

$arr = array(
    'ar'=>array('property'=>'ar','lang'=>'es','locale'=>'ar')
    ,'au'=>array('property'=>'au','lang'=>'en','locale'=>'au')
    ,'br'=>array('property'=>'br','lang'=>'pt-BR','locale'=>'br')
    ,'ca'=>array('property'=>'ca','lang'=>'en','locale'=>'ca')
    ,'co'=>array('property'=>'co','lang'=>'es','locale'=>'co')
    ,'fr'=>array('property'=>'fr','lang'=>'fr','locale'=>'fr')
    ,'de'=>array('property'=>'de','lang'=>'de','locale'=>'de')
    ,'hu'=>array('property'=>'hu','lang'=>'hu','locale'=>'hu')
    ,'il'=>array('property'=>'il','lang'=>'he','locale'=>'il')
    ,'it'=>array('property'=>'it','lang'=>'it','locale'=>'it')
    ,'mx'=>array('property'=>'mx','lang'=>'es','locale'=>'mx')
    ,'nl'=>array('property'=>'nl','lang'=>'nl','locale'=>'nl')
    ,'no'=>array('property'=>'no','lang'=>'no','locale'=>'no')
    ,'pt'=>array('property'=>'pt','lang'=>'pt-PT','locale'=>'pt')
    ,'sa'=>array('property'=>'sa','lang'=>'ar','locale'=>'sa')
    ,'za'=>array('property'=>'za','lang'=>NULL,'locale'=>'za')
    ,'es'=>array('property'=>'es','lang'=>'es','locale'=>'es')
    ,'se'=>array('property'=>'se','lang'=>'sv','locale'=>'se')
    ,'ch'=>array('property'=>'ch','lang'=>NULL,'locale'=>'ch')
    ,'th'=>array('property'=>'th','lang'=>'th','locale'=>'th')
    ,'tr'=>array('property'=>'tr','lang'=>'tr','locale'=>'tr')
    ,'ae'=>array('property'=>'ae','lang'=>'ar','locale'=>'ae')
    ,'gb'=>array('property'=>'gb','lang'=>'en','locale'=>'uk')
    ,'uk'=>array('property'=>'uk','lang'=>'en','locale'=>'uk')
    ,'us'=>array('property'=>'us','lang'=>'en','locale'=>'us')
    ,'ve'=>array('property'=>'ve','lang'=>'es','locale'=>'ve')
);

$iterations = 1000000;
$i=0;
while($i<$iterations){
    $property ='';
    $lang='';
    $locale='';
    if(in_array($country, $arr) !== FALSE){
        $property = $arr[$country]['property'];
        $lang = $arr[$country]['lang'];
        $locale = $arr[$country]['locale'];
    }else{
        $property = 'row';
        $lang = 'en';
        $locale = $country;
    }
    ++$i;
}
$time_end = microtime(true);
echo number_format($time_end-$time_start, 6, '.', '')." seconds - in_array 26 options \n";

Test case for PHP's IsSet:
set_time_limit(0);
$time_start = microtime(true);
$country='ve';

$arr = array(
    'ar'=>array('property'=>'ar','lang'=>'es','locale'=>'ar')
    ,'au'=>array('property'=>'au','lang'=>'en','locale'=>'au')
    ,'br'=>array('property'=>'br','lang'=>'pt-BR','locale'=>'br')
    ,'ca'=>array('property'=>'ca','lang'=>'en','locale'=>'ca')
    ,'co'=>array('property'=>'co','lang'=>'es','locale'=>'co')
    ,'fr'=>array('property'=>'fr','lang'=>'fr','locale'=>'fr')
    ,'de'=>array('property'=>'de','lang'=>'de','locale'=>'de')
    ,'hu'=>array('property'=>'hu','lang'=>'hu','locale'=>'hu')
    ,'il'=>array('property'=>'il','lang'=>'he','locale'=>'il')
    ,'it'=>array('property'=>'it','lang'=>'it','locale'=>'it')
    ,'mx'=>array('property'=>'mx','lang'=>'es','locale'=>'mx')
    ,'nl'=>array('property'=>'nl','lang'=>'nl','locale'=>'nl')
    ,'no'=>array('property'=>'no','lang'=>'no','locale'=>'no')
    ,'pt'=>array('property'=>'pt','lang'=>'pt-PT','locale'=>'pt')
    ,'sa'=>array('property'=>'sa','lang'=>'ar','locale'=>'sa')
    ,'za'=>array('property'=>'za','lang'=>NULL,'locale'=>'za')
    ,'es'=>array('property'=>'es','lang'=>'es','locale'=>'es')
    ,'se'=>array('property'=>'se','lang'=>'sv','locale'=>'se')
    ,'ch'=>array('property'=>'ch','lang'=>NULL,'locale'=>'ch')
    ,'th'=>array('property'=>'th','lang'=>'th','locale'=>'th')
    ,'tr'=>array('property'=>'tr','lang'=>'tr','locale'=>'tr')
    ,'ae'=>array('property'=>'ae','lang'=>'ar','locale'=>'ae')
    ,'gb'=>array('property'=>'gb','lang'=>'en','locale'=>'uk')
    ,'uk'=>array('property'=>'uk','lang'=>'en','locale'=>'uk')
    ,'us'=>array('property'=>'us','lang'=>'en','locale'=>'us')
    ,'ve'=>array('property'=>'ve','lang'=>'es','locale'=>'ve')
);

$iterations = 1000000;
$i=0;
while($i<$iterations){
    $property ='';
    $lang='';
    $locale='';
    if(isset($arr[$country])){
        $property = $arr[$country]['property'];
        $lang = $arr[$country]['lang'];
        $locale = $arr[$country]['locale'];
    }else{
        $property = 'row';
        $lang = 'en';
        $locale = $country;
    }
    ++$i;
}
$time_end = microtime(true);
echo number_format($time_end-$time_start, 6, '.', '')." seconds - isset 26 options array \n";


To tell you the truth i was waited for In_Array to be slower than switch :), but let's take a look at the benchmark results.
PHP's Switch vs In_Array vs IsSet Benchmark Results:
*Notes:
The runs are (loop) 1 Million times
The time is counted as average for 10 runs * 1 million loops.
The time surrounded by closures is the time for the same run, but with *2 amount of keys in arrays.

The times
The key is set to last key in array
----------------------
For the Switch took: 2.094s. (3.726s)
For the In_Array took: 1.617s. (2.414s)
For the IsSet took: 0.848s. (0.899s.)
----------------------

The match is set to first key in array case:
----------------------
For the Switch: 0.569s. (0.629s) (great speed increase).
For the In_Array: 1.617s. (2.425s) (the execution still unchanged).
For the IsSet: 0.860s. (0.897s) (same with isset).
----------------------

No Match Case:
----------------------
For the Switch: 2.032s.(3.509s) (faster than last match. LOL)
For the In_Array: 1.657s. (2.372s) (Time almost not changing here)
For the IsSet: 0.540s. (0.507s) (Great increase!)
----------------------

Conclusion:
The best way to find whether the key is set in array is to use IsSet php's function.
As we see by the tests, Switch can bring performance only in case the key one of the first, the in_array in any case scanning array to the end and isset is as fast as lightning and becomes even faster when no match is found !
Also please note, as the amount of cases and array keys will become bigger, the switch and in_array will become slower, while isset doesn't have such issue.

The code isset($arr[$country]) brought to us best results.
Have fun playing around.

Sincerely,
Ruskevych Valentin

Tuesday, October 2, 2012

JQuery get field's default value (defaultValue) HOW-TO

Hi, Readers :)
If you got here, probably you already tried to reach field's defaultValue with jQuery and had no success.
Fine, i will show how to retrieve field's default value.
It is pretty easy to reach it.
I am showing real world example, the field that has "Search phrase..." and on focus have to be cleared, on blur have to return "search phrase..." if field is still blank.
 $('#widget_form_search #search_fld').live('focus', function(){
  if($(this)[0].defaultValue == $(this).val()){
   $(this).val('');
  }
 });
 $('#widget_form_search #search_fld').live('blur', function(){
  if('' == $(this).val()){
   $(this).val($(this)[0].defaultValue);
  }
 });

As you may see, accessing defaultValue is pretty easy
var defVal = $('#field_selector')[0].defaultValue;
Have fun:-)
Sincerely,
Ruskevych Valentin

Thursday, July 26, 2012

JavaScript HOW TO Verify Function exists in class

Hi, Readers.
Today i will explain how to verify in javascript whether the function/method and property/variable exists in class/object. Continue reading and i will teach how to...

The example(1) class we will work on is:
// class constructor
function Car(color){
   this.color = color;
   this.paint = function(color){
      this.color=color;
   };
}

The Example(2)
var Car = function(color){
   this.color = color;
};

Car.prototype.paint = function(color){
   this.color=color;
};

How to verify if property/variable or function/method exists in class/object in javascript?
for example(1), when function is defined as anonymous, we can use:
var c = new Car('red');
console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
// If you don't receive the 'Doesnt exists' in console, then the method/variable 
// is found, otherwise you will receive "Assertion failed: Doesnt exists"


On example(2) instance we should use a bit different construction.
Lookup in base object (not instance) On example(2) instance we should use a bit different construction.
Lookup in instantiated object
// lets see
c = new Car('red'); // instance
c.paint('blue');
alert(c.color); // alerts 'blue'

console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
console.assert(true === Car.prototype.hasOwnProperty('paint'));


Lookup for method/variable inside instantiated object in javascript
// lets see
c = new Car('red'); // instance
c.paint('blue');
alert(c.color); // alerts 'blue'

//previous try
console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
// new try
console.assert(true === c.__proto__.hasOwnProperty('paint'), 'Doesnt exists');

Why using __proto__ and what is exactly __proto__?
__proto__ is a "secret" reference to creator.

You can notice, that behavior of the method "paint" is as usual class method, it is painted our car to blue, but couldn't be found in class. Interesting?
This happens because it is defined with prototype and it is method of class' prototype that is also object.:)
The structure of the object Car
object Car
   property color
   object prototype/__proto__
      method paint

That is the prototype's behavior.
We will take a deeper look on prototypes and assertion in next articles.

Sincerely, Ruskevych Valentin

Wednesday, July 25, 2012

JavaScript Element's Style Properties Doesn't Received Bug (Solved!)

There is a problem when the JavaScript does not return the style's properties.
The problem that even when retrieving element by id or class name won't give you it's style properties.
I investigated this situation in deep roots.
// some times this code can be improper.
var x = getElementById('someID');
alert(x.style.backgroundColor);

Previous example may work under many circumstances, but sometimes fails to fulfill required operations.
If we dump the object into the console with
var x = getElementById('someID');
console.log(x.style);
// or even
console.log(x);
When problem appears, you probably won't find anything in the style. The object will show the properties, but the values are blank or null,underfined... anything but not the values we require :)
This is funny bug :)
Another circumstance under which this code will work is if you have typed the style in-line. But we are ninjas, we shouldn't use inline styles.

Javascript element doesn't return styles -> Problem resolution!
It is not a secret that JavaScript contains different ways of retrieving styles, but...
Some of theme working and some of them is not... some works in IE, some doesn't...
I am using next method:
//Usage example:
var _el = document.getElementById('someID');
var _elBGColor = getTheStyle(_el, 'backgroundColor');

function getTheStyle(_elm,_prop){
   var x ='';
   if(window.getComputedStyle){
      x=getComputedStyle(_elm);
   }else{
      x=_elm.currentStyle;
   }
   return x[_prop];
}

This function will satisfy your need.:)
But...
May be slightly improved in case you need all the styles of the element.
Let's we take a look at universal function:
function getTheStyle(_elm){
   if(window.getComputedStyle){
      return getComputedStyle(_elm);
   }else{
      return _elm.currentStyle;
   }
}

This fix is perfectly working retrieving any of previously "blank" style properties.

Sincerely,
Ruskevych Valentin


Other JavaScript Tutorials and How To

How To Verify Function exists in a JavaScript Class
JavaScript OOP Basics
TableSorter Installation a Detailed Tutorial.

JavaScript OOP Basics (Tutorial)

Today i want to explain the JavaScript OOP basics (The basics of Object Oriented JavaScript).

JavaScript OOP, but looks functional language, but in real environment and point of view, it is pure OOP language.
Why JavaScript is an OOP Language?
Let's take a look at usual function
function testFunc(){
   alert('The Test');
}

Seems like normal function isn't it?
Nope, it is method.
In JavaScript all functions and variables is wired up to context, in above example assume we use it without any class context, but function still method of object.
Which object is the context if we defined the function outside any context?
We defined the function in scope of "window", the basic JavaScript object in page.
So the function is accessible also through:
var it_is_variable = 'Test It';

function testFunc(){
   alert('The Test');
}

// call function
window.testFunc();
// alerts "The Test"

// same with variables
alert(window.it_is_variable);
// alerts "Test It"

Function's variables also accessible in an OOP manner, such as:
function jstest(){
   test_var = 'test';
   alert(self.test_var);
}


How to create a JavaScript Object?
var obj = {};

Here we created a blank javascript object by using curly braces.

Adding functionality to an object in JavaScript
Lets create a few properties and methods.
var obj = {}; // the previous code

obj.propertyA = 'test_property'; // adding property

// adding method
obj.getProperty = function(){
   alert(this.propertyA);
}

obj.getProperty(); // alerts the propertyA of class obj


Let's create real environment object.
var car = {
   // properties as object
   dimentions : {
      len : 462,
      width : 190,
      height : 110,
      weight : 1250
   },
   // properties
   tank : 40,
   color : 'red',
   maxSpeed : 220,
   horsePowers : 125,
   _handBrake : true,
   _power : false,
   // Methods
   init : function(){
       if(!this._power)
           this.startEngine();
       
       return this._power;
   },
   startEngine : function(){
       if(true === this._power)
           return true;
       if(true === this._handBrake)
           this.handBreakSwitch();
       this.checkFuel();
       this.powerSwitch();
   },
   refill : function(){
       this.tank = 40;
   },
   handBreakSwitch : function(){
       this._handBreak = (this._handBreak === false ? true : false);
   },
   checkFuel : function(){
       if(this.tank < 5)
           this.refill();
       return true;
   },
   checkEngine : function(){
      if(true === this._power)
         return true;
      else
         this.startEngine();
   },
   powerSwitch : function(){
       this._power = (this._power === false ? true : false);
   },
   paint : function(color){
       this.color = color;
   },
   drive : function(distance,velocity){
       this.checkEngine();
       return (parseInt(distance) / parseInt( this.calcSpeed(velocity) ) ).toFixed(3) + 'sec';
   },
   calcSpeed : function(speed){
       return (speed*1000)/(60*60);
   }
};

// Lets initialize the car
car.init();

// Unfortunately the dimentions of the car and horsepowers are not used in current
// example as far as starting speed (velocity), i won't spend much time on example ;-)

//using car.drive(1230,90) in alert
alert('Time spent to pass distance is ' + car.drive(1230,90));
// Alerts "Time spent to pass distance is 49.200s" 
// so we traveled 1230 meters with speed 90km/h in 49.2sec.

car.paint('blue');
alert('Car painted with ' + car.color + ' color.');


Overriding in effect
Typical overriding is as simple as
var car = {
   init : function(){
      alert('test');
   }
};
// alerts 'test'
car.init();

car.init = function(){
   alert('override in effect');
};

// Alerts "Override in effect"
car.init();​


Javascript class constructor
Class constructor in javascript defines as a function it will also enable you to access to prototype, but... prototypes,inheritance and closures in next articles.
function car(){
   this.init = function(){
      alert('test');
   }
}

// initializes class with constructor
var car = new car;
// alerts 'test'
car.init();


Have fun playing JavaScript's funny oop:)
Sincerely,
Ruskevych Valentin


Other JavaScript Tutorials and How To

How To Verify Function exists in a JavaScript Class
How to get styles of the elements properly in Javascript (Solving the bugs)
TableSorter Installation a Detailed Tutorial.