#web { border:none }

jQuery,Ext custom css selectors: avoid the framework war

2010-09-28T11:48:00.017+09:00

In the last entry, we saw how javascript frameworks compare when using css3 standard selector queries. Now, we will see how those frameworks compare when using custom css selectors,ie,not W3 standard selectors. jQuery is well known for implementing very nice shortcuts like ":input", ":radio" or ":even",":odd". We will see how these shortcuts are handled and see that you should avoid them when possible and stay away from the framework war...

Test using jsslickspeed

jsslickspeed is a fork of slickspeed containing both standard selectors and custom selectors tests + document.querySelectorAll when available.

Read the result for the standard selectors

Same frameworks, same browsers tested.
We will look into the custom css selectors test in this entry. You can run the test yourself.

CSS3 custom selectors result

It is not necessary to go through each browser results to say that frameworks custom implementation slows down from little to greatly the speed of the test.

You can find all the result charts at the end of this article but let's sum up...

Custom selectors not handled by libraries does not throw any error

Obviously, not all libraries implement the same selectors...
most of them implement the attribute negation look up "!=", the pseudo-class ":contains" and some of them ":even" and ":odd".
This basically means that we enter in a non-standard world where the selectors you were using with one framework may not work, even worse, send back results instead of throwing an error.
Well, if you are a jQuery guru, an ExtJS guru, using each framework custom selectors within one project is not going to be harmful but you may need to switch of javascript framework for your new job and you will have to learn anew what you can use and what you can not use. If you force yourself to use standard selectors, this problem will not occur.

Native standard selectors are most of the time faster than the custom ones

some concrete examples:

jQuery ":parent" tooks 8ms against 1ms for ":not(:empty)" in Firefox 3.6...

jQuery "div > *:input" took 115ms against 4ms for its counter part (i have to say that the native one is very long: div > input,div > select,div > textarea,div > button) in IE6

jQuery ":submit" tooks 20 ms against 1ms for "[type=submit]" in Firefox even though the doc seems to specify cross-browser issue being handled...

":odd" and ":even" takes about 13ms against 3ms for ":nth-child(even|odd)" for jQuery while Ext JS which implements these shortcuts too took a constant time. READ BELOW FOR A POSSIBLE REASON

Custom shortcuts are not implemented the same way...

It seems like we are in the "browser war" again where each framework wants to implement its extra feature to make the difference...because it sounds better this way...
This get tricky though.
jQuery implements :even and :odd has a shortcut for nth-child(even) and nth-child(odd) with the difference that it is a 0 based indexed whereas the W3 standard states a 1 indexed based calculation.
But well, it could be ok if...

Shortcuts may not work properly

jQuery returned exactly the same result for both :even and :odd...

Looking at the result you will see the library returns the exact same number for those two selectors...so : div > p:even == div > p:odd. Both of them different from div >p:nth-child(even) and div > p:nth-child(odd)...
Ext also implements the :even and :odd shortcuts but does follow the W3 standard declaration and use an index starting from 1. It does send back two different results for :even and :odd and these results do match there standard counterparts, nth-child(odd|even).

Custom selectors... are not interoperable

Yes, like the old time,with browsers implementing their own javascript APIs because it seemed great at the time. This left us with an horrifying war-land where no browser could be trusted...
ok, I am a little bit dramatic here but come to think of it...
If browsers decide to implement :even,:odd or :input but that they use for the first ones, the standard definition starting from 1? Libraries will have to resort to their own implementation in order to keep older applications running,eventually, slowing down the entire process. If :input is implemented but only send back input tag fields? The same here...

Being a good citizen and avoid the framework war

All these shortcuts/customs selectors, not available by default are very useful and tempting but...
Obviously when you use a shortcut or a custom selector, libraries will have to use their own engine instead of using the native selector when available.

What does it mean?

It will be slower most of the time. You loose the speed of the native selector.
You loose the checking done by the native selector who has a real low level lexer(most of the libraries will silently return something instead of throwing an error when you write an unsupported selector)
Uncoherent implementation between frameworks is at best confusing at worst could lead to problem if the browser implements themselves these shortcuts. (let's say :even and :odd is implemented and are equal to nth-child(odd|even)... some libraries will have to resort to their own engine for compatibility issues and you will loose all the benefit of the native selector implementation).

As a result and for better interoperability you should use as much as possible the standard selectors.

If you can use a standard selector in lieu of a custom selector, please do so...It will be,well, standard, interoperable and faster for new browser and sometimes even older ones,for example:

:parent use :not(:empty)

:even use nth-child(even)

:odd use nth-child(odd)

:input use input,select,textarea,button
For this one,if it is too long,most of the time your mark up should allow you to target them anyway like #formContainer label *. Obviously it does link your javascript to the underlying html layout which is not ideal...

Below are the results for the custom selectors:

jsslickspeed: css3 selectors testing frameworks (jquery,dojo,mootools,prototype,yui,ext...) vs browser

2010-09-27T23:19:00.010+09:00

How to create your own basic css selector in javascript.This was the plan for the next entry.Having a grasp of how this can be implemented could help many to improve the css selectors they use with their favorite framework. But before this article,it would be nice to know where actual javascript frameworks stands against one an other (including custom selectors created by some frameworks )and against the native implementation,document.querySelectorAll. Some results will be surprising...

Libraries tested

First things first, a list of the library tested:

Prototype 1.6.1.0
Mootools 1.2.4
Ext js 3.1.0
Dojo 1.5
jQuery 1.4.2
YUI 3.2.0
RightJS 2.0
document.querySelectorAll (when available in the browser).

I've included RightJS 2.0 in this tests as it was claiming to be the fastest (well, it's only a fraction of the framework that is tested) but unfortunately the css selectors supported are few...
We will see an in depth view of the results.

The test runner : jsslickspeed

jsslickspeed is a fork of slickspeed to use only javascript and add document.querySelectorAll in the list when available. Only tested with the following browsers so far:

IE6 (emulated with IETester)
IE7 (IE8 emulatation mode)
IE8
FF3.6
Safari 5
Chrome 6

jsslickspeed allows to load scripts from different servers too as I wanted to use google cdn when the library was available .

Tests contents

2 tests:

If the standard selectors test does not need further explanation, the custom selectors test may need some explanation.
The frameworks offer some shortcuts, ie, :even or :radio or :submit, :contains, [attr!=foo]. We will see that these custom selectors are not implemented in the same way, may slow down the process and could even be buggy.

CSS3 standard selectors

The test uses mostly the same selectors as the original slickspeed, I've just added some few selectors but nothing tricky (like weird construct to see how the library handles them).

Let's start with IE series: IE6,IE,7 and IE8.

IE8 does have a document.querySelectorAll but unfortunately does not support css3 selectors.
The only one to fall in this pitfall is... RightJS. Having document.querySelectorAll does not mean that the browser supports css3 selectors.
This basically means that you can not write safely the same selectors across browser... Hope this bug will be fixed.

The IE implementation of the selector is rather fast but does not support 11 selectors (and therefore,Right JS only using the native implementation without adding extra parser functionality when required has the same errors. The speed is not representative for this library here).
Dojo is the fasted followed by jQuery. YUI is extremely slow followed by Prototype, Mootools and Ext JS.

Moving on to IE7...
This version of IE and below do not implement document.querySelectorAll.All the libraries use therefore their own css selector parser and implementation:

We can see that RightJS goes out of the roof but does not implement properly 15 selectors (attribute selectors,ie [class=example],are all wrong). YUI and Prototype are as slow as in IE8 but we can see that Ext JS and Mootools are faster than jQuery while Dojo is still the fastest.

Let's move on to IE6...

Well, no real surprises, this is slow...
Ext JS is the first of all and Dojo, jQuery,Mootools follow. YUI,Prototype and RightJS(buggy anyway) are outsiders.
It is to note that Prototype has some selectors that make its result jumps... "div ~ p" for example takes about 450ms where other frameworks are between 40~100ms. All the attribute selectors are around 200ms and p:nth-child(n) is at 300ms against a 20~40ms for the others.

As a conclusion on the IE series:

IE8 does offer a native selector but unfortunately, by not implementing the css3 selectors can not be used reliably unless you intend to use only css2 selectors in your projects.
You should avoid RightJS if you intend to develop with css3 selectors in mind.
As for the speed concern, it would be too easy to reduce a library to its sole implementation of css selectors and if the speed is an indicator it can not be used a the primary reason to elude a framework(unless you intend to use heavily complex selectors beyond class selectors, id selectors and descendant selectors).

Firefox

This gets better!
Prototype gets back in the track while misteriously Mootools and Ext are the slowest. But even the slowest is at around 230ms when compared to the 1400ms in IE8, this is really nothing!

Obviously the native selector of Firefox is the fastest of all and now YUI is the first in the list.
Most of the libraries use the native implementation behind the scene and add some extras that's why the result gets tighter.

Notice that Firefox implementations requires about 40ms to do the tests.

need for speed or Chrome:

Makes no surprise here but Chrome is blazing fast,it takes about 14ms for its native implementation to do the tests which is almost 4 times faster than Firefox. Obviously we are talking about ms here so it's not going to be as noticeable as the 2500ms of IE6...

YUI is again the fastest of all, followed by jQuery,RightJS and Dojo.
RightJS using the native selector does get the test right this time.
Prototype,Mootools,Ext are not so bad but could gain in speed.

Safari 5 is really fast natively and we basically have the same result as Chrome 6, no surprises here.

As a conclusion for the standard selectors

Amongst all the libraries, Dojo and jQuery stands out as they offer the most reliable engine and speed. Prototype,YUI were very deceptive in IE while Mootools and Ext JS even if a little bit slow does offer some good results in every browsers.

»Continue with custom selectors

Javascript: fluent API via chaining

2010-09-24T19:12:00.002+09:00

Javascript in the browser has a set of extension to traverse and manipulate the Document Object Model (DOM) that allows to create dynamic pages very easily. But... Well...
Nothing's new here.
One function amongst them has always bugged me: elm.insertBefore(). For some reasons (who said my age?), I can not remember which parameters come first. We will use this example to see how we can create a fluent API using Javascript chaining functionality and write code as follow:
insert(elm).before(elm2) and insert(elm).after(elm2)!

insertBefore method

First things first, let's see what is the usage of this method.
Straight from Mozilla dev center:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

The insertedElement returned is equal to newElement.
insertBefore requires the parent of the referenceElement to do its job. Therefore, parentElement === referenceElement.parentNode. Let's add a h1 before the p tag in the example below:

<div>
 <p id="myPara">I am THE reference.</p>
</div>
<script type="text/javascript">

var para = document.getElementById("myPara");//referenceElement - p

var parentElement    = referenceElement.parentNode;     //parentElement - div

var title            = document.createNode('h1');       //newElement - h1
    title.innerHTML = 'I am a new kid on the block';

parentElement.insertNode(title,para);
</script>

After running this code, you should have the following HTML:

<div>
  <h1>I am a new kid on the block</h1>
  <p id="myPara">I am THE reference.</p>
</div>

As you can see, it is not a very hard concept!
One little helper would be to not have to specify the parentNode ourself. Let's create a wrapper:

var DOM= {
  insertBefore: function(newElement,referenceElement) {

      //basic checking of the parameters
      if(!newElement || !referenceElement) return;

      var oparent = referenceElement.parentNode;

      //never know...
      if(!oparent) return;

      //go!
      return oparent.insertBefore(newElement, referenceElement);
  }
};

//usage example
var inserted = DOM.insertBefore(newElement,referenceElement);

insertAfter method

It's going to be even faster!
There is no such method!
But we can easily simulate this behavior by using the nextSibling method and one little thing I did not mention for now... again, straight from Mozilla dev center:

If referenceElement is null, newElement is inserted at the end of the list of child nodes.

So if there is no referenceElement, this is just going to appendChild the element.If we do have a reference, we just need to get the nextSibling and insertBefore it.
Therefore, we could write our own insertAfter:

var DOM= {

  //appended after insertBefore:

  insertAfter: function(newElement,referenceElement) {

      //basic checking of the parameters
      if(!newElement || !referenceElement) return;

      var oparent = referenceElement.parentNode;

      //never know...
      if(!oparent) return;

      var nextElement    = referenceElement.nextSibling;

     //in case, you have some trouble with IE
     //but could not verify this bug so...
     // if(!nextElement) return oparent.appendChild(newElement);
    //  else
      //go!
      return oparent.insertBefore(newElement, nextElement);
  }
};

//usage example
var inserted = DOM.insertAfter(newElement,referenceElement);

Alright, we have now two helper functions DOM.insertBefore and DOM.insertAfter but we did not manage to make them "fluent". We did not even make them chainable...

Fluent way

So,we still have to make this functions easier to use, more "natural".
First, let's see how we can chain functions in javascript:

var DOM = {

    elm : null,//will hold the element to insert

    insert : function(elm) {
        DOM.elm=elm;
        return DOM;
    }
};

As you can see it is not very hard! We just need to return the object itself to allow the chaining of the functions.
Let's implement before and after:

var DOM = {

    elm: null,

    insert: function(elm) {
        DOM.elm=elm;
        return DOM;
    },

    before: function(elm) {
        DOM.elm=DOM.elm.parentNode.insertBefore(elm, DOM.elm);
        return DOM;
    },

    after: function(elm) {
        DOM.elm=DOM.elm.parentNode.insertBefore(elm, DOM.elm.nextSibling);
        return DOM;
    },

    //a little helper to shortcut things...
    $: function(id){
        return document.getElementById(id);
    }
};

//usage
DOM.insert(DOM.$('myelm')).before(DOM.$('anotherelm'));

//we could add a check on the parameter to see if it's a string or an object
//we could then also write it:
DOM.insert('myelm').before('anotherelm');

That's it!
I did not check the parameters to make the code shorter but you can DIY.

Conclusion

Chaining functions in javascript is rather straight forward and can create easier APIs to use and remember by being closer to the natural language (well, English language here). Obviously, this is an example where we use a unique object (Singleton) but we could implement the chaining for multiple instances too:

var DOM= {

    insert: function(elm) {
        this.elm = elm;
        return this;
    },

    before: function(elm) {
        this.elm=this.elm.parentNode.insertBefore(elm, this.elm);
        return this;
    },

    after: function(elm) {
        this.elm=this.elm.parentNode.insertBefore(elm, this.elm.nextSibling);
        return this;
    },

 //a little helper to shortcut things...
    $: function(id){
        return document.getElementById(id);
    }
};
var dom = new DOM.insert(DOM.$('myelm')).before(DOM.$('anotherelm'));

In that case, we use the new keyword to create the instance bound to this and return this.

Perl & Javascript: 7 common features

2010-09-23T17:56:00.007+09:00

Javascript which is used mainly in the browser and now also extends its power on the server side (http://nodejs.org/) shares some features with an other programming language, perl.
perl community is very active and you can always find a module that does exactly what you need for your next project.95% of the time, somebody has already done the hard work for you! perl is a very nice language that shares some programmatic idioms with Javascript.
Both language contains a lot of treasure and a short entry could not list them all (perl is very very extra feature rich!) but we will see some common idioms in this entry!

literal notation

Javascript is well known for the literal notation which has made is way through JSON.
Let's see the javascript way of creating some data:

Javascript way

var myObject = {name:"john",age:24};  //a hash/object

var myArray   = [1,2,3,"hi"]; //an array

var myJSONLike = { //JSON like structure
   title :"my title",
   entry: [
      {
         id:1,
         content:"hi"
      },
      {
        id:2,
        content:"good bye"
      }
  ]
};

Perl way

my $object = {name=>"john",age=>24};  #a hash/object

my $array   = [1,2,3,"hi"]; #an array

my $JSONLike = { #JSON like structure
   title =>"my title",
   entry => [
      {
         id=>1,
         content=>"hi"
      },
      {
        id=>2,
        content=>"good bye"
      }
  ]
};

As you can see, javascript uses ":" to separate key/value pairs in the hash/objects where perl use "=>".
You can notice also that javascript uses the "//" for a single line comment where perl uses "#".
Variables in perl must all use a sigil ("$" sign here,but there is also "@" and "%" and some few others!) to specify the kind of data type you use (an array, a hash, a list, a reference,etc,etc).
An other difference is that perl uses the keyword "my" to declare a variable whereas javascript uses the keyword "var".
In javascript, the scope is only at the function level, which means that "var" will limit the scope of a variable to a function whereas in perl, the scope of a variable is at the block level:

for(var i=0;i<=10;i++){
  doSomething(i);
}
console.log(i);//10 - exist out of the for block

function looping() {
   for(var i=0;i<=10;i++){
      doSomething(i);
   }
}
console.log(i);//error - exist only in the function scope

for(my $i=0;$i<=10;$i++){
  doSomething($i);
}
print $i;#nothing or an error if you are in strict mode

Block level scoping offers better granularity and javascript 1.7 in FF offers the "let" keyword that allows finer tune of the variable scope.
The way you access the data differs too:

 var hash = {name:"john"};
 hash.name;

 my $hash = {name=>"john"};
 $hash->{name};

Javascript uses the "." notation whereas perl use the "->" notation. There are more things that could be explained regarding perl variables but as you can see javascript and perl literal notation is quite similar.

Anonymous functions

Both perl and javascript offers anonymous functions:

javascript way

var testing = function () {};

perl way

my $testing = sub() {};

I guess the obvious difference is that javascript uses the "function" keyword whereas perl uses the "sub" keyword.

Closure

Closure allows you to trap the value of a variable:

javascript way

function evenCounter() {
    var i =0;
    return function() {
         return i+=2;
   }
}
var evens = evenCounter();
evens(); // 2
evens();//  4
evens();//  6

perl way

sub even_counter {
   my $i = 0;
   return sub {
        return $i+=2; 
   }
}
my $evens = even_counter;
$evens->();#2
$evens->();#4
$evens->();#6
#or
&$evens; #8

In javascript the camelCase convention is used but in perl it is the hyphen convention that is most used. Obviously you are free to choose whatever convention you feel more comfortable with.
In perl, functions (subs) return the last statement so the "return" is not mandatory but preferred for readability.
In perl, subs do not need to be called with "()" but this is necessary in javascript to differentiate from a simple variable.

Function introspection

Perl and javascript offers way to get some information about the context things are happening. Here is a little example:

javascript way

function service() {
  return 'service is used by: '+service.caller.name;
}

function consumer() {
   return service();
}
consumer();//service is used by: consumer

perl way

sub service { 
    return 'service is used by: '.(caller(0))[3]; 
} 
sub consumer {
    service();
} 
consumer();//service is used by: main::consumer

Here many things to notice:
In javascript you can get access to a function caller via functionName.caller.name or arguments.callee.caller.name where as in perl you use the caller() function.
In Perl functions can return an array or a string according to the context.
Therefore:

my $package = caller;#return the package name
my ($package,$file,$line)=caller; #return a list of variables.

That's why the code enclose the call to caller(0) with "()" to force a list context.
Then we access the 4th parameter of the list (counting from 0) that contains the function name.
Concatenation of strings in javascript uses the "+" sign but perl uses the "." sign.
Perl returns the name of the function and its package. The default being "main::".
There's no such concept in javascript.

Function arguments

Both perl and javascript allows you to access the arguments via a magic variable.

javascript way

function service() { 
     return arguments.length; 
} 
function consumer() {
    service('hi','there');
} 
consumer();//2

perl way

sub service { 
    return scalar @_; 
} 
sub consumer {
    service('hi','there');
} 
consumer();#2

Javascript uses the arguments keywords which is an array like object containing all the arguments passed to the function whereas perl uses the @_ variable which is also a list of all the arguments passed to the function.
In javascript we can access the number of arguments by using the length property.
In perl, we use the "scalar" keyword which forces a string context where perl returns the number of element in the list.

Javascript 1.7 in FF

Firefox has introduced new constructs that make javascript/perl a little bit more alike.
You must specify the version of javascript:

<script type="application/javascript;version=1.7">
</script>

destructing assignments

Create and assign in the same time. Less temporary variables required, neater code!

javascript way

var a,b;
[a,b] = [1,2];  
 
[a, b] = [b, a];  

console.log(a,b);//2,1

perl way

my ($a,$b) =(1,2);

($a,$b)=($b,$a);

print $a,',',$b;//2,1

In javascript you use the array notation on the left and right side of the assignment whereas in perl you use the list notation "()".

In javascript you can send multiple values by using the array notation, it will be handled differently according to the context, a la perl!

javascript way

function multiValues() {
    return [1,2];
}
var [a,b]= multiValues();//list context
var a = multiValues();//array context

perl way

sub multi_values() {
    return (4,5);
}
my ($a,$b)= multi_values;#4,5
my $c = multi_values;#5 - last element in the list
#or
sub multi_values() {
    return wantarray? (4,5):[4,5];
}
my ($a,$b)= multi_values;#4,5
my $c = multi_values;#array containing 4,5

In perl, if you use a scalar context when returning a list, you will get the last element in the list but we can use the wantarray function that let us know in which context the function is being called.

array comprehensions

Array comprehensions allow you to build a set of value in one line instead of using a loop.
Building an array containing 1 to 100:

javascript way

var numbersTo100 = [i for each (i in range(1, 100))];

perl way

my $numbers_to_100 = [1..100];

perl uses ".." to specify the range whereas javascript uses the range() function.
You can also create more complex data:

javascript way

var evens = [i for each (i in range(0, 21)) if (i % 2 == 0)];

perl way

push @evens,($_%2==0) ? $_ : next  foreach (0..21);

Perl uses the "$_" variable that is set automatically in different occasions,here the use of foreach.

Conclusion

We've seen some constructs that are somehow similar in both javascript and perl. Don't hesitate to post similar patterns in other languages!

Debugging anonymous functions in Javascript.

2010-09-22T16:28:00.000+09:00

Javascript allows you to create function without name. That's why we name them (oxymoron), anonymous functions. Almost used everywhere, this kind of function can become a real nightmare to debug. We will see what is the problem and how to solve it.

Anonymous functions

Let's first see what is an anonymous function by looking at some code:

var myObject = {
    doSomething:function () {
       console.loh("my message");
   }
};

document.body.onclick=function(){
    myObject.doSomething();
}

The code in it self does not do much...
But you can see that we define functions that do not have a name.
They are assigned to a property.

Notice that:

var myFunc = function() {

}
function myFunc() {

}

is different in the timing you will be able to call these functions.
For example:

myFunc();
var myFunc = function() {

}

will fail but not:

myFunc();
function myFunc() {

}

Functions are parsed first and are available, whatever the order you write your code in. (Not true in the console of Firebug though.)
By the way, did you see the typo? console.loh() instead of console.log().

If you run this script, you will get a nice error that you can look in Firebug, Firefox:

onclick()
(?)()

Not helping...
If you have hundreds of line of javascript code, I can tell you that it may take some time to get to the error...

So how can we handle this?

Name your anonymous functions

ok,so what's the deal? name your anonymous functions, oxymoron, here, oxymoron there...

It's easy, give a name to your anonymous functions:

var myObject = {
    doSomething:function $_doSomething() {
       console.loh();
   }
};

document.body.onclick=function $_bodyClick(){
    myObject.doSomething();
}

Prefixing all the anonymous functions with $_ is just a convention
that is going to help in a few seconds.
Traced in Firebug, you get:

$_doSomething()
$_bodyClick()

A little bit nicer than the cryptic first output!

But naming anonymous functions for the sole purpose of debugging is going to add unnecessary bytes right??
Indeed, we should name them for debugging and erase their name for the live version.
But this is too much of hassle and nobody will do it unless...

Javascript Preprocessor at the rescue.

There are many preprocessors out there that allows you to simplify the build process of your javascript files.
One of them,jsmake (which I've also written-sorry), allows you to automatically name all your anonymous functions or do the opposite, remove their names.

In order to remove all the anonymous function names, you will need to prefix them with $_. If you let the preprocessor name them instead of doing it by hand, it will prefix them with $_ so that you can remove them again very easily via the same preprocessor!

A simple example will be:

var testing = function () {
    return true;
}
var myObject = {
    doSomething:function () {
       console.log();
   }
};
document.body.onclick=function(){
    myObject.doSomething();
}
document.body.addEventListener('click',function(e){
    var object= {};
    object.testing = function() {
        return true;
    }
});

Once preprocessed, you get:

var testing = function $_testing1 () {
    return true;
}
var myObject = {
    doSomething : function $_doSomething1 () {
       console.log();
   }
};
document.body.onclick = function $_onclick1 (){
    myObject.doSomething();
}
document.body.addEventListener('click',function $_anon1(e){
    var object= {};
    object.testing = function $_testing2 () {
        return true;
    }
});

You can read more about this here.
Don't hesitate to introduce other preprocessors that do the same thing or offer even more functionality!

jsmake: a simple javascript preprocessor in perl

2010-07-09T19:03:00.007+09:00

In the previous post I listed some javascript preprocessors you could find out there...
But could not find any written in perl...
And could not find a preprocessor that could handle package dependencies...
Therefore,I've taken a day to hack a command line utility to use as a basic preprocessor for javascript.
Only tested on my mac, it's a dirty, huge perl file but it might help some people out there until there's a real project to build a javascript preprocessor in perl.

Functionality

This utility can:

- compress the javascript files with 3 different algorithms:

Javascript::Mini
Javascript::Packer
Google online closure application

- load and merge files in order of dependency:

jsmake follows package rules used by perl or actionscript language.
It transpose the package name into a folder tree. Therefore:

Core.Util.Array

is understood as Core/Util/Array.js.

You can specify the dependeny at the very first line of your javascript file in a comment as follow:

/*!require: Core.Util.String,Core.Util.Queue */

jsmake will load all the dependencies in all the files in the right order.

- parse the javascript source file for some directives.

ifdef, ifndef, end, define are understood:

/*@ifdef DEBUG */
console.log("debug mode");
/*@end */

/*@ifndef DEBUG */
console.log("not in debug mode");
/*@end */

or if you like # better:

/*#ifndef DEBUG */
console.log("not in debug mode");
/*#end */

/*@define VERSION 1.06 */

How to use

on the terminal, just type:

$ jsmake

if you do not need any options just make the file executable.

There are obviously command line options:

input

$ jsmake -input ../lib

This tells where to look for the javascript to be merged/preprocessed/smashed.

output

$ jsmake -output ../src/merged.js

This tells where to output the final merged output.

compression

$ jsmake -compression name

Example:
$ jsmake -compression mini

This tells what kind of compression it should use.
There are 3 different compressors for now:

packer
mini
closure

Closure use google online closure service with the least aggressive algorithm.
So... you just need to be connected to the internet to use this one.
packer and mini requires perl modules to be installed, respectively JavaScript::Packer and JavaScript::Minifier.

Using the compression will output 2 files:
the one uncompressed and the one compressed prefixed with the name of the compression type, so it might be output.js and closure-output.js

packages

$ jsmake -packages name separated by a space

Example:
$ jsmake -packages Core.DOM Core.Util.String

If you do not specify a package jsmake will merge all the files that contain the !require: directive.
By specifying the package name,jsmake will only merge the file necessary for this package to work as defined in your dependencies.

vars

$ jsmake -vars name separated by a space

Example:
$ jsmake -vars DEBUG STRICT_MODE

By specifying the name of some variables, you will make them come true.
Therefore all the ifdef or ifndef will be stripped down accordingly.
if you want a STRICT_MODE but no DEBUG messages, you will write:
$ jsmake -vars STRICT_MODE

define

$ jsmake -define name=value variable name=value

Example:
$ jsmake -define VERSION=6.01 AUTHOR=myself

vars allows you to overwrite the one inline in your javascript file.
So if you define in your javascript /#define VERSION 3.01 / but at the command line
set the variable to 6.01, the final output will be 6.01
Will look into merging vars and define functionality into one as it is confusing...

That's it!!

so if we go for a full option set up, you can get:

$ jsmake -input ../lib -output ../src/merged.js -packages Core.DOM Core.Util.String -vars DEBUG -define VERSION=6.12 AUTHOR=myself -compression mini

This will create two files merged.js and mini-merged.js compressed, cleaned out and with all the dependencies.

Download & Doc

http://code.google.com/p/jsmake-preprocessor/

Hope this is useful too somebody and that you won't be too hard on my perl capacities. Comment to improve the code welcome!

Why bother with javascript preprocessors you say?

2010-07-08T13:57:00.018+09:00

Javascript is a dynamic language that offers many features to create rich online applications and is now used as a key language in heavy ajax based online applications.
Although enhanced by profiling, debugging tools like Firebug for Firefox, javascript developing in itself still miss features offered since a long time by other static languages.One of this feature being a preprocessor syntax that could ease development.

A preprocessor will allow you to add extra code (like debug statements, conditional flow) that will be stripped down before going live. Some will also give you the opportunity to compress/obfuscate the final output or even merge multiple files into one or why not create different built for different environment (why should you have IE related branching code that might increase file size, slow down the UI experience when you are developing solely for an iphone/ipad version of a website?).

So that you can grab the concept of a preprocessor for those of you who did not use any, here is a short example:

/*@define VERSION 1.1 */

/*@require Base.js,Math.js */

/*@ifdef DEBUG */
console.log("debug mode. Version:"+/*@=VERSION */);
/*@end */

function sum(num1,num2) {

/*@ifdef STRICT_MODE */
        if(num1===undefined || num2===undefined){
              throw new Error("the function requires 2 parameters");
       }
/*@end */

/*@ifdef DEBUG */
      console.log(num1+num2);
/*@end */

      return num1+num2;
}
This may sound rather hard to read but you will be able to create different builts.

The "require" directive will merge the two files listed into this one.
When you call the preprocessor of your choice on the command line let's say, just give it some options:

jspreprocessor -vars DEBUG -output merged.js -compression mini

You will get a merged.js file containing the following output:

//..contents of the js files required goes here
console.log("debug mode. Version:"+1.1);
function sum(num1,num2) {
     console.log(num1+num2);
     return num1+num2;
}

but compressed on top of that!!

The preprocessor stripped down the javascript to minimize overhead and unnecessary code lines (lightweight javascript file).

Do you see how a preprocessor could come in handy??

Hopefully, below is a list of preprocessors that exist and could help you in your future development if you do not already use them.

Javascript Preprocessor

language:javascript

http://www.bramstein.com/projects/preprocess/

A preprocessor combine with Apache Ant or Rhino Javascript Engine or simply call from within javascript!

jscompiler

language:none (online)

http://jscompiler.org/usage.php

an online preprocessor using java like annotations.

JS Built Tools

language:Java/xml (Ant suit)

http://code.google.com/p/js-build-tools/

a collection of Ant tasks that contains a preprocessor, a compressor (YUI) and a doc generation based on MoxieDoc.

Jsmacro

language:python

http://github.com/smartt/jsmacro

a preprocessor following a syntax closed to C.

Sprocket

language:ruby

http://github.com/sstephenson/sprockets

a preprocessor written in ruby mainly intended to join multiple files into one through "require" and "provide" directives. work well with Pdoc.

Juicer

language:ruby

http://github.com/cjohansen/juicer

Focus on combining js and css files, compressing them with different tools.

Js preprocessor

language:ruby

http://js-preprocessor.com/

Focus on combining js and css files, compressing them with different tools.

-----
I certainly forgot some preprocessor out there but don't hesitate to comment about them and give feedback on the one listed above if you use them!

hijacking javascript functions part 2 - Enforce Parameters Type

2010-06-30T16:48:00.004+09:00

We've seen in the last entry how we could hijack functions at distance and add some checking logic to the parameters in one place. We saved some typos, some possible mistakes and probably saved hours of debugging.But we needed to know the function parameters in order to check even some basic data types. Could not it be easier if like strongly typed languages, javascript could do this for us ?

We will see in this entry how using some naming conventions could allow us to check parameters automagically at distance and save us even more typos and ease debugging!

Getting javascript function code dynamically

The very nature of javascript is that it is dynamic. So dynamic that you can even access to functions code, it is not hard:

function doSomething(param1,param2,param3) {
    return param1;
}

now, to get the code of this very useful function, it is a one liner:
doSomething.toString(); // returns the above function code as a string

What is even nicer in Safari/FireFox/Chrome is that they clean up the function layout for us before giving it back to us.
so the following function:
function doSomething(param1 /* String */,
                                       param2 /* Number */,
                                       param3 /* Array */) {
     return param1;
}
will be returned as a string as:

function doSomething(param1,param2,param3) {
    return param1;

}

Obviously, IE does return the function as written.
Why does it matter will you ask?
Let's see what we intend to implement so that it becomes clear...

Using Naming Conventions

Using common conventions when programming is useful and in our case will become primordial to our purpose.
The above function was using param1 and param2 as parameters which does not really help. Even you in 6 months when you will be looking back to your code, perplex...
We will change the function so that it uses a naming convention.
Let's use one:

- String Object will all start with str + [A-Z]
so let's say that param1 is a String, we will change it to strParam1

- Number Object will start with num + [A-Z]
so let's say that param2 is a Number, we will change it to numParam2

- Array Object will start with arr + [A-Z]
so let's say that param3 is an Array, we will change it to arrParam3

Many conventions exists and this is just an example. Just change to what fit best your programming methods and don't hesitate to add more types.

so our first function will be changed to:

function doSomething(strParam1,numParam2,arrParam3) {
    return param1;

}

You will see that in the end this will help for reading and maintenance purpose anyway.

Parsing the function code to get the parameters

This is where things get dirty...
As IE does not send back a clean up version of the function, we shall look into many ways to parse the function but we will make it easy for our purpose.
We will assume that all functions put there parameters on one line, only separated by commas and with no space in between. Like so:

function doSomething(strParam1,numParam2,arrParam3) {
    return param1;

}

We could certainly handle different patterns but the code will get ugly. The concept is the same so we will not look too much into it.
So let's write a simple helper function to get the parameters:

DataController = {

    _getParametersName : function (code) {

        //if we did not get something just return
        if(code===undefined || !code) return [];

        //split the parameters
        var matches      = code.match(/$(.*$)/);

        // return them or an empty array
        return (matches[1]) ? matches[1].split(',') : [];
    }
};

As you can see here, we shall look into more checking as to if the code parameters is really a string or not but let's pretend you will DIY.
How do we use it?Easy as pie:
var paramNames = DataController.getParametersName(doSomething.toString());
alert(paramNames);//should display strParam1,numParam2,arrParam3

So we have our parameter names now with the extra information about their type!
Let's move on to the next step then...

Hijacking function revisited

First a reminder with the above _getParametersName added:

var DataController = {

    _getParametersName : function (code) {

        //if we did not get something just return
        if(code===undefined || !code) return [];

        //split the parameters
        var matches      = code.match(/$(.*$)/);

        // return them or an empty array
        return (matches[1]) ? matches[1].split(',') : [];
    },

    hijack : function(oPackage,fName,fConstraint) {

        var fCode = oPackage[fName];
        if(typeof fCode !=='function') return false;

        oPackage[fName] = function() {
            var parameters = DataController.toArray(arguments);
            var ret = fConstraint(fName,parameters);
            if(!ret) return false;
            return fCode.apply(oPackage,parameters);
        }
    },

    addConstraint : function(oPackage, fConstraint) {
        for(var prop in oPackage) {
            DataController.hijack(oPackage,prop,fConstraint);
        }
        return true;
    },
    toArray : function (arg){

      var ret =[];
      for(var i=0,ln=arg.length;i < ln;i++){
    ret.push(arg);
      }
      return ret;
   },
   _isString : function(str){
        if(str===undefined) return false;
        if(str.constructor===String)
            return true;
        return false;
    }
};
Look at the previous entry for further details of the what, how and why.
Basically what we are going to do is add some default checking in the hijack functions.
It will not only use the callback but also use its own default parameter checking based on pre defined type. the default checking function will look like this:

DataController = {

_checkDefaultType : function(func,parameters) {

        // get the parameters name
        var awaitedVals = DataController._getParametersName(func.toString());

       //loop through all the parameters found
        for(var i=0,ln=awaitedVals.length;i < ln; i++) {

            //if the parameter start with num followed by a capital letter
           //we check if it is a number

            if(awaitedVals[i].match(/^num[A-Z]/)){
                //if it's not we just log a message and return false
                if(!DataController._isNumber(parameters[i])){
                   console.log("parameter "+i+"should be a Number but got:"+parameters[i])
                   return false;
               }
            }

           //same thing but for Array
            if(awaitedVals[i].match(/^arr[A-Z]/)){
                if(!DataController._isArray(parameters[i]))
                   console.log("parameter "+i+"should be an Array but got:"+parameters[i])
                   return false;
            }

           //same thing but for String
            if(awaitedVals[i].match(/^str[A-Z]/)){
                if(!DataController._isString(parameters[i]))
                   console.log("parameter "+i+"should be a String but got:"+parameters[i])
                   return false;
            }
        }
        return true;
    }
};

This function uses some functions not listed yet they just check for the type of the data. You will find a basic implementation at the end of this entry.

Now that we have our default type checking function available, it is just a matter of adding it to the hijack function like so:

    hijack : function(oPackage,fName,fConstraint) {

        var fCode = oPackage[fName];
        if(typeof fCode !=='function') return false;

        oPackage[fName] = function() {
            var parameters = DataController.toArray(arguments);

            //here is the magic part
            var ret = DataController._checkDefaultType(fCode,parameters);
            if(!ret) return false;

            ret = fConstraint(fName,parameters);
            if(!ret) return false;
            return fCode.apply(oPackage,parameters);
        }
    }

That's it!!!
May seem a lot but it was quite easy (even if there is a lot of thing to do if you want to implement a more 'realistic' function parameter parser)

So now what do we have?
Basically, we can add some constraint to the a package like so:
var toolbox = {

    doSomething: function (strParam1,numParam2,arrParam3) {
         return param1;

   }
};
DataController.addConstraint(toolbox,function(){return true});

Here we return true by default as we do not add any other checking.
Thanks to this one line three parameters will checked automagically:

toolbox.doSomething("bonjour",2,[2,3,4]); // return bonjour
toolbox.doSomething(2,"bonjour",[2,3,4]); //oops, you inverted the parameters
// you will get a logged message in the console and false as a result

Conclusion

We've seen how using some naming conventions, the very dynamic of javascript could allow us to hijack functions and add default type checking for free!
We could add a flag:
DataController.mode="strict";
If set to strict the function could also check if the number of arguments meet the number of parameters.
if set to undefined, we could turn off the checking entirely too...
Possibilities are up to your imagination and your programming style!

Do you see any case where this kind of feature in javascript could have helped you??

Code

var DataController = {

      _checkDefaultType : function(func,parameters) {

        var awaitedVals = DataController._getParametersName(func.toString());

        for(var i=0,ln=awaitedVals.length;i

            if(awaitedVals[i].match(/^num[A-Z]/)){

                if(!DataController._isNumber(parameters[i])){
                   console.log("parameter "+i+"should be a Number but got:"+parameters[i])
                   return false;
               }
            }

            if(awaitedVals[i].match(/^arr[A-Z]/)){
                if(!DataController._isArray(parameters[i]))
                   console.log("parameter "+i+"should be an Array but got:"+parameters[i])
                   return false;
            }

            if(awaitedVals[i].match(/^str[A-Z]/)){
                if(!DataController._isString(parameters[i]))
                   console.log("parameter "+i+"should be a String but got:"+parameters[i])
                   return false;
            }
        }
        return true;
    },

    hijack : function(oPackage,fName,fConstraint) {

        var fCode = oPackage[fName];
        if(typeof fCode !=='function') return false;

        oPackage[fName] = function() {
            var parameters = DataController.toArray(arguments);

            var ret = DataController._checkDefaultType(fCode,parameters);
            if(!ret) return false;

            ret = fConstraint(fName,parameters);
            if(!ret) return false;

            return fCode.apply(oPackage,parameters);
        }
    },

    addConstraint : function(oPackage, fConstraint) {
        for(var prop in oPackage) {
            DataController.hijack(oPackage,prop,fConstraint);
        }
        return true;
    },
    toArray : function (arg){

      var ret =[];
      for(var i=0,ln=arg.length;i < ln;i++){
          ret.push(arg);
      }
      return ret;
   },
    _isNumber : function(str){
        if(str===undefined) return undefined;
        if(str.constructor===Number)
            return true;
        return false;
    },
    _isArray : function(ar){
        if(ar===undefined) return undefined;
        if(ar.constructor===Array)
            return true;
        return false;
    },
   _isString : function(str){
        if(str===undefined) return false;
        if(str.constructor===String)
            return true;
        return false;
    }
};

var StringToolBox = {

    camelize: function(strVal) {
        return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
    },
    hyphenize : function(strVal) {
        return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
    },
    firstToUpperCase : function(strVal) {
         return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
    },
    trim : function(strVal) {
         return str.replace(/^\s+|\s+$/g, '');
    }
};

DataController.addConstraint(StringToolBox,function(){return true;});

hijacking javascript functions part 1

2010-06-25T18:40:00.116+09:00

Javascript is as you may know, a loosely typed language (ie,you can not specify if a variable will be an integer, a float or an array...).
This can be a strength as it offers highly dynamic options that typed languages can not offer but this can also be a real nightmare when you need to debug something that went plainly wrong...
Typed language can offer control at the compilation phase and therefore can ease debugging by tracking bugs at an early stage. Javascript does not offer that.

We will see in this article how we can use the highly dynamic nature of javascript to hijack functions and add control from outside. we will be able to check function parameters at distance and turn the process on/off easily.

Hijack function

What is so nice about javascript is that it is very dynamic and gives you enough power to manipulate functions at a very early stage.
Let's take a little library that deals with strings and add some utility functions: trim, hyphenize, camelize and firstToUpperCase.

The code will be like:

var StringToolBox = {
    camelize: function(str) {
        return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
    },
    hyphenize : function(str) {
        return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
    },
    firstToUpperCase : function(str) {
         return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
    },
    trim : function(str) {
         return str.replace(/^\s+|\s+$/g, '');
    }
};

For those of you who are new to javascript, this might be hard to understand.
we put all the functions in an object var StringToolBox= {...} in order to avoid conflict with other javascript scripts that could have the same exact function names. Therefore you will call the trim function like so: StringToolBox.trim('   my string     ');
Then we are using Regular Expressions to look for a pattern and change it the way we want.

So far so good!

But what happen if you do no pass the right parameter? If you do not pass anything or for some reasons, in the process an array gets passed??

In order to check that you do get what you want, you will need to add some control on the data itself.
First let's create an helper function (basic):

var DataController = {
    _isString : function(str){
        if(str===undefined) return false;
        if(str.constructor===String)
            return true;
        return false;
    }
};
We will use it this way:

DataController._isString();//should return false
DataController._isString(1);//should return false
DataController._isString("hi!");//should return true

So now let's implement this in our little toolbox:

var StringToolBox = {

    camelize: function(str) {
        if(!DataController._isString(str)) {
             console.log('the first parameter must be a String Object but seen:'+str);
            return false;

        }
        return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
    },
    hyphenize : function(str) {
        if(!DataController._isString(str)) {
             console.log('the first parameter must be a String Object but seen:'+str);
            return false;

        }
        return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
    },
    firstToUpperCase : function(str) {
        if(!DataController._isString(str)) {
             console.log('the first parameter must be a String Object but seen:'+str);
            return false;

        }
         return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
    },
    trim : function(str) {
        if(!DataController._isString(str)) {
             console.log('the first parameter must be a String Object but seen:'+str);
            return false;

        }
         return str.replace(/^\s+|\s+$/g, '');
    }
};
OK!
As a note, you may decide to handle the error in different ways. Here we just log a message to the console (Firefox will work but this code will fail in IE) but we could throw new Error or do whatever you think is relevant for your application flow.

Now we can be a little bit more confident about our code and where things might get wrong! But as you can see this is rather verbose, we need to copy/paste the same logic in 4 functions, it increases the file size and reduce readability...
If we were in a strongly typed language by defining the type of the first parameter, the interpreter/compiler could handle this for us for free...

But javascript is dynamic enough to allow us to change that!

HIJACK function in use

Before we see how we will build this function, let's see how we use it:

var StringToolBox = {

    camelize: function(str) {
        return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
    },
    hyphenize : function(str) {
        return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
    },
    firstToUpperCase : function(str) {
         return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
    },
    trim : function(str) {
         return str.replace(/^\s+|\s+$/g, '');
    }
};

DataController.addConstraint(StringToolBox,function(fName,parameters) {

    if(!DataController._isString(parameters[0])){
             console.log('the first parameter must be a String Object but seen:'+parameters[0]);
            return false;
    }
    return true;
});

So as we can see, we moved all the control checking logic outside of the function and
sum it up in one place. Way much less typing (and we do hate typing!), way much less bytes and therefore a smaller file size and better readability!
the addConstraint function takes an object containing the functions as the first parameter and a function that handles the checking. the function itself is a callback that receives the name of the function being hijacked and the parameters it receives.

so now, how do we implement that??

HIJACK function implementation

First of all we need to loop over all the functions in the object, this is going to be easy:

var DataController = {
    addConstraint : function(oPackage, fConstraint) {

        for(var prop in oPackage) {
            DataController.hijack(oPackage,prop,fConstraint);
        }
        return true;
    }
};

the addConstraint just loop through all the elements in the object (oPackage where o stands for object) and call the hijack functions that will get the package, the element being looped over and the callback (fConstraint where f stands for function).
So as you can imagine, the meat is in the hijack function, let's see its implementation:

var DataController = {

    hijack : function(oPackage,fName,fConstraint) {

        //store the original function in a temporary variable, ie, store trim
        var fCode = oPackage[fName];

       //if this is not a function return early, nothing to hijack here
        if(typeof fCode !=='function') return false;

        //redefine the function in the package by overwritting it, ie redefine trim
        oPackage[fName] = function() {

           //every functions have a 'arguments' variable that holds the parameters
           //we just change this into a real array
            var parameters = DataController.toArray(arguments);

           //we then use the callback functions that do the controlling
            var ret = fConstraint(fName,parameters);

           //if the callback return false, something went wrong, we do nothing
            if(!ret) return false;

          //the parameter checking was ok so we call our original function, ie trim
            return fCode.apply(oPackage,parameters);
        }
    }
};

Hum, this gets a little bit tricky...
I added comments to help grab the flow.
Basically, we use the very dynamic nature of javascript that allows us to redefine a function and overwrite it.
we first save the function in temporary variable, then we redefine the function by adding the checking callback. if the checking went wrong, we return but if everything was fine, we just call the original function held in the temporary function. This makes use of closure by the way.
the DataController.toArray(arguments) loops over the arguments and push them into an array. that's all!
the fCode.apply allows us to keep the scope of the package in case the function was using it and allows us to send the parameters back to the original function.
all the functions were using only one argument but there could be several of them. Using apply allows us to solve the problem in one line!

Conclusion

We were able to add some checking onto the parameters sent to javascript functions by hijacking them. It keeps our code clean and reduce the file size.
As we hijack the function, we could easily turn the checking on/off by adding a flag too! Which could come in handy for live vs development environment.

Although the function allows us to check parameters at distance, you still need to know the function and their parameters. Here it was one parameter, all of them being a String. This will not be true for every functions!
If the function changes, you will need to change the checking too.
Could not it be nice if we could check the parameters automagically without even having to know about the funcions themselves??
we will see how we can do this in the next part of this article!

FULL CODE

var DataController = {

    hijack : function(oPackage,fName,fConstraint) {

        var fCode = oPackage[fName];
        if(typeof fCode !=='function') return false;

        oPackage[fName] = function() {
            var parameters = DataController.toArray(arguments);
            var ret = fConstraint(fName,parameters);
            if(!ret) return false;
            return fCode.apply(oPackage,parameters);
        }
    },

    addConstraint : function(oPackage, fConstraint) {
        for(var prop in oPackage) {
            DataController.hijack(oPackage,prop,fConstraint);
        }
        return true;
    },
    toArray : function (arg){

      var ret =[];
      for(var i=0,ln=arg.length;i < ln;i++){
    ret.push(arg);
      }
      return ret;
   },
   _isString : function(str){
        if(str===undefined) return false;
        if(str.constructor===String)
            return true;
        return false;
    }
};

var StringToolBox = {

    camelize: function(str) {
        return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
    },
    hyphenize : function(str) {
        return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
    },
    firstToUpperCase : function(str) {
         return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
    },
    trim : function(str) {
         return str.replace(/^\s+|\s+$/g, '');
    }
};

DataController.addConstraint(StringToolBox,function(fName,parameters) {

    if(!DataController._isString(parameters[0])){
             console.log('the first parameter must be a String Object but seen:'+parameters[0]);
            return false;
    }
    return true;
});

html5 implementation of deeplinking a la swfaddress

2010-06-01T13:52:00.018+09:00

I have been using swfaddress for some heavy ajax based projects.
This library allows deep linking for Flash or Ajax based applications.
Deep linking means that a user knows exactly on which page he/she is after after clicking (taping/touching/you-pick-your-favorite-platform-custom-behavior) on a link.

One of the main problem with Flash/Ajax applications is that most of the time, you have one page handling all the navigation.

The good points:

- no page reload.

- Better User Experience.

But most of the time, no reload means also one and only one URL, no browser back button available...
swfaddress by using an anchor tag, removes these limitations.

An example:

Let's assume that this website is in Flash or Ajax and do not reload the page at all.
http://www.yoursite.com/

if you click on the 'About Us' link, you will see the contents appear but the URL will be:

http://www.yoursite.com/

...

not very practical...

swfaddress mechanism will add an anchor to the URL (which will not force the browser to reload the page):

http://www.yoursite.com/#aboutus.html

Your link in a Ajax based environment is as usual:

http://www.yoursite.com/aboutus.html

when the link is clicked, you get an event in javascript which you can handle this way:

new Ajax({

url :event.target.href+'?raw=true',

onSuccess:function(resp) {

document.getElementById('content').innerHTML=resp

});

NB1: "new Ajax({})", pick your favorite js library here.
NB2:The code is simplified! It is not an swfaddress/javascript tutorial.

the "raw=true" query string just says the application to output the content without the header, menu, footer,etc. (this assumes that is handled by a php/perl/python program that can output the contents in different ways).

Why bother eliminating the page content ? Why not just get rid off it right from the beginning??

Well, you certainly want your website to be user-friendly and seo-friendly.

Not all search engines handle the javascript loaded on your page when they crawl your website. Which means that you still must offer them a page that will be valid and makes sense on its own. (Of course, search engines are not the only ones... I can also mention the ones that turn their javascript off...)
All and all, you get bookmark-able urls, a functioning browser back button. Everyone is happy.

BUT...
This seems very hacky and quite a lot of troubles will come in your way and back fire at you. The overhead/load/security matters that the swfaddress implies are of concern too.

Could it be easier if we could specify all of these directly in an "a" tag???
Let's say:

<a href="aboutus.html" target="[#content]">about us </a>

This will tell the browser to update the url so that it becomes http://www.yoursite.com/aboutus.html
BUT the target specified will imply to not reload the page and instead append the contents into the css selector element specified. Here an element with an id of 'content'...

nobody is going to add the 'raw=true' thiny thing for you so you may have to handle this with javascript in some way (unless the browser adds a specific header when requesting the source this way!) but it will still avoid quite a lot of headaches and offer a more SEO friendly environment...

Well, it is not very far from iframes in itself so if they did not do it this way the first time, it is certainly because I am missing something very crucial here.

but still... would be nice.

?

Understand JS and effect library in 10 parts

2008-07-01T19:05:00.004+09:00

I've been quite buzy these months with work, my wedding and teeth!
Anyway, I am still in the middle of introduction to JS OOP thru a queue example but I thought it could be nice to sum up all the entries written so for regarding javascript effects and javascript.
These entries, far to be perfect, can be a good base to understand how javascript libraries do their magic (like JQuery,Mootools,scriptaculous,etc) and will indeed allow you to almost create your own library with a little work.

Javascript basics:

These are some side entries that relate to javascript and some cross-browsers fix required, you should read them before getting in the animation series:
My inner request for outer
This entry deals with the basic of javascript closure,anonymous functions which will be used during the animation effect function creation.

Javascript Literal Notation: basics
This entry deals with the basic of javascript literal notation which is the based of JSON and will be used during the animation effect function.

Setting html element style thru Javascript
This entry deals with cross-browser issues that one must deal when setting the style of an html element thru javascript. You will see camelCase, hypenize string and also that some people, in comments, thinks that teaching this is a waste of time. How nice isn't it?

Javascript scoping : Things to keep in mind
This entry deals with javascript scoping issues. If you were to read only one entry above all in these pre-introduction, I will choose this one as you will get a deeper understanding of the this keyword, what is var, when to use it...

javascript : memoizing - caching functions result
This entry deals with the ability of javascript to memoize or overwrite itself to remember a function result. Very usefull for branching functions and could help to improve further some of your functions that needs cross-browser branching for example.

Javascript : Simulating namespaces basic approach, part 1
Javascript : Simulating namespaces thru prototyping part 2
Javascript Namespaces : Import and Export methods
Javascript Namespaces : Privacy thru closure or how to type less!
This entry deals with something that misses in javascript language, the possibility to create namespaces. You will learn what is a namespace, why it is so important in javascript and how to simulate them thru objects. You should enforce your understanding of anonymous function and relate these entries to the javascript function scoping base nature.This hasn't be used while during the animation function but this is definitly something you should be aware of and use if you plan to share your scripts.

Javascript Effects:

These entries will hopefully teach you the basic of javascript animations. These entries will require basic understanding of closure, literal notation,etc. They will teach how works easing and css animation,so go on and read:
1. Javascript Animation : basics of easing
2. Javascript Animation : Controlling time (2)
3. Javascript Animation : take it ease-y ! (3)
4. Javascript Animation : Make things move smoothly (4)
5. Javascript Animation : Changing Colors (5)
6. Javascript Animation : Several elements at once (6)
7. Javascript Animation : Curving the path (7)
8. Javascript Animation : Strategy and Factory Pattern at the rescue (8)
9. Javascript Animation : Implementing Margin and Padding
10. Javascript Animation : dynamic fps with setInterval

I hope these entries will be helpfull to some of view! There are still many things to be seen like effect queuing, custom events, dom ready,namespacing everything, DOM traversial, canvas, etc,etc,etc!!! Therefore, I will update this page when I write a new entry regarding this subject.
If you'd like to get more entries regarding these topics, please leave a comment with some details of what you would like to read!

Javascript : Creating a queue system part 2 :OOP way

2008-02-23T12:08:00.010+09:00

In the last entry, we have seen what was a queue and how to implement it in javascript, in a procedural way. We also noticed that we were limited in our possible use of the program as multiple queues were not possible. We will see how moving from procedural to object oriented approach will allow us to deal with multiple queues in a simple way.

Reviewing the queue code

Before we go OOP, let's review the code first:

var q      = [];
var paused = false;

function queue() {
    for(var i=0;i < arguments.length;i++)
       q.push(arguments[i]);
}
function dequeue() {
     if(!empty()) q.pop();
}
function next() {
     if(empty()) return;
     if(paused)   return;
     q.shift()();
}
function empty() {
     if(q.length==0) return true;
     return false;
}
function clear() {
    q=[];
}

//application aware flush function:
//update the div with the length of the queue

function updateDIV(delay) {

 function delayed() {
   document.getElementById('queued').innerHTML+=q.length;
   next();
 }
 setTimeout(delayed,delay);
}
function flush(delay) {
 updateDIV(delay);
}

You can always read the firt part to get a better understanding of this code.

Limits of the above code

The main drawback of this programming style is that we hold our main data, the queue array and the pause flag, in the gobal space. Therefore we cannot create several queue with the above code.
The main advantage of putting everything in the global space is that the code is straight forward:

queue(function(){updateDIV(300)},function() {updateDIV(500)},function(updateDIV(450)));
dequeue();
next();
paused=true;
flush();

As you can see, we don't really have to care about the queue array, we just let the program deal with it for us. Now, let's see how we can try to implement multiple queues.

Multiple queues, the procedural way

In order to deal with multiple queues, we first need to allow multiple queue container.
Therefore, we need to change our global queue as being a parameter of the function:

function queue(q) {
    for(var i=1;i < arguments.length;i++)
       q.push(arguments[i]);
    return q;
}
function dequeue(q) {
     if(!empty()) q.pop();
     return q;
}
function next(q) {
     if(empty(q)) return q;
     q.shift()();
     return q;
}
function empty(q) {
     if(q.length==0) return true;
     return false;
}
function clear(q) {
    q=[]; 
    return q;
}

//application aware flush function:
//update the div with the length of the queue

function updateDIV(q,delay) {

 function delayed() {
   document.getElementById('queued').innerHTML+=q.length;
   next(q);
 }
 setTimeout(delayed,delay);
}
function flush(q,delay) {
 updateDIV(q,delay);
}

huummmm, as you can see, this is a little bit trickier...
I have dropped the paused flag in order to keep thing simple.
Let's see how we can use the above code:

var q1=[];
var q2=[];

q1= queue(q1,function(){updateDIV(q1,300)},function() {q1,updateDIV(500)},function(q1,updateDIV(450)));
q1= dequeue(q1);
q1 = next(q1);
flush(q1);

q2= queue(q2,function(){updateDIV(q2,300)},function() {q2,updateDIV(500)},function(q2,updateDIV(450)));
q2= dequeue(q2);
q2 = next(q2);
flush(q2);

Hummmm,,,
This is starting to be very hard!
Before, as we only had one and only one queue, we didn't have to care about which queue we were working on.
Now that we can have several queues, we need to indicate each time on which queue we are working to the function and we need to get back the queue to stay sync with the application...
in other words, this is a real pain in the butt!
Why is it that hard?
Could we simplify this??
Yes, we can, thanks to an object oriented approach!

The object oriented approach of the queue

So why the code get so difficult to write and certainly, in a long run, to maintain??
Because we are thinking in a procedural way:

We have functions that work on a particular data.

By thinking this way, we need to specify what is the data to the functions.
Depending on what you want to do, a procedural approach will be revealant, don't think that it is a wrong way of doing things (even if hardcore oop programmer will claim that even a if else statement is devil,,,just forget about them!!)

So how should we think the problem?
If we change our way of thinking, we can move to the following:

We have a particular data that possesses,has different methods.

And that's all!
Instead of thinking of different individual functions that work on a particular data, we need to think that we have a particular data that share, have particular functions/methods.
By simply inversing the first axiom,the subject of the action, we will be able to have the easyness of a global variable and the power of multiple data, ie, multiple queues.

The object in OOP

So, that's nice, we have inversed the problem and so what??
When we created our queue, we had a queue container, a queue pause flag and functions that work on the data.
If you remember the first approach, we first created our queue container, our pause flag and then called the different functions that were all working on the same data, the global queue and global pause flag.
Using an object approach, we are just going to allow to create several queue container and flag, each hold within a box, an object. Therefore each object will have it's own internal state of the data.
Come to think of it, if you have two identical TVs, one in your living room, one in your room.
If you turn on the TV in your living room, the one in your room is not going to start and hopefully.
You have two objects and each of them although they do the same thing, have their own state of information, their own data.
We are going to learn how to create TVs!!

Understanding the queue in a OOP way

Let's see how we will write the code in a OOP way:

var q1 = new Queue();
q1.queue(function(){updateDIV(300)},function() {updateDIV(500)},function(updateDIV(450)));
q1.dequeue();
q1.next();
q1.flush();

var q2 = new Queue();
q2.queue(function(){updateDIV(300)},function() {updateDIV(500)},function(updateDIV(450)));
q2.dequeue();
q2.next();
q2.flush();

If you remember the procedural approach with only one global variable, you will see that is very similar, but remember:
We do not have functions that work on a particular data.
We have a set of data that has some particular functions to work on.
The main, main difference is the following line:

var q1 = new Queue();

In the procedural way, we add:

var q1 = [];
var paused=false;

hum ??
But where did you write the line defining the paused flag in the OOP way??
In fact, remember, we are working with a set of data that we enclose in a box, an object.
Whene we write 'new Queue()', in the background we have created an object that has a queue container, an array, and a paused flag set to false!
If you have your TV on and that you change of channels, you don't expect your TV in your room to change of channel too, right?
Here it is the same thing, we have turned on our queue, set our initial state of information (an empty queue, a paused flag to false) and get an image back, in fact, an object holding all this information.
If you have never done OOP until now, you need to know that the return value is not a string or an array, it is what we call an object, which is yet an other structure of data.
We are lucky because in javascript creating an object is the same has using an hash, or associative array!
So we get back an hash that holds the following info:

var q1 = new Queue();
q1.toSource(); //=> {  queue:[],  paused:false };

But this hash is a little bit different from a simple hash.
If you buy exactly the same TV in a store, they will share exactly the same properties, the same features but if you need to repair one of them, you need to have a way to differentiate them, this can be a code barre or a client code.
Therefore, when you create a new object in javascript, you will get back a hash, that contains the name of the object, here Queue and obviously a particular memory address.
So when you do the following:

var q1 = new Queue();
var q2 = new Queue();
var q3 = new Queue();

You are creating each time a new Queue hash that has a particular memory address with their own state of the information.

And what the heck with the rest of the code????

var q1 = new Queue();
q1.queue(function(){updateDIV(300)},function() {updateDIV(500)},function(updateDIV(450)));
q1.dequeue();
q1.next();
q1.flush();

How can we call functions on the q1 variable??
Again, remember, we do not have functions that work on a particular data, we have a set of data that has some functions.
In a OOP language, we don't refer to functions but to methods.
Each new queue container array and paused flag are not variables but properties.
Properties are state, methods are actions.
A human being has the following property : 2 legs, 2 eyes, a mouth, 2 ears,etc. And a human being has the following methods, actions : run, walk, speak, sleep,etc. Sleeping being my favorite action of all!

So we have initialised our particular set of data, hold in an object called q1 and each time you will be calling methods (actions) on it, the methods will be working on the data of this object!
So with OOP, we can create has many queues as we want, we do not have to care about passing the queue array around or the paused flag around, everything is held within the object, within each object.
That's why our code is easier to write in the end because we do not have to deal with the state of the information, the object is doing it for us!!

Conclusion

Writting the implementation code here will make the entry too long so we will see how to implement the OOP way in a third party!!
But I hope that this entry has help you understanding the difference between a procedural approach, where functions work on data and an object oriented approach where a set of data has methods.
Understanding this will allow to ease the next entry development phase!
I hope you have seen how powerful can be a OOP approach where an object can hold has many information as you want and deal with them internally without having you to care!
So keep on reading!

Javascript - Creating a queue system part 1 : procedural way

2008-02-03T18:09:00.002+09:00

We queue all the time : at the administration, at the supermarket, at school for lunch....
The first in the queue, will go out first and the last one, well, will be out the last. This is the basic system that many programs use to process commands,functions in a particular order, here the first in, first out order (FIFO). It can be used to create chained effects, delayed remote call to server, sending mails by bunch, etc. We'll see in this entry the underlyings of a queue!
(this is a very basic procedural approach, that will be improved in the next entry)

Example

Before we go on and dive into the coding of our queue system, let's see what we will be able to do with a simple example.
Each time you click on queue, you will add an elment in the queue.
Each time you click on dequeue, you will remove the last element in the queue.
When you click on the flush queue, all the elements are going to be called one after an other (when the last action has finished).
And pause, we'll just pause the queue!
You will see the number of element actually present in the queue each time you click on next in queue of flush queue:
So 0 means that there is nothing in the queue and 1,2,3 are the elements left in the queue:

queue dequeue next in queue flush queue pause clear

What do we queue?

A queue contains most of the time functions or commands that a program needs to execute in a FIFO order.
In javascript, a common use of queues are for chaining effects or even queueing remote server calls while offline or in a slow network context and that a call has failed...
It could also be used to trigger other functions when a certain signal is fired, like an event.Indeed, a queue is also the base of what could be our own event sytem triggering functions on demand!(observer pattern with subjects/ observers or publishers and subscribers).
As you can see queues can be very useful and indeed are!
Let's see the features a queue needs.

What are the queue features?

When you are queueing at the supermarket, you need to wait for the signal of the cashier to move forward.
Sometimes, you need to stop people from moving and pause them!
Sometimes, the cashier can ask you to go to an other place and get rid off you!
Sometimes, you just need to get rid off the entire queue because time is over!
Obviously, you need something that contains in the order they came in the clients.
Well, we are lucky because the container in Javascript, that keeps things in order they come is nothing more than an array!
Let's see:

var clients=[]; // or new Array();
clients.push('first in');
clients.push('second in');
clients.push('last in');
alert(clients[0]); 'first in'
alert(clients[1]); 'second in'

So as you can see, it was very easy to create the base of a queue!
We create an array and we just 'push' the clients as they come in!
the first client is in the slot 0 and the last one in the slot 1, as we only have 2 clients!
There is also a very useful function in Javascript in order to deal with arrays, it is the pop function that will just get rid off the last entry in the array:

var client= clients.pop();
alert(client); // 'last in'
alert(clients); // return in order : first in, second in

As you can see the pop get rid off the last element and send it back to us.
There is obviously the counter part of pop, that is, the shift function that gets rid off the first element in the queue:

var first = clients.shift();
alert(first); // 'first in'
alert(clients); // return : second in

So basically, we have all the 4 main ingredients required for a queue:
- a container : the array
- a way to add in order : push, adds element at the end of the array
- a way to remove the first element : shift
- a way to remove the last element : pop

when we add an element at the end of the queue, we say that we 'enqueue' or 'queue'.
when we remove the last element of the queue, we say that we 'dequeue' when we advance in the queue, which is to say, calling the first element in the queue and getting rid off it, we say that we 'advance' or that we call the 'next' in the queue.
When we call all the elements in the queue one after an other, we say that we 'flush' the queue.
In the end, we restart the queue from the beginning, we 'clear' the queue.

The main functions

From there we can define the main elements required:

var q=[];//our queue container
var paused=false; // a boolean flag
function queue() {}
function dequeue() {}
function next() {}
function flush() {}
function clear() {}

you may also want to 'pause' the queue. We will therefore use a boolean flag too.
Now let's see the implementation, this is going to be very straightforward:

var q      = [];
var paused = false;

function queue() {
 for(var i=0;i< arguments.length;i++)
     q.push(arguments[i]);
}
function dequeue() {
    if(!empty()) q.pop();
}
function next() {
    if(empty()) return; //check that we have something in the queue
    paused=false; //if we call the next function, set to false the paused
    q.shift()(); // the same as var func = q.shift(); func();
}
function flush () {
    paused=false;
    while(!empty()) next(); //call all stored elements
}
function empty() {  //helper function
    if(q.length==0) return true;
    return false;
}
function clear() {
    q=[];
}

And here we have our basic queue system!
let's see how we can use it:

queue(function() { alert(1)},function(){ alert(2)},function(){alert(3)});
next(); // alert 1
dequeue(); // the last function, alerting 3 is removed
flush(); // call everything, here alert 2
clear(); // the queue is already empty in that case but anyway...

You can try the above code
As you can see, it works like expected but let's say that instead of alerting something we decide to update a div...
Let's take the following function:

function updateDiv(val) {
   function delayed() {
        document.getElementById('test').innerHTML+=val;
   } 
   setTimeout(delayed,500);
}

We add a timeout to simulate an application taking time to perform.
if we rewrite our example:

queue(function() { updateDiv(1)},function(){ updateDiv(2)},function(){updateDiv(3)});
flush(); // call everything

If we keep the principle of a queue, we should have each function called one after an other, try it yourself

And it doesn't work as expected!!
Well in fact, the flush function is something that we cannot build independently of the application.
Why?
Because our flush function calls each function without even knowing if the precedent one has finished!
In order to create a queue, we need to call the next function at the end of the last executed queued function. Therefore, the queue and the application needs to be related to some extend.
We should rewrite our function like this:

function updateDiv(val) {
   function delayed() {
        document.getElementById('test').innerHTML+=val;
        next();
   } 
   setTimeout(delayed,500);
}

Now, the queue is going to be processed after the end of each function, the recursive call to the next function will create our application related flush:

queue(function() { updateDiv(1)},function(){ updateDiv(2)},function(){updateDiv(3)});
next(); // call next function that will work as a flush here

Now, if you try the above code

And it works as expected!
In fact, each application should have its own flush method.
In order to create a flush function, we need to know when the function is done to move on to the next element in the queue.
But how do I stop the queue processing or just advance one element in the queue then??
Well, we just need to change the flush function and wrap the next function like so:

function advance() {
 paused=false;
 next();
 paused=true;
}
function flush() {
 paused=false;
 next();
}

So, the advance function change the pause flag to false at the beginning and set it right away to true after calling the next function. The next function will stop at the following call as the pause flag will be set to true!
On the other hand the flush function just wrap the next function that will be called by each functions in the queue!
As you can see if some elements can be true to all queues, the flushing of a queue needs to be application aware and can hardly be generalize.
If you add a function in the queue that doesn't call the next function when it is done, your queue won't work and stop there.

Conclusion

We have built here a very basic queue system that allows us to understand the underlying process of a queue.
Javascript offers everything that we need to make it very easy like arrays, push, pop, shift functions.
Obviously these functions can have some overheads that a queue implemented at lower level won't have but the cost is not that much nowadays.

But this queue system has a real huge drawback:
our container and our pause flag is in the global space and we won't be able to have several queues running at the same time!!
Therefore we will see in the next entry an other approach that allows us to create several queue entities,objects that will keep track of their own internal state of the queue.
We will be switching from a procedural approach to an object oriented approach(OOP) and therefore see some of the advantages of this technique over this one.
We will also see how to use a queue in a real context, chaining effects!

Javascript Animation : dynamic fps with setInterval

2008-01-19T09:54:00.002+09:00

if you read the 'javascript animation' entries, you know that we built an animation function using setTimeout as a base. duration, fps, multiple settings, easing were also available! let's an other way of implementing this animation function by using setInterval

Refresh, refresh!

Before we go on with the new implementation, let's see where we left the animation first!
If you read the 'javascript namespaces' entries, you will notice that everything is in the global space but for now, let's pretend you didn't see it!
So here we go:

How it works

We are not going to review all the entries but put it simply:
- we first set the basic options like the duration, the frame rate per second
- we calculate the interval and the total number of frames required
- then we loop thru each frames, create a closure just to scope the counter i into the setAnimation function
- delegate all the calculation to the strategyFactory
- change the interval of the timeout according to the actual frame.

This is basically how it works, you can read past entries entitled 'javascript Animation :' to get more detail.
So in that case, we are using setTimeout, closure and a dynamic interval.
Let's see how to get the same result but with setInterval!

setInterval : dynamic frame rate

If with setTimeout we were looping thru each frames until the end, with setInterval, we are going to calculate the acutal frame and determine if we shall stop or continue by taking into account the elapsedtime!
The strategyFactory is the same, so let's put the animate function only:

There aren't that many changes but let's see step by step:
- we first set the basic options like the duration, the frame rate per second.
- we calculate the interval and the total number of frames required.
- we keep in memory the starting time of the animation and initialize some variables like the frame and the timer.
- then we defined the setAnimation function that calculates dynamically the actual frame by comparing the elapsed time with the interval.
It means that if the application is slow, the actual frame, that should be 12, can be 14 or 17 because the computer can not handle as expected.
Here if you want to get the frame rate per second, just do the following computation:
var actualFPS = parseInt((new Date().getTime() - time)/frame);
Output this in a div to see it evolve (you need to do some heavy stuff around though)
- delegate all the calculation to the strategyFactory
- check if we have reached the duration required and if so stop the interval.
- launch the setAnimation thru a regular interval.

The differences

As you can see using the setInterval method add some calculations that the simple setTimeout didn't require.
Here we need to check the elapsed time to stop the timer and keep in memory the starting time.
As we are using a closure within the main animation function, the startTime is kept in memory and we can also access the timer even after the function has returned.
The advantage of using the setInterval is that you are only going to do what the computer can really handle, nothing more, nothing less.
It allows to reduce the general overhead that can occur when simultanate actions are taking place!

Conclusion

We have seen how we could easily re-implement the animate function by using the setInterval function instead of the setTimeout.
We didn't have to deal with too many unnecessary things as we kept all the computation outside of the main function.
The closure used within the animate function is the premice of object oriented programming, as it allows the function to keep state of variables thru time.
But this is far to be perfect:
- We send bunches of variables to the strategyFactory that delegates these bunches of variables to other functions, which could be made simpler by using an object oriented approach where we could keep several variables internal to the application.
- everything is in the global namespace!
We can easily change this and use the Package function developped in the javascript namespaces entries and clean a little our mess!

We will see in next entries:
- how to namespace everything and use object oriented concepts
- how to deal with borders
- how to use a cascading style sheet to define your animation where it should be : in a css class and stay DRY!
- how to use custom events (onStart,onProgress, onComplete )
,etc!

javascript : memoizing - caching functions result

2008-01-05T17:59:00.001+09:00

The use of Javascript in a browser context requires to keep an eye on resources. Avoiding unnecessary variables and computation is one way to minimize a crash due to CPU overflow.We will see how we can reduce the number of computations by memoizing functions result.

A concrete example : setting css style

if you read the entry about setting the style thru javascript, you saw that the standard and IE way of naming the float attribute was different:
Standard : cssFloat
IE : styleFloat
Therefore, let's see the setStyle function again:

function setStyle(elm,prop,val) {
  if(prop=='opacity') 
    return setOpacity(elm,parseFloat(val));
  if(prop=='float')
    prop = (window.attachEvent) ? 'styleFloat' : 'cssFloat';

  prop = camelize(prop);
  elm.style[prop] = val;
  return elm;
}

As you can see, in order to use the proper naming for float, we use a ternary operator that looks for a IE method, attachEvent.
If we use this function many time, this computation is going to be done again and again.
Let see two ways to solve this problem:
-lazy setting:

var styleFloat=(window.attachEvent) ? 'styleFloat' : 'cssFloat';

function setStyle(elm,prop,val) {
  if(prop=='opacity')
     return setOpacity(elm,parseFloat(val));
  if(prop=='float')
     prop = styleFloat;
  prop = camelize(prop);
  elm.style[prop] = val;
  return elm;
}

There is not that much difference!
we just put the computation outside the function to have a variable holding the proper float naming for us, once and for good.
The other way is to use a dynamic definition:

function getStyleFloat() {
    //alert('first call');
    var float =(window.attachEvent) ? 'styleFloat' : 'cssFloat';
    this.getStyleFloat = function() {
       //alert('second call');
        return float;
    }
    return float;
}

function setStyle(elm,prop,val) {
  if(prop=='opacity')
     return setOpacity(elm,parseFloat(val));
  if(prop=='float') prop = getStyleFloat();
  prop = camelize(prop);
  elm.style[prop] = val;
  return elm;
}

Well, this is a lot of typing right?
The getStyleFloat can seem complex but in fact, it is very easy!
In order to use this dynamic definition pattern, you just need to create your function as you always do!
We just redefine the function by using a closure. Here this refers to the window object and just put the getStyleFloat function into the global space.
We are just 'overwritting ourself'!
the first time you call the function it will do the usual computation and all the following calls will just send you back the result, like a cache!
This is a rather trivial example but for heavy computation, this can be very usefull!

A second example : XMLHttpRequest

Here again, we have to face differences between IE and the rest of the world.
In that case, IE was the pioneer by creating the XMLHttpRequest and it is the rest of the world who has copied this functionality.
But IE, only for the windows platform, requires to use the ActiveX component, which is not available in all OS, that's why other browsers have created their own XMLHttpRequest.
Let's see how to switch between them:

function getXHR() {
   var xhr = '';
   if (window.XMLHttpRequest) {
      xhr  = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }
   return xhr;
}

so here again, we will do the following computation everytime we call the function.
And even worse, we are going to instantiate the xhr object several times!
We are therefore going to see how to cache the result and on top of that create a singleton (a singleton is a way to have only one and unique instantiation of a class during the course of the program):

function getXHR() {
   var xhr = '';
   if (window.XMLHttpRequest) {
      xhr  = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }
   this.getXHR = function() {
       return xhr;
   }
   return xhr;
}

And voila!
The first call to the function will do the computation and all the other call will send back the result from the first call!

Conclusion

You can find many use to this dynamic definition pattern, especially in order to deal with cross-browser issues that we face in javascript!
This can also be used to create a singleton like above or to cache some heavy computation you may need to do for animations or else.

Javascript Namespaces : Privacy thru closure or how to type less!

2008-01-03T17:11:00.000+09:00

we have seen in the last entry how we could create a basic namespace simulation in javascript. We have seen how to import in the global space what we needed. Packages should not though import anything to keep the global space clean but it could be nice to shortcut things within packages too. We will see how to do so thanks to closures.

Privacy thru functions

If you read the entry Javascript scoping: things to keep in mind, you certainly remember that it is possible to create scoping thru functions, therefore, the following variables won't be available outside of the scope of the function:

function privacy() {
    var myvar=1; // can't be accessed from outside
    myvar    =2: // can be accessed from outside
}

We can create a function by putting a reference to it in a variable too :

privacy = function() {
    var myvar=1; // can't be accessed from outside
    myvar2    =2: // can be accessed from outside 
}
alert(myvar); //error
alert(myvar2); //error
privacy();
alert(myvar); //error
alert(myvar2); //2

We are using an anonymous function which definition is referenced to the privacy variable that will act like a normal function now.
But as you can see we need to call the privacy function in order to access the public variable we have created. It won't be available as long as we do not execute the function.

Closures as scope container

There is a way to create scoping without even having to name the function at all. we just need to define the anonymous function and have it execute right away.
we can do this, thanks to the following notation:

(function () {

 //your code here


})();

This is just an anonymous function held within a block. By doing so, the code defined in the anonymous function will be executed right away and therefore, what is defined within it will be available to us.
Let's try:

(function() {
   alert('hi!');
})();

If you try this code, you get the alert prompt saying hi!.
In fact within this closure, you can write your javascript code like you always do!!
It will create a space hold in memory but not accessible from outside.
Well unless, you allow variables to be accessed from outside:

(function() {
    var myvar=1; // can't be accessed from outside
    myvar    =2: // can be accessed from outside 
})();

Closures are a very powerfull tool allowing many many other things!

Packages and closure : creating privacy for us, the lazy!

we have seen different packages holding some utilities function developped so far. There is especially one of them that has a dependency to an other package, the number package. Let's see the package in question:

JAME.Package('JAME.Util.Color');

JAME.Util.Color = {
    rgb2h:function (r,g,b) { 
       var d2h = JAME.Util.Number.d2h;
       return [d2h(r),d2h(g),d2h(b)];
    },
    h2rgb:function (h,e,x) {  
       var h2d = JAME.Util.Number.h2d;
       return [h2d(h),h2d(e),h2d(x)];
   },
   cssColor2rgb:function (color) {
       if(color.indexOf('rgb')<=-1) {
  return this.hexStr2rgbArray(color);
       }
       return this.rgbStr2rgbArray(color);
  },
  hexStr2rgbArray:function (color) {
      return this.h2rgb(color.substring(1,3),
                        color.substring(3,5),
                        color.substring(5,7));
  },
  rgbStr2rgbArray:function (color) {
     return color.substring(4,color.length-1).split(',');
  },
  Export : function() {
     JAME.Exporter(this);
  }
};

You can see that we have created a shortcut for 2 functions.
We have placed them within the function definition in order not to put them into the global space.
it was fine, because we only need them in one place but if we had them used in different places? Create a property into the object definition to hold them could be a solution but will polluate the package a little.
In that case, it is easier to create a closure to hold all the dependencies we require, therefore we can rewrite it this way:

JAME.Package('JAME.Util.Color');

  
(function () {

      var d2h = JAME.Util.Number.d2h;
      var h2d = JAME.Util.Number.h2d;

      JAME.Util.Color = {
           rgb2h:function (r,g,b) { 
              return [d2h(r),d2h(g),d2h(b)];
           },
           h2rgb:function (h,e,x) {  
              return [h2d(h),h2d(e),h2d(x)];
           },
           cssColor2rgb:function (color) {
           if(color.indexOf('rgb')<=-1) {
          return this.hexStr2rgbArray(color);
           }
           return this.rgbStr2rgbArray(color);
           },
           hexStr2rgbArray:function (color) {
           return this.h2rgb(color.substring(1,3),
                                    color.substring(3,5),
                                    color.substring(5,7));
           },
           rgbStr2rgbArray:function (color) {
           return color.substring(4,color.length-1).split(',');
           },
           Export : function() {
                JAME.Exporter(this);
           }
      };

})();

the 2 shortcuts won't be available outside and therefore will keep the global space clean while allowing less typo!

Conclusion

You should be aware that a closure will keep everything defined in it and that it will stay in memory as long as the program goes. It can also lead to memory leaks especially in IE when mixed with DOM manipulation.
It is therefore a very powerfull tool but can have underisable effects that won't be noticable right away.

Javascript Namespaces : Import and Export methods

2007-12-24T23:42:00.000+09:00

We have seen how important namespaces are and how to simulate them thru objects. If protecting ourselves and users from collisions is a good thing, writing 4 to 6 names before accessing the desire functions can be a real pain!
we will see how to shortcut things and make our life easier when needed!

Namespaces : the Namespace function

Let's sum up what we have seen in our last entry by taking the example of the JAME namespace (Javascript Animations Made Easy).
We won't put anything directly in the global namespace, that's why we will have to create our first namespace, JAME, without the Namespace function:

JAME = function () {};
JAME = JAME.prototype = function () {};

Now, let's attach the Namespace function onto the JAME namespace.
Let's rename the function to Package, because...
Well, I like Package and it's in the ES4 proposal.
Rename it to whatever you want (I will avoid x345SW2aqefje because it is overused)

JAME.Package = function (sName) {

//split the name by dots
var namespaces=sName.split('.') || [sName];
var nlen=namespaces.length;

var root = window;
var F = function() {};

for(var i=0;i<nlen;i++) {
var ns = namespaces[i];
if(typeof(root[ns])==='undefined') {
root = root[ns] = F;
root = root.prototype = F;
}
else
root = root[ns];
}
}

Some packages definition

We have seen how to use it with the utility functions built so far to create the animation function.
Let's see the strings and colors related functions in their package:

JAME.Package('JAME.Util.Color');
 
JAME.Util.Color = {
  rgb2h:function (r,g,b) { 
    var Num=JAME.Util.Number;
    return [Num.d2h(r),Num.d2h(g),Num.d2h(b)];
  },
  h2rgb:function (h,e,x) {  
    var Num=JAME.Util.Number;
    return [Num.h2d(h),Num.h2d(e),Num.h2d(x)];
  },
  cssColor2rgb:function (color) {
     if(color.indexOf('rgb')<=-1) {
        return this.hexStr2rgbArray(color);
     }
     return this.rgbStr2rgbArray(color);
  },
  hexStr2rgbArray:function (color) {
     return this.h2rgb(color.substring(1,3),
                       color.substring(3,5),
                       color.substring(5,7) 
            );
  },
  rgbStr2rgbArray:function (color) {
     return color.substring(4,color.length-1).split(',');
  }
};

JAME.Package('JAME.Util.String');
JAME.Util.String={
camelize: function(str) {
return str.replace(/-(.)/g,
function(m, l){return l.toUpperCase()}
);
},
hyphenize : function(str) {
return str.replace(/([A-Z])/g,
function(m, l){return '-'+l.toLowerCase()}
);
},
firstToUpperCase : function(str) {
return str.replace(/^([a-z])/,
function(m, l){return l.toUpperCase()}
);
},
trim : function(str) {
return str.replace(/^\s+|\s+$/g, '');
}
};

How do we use them?

// display backgroundColor
alert(JAME.Util.String.camelize("background-color"));
// display 255,0,255
alert(JAME.Util.Color.hexStr2rgbArray("#FF00FF"));

That's a lot of typing!
We have seen that we could create an alias very easily:

window["camelize"]       = JAME.Util.String.camelize;
window["hex2rgbArray"] = JAME.Util.Color.hex2rgbArray;

Now you can call the camelize and hex2rgbArray directly without having to worry about the namespaces!
But this is still quite cumbersome to type this! And if you want to import everything in your namespace?
Let's build a function that will allow to import everything by just specifying the desired namespace then!

The Import method

Let's see how we would like to use it first:

JAME.Import(JAME.Util.String,JAME.Util.Color,JAME.Util.Number);

So we will just specify the namespace we need and as many as we wish.
In order to allow as many parameters as needed, we are going to use the arguments keyword.
By the way, the arguments keyword is not a real array in that you cannot push, slice....

JAME.Import = function () {
//get the number of parameters
var nlen=arguments.length;
//loop thru each package/namespace
for(var i=0;i<nlen;i++) {
// get the actual package
var package=arguments[i];
//test the existence of an Export method
if(package.Export) {
//call the Export function
package.Export();
}
}
}

The definition of this function is not very hard.
We just loop thru each package and test for the Export method.
But what is this Export method??

Need some privacy!

The Export function should be defined within the packages and should define what functions can be exported as their exported name.
It is easier and safier to let the package creator defines what he/she thinks can be exported safely.
A function name can be perfectly safe within the boundaries of a package but could be too obvious once in the global scope.
Therefore, renaming the function in order to avoid conflicts by prefixing it should be up to the package author.
So let's see the Export function within the string package :

JAME.Package('JAME.Util.String');

JAME.Util.String={
camelize: function(str) {
return str.replace(/-(.)/g,
function(m, l){return l.toUpperCase()});
},
hyphenize : function(str) {
return str.replace(/([A-Z])/g,
function(m, l){return '-'+l.toLowerCase()});
},
firstToUpperCase : function(str) {
return str.replace(/^([a-z])/,
function(m, l){return l.toUpperCase()});
},
trim : function(str) {
return str.replace(/^\s+|\s+$/g, '');
},
Export : function() {
for(var method in this) {
if(method==="Export") continue;
window[method]=this[method];
}
}
};

As you can see, in that case, it was pretty straightforward as we just loop thru each method in the string package and alias them onto the window object.
Obviously, we skip the Export method that is internal to the package!
But let's say that you want to rename the trim function to JStrim in order to avoid conflict? You will have to verify if it is the trim method then change it's naming.
Or let's say that you just want to export 2 functions among 5 or 6 functions?
In order to make lifer easier and keep things DRY, we are going to create an Exporter function that will ease the export process!

The Exporter method

Let's see its definition first:

JAME.Exporter = function (oName,sPref) {

if(!sPref) sPref='';

for(var method in oName) {
if(method==="Export"
|| /^_.+/.test(method))
continue;
window[sPref+method]=oName[method];
}
}

The function accepts two parameters:
an object that can be 'this' to export everything or a literal object defining the exported function name and its original version with the package path.
And a string that defines a prefixe to put on the exported function name.
An example will help:

JAME.Util.String= {
...
   _mymethod : function() {...} // will not be exported
   Export : function() {

       JAME.Exporter(this,'JS');
       //or 
       JAME.Exporter({"hyphenize":JAME.Util.String.hyphenize},"JS");
   }
}

As you can see in the exporter function, we skip the Export function and all methods or variables that start with an underscore.
This is just a convention used in many languages to specify private variables.
Even if it is possible to simulate private variables and methods in javascript, thisw won't be the case here, unless you wrap all the code within an other function.
Beware that we do not check against variables or functions already defined in the global namespace, which means that these functions will be overwritten!
It should be easy to add a flag to set it to overwrite mode or not.

The final script

And here we are with a basic namespace simulation and exporting/importing process.
Here is the code that recaps everything seen:

JAME = function () {};
JAME = JAME.prototype = function () {};

JAME.Package = function (sName) {

var namespaces=sName.split('.') || [sName];
var nlen=namespaces.length;

var root = window;
var F = function() {};

for(var i=0;i<nlen;i++) {
var ns = namespaces[i];
if(typeof(root[ns])==='undefined') {
root = root[ns] = F;
root = root.prototype = F;
}
else
root = root[ns];
}
}

JAME.Import = function () {
var nlen=arguments.length;

for(var i=0;i<nlen;i++) {

var package=arguments[i];

if(package.Export) {
package.Export();
}
}
}

JAME.Exporter = function (oName,sPref) {

if(!sPref) sPref='';

for(var method in oName) {
if(method==="Export"
|| /^_.+/.test(method))
continue;
window[sPref+method]=oName[method];
}
}

JAME.Export = function () {
JAME.Exporter({ "Package" : JAME.Package,
"Import" : JAME.Import});
}

Conclusion

These 3 entries allowed us to experiment with namespaces in javascript!
Understanding their importances, object simulation advantages and creating functions to simplify our code and make it cleaner, organised have been seen.
Obviously, this is just a starter and many features could be added or improved.
If you have some ideas, don't hesitate to post them out!
The extension thru inheritance is not assumed here and should be developed though.
If you are interested in packages, namespaces way of managing your code, you can look at some other libraries that offer ways to deal with that:
-AJILE : library offering many import, include,namespaces functions.
-JSAN : a very good project idea that I invite you to collaborate to in anyway you can!
Happy new year!

Javascript : Simulating namespaces thru prototyping part 2

2007-12-03T23:49:00.000+09:00

In the first part, we have seen how we could simulate namespaces very basically with one function used as a container.
We have seen that namespaces allow to create clean clode, that do not interfere or polluate the global space too much.
We will see here how to extend the namespace simulation thru a simple Namespace function

Namespace thru prototype

We have seen that a simple function used as a namespace could give us a lot of advantages but the drawback was that the main function,used as a namespace, wrapped all the other functions.
And so what?
It won't have too much overhead if this function is used only once in your application, but if you 'instantiate' the 'class' several times and that it contains hundreds of line, these hundreds of lines will be kept in memory several times.
In order to avoid this, we are going to use the prototype keyword.
Every functions get a 'prototype' attached to them to which you can add further functions.
Let's see the example we used in the first entry to see what's going on :

function Arrays() {
    this.toArray = function(elm){
         var tmpArray=[];
         for(var i=0;i < elm.length;i++){
            tmpArray.push(elm[i]);
         }
         return tmpArray;
    },
    this.search = function(elm,search) {
          for(var i=0;i < elm.length;i++){
              if(elm[i]===search) return i;
          }
          return false;
    }
}
Arrays = new Arrays();
alert(Arrays.toSource());#won't work in IE.

The above code create a 'class' containing all the functions.
We then instantiate an object and see what it contains thru the toSource function.
Executing this code, you will see that everything defined within the function Arrays, used as a namespace, will be present in the object.
If you were to create several instances, each instance we hold the entire computation.
Even if you only instantiate it once,you may not need the search function though.
Here comes the prototype!
The prototype allows us to attach functions afterwards.
Let's see how it works :

function Arrays() {
    this.toArray = function(elm){
         var tmpArray=[];
         for(var i=0;i < elm.length;i++){
            tmpArray.push(elm[i]);
         }
         return tmpArray;
    }
}
oArrays= new Arrays();
alert(oArrays.toSource());

Arrays.prototype = {
    search : function(elm,search) {
          for(var i=0;i < elm.length;i++){
              if(elm[i]===search) return i;
          }
          return false;
    }
};

alert(oArrays.toSource());
alert(oArrays.search(['bonjour','aurevoir','hi'],'hi')); 
#error, function search not defined

If you execute the code, you will see that the instance oArrays of Arrays only contains the toArray function and not search function.
You also see that adding the search function to the prototype of the Arrays function doesn't change what is contained in the oArrays instance.
But on the other hand, you see that the oArrays instance doesn't contain the search function at all and will throw an error when trying to call it!

How work the prototype?

In the above code, we have done the thing in this order:

1) define the namespace Arrays with one function
2) create an instance of the Arrays 'class' called oArrays
3) Add a new object containing the definition of the search function to the prototype
of Arrays
4) call the search function on the oArrays instance

There is one thing to remember about the prototype keyword and instantiation:
only defined prototype functions will be available to the instance.
In other word, if you call the Arrays function,create an instance of it and then define a new prototype to it, the prototype won't be available to your instance, here oArrays.
Here is how we should have done to make it available to the oArrays object:

1) define the namespace Arrays with one function
3) Add a new object containing the definition of the search function to the prototype
of Arrays
2) create an instance of the Arrays 'class' called oArrays
4) call the search function on the oArrays instance

And now, you will be able to use the search function!
Why ? Basically, your program is going to be analized in a top-bottom process.
Nothing really different form other languages! But everything happens at run-time, which means that when you instantiate the class, the object will contain the information only available at that time!(only the code that has been parsed- simplified explanation).
So let's rewrite the code so that we can access what we need:

function Arrays() {
    this.toArray = function(elm){
         var tmpArray=[];
         for(var i=0;i < elm.length;i++){
            tmpArray.push(elm[i]);
         }
         return tmpArray;
    }
}
oArrays= new Arrays();
alert(oArrays.toSource());

Arrays.prototype = {
    search : function(elm,search) {
          for(var i=0;i < elm.length;i++){
              if(elm[i]===search) return i;
          }
          return false;
    }
};
oArrays2= new Arrays();#re-instantiate the class here!
alert(oArrays2.toSource()); #same result as oArrays, just the toArray definition
alert(oArrays2.search(['bonjour','aurevoir','hi'],'hi')); #return 2

As you can see by creating a new object, oArrays2, after the prototype definition, you will be able to use the search function!
Even more!
You see that the instance, oArrays and oArrays2 just hold the toArray function!
In fact, by default, when calling a function on an instance (call a method in that case), javascript will try to see if it can find the definition within the prototype and goes back to all the prototype chain if necessary!
Thanks to the prototype chain, we can now create a simple empty namespace, ie a function and then attach the functions thru the prototype!
You will be then able to load only what you really need!

How to use namespaces : Choosing the root

In javascript, there is no real standard defining all the libraries and namespaces in use (like CPAN for perl - we will talk about jsan later).
In order to be sure that your functions and libraries are not going to polluate the global space too much , or enter in conflict with an other library, you should place everthing into a base namespace.
This namespace can be seen as the root of the tree or as the root of folders on your hard drive or an id, like an IP address.
We have been developping an animation function that had many helper functions in the global namespace.
We will then use the namespace concept to clean this out and play nice with other libraries!
The hardest thing to do is to find the root name, it should be very unique and we should make it not too evident!
Alright, we are going to use JAME, which is a name that I have found right now, so don't be to hard on me!
This stands for : Javascript Animations Made Easy
As you can see, this is not a too evident name like Animation, Tween...
As far as you are sure that your root namespace is not too evident, then you can always do:

JAME.Util.Strings
JAME.Util.Arrays

These are evident names, almost standards, but they are all attached to the JAME root namespace that protects them!

The Root Namespace by hand

We have seen that JAME is going to be the root of our namespace tree that is why it is not necessary to have any real definitions into it, we should see it as a place holder.
We can create the namespace very easily then:

JAME = function() {};

And here we are!
But we also know that we will need to extend the JAME namespace thru its prototype and not directly as we want to be able to load only what we need.
Therefore, we shoud do it this way:

JAME = function() {};
JAME = JAME.prototype=function () {};

Now any elements add to JAME will be added to the prototype.
We want to create an other namespace within JAME that will contain all the helper functions we've been using so far.
Therefore,we will add the Util namespace, that is an other place older.
So we just create an empty namespace here too.

JAME.Util = function() {};
JAME.Util = JAME.Util.prototype= function() {};

And now we have the JAME.Util namespace.
But as you can see this is quite a lot of typo!
We are going to create a function that will deal with creating namespaces for us.

The Namespace function

Before we define the function, we will see how to use it:

Namespace("JAME.Util.Strings");

As you can see this is pretty straightforward!
We just write a string containing each namespace seperated by a dot.
Let's see how to create a one depth namespacing function, that is just going to wrap what we have done above:

function Namespace(name) {
    window[name]=function() {};
    window[name]=window[name].prototype=function() {};
}

So now you can do:

Namespace("JAME");
JAME.Util=function() {};

We just put the name onto the window object and then create the shortcut to work directly with the prototype of the name.
If we follow the above namespace, in order to add a namespace of depth 2, we should write:

function Namespace(name1,name2) {
    window[name1]=function() {};
    window[name1]=window[name1].prototype=function() {};
    window[name1][name2]=function () {};
    window[name1][name2]=window[name1][name2].prototype=function() {};
}

you can see that we can add the depth thru [][].
If we had 3 elements, it will be [][][].
Let's create a general function that will deal with n depth elements.

function Namespace (sName) {

 var namespaces = sName.split('.') || [sName];
 var nlen = namespaces.length;
 var root = window;
 var F = function() {};

 for(var i=0; i < nlen; i++) {
  var ns = namespaces[i];
  if(typeof(root[ns])==='undefined') {
   root = root[ns] = F;
   root = root.prototype = F;
  }
  else
   root = root[ns];
 }
}

What's going on?
First we split our string by dots or put the sole name in an array.
Then we create an alias to the window object.
Then we loop thru each namespaces.
We first check that the namespace doesn't already exist.
If not, we assign F to the root and then assign the prototype to the root again.
If we do it step by step:
First loop root = window so:
root = window[namespace[0]] = F; window[root] = root.prototype = F; Then second loop:
root = root[namespace[1]] = F; window[root] = root.prototype = F; ...
And now you can create namespaces very easily!

Namespace("JAME.Util.Strings");
Namespace("JAME.Util.Colors");
Namespace("JAME.Util.Numbers");

Let's see all the helper functions we have seen so far:

function camelize(str) {
  return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
}
function hyphenize (str) {
  return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
}
function firstToUpperCase(str) {
  return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
 }
function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

These are all the helper functions related to strings we've been using so far to create the animation functions.
We are now, just going to put this into the JAME.Util.Strings namespace :

//in the Util folder, we add Strings.js 

//we define the namespace
Namespace("JAME.Util.Strings");


JAME.Util.Strings={
camelize: function(str) {
   return str.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
},
hyphenize : function(str) {
  return str.replace(/([A-Z])/g, function(m, l){return '-'+l.toLowerCase()});
},
firstToUpperCase : function(str) {
  return str.replace(/^([a-z])/, function(m, l){return l.toUpperCase()});
},
trim : function(str) {
   return str.replace(/^\s+|\s+$/g, '');
}
};

Now let's define the colors and numbers:

//in the Util folder, we add Numbers.js 

//we define the namespace
Namespace("JAME.Util.Numbers");

JAME.Util.Number= {
    d2h : function(dec) { 
       return dec.toString(16);
    },
    h2d :function(hex) { 
       return parseInt(hex,16);
   },
   randomize : function(min,max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
   }
};

And the colors:

Package('JAME.Util.Colors');

JAME.Util.Colors = {
rgb2h:function (r,g,b) { 
    return [JAME.Util.Numbers.d2h(r),JAME.Util.Numbers.d2h(g),JAME.Util.Numbers.d2h(b)];
},
h2rgb:function (h,e,x) {  
     return [JAME.Util.Numbers.h2d(h),JAME.Util.Numbers.h2d(e),JAME.Util.Numbers.h2d(x)];
},
cssColor2rgb:function (color) {
if(color.indexOf('rgb')<=-1) {
   return this.hexStr2rgbArray(color);
}
   return this.rgbStr2rgbArray(color);
},
hexStr2rgbArray:function (color) {
return this.h2rgb(color.substring(1,3),color.substring(3,5),color.substring(5,7));
},
rgbStr2rgbArray:function (color) {
return color.substring(4,color.length-1).split(',');
}

};

We are not going to see them all for now but I guess you got the picture!
Now you can use them this way:

JAME.Util.Strings.trim(str);

So you may think, and you are right, that it is a lot of typo!
Indeed it is but you should not decide for the end user what to put in the global space, the end user can do it very easily:

window["trim"]=JAME.Util.Strings.trim;
trim(str);

The user can give it an other namespace if he/she wants!
It's up to the context they're in!
You should avoid functions/variables in the global namespace.
If you use the global namespace, be sure to make a list available to the end user!

Conclusion

We have seen how to create a very basic Namespace function (note namespace and package are reserved words so you can choose either Namespace or Package and be sure it will work).
This allow us to keep our code clean, structured and if we think of each namespaces as being folders as we have been doing above, we will be able to automaticly create a javascript file containing only the contents you have choosen!
We can import everything in the global namespace or rename the namespace very easily but we need to offer a tool to import namespaces.
Inheritance within the namespace hierarchy is not handled yet.

We will see in the next entry how to create an Import function that we'll allow to import functions by controlling what's going on(what if you have split in Arrays and split in Strings and that you import both in the global namespace??)

Javascript : Simulating namespaces basic approach, part 1

2007-12-02T22:40:00.000+09:00

we have seen in javascript scoping : things to keep in mind, that the window object was the global space englobing everything from variables to functions.
We have also seen that we could create private scoped variables and functions. Due to the 'last in, win' policy, we have also specified that we should avoid putting everything in the global space as it could lead to unexpected bugs.
We will see in this entry what are namespaces and how to simulate them in javascript.

Namespaces ?

We have seen that the window object was the global space.
We could also say that window is the name of a space, that happens to be the global one.
It doesn't really help?
Ok, in order to explain the namespace concept we are going to take an everyday life example:
You are in charge of two sports club named respectivly, Football and Basketball.
Every players receive an id and each ids are not related to each club.
If somebody came to you asking for the player 340, you will not be able to know which player it is.
if the same person asked for Football 340, you will know where to go.
Football and Basketball are therefore the names that represent a space in which you keep some related information.
the id 340 in the Football namespace doesn't represent the same player with the same id in the Basketball namespace but they do represent a person.

You could think of folders in your computer:

/usr/home/Football

and an other folder:

/usr/home/Basketball

Each of them could have a file called list.osd.
You won't have any problem as long as the files are located in different folders.
You can think of folders and their path, as namespaces too!
This is so true to life that some languages, like perl, translate packages (a way to create namespaces) into folder path!
we will see that it is a good idea and use it too in the next entry!

Namespace for what?

As you can see namespaces are a way to keep information in compartimented slot.
you can have the same id, the same variable or function names if you want:they won't run into each other as long as they are in their related namespace.
In javascript, if you don't specify anything, your variable or function will be attached to the window namespace.
If you load two libraries that define the same function name but that they don't do the same thing, it will be very hard to determine where the problem is. You might not even know that there is such a function and wonder why you don't get what you expect.

Let's see a stupid example:

// somewhere in your own set of functions
// take a pseudo array and turn it into a real javascript array
// something you could get from a DOM function
function toArray(elm) {
     var tmpArray=[];
     for(var i=0;i< elm.length;i++){
           tmpArray.push(elm[i]);
     }
     return tmpArray;
}

//somewhere in an other library, internal use:
//change a string into an array
function toArray(str) {
     return str.split();
}

Well,,, I guess you get the picture!
If you have several libraries and that you don't protect yourself from some global space pollution that may occur, you're good for hours of debugging!

Using namespaces is also a very good way to keep your code clean and organized!
Here we had Football and Basketball but in programming you could have Utilities.Strings, Utilities.Arrays,CSS.Border...
Naming and structuring your code in sub parts will allow to track easily bugs and make your life easier!
let's see how we can simulate a basic namespace.

First approach : prefix

A very easy way to simulate namespace is to simply prefix all your functions. This is a method that you can often find in language that do not support namespaces, like php for example:

__MyLibraryToArray();

Here you will prefix all your functions with '__MyLibrary'.
To some extend, this is a very basic and simple way to simulate namespace.
clash risks are decreased and one can easily see where the function comes from.
But this can start to be very cumbersome when your function names reach 30 letters length!

__MyLibraryUtilElementsToArray();

If you use this method, you are sure to type a lot and if you want to change the name..., no, you don't change your name!!

We are therefore going to see how we can make things a little bit simpler and more expandable with javascript objects!

Second Approach : functions as objects

We have seen in javascript scoping : things to keep in mind that functions allow to scope variables and other functions within them.
We could then define some private functions not accessible from outside of the function and public methods that we could call on the function name:

function Elements() {

    this.toArray = function(elm){
         var tmpArray=[];
         for(var i=0;i< elm.length;i++){
            tmpArray.push(elm[i]);
         }
         return tmpArray;
    }
}
//example of use:
var Elements = new Elements();
Elements.toArray(elm);

Let's say now that you want to put several functions that will deal with arrays, you can just rename the function to keep things coherent:

function Arrays() {

    this.toArray = function(elm){
         var tmpArray=[];
         for(var i=0;i< elm.length;i++){
            tmpArray.push(elm[i]);
         }
         return tmpArray;
    }
    this.search = function(elm,search) {
          for(var i=0;i< elm.length;i++){
              if(elm[i]===search) return i;
          }
          return false;
    }
}

//example of use:
var Arrays= new Arrays();
Arrays.toArray(elm);
Arrays.search(elm2,'hi');

but how do you do with all the code that refers to Elements.toArray??
Well, using functions to create namespaces is very powerful as you just need to create an alias that joins the old namespace with the new one:

Elements=Arrays;

And you can know create legacy code if necessary with just one line!
Something that simple prefixing will not allow you.

You could even be lazy and because you know that you are not going to use some other libraries, you want to access the function directly:

var Arrays=new Arrays();
window['search']=Arrays.search;
//now you can call it directly:
search(elm,'hi');

Here again, this shows how powerful and useful namespaces can be!

Conclusion

We have seen a very basic way of simulating namespaces in javascript thru a simple function used as a container for several related functions.
Using namespaces allow to make your code clean and organized but yet flexible as we have seen above!
This obviously allows you to protect your code or people using your code from global space pollution which can be very handy when dealing with several libraries!
Obviously, the above method is far to be the best one as we have put everything in one function.
Each time you will call the function or someone does it, all the computation within the function will be kept in memory. If you are sure that you will call the namespace just once, that can be ok but you never know!
We will see in an other entry how we can extend our namespaces functionnalities with objects!

Javascript scoping : Things to keep in mind

2007-11-17T11:00:00.000+09:00

Because scope in javascript can be the source of very hard to track bugs, we will see how work the variable scoping in javascript. Depending on your programming languages background (block level scoping or not), you may have some surprises.

Defining the global space

In most of the actual browsers, the window object is the global space that contains all the core functions of the language and all the variables, functions that will be defined in it. In perl, this will be the 'main' namespace.

If you declare a variable, you will see that you can call it on the window object:

var mywidth=100;
myheight=200;
alert(window['mywidth']); // returns 100
// you could also write it like so : window.mywidth

alert(window['myheight']); // returns 200
alert(window['myheight']===myheight); // returns true

Calling variable or functions on the window object can be very useful when you take a function name as a string from an other function!
Let's see an example:

function getFunction(func) {
      func();
}
getFunction('myalert');

function myalert() {
   alert('I am going to fail!');
}

The above example will fail because we are trying to resolve what javascript considers as being a string into a function and obviously, this is not going to work!
We could then try to eval the string and change the getFunction:

function getFunction(func) {
     var ref=eval(func);
     ref();
}

This will work but eval'uating the string into a function has some overhead and security problems that we could get rid off by calling the function on the window object directly!

function getFunction(func) {
    window[func]();
}

The first example will then work!
Obviously not everything is accessible from the window object as we can induce scoping in javascript at a function level.

to var or not to var ?

In javascript there are two ways of defining a variable, with the keyword var or without!
The main thing to understand is that contrary to the abbreviation, var doesn't mean you are declaring a variable, it will indicate the scope of your variable!
(my keyword vs our keyword in perl) We've been using both notations in the above examples and we see that variables define in the global space do not have their scope change.

//the following notations are the same:
var myheight=100; 
myheight=100;
alert(window.myheight==100);//return true

In the global namespace, the var keyword doesn't have any influence on the scoping of the variable, therefore we can do the following:

var myheight=100;
mywidth=100;

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth);
}

Variables defined in the global namespace will be accessible from within all the functions because they are hold in the window object.
The var keyword starts to be interesting only once use in a function context.
We can see in the example below that the use of var will change the scope of the variable:

var myheight=100;
mywidth=100;

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth); 
 var mycolor='#000000';
 mybackgroundColor='#FFFF00';
}
function getColorAndBackgroundColor() {
   alert(mycolor+' and '+mybackgroundColor);
}
getwidthAndHeight(); //alert 100 and 100
getColorAndBackgroundColor() //alert undefined and #FFFF00

Here you need to be very careful to the getWidthAndHeight way of defining the variables.
the mycolor variable is defined using the var keyword while the mybackgroundcolor doesn't.
In fact, when a variable is defined without the var keyword within a function, in the bakcground the following will be interpreted:

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth); 
 var mycolor='#000000';
 window.mybackgroundColor='#FFFF00';
}

Every variables that are not defined with the var keyword in a function context will be assigned to the window object and therefore becomes global variables too.
That's why you should always be aware of when use or not use the var keyword in a function.
A variable defined with the var keyword in a function is not accessible from outside, that's why we can refer to it as a private variable!
You can also create private functions within a function thanks to closure:

function getwidthAndHeight() {
 var mycolor='#000000';
 var mywidth=function () {
     return mycolor;
 }
 alert(mywidth());//alert #000000
}
//outside of the function
alert(mywidth()); // error!

The following variables, one holding a string and one a reference to function will not be accessible from outside and are private to the function they are defined in!

Reminder : Avoid global space variables

Javascript follows a very basic rule when use within a browser:
Last in, win!
Putting variables and even functions in the global space is to avoid as if you have the same variables or functions defined into 2 differents javascript files, the last javascript file will 'overwrite' the precedent functions and variables!
Therefore you might not be working with the function you were thinking of.
It is not very relevant if you only use two or three functions but when you add some libraries from outside and if they put functions or variables in the global name space, you will have a hard time to understand why you're not getting what you were expecting, thinking there is a bug in your function!!

Block level scoping

There aren't!
You have to be aware that variables define within the scope of block statement (for, while, if...) will be accessible outside of this block:

if(mywidth==100){
   var myheight=200;
}
alert(myheight); // alert 200

This behavior is not true in all languages where a variable defined within a scope will end its life once the block is terminated.
There is one thing you have to be aware of:

for(var i=0;i<=100;i++) {
   mycolor=i;
}
for(; i<50;i++) {
   mywidth=i;
}
alert(mycolor); //100
alert(mywidth); // error

The following might not give you back what you could expect!
defining the i variable with the var keyword in the for loop doesn't give the i keyword a scope to that loop.
Therefore when entering the second loop, i is equal to 100 and the second loop will never start!
In order to avoid this kind of problem, you should always use different name for counters:

for(var i=0;i<=100;i++) {
   mycolor=i;
}
for(j=0; j<50;j++) {
   mywidth=j;
}

This will avoid some unexpected bugs and make your life easier!
i,j,k,l,m,n you can just increment the name according to the alphabet letters.

Functions and scope

We have seen that the var keyword has only a meaning within the context of a function.
Therefore we can have privates and global variables if we want.
But functions allows to define an other scope: the name of the function!
We have seen that all variables define within a function without the var keyword were assigned in the background to the window object.
That's fine but let's say that you want to create clean code and avoid global variables but that you would like to use the variable from outside the function, how could we do?
In fact, outside of a function, in the global namespace, we can give to the window object an other name, an other keyword : this.
The this keyword is very important in javascript and can be confusing at the beginning but let's see the following code:

mycolor=100;
alert(this.mycolor);//return 100
alert(window.mycolor);//return 100
alert(window===this); return true

The this keyword in the global namespace is equal to the window object!
Functions allows us to use the this keyword within them but in that case, the this keyword do not refer to the window object anymore but to the function name!
But be careful, the way you call the function can switch back the this keyword to the window object!

function changeColor() {
  alert(this);
}
changeColor(); // object
new changeColor(); // object Object

Javascript is telling that the first call to the changeColor refers to a native object, that is the window object while the second object is a user defined Object, that is changeColor.
We can verify that the this keyword refers to the function name with the instanceof keyword that tells us if something corresponds to a certain name:

function changeColor() {
  alert(this instanceof changeColor);
}
changeColor(); // false
new changeColor(); // true

This may sound a little bit confusing but using the new keyword will create in the background for us, an object (like the window object but not native) and bind this object to the name of the function.
(In perl, you 'bless' an hash with its package name to get an object)

What can we do with this?
Well, now, we are able to create variables scoped to the name of the function!Giving us 3 types of scope for variables:

function scopeIsFun() {

    globalVariable=100;

    var privateVariable=200;

    this.publicVariable=300;

    this.publicMethod=function() {
         alert('You can call me on the scopeIsFun object!');
    }
    var privateMethod=function() {
        alert('you cannot call me from outside!!');
    }
}
alert(globalVariable); // 100

alert(privateVariable); //error

alert(scopeIsFun.privateVariable); //error

alert(scopeIsFun.publicVariable); // 300

alert(publicVariable); // error

alert(scopeIsFun.publicMethod()) // 'You can call me on the scopeIsFun object!'

alert(publicMethod()) // error

alert(scopeIsFun.privateMethod()); // error

alert(privateMethod()); // error

Conclusion

Javascript scoping may seem weird at the beginning but it can be a very powerful tool to build nice libraries that won't walk on other librairies.
The different ways to scope a variable or methods within a function is the base that will allow to simulate namespace in javascript and the base of object oriented programming.
We will see what is and how to simulate namespace by using what we've seen here in a next entry!

Javascript Animation : Implementing Margin and Padding

2007-11-13T23:18:00.001+09:00

After changing our main animation function to a pluggable one, thanks to the strategy associated with the factory pattern, we will see how ce can implement multipart css values like margin and padding.

Differentiating the settings

Many css properties can be written with 3 to 4 values, each of them setting a particular sub property.
The margin and padding properties are one of those and we will just see what each setting means concretly.

The clock wise cycle

As you know a div or a block element can be resumed to a simple square.
This square has a top, right, bottom and left property.
If you think of a square and put each sub properties on their position, you will see that the above describes the movement of a clock wise.
let's see a simple div:

As we can see we have a different color for each line of the square, if you follow each line from top in the clock wise order, you will get:

top
right
bottom
left

Well when you set each properties for the padding or margin property, each value will set the sub property in this order.

margin:1px 2px 3px 4px;

If you want to set the same value to all the sub properties, you just write it once:

margin:1px

If you set only 2 properties then:

margin:1px 2px;

Well, this will distribute each value in this order:

margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;

And if you set 3 properties?

margin:1px 2px 3px;

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;

So, as you can see, it follows a pattern that you can apply to all properties taking up to 4 values.
We can resume as follow:

1 value  [TOP  RIGHT BOTTOM LEFT]
2 values [TOP BOTTOM][RIGHT LEFT]
3 values [TOP][RIGHT LEFT][BOTTOM]
4 values [TOP][RIGHT][BOTTOM][LEFT]

Representing the unusual clock wise

Now that we know what's going on exactly, we just need to find a way to express the same rule in javascript.
First let's create a literal array containing each sub property:

var subProperties=['Top','Right','Bottom','Left'];

If you remember the above explanation, when you set only one value, each sub properties will be assigned this value.
Let's create 4 javascript variables representing each sub properties set in the example above:

var top    =1;
var right  =1;
var bottom =1;
var left   =1;

If we set 2 values, we will get:

var top    =1;
var right  =2;
var bottom =1;
var left   =2;

if we set 3 values, we will get:

var top    =1;
var right  =2;
var bottom =3;
var left   =2;

And if we set 4 values:

var top    =1;
var right  =2;
var bottom =3;
var left   =4;

We can get from there, a litteral array that will be in relation with each sub properties:

var subProperties=['Top','Right','Bottom','Left'];
var subPropertiesValues=[top,right,bottom,left];

If you understood the above, everything will be fine!
It's time to go back a little and see how to separate each values!

Separating the values

We have seen how the values could be written and we know that we have a numeric strategy that handles single numeric-like value for us.
What does it mean?
If we set the margin or padding with only one value, the numeric strategy will do its work!
It means that we do not really have to deal with this case!
Let's see again a margin set with several values:

margin:1px 2px 3px 4px;

Well, what we need to do, is separate each value, set the right sub property and send everything to our numeric strategy!
Let's split the string:

function splitMultiPart(str){
 return str.split(/\s/) || [];
}

Our function will split the string by looking for a space and return an array.
That was easy!
Our array can have different length according to the number of value set.
If there is only one value, it will be of 1 length.
If there is 4 values, it will be a 4 length array.
But we know that an array starts from 0 to access its value.
We can write the following:

var top=0,right=0,bottom=0,left=0;
if(elm.length==2) top=0,right=1,bottom=0,left=1;
if(elm.length==3) top=0,right=1,bottom=2,left=1;
if(elm.length==4) top=0,right=1,bottom=2,left=3;

Here we are not setting the value of each sub properties, but we are simply setting the position of the value in the array we got from the split!
If there is only one value, each sub properties, top, right, bottom, left will be set with the value contained in the unique slot, slot 0.
If there is 4 values, each sub properties, top, right,bottom,left will be set with the value contained in each slot 0,1,2,3.
Let's see the function:

function setMultiPart(totalframes,frame,prop,props,easing){
    
  //split the string of each properties
    var begin  = splitMultiPart(props[prop].start);
    var end    = splitMultiPart(props[prop].end);
    var bezier = (props[prop].bezier)? splitMultiPart(props[prop].bezier):[];
   
  //define each array slot according to the number of values set
    var top=0,right=0,bottom=0,left=0;
    if(values.length==2) top=0,right=1,bottom=0,left=1;
    if(values.length==3) top=0,right=1,bottom=2,left=1;
    if(values.length==4) top=0,right=1,bottom=2,left=3;

 //put each value into one array
    var v = [top,   right,  bottom,  left];
    var p = ['Top','Right','Bottom','Left'];
    var propTmp='';


    for(var i=0;i < v.length;i++) {
          //create one property ie, marginTop,marginRight...
             propTmp  = prop+p[i]; 
          //assing each value to the object
             props[prop].start  = begin[v[i]];
             props[prop].end    = end[v[i]];
             props[prop].bezier = bezier[v[i]];
           //then send the property to the numeric strategy!
             NumericStrategy(totalframes,frame,propTmp,props,easing);
   }
}

As you can see, this is not very hard!
We just split the string by their space, assign each value to their sub property (margin-top,margin-left) and then let the calculation to the numeric strategy!
Now we just need to create wrappers function called Margin and Padding as our intelligent factory is going to call them:

function Margin(totalframes,frame,prop,props,easing) {
   setMultiPart(totalframes,frame,prop,props,easing);
}
function Padding(totalframes,frame,prop,props,easing) {
   setMultiPart(totalframes,frame,prop,props,easing);
}

And we are done!

Conclusion

In this entry, we have seen how we could extend our animation function by extending the css properties it can handle.
As you can see we only focused on resolving the multipart redistribution to each sub property without changing the internal behavior of the animate function!
We are now able to extend when needed the css properties we can handle in a pluggable manner!
There is no example of the actual addition as we will see in a next entry how to change the parameters we send to the function and in the same time add the border property!

Javascript Animation : Strategy and Factory Pattern at the rescue (8)

2007-11-07T00:16:00.002+09:00

In just 7 entries, we've seen how to start with a basic easing effect dealing with 2 or 3 css attributes at a time and end up with a rich animation function able to deal with time, frames,manipulate several properties at once in a cross browser way, animate colors, create several easing in/out effects and deviate the path thru a bezier curve! but...

The main drawbacks is that we were adding new possibilities directly into the animate function with the help of if...else statements...
If it may be a good work around for a time and for few properties, when the css properties you want to handle grow up, that new css properties pop up, having to add if... else if... else statements in the core function can become cumbersome:
- you may have to handle many new css attributes
- you will need to add more and more if statements, making the function hardly readable - even if you use just 10 percents of the function capacities, you will have to load the entire function - if the code has been working for a while, adding directly in the core can bring bugs, unexpected chaining effects...

In other word, the code will be a mess!!

Here comes the strategy pattern associated with the factory pattern to the rescue !
we will see how to create an expandable function that can be plugged from outside to add new properties like margin or padding thanks to this pattern!

Design pattern what ?

Design patterns are common solutions to common problems.
We have seen above what kind of problems our program could lead to in the long run.
In fact, our program is a solution to the problem but unfortunately not the better one!
The gang of four, authors of design patterns, have brought to us many solutions to many common problems.Solutions thought and re-thought, try and retried to end up to be a 'design pattern'. If you want, a kind of solution template for a recurrent problem !
They all relate to object oriented programming but we will see that we can use the concept behind the patterns in a procedural way too.

Strategy pat... what ?

We have seen that we had to change our effect calculation strategy according to the value we got:
- we had a specific calculation strategy for a simple numeric value like 12px or 1 that could be resumed to simple numbers (12 instead of 12px) or
- we had an other specific calculation strategy for a string that contains the numeric value in a different format like the colors #FF00FF or rgb(255,0,255)!
In order to face this divergence we just added an if statement to handle numeric values and colors.
By doing so, we were aware that the function was becoming messy... hard to read, hard to maintain and not expandable as we could wish.
Let's say that we know want to manipulate margin or padding...
We can see their value structure:
margin:12px;
margin:12px 1px;
margin:12px 1px 5px;
margin:12px 1px 5px 8px;

The same for the padding!
We face 4 different values in one attribute and the number of value changes the sub attribute they relate to !
We could do this at first:

if(numeric) {
//calculation
}
else if (color) {
//calculation 
}
else if (multi) {
//calculation
}

I have shorten up the code but I guess that you can see that if else if else statements (even if disguised under a switch statement!!) is far to be the most expandable way of doing it!
Is there a way to change of strategy automagicly without even having to specify it?
Well, there is!

The Strategy pattern

The strategy pattern allows to change the behavior of part of an algorythm in a class or in our case in a function!
Basically we are going to put outside of the function each strategy in order to keep our core function clean and easy to maintain.
By putting outside the calculation, we will also be able to add new strategies very easily!
Let's see the actual function first:

function animate(elm,props, duration, fps,easing) {

 duration = (duration) ? parseFloat(duration) : 1000;
 fps      = (fps)      ? parseFloat(fps)      : 20;
 easing   = (easing)   ? easing               : linearEase;

 var interval    = Math.ceil(1000/fps);
 var totalframes = Math.ceil(duration/interval);

 for(i=1;i <= totalframes;i++) {
   (function() {
      var frame=i;
      displacement=function() {
          for(var prop in props){
              if(!/olor/.test(prop)) {
                  var begin = props[prop].start*100;
                  var end   = props[prop].end*100;
                  var bezier = props[prop].bezier*100;
                  var actualDisplacement=
                  easing(frame, begin, end-begin, totalframes);
                  if(bezier) 
                    actualDisplacement=
                    QuadBezier(frame,actualDisplacement,end,bezier,totalframes);
                    setStyle(elm,prop,actualDisplacement/100;
                  } else {
                    var b = hexStr2rgbArray(props[prop].start);
                    var e = hexStr2rgbArray(props[prop].end);
                    var rgb=[];
                    for(j=0;j<3;j++) 
                    rgb.push(parseInt(easing(frame, b[j], e[j]-b[j], totalframes)));
                    setStyle(elm,prop,'rgb('+rgb.join(',')+')');  
        }
   }
       }
       timer = setTimeout(generalProperty,interval*frame);
   })();   
 }
}

huh, it's a pretty long function!
We first do some initialisation then some calculation for the entire function then we calculate the animation within a loop.
In order to change our calculation strategy according to the property, we check to see if we have a color and if not we switch to the other one.
we see that this won't work with the margin property anymore...
In order to add the margin,padding calculation strategy within the function we will have to change the way we identify the type of the incoming property, which could lead to errors and eventually, a function that you won't be able to maintain and understand.
Therefore, let's do a simple thing: put outside each strategy!

Identifying the strategies

We have two ways of calculating the property : one for the numeric values and one for the strings that contains an hexadecimal color code.
We can then create two helpers functions:

function NumericStrategy(totalframes,frame,prop,props,easing) {
    var begin  = props[prop].start*100;
    var end    = props[prop].end*100;
    var bezier = props[prop].bezier*100;
    var actualDisplacement=easing(frame, begin, end-begin,totalframes);
    if(bezier) {
      actualDisplacement=QuadBezier(frame,actualDisplacement,end,bezier,totalframes);
    }
    setStyle(elm,prop,actualDisplacement/100;
}
function ColorStrategy(totalframes,frame,prop,props,easing) {
   var b = hexStr2rgbArray(props[prop].start);
   var e = hexStr2rgbArray(props[prop].end);
   var rgb=[];
   for(j=0;j<3;j++) {
        rgb.push(parseInt(easing(frame, b[j], e[j]-b[j], totalframes)));
   }
   setStyle(elm,prop,'rgb('+rgb.join(',')+')');
}

The numeric function will be in charge of working with numbers and therefore allow to handle many css properties : height, width, opacity, font-size,top,left...
We consider a number being a unique decimal number followed by its unity.

width:120px,
top:-100px,
opacity:.9

All these properties can be resumed to a unique number.
A margin or padding property is not considered a unique number but a property composed of serveral numbers, that the above function could handle individually.
The Color function is in charge of calculating the value for a string written in an hexadecimal way and defining a color.
This one is rather specific to one type of property but we can use it for color, background-color.
For now, there isn't that big changes, we have just put outside the calculation for each strategy, making the core function a little bit easier to understand but still unable to deal with margin or padding.
Before we go ahead, I shall show you how the strategy pattern does really look like as defined and how it will be used in practice in general:

var prop={
    color:{start:'#FFFFFF',end:'#0000FF'},
    'background-color':{start:'#FF0000',end:'#00FF00'}
};
animate(elm,prop,1500,25,easeInOutBounce,ColorStrategy);
var prop={
    width:{start:'150px',end:'20px'},
    top:{start:'0px',end:'-100px'},
    opacity:{start:0,end:1}
};
animate(elm,prop,1500,25,easeInOutBounce,NumericStrategy);

In that case, there won't be any switch of strategy in the function like we used to do at the beginning, the function will just apply the strategy given as a parameter in the function, like we did for the easing functions.
This is the usual basic way of implementing the strategy pattern but as you can see this is not very useful!
Now you can only animate one type of property at a time and you have to be aware of the strategy to apply...This is not what I will call a user friendly programming interface!
We need to keep the interface easy to use and hide all the process from the end user: the user shouldn't have to know that we change our strategy to calculate the property and the user should obviously not even know the existence of the 2 strategy functions!
In general, in a object oriented programming concept, this is what we call encapsulation or putting everything in a box that hides all the process to the end user.
In this regard, a function is the core, the basic tool you can use to create encapsulation!
instead of writing again and again the same calculation everywhere in your program, you put the calculation in a function, give it an easy to understand name and here you go, you encapsulate the process!
Our first approach, which was to switch the strategy in the function was a good way of keeping encapsulation.
So let's go back a little and keep the encapsulation by having the switching process between the strategies in the function, by using a simple if... else statement:

if(/[0-9]+/.test(parseInt(start)) && !/\s/.test(start)) {
 NumericStrategy(totalframes,frame,prop,props,easing);
} else {
 ColorStrategy(totalframes,frame,prop,props,easing);
}

We have seen that looking for a property containing the word color to switch between numeric or color strategy is not going to work with margin and padding.
Instead we are going to change our split strategy!
We will be looking for what we consider as being a numeric value and everything else! We first check to see if the parseInt value result in a number.
If parseInt can't find a number, it will send back the string,NaN, which stands for Not a Number.
But the margin will be considered as a numeric value so we need to look for any space in the string, if there is, we know that it's not something that our numeric function will be able to handle so we let the ColorStrategy does its works.
This is a little bit naive as it might in fact be the margin or padding or even worse, something we didn't think about!! and our function will crash...
But for now, let's go back to the end user and see how it works:

var prop={
    color:{start:'#FFFFFF',end:'#0000FF'},
    'background-color':{start:'#FF0000',end:'#00FF00'}
    width:{start:'150px',end:'20px'},
    top:{start:'0px',end:'-100px'},
    opacity:{start:0,end:1}
};
animate(elm,prop,1500,25,easeInOutBounce);

As you can see, this is a little bit easier for the end user!
It doesn't have to worry about the type of the property he/she used and therefore, keep the process very easy.
We have gain in the background an easier function to read and debug as we have put outside the calculation. let's see how the function looks like now:

function animate(elm,props, duration, fps,easing) {

      var duration    = (duration) ? parseFloat(duration) : 1000;
      var fps         = (fps)      ? parseFloat(fps)      : 20;
      var easing      = (easing)   ? easing               : easeOutBounce;
      var interval    = Math.ceil(1000/fps);
      var totalframes = Math.ceil(duration/interval);
      var Animator    = new Animate();

      for(var i=1;i <= totalframes;i++) {
         (function() {
     var frame=i;
            var setAnimation=function() {
     for(var prop in props){
                       var start=props[prop].start;
                       if(/[0-9]+/.test(parseInt(start)) && !/\s/.test(start)) {
                           NumericStrategy(totalframes,frame,prop,props,easing);
                       } else {
                           ColorStrategy(totalframes,frame,prop,props,easing);
                       }
     }
            }
            var timer = setTimeout(setAnimation,interval*frame);
        })();   
     }
}

As you can see, the function is shorter and as we have put outside the calculation into functions with easy to understand name, we can almost understand what's going on without having to think too much!
We can now change the numeric or color function without fearing to create bugs in the core function!
But if maintainability has been improved, our function is still unable to deal with margin or padding!
If we want to do so, we will need to go in the function, change our if... else statements, with all the problemes this could bring.
We should put this switch between strategy outside and use a function to wrap this, a function that will be in charge of building the right calculation, the right strategy, a kind of factory!

The factory pattern

You've been using the factory pattern all the time without even knowing it!
If we go back to the source and think of what is a factory, we could define it as something taking a raw element or several raw elements to output something that we can use.
When you write a function that changes an hexadecimal color string into an array of 3 numeric values, you are creating a factory: it takes a raw string that you can't use and change it into something usable and valuable for you!
In our case, the factory will be in charge of defining the proper strategy for the css element it receives and call it to have our final product in every case: a number to which we can apply a computation and therefore create an animation.
The definition of our strategy factory is very easy for now, we just wrap the if else statements in a function:

function strategyFactory(totalframes,frame,prop,props,easing) {
     var start=props[prop].start;
     if(/[0-9]+/.test(parseInt(start)) && !/\s/.test(start)) {
         NumericStrategy(totalframes,frame,prop,props,easing);
     } else {
         ColorStrategy(totalframes,frame,prop,props,easing);
     }
}

This is one way of implementing the factory pattern in a procedural way, the basic and easy way.
Now, we will have to change the strategyFactory instead of the animate function, which is a little improvement but can we make things easier?
Of course we can!
Increasing the number of if... else statements, turning them into a switch statement to make it a little bit more readable won't change the fact that you will have to change the function everytime a new property you didn't think of appears.
If someone wants to add a new property, he/she will have to create a function and then go into the strategyFactory so that it can handle the new feature.
In short, nobody will try to extend your function!!

What will be a factory without a chart?

Every factories follow a chart : i need to have a tree with this property of this weight and length in order to create that desk. I need to use this particular stone in order to create a ring...
Here, our factory just required us to pass the proper arguments to the function to do its job and choose the right strategy
We are going to add a new chart!
The strategies should be named with the name of the css property they cover, changed in camelCase with the first letter in uppercase!
What does it mean?
if you want to implement the background-color css property, your function shall be called BackgroundColor, if you want to create a function that handles the margin property, it has to be called Margin...
By creating a naming convention and thus extending our chart, we will be able to have an intelligent factory able to call the required function without endless if... else statements!!
Let's see the function with the new chart:

function strategyFactory(totalframes,frame,prop,props,easing) {
     var start=props[prop].start;
     if(/[0-9]+/.test(parseInt(start)) && !/\s/.test(start)) {
         NumericStrategy(totalframes,frame,prop,props,easing);
         return true;
     }
     strategy=camelize(firstToUpperCase(prop));
     if(window[strategy]) { 
        window[strategy](totalframes,frame,prop,props,easing);
        return true;
     }
     return false;
}
function firstToUpperCase(val){
     return val.replace(/^([a-z])/,function(m,l) { return l.toUpperCase();})
}

???
You said there won't be any if else statements !!
No, in fact we are going to keep one and only one if statement in order to make things easier to develop! Let's see what's going on so that you understand why we keep this if:
The first part of the function is trying to determine if we are dealing with a unique number.
As you know, each css property should have a function that handles the calculation strategy but simple numerical css properties are numerous: top, left, width, height, opacity, border-radius,margin-top,margin-left,padding-top...
If we follow our new chart, we will have to create a function for each of them:

function Top(totalframes,frame,prop,props,easing) {
       NumericStrategy(totalframes,frame,prop,props,easing);
}
function Left(totalframes,frame,prop,props,easing) {
       NumericStrategy(totalframes,frame,prop,props,easing);
}
function Width(totalframes,frame,prop,props,easing) {
       NumericStrategy(totalframes,frame,prop,props,easing);
}
function Height(totalframes,frame,prop,props,easing) {
       NumericStrategy(totalframes,frame,prop,props,easing);
}
function MarginTop(totalframes,frame,prop,props,easing) {
       NumericStrategy(totalframes,frame,prop,props,easing);
}

I am not going to write them all but as you can see this a fair amount of wrapper functions to write. We can think of a unique numerical value as being the generality and everything else as being the exception, therefore this is what we do!
If we don't have a number, we change the css property in camelCase and then change the first letter into uppercase.
we need to call the function on the window object,that is the global space, holding all the functions and variables.
We then see if the function exists and apply it.
If the function doesn't exist we just retun false.
Now, we will be able to add new css properties without touching the factory and the core function!
It will be very easy for users to contribute to the function by just creating a function that has a name following the chart !
Now, we need to create the functions we are aware of that deal with one color formatted in hexadecimal:

function Color(totalframes,frame,prop,props,easing) {
   var b = hexStr2rgbArray(props[prop].start);
   var e = hexStr2rgbArray(props[prop].end);
   var rgb=[];
   for(j=0;j<3;j++) {
        rgb.push(parseInt(easing(frame, b[j], e[j]-b[j], totalframes)));
   }
   setStyle(elm,prop,'rgb('+rgb.join(',')+')');
}
function backgroundColor(totalframes,frame,prop,props,easing) {
      Color(totalframes,frame,prop,props,easing);
}

The little drawback is that we need to create a wrapper around the Color function for the background-color but we will be able to use the Color function in many other cases, we will see !

Conclusion

We have seen in this entry how we could create an expandable animation function that delegates strategies to outside functions.
We have seen how to use the strategy pattern associated with the factory pattern to get the most of it in a procedural way!
- The main function, animate is now smaller, which will create less overhead when using it
- The main function doesn't need to be aware of the css properties that exists as it has been abstracted in sub functions.
- Our animate function, abstracted of css properties, can now be extended as will by other users by following a simple naming convention. - we can load only the strategies we need for an animation if we want! (if you don't animate colors, don't import the color strategy!) - the animate function can be extended with more elements like events without fearing to create a monster function!
We have seen how we can use the concepts behind design patterns generally used for object oriented programming in a procedural manner but we have several problems with the procedural approach:
- All our functions is in the global name space, the window name space.Therefore, conflicts with other libraries that could use the same naming conventions could appear and create hard to track bugs.
- we can't share a state between functions easily We will see in the next entry how we can simulate namespaces in javascript thru objects and how we can extend the number of css properties our function can handle with Margin and Padding functions !

E4CSS: Turn your stylesheets into ESON Objects (1)

2007-11-01T08:18:00.000+09:00

We will see in this entry how we can turn our stylesheets into ESON objects with Javascript.
E4CSS will allow us to manipulate the data thru Javascript and Flash, bringing us even more animation/interactivity capacities!

Final API example

Before we deal with cross-browsers fixes and the ESONification, we will see the end user program:

//get the ESON object by specifying the stylesheet

var css = new E4CSS('layout.css'); //or 0,1

alert(css['#errors .warnings p']["fontSize"]); //give you back 12px

//modify the stylesheet
css.insertRule({"#debugConsole":{'background-color':'blue','font-size':'15px'}});

//delete a rule
css.deleteRule("#debugConsole");

As you can see this is really straightforward!
We will just see how to create the ESON in this entry as we will need to deal with cross-browsers fix!(although, we won't see all of them)
In order to understand what is the recommandation, we will see the standard and browser implementation way of doing it.

Standard and browser implementation

First we will see how standards define the API to access stylesheets.
Basically Firefox tries to stick to these standards so the code below will work in this browser:

//you cannot directly specify the stylesheet name, 
//you need to call it by its position in the xhtml file...
var sheets=document.styleSheets;
//get the style sheet object for the first stylesheet
var sheet=sheets[0];

// get the style sheet contents object 
var sheetRules=sheet.cssRules; 

//you cannot directly specify the selector
//you need to call it by its position in the stylesheet!

alert(sheetRules[12].selectorText); // is the selector you work on
alert(sheetRules[12].style['font-size']); // alert 12px;

//insert a new rule in the style sheet
sheet.insertRule("#debugConsole : { background-color:blue; font-size:15px }",sheetRules.length);

//delete a rule by its position in the stylesheet...
sheet.deleteRule(12);

As you can see this is far to be the easiest way of dealing with stylesheet contents as most of the time you need to refer to element positions : the style sheet position, the selector position...
I don't know for you but I can remember the name of the selectors but I hardly ever know their position in the stylesheet! Even more, I can remember the name of the stylesheet but can hardly remember the order in which I have inserted them in the xhtml document (well, it depends on the number of stylesheets you use)

This was the standard way but as usual, IE has its own naming conventions:
-cssRules becomes rules
-insertRule becomes addRule with different parameters
-deleteRule becomes removeRule

They are many other differences regardings the methods IE offers to deal with the style sheets.We will not see them all though as not all of them we'll be helpful for our main purpose : Creating an Object from the style sheet to manipulate it thru Javascript or Actionscript.

Getting the hands dirty

Even if we haven't seen all the differences you can see that not everything is gonna be easy.
First let's see how to create a function that will allow us to retrieve a style sheet thru its position number or its name:

var getCssRules = function(val) {
     var sheets=(document.styleSheets) ? document.styleSheets : undefined;
     if(typeof val=='number') {
         if(val > sheets.length) return;
         return sheets[val]['cssRules' || 'rules'] || undefined;
     }
     var regex=new RegExp(val);
     for(i in sheets) {
        if(regex.test(sheets[i].href)) {
            return sheets[i]['cssRules' || 'rules'] || undefined;
        }
        return undefined;
    }
}

The code isn't too hard as we are just dealing with cross-browsers fixes:
First we check to see if we can get the style sheets objects, and store it in a variable.
if the parameter is a number, we check that the number isn't greater than the number of style sheets.
If it's ok,we try the IE or standard methods and as a last resort we return undefined.
If this is not a number, we are dealing with a string.
So we just loop thru each style sheets objects and test the href property to see if we find it and if not return undefined.
At that point, we just have an improved cross-browser document.styleSheets function that allows us to specify the style sheet number or file name.
Now that we have the object we will need to loop thru it in order to create our own ESON version of the object.
We will use the document.styleSheets.cssRules advantages :
- no comments,
- a space between the attribute and its value inserted for us
But we also have huge disadvantages:
- IE put in Uppercase all the xhtml tags in the selector !
- IE put all the attributes in uppercase!
- Firefox changes all the colors in the rgb notations while IE keeps what comes in
- Firebox, IE and Safari don't send back the same attributes when an attribute can be divided in several sub elements ie border:'1px solid red' has borderTopWidth,borderTopStyle,borderTopColor, borderLeftWidth,borderLeftStyle...) IE sends back two attributes for the above example, Firefox sends back 4 attributes and Safari is the winner with 12!
- IE keeps multiple selectors separted by ',' into one selector where others separate them so h1,h2 {} will be h1 {} and h2 {} let's see the objects we'd like to get back:

{
 '#navigation' :{
        'backgroundColor':'#000000',
        'height':'20px',
        'width':'600px'
 },
 '#header a:hover' : {
        'color':'#FF0000',
        'fontSize':'12px'
 }
}

Let's see the code:

var parse = function(cssFileName) {

    //we get the object in a cross browser way
    var rules=getCssRules(cssFileName);
    if(!rules) return;

    //we instantiate the object that will keep our properties
    var objs=new Object();//or just function () {}

    //we loop thru each selectors in the stylesheet
    for(var i=0;i < rules.length;i++ ) {

        //we get the name of the selector
 var selector=rules[i].selectorText;
 if(!selector) continue;

        // we split the attributes by their ';'
 var csss=rules[i].style.cssText.split(';');

        //we create an object that will store attributes:value pairs
 var props={};

        //we loop thru the array we created from the split
 for(var j=0;j< csss.length;j++ ) {

            //we split each pairs by their ':'
     var s=csss[j].split(/:\s/);
     if(s[0].length==1 || !s[0] || !s[1]) continue;

            //we change everything in camelCase and lowercase
     var tmp=camelize(s[0].toLowerCase());
            //we trim some unwelcome spaces
     props[trim(tmp)]=s[1];
       }
       //we split selectors
       var selectors=selector.split(',') || [selector];
       //loop thru them and add the above attributes
       for(k=0;k < selectors.length;k++ ) {
   if(objs[selectors[k]]) {
      for(var attr in props)
  objs[selectors[k].toLowerCase()][attr]=props[attr];
   }
   else objs[selectors[k].toLowerCase()]=props; 
       }
    }
    return objs;
}

They are some works that we still need to do to have the same objects across browsers.

That's why standards are great:
They don't make you hack your hack !

Here are the helpers camelize and trim:

function camelize(val) {
   return val.replace(/-(.)/g, function(m, l){ return l.toUpperCase()});
}
function trim(val) {
   var val= val.replace(/^\s+/,'');
   return val.replace(/\s+$/,'');
}

As you see, we have been created all the functions in the global space, that is the window object.
In order to avoid conflicts with other libraries that we may use, we should put this in a namespace.
We will create a basic class that will allow us to create a namespace but also keep track of the style sheets loaded in the object
Here we go:

function E4CSS(val) {
     return (this instanceof E4CSS) ? this.parse(val) : new E4CSS(val);
}

This is the constructor of the class.
if the function is called without the new keyword binding the this keyword to the E4CSS object we just instantiate the object for our user!
Therefore, we could call the constructor:

var css= new E4CSS('layout.css');
//or
var css= E4CSS('layout.css');

Now we are just going to put the above two functions we have seen into the prototype of the class.

E4CSS.prototype={

     styleSheet : 0,
     sheets     : (document.styleSheets) ? document.styleSheets : undefined,

     getCssRules : function(val) {

       if(val=='undefined') return this;
       if(this.sheets=='undefined')  return undefined;

       if(typeof val=='number') {
          this.styleSheet=val;
          if(val > this.sheets.length) return;
          this.sheets[val]['cssRules' || 'rules'];
      }
     var regex=new RegExp(val);
     for(i in this.sheets) {
        if(regex.test(this.sheets[i].href)) {
          this.styleSheet=i;
          return this.sheets[i]['cssRules'||'rules'] || this;
       }
   }
 },

 parse : function(cssFileName) {

    var rules=this.getCssRules(cssFileName);
    if(!rules) return this;

    var objs=new Object();

    for(var i=0;i < rules.length;i++) {

        var selector=rules[i].selectorText;
        if(!selector) continue;

        var csss=rules[i].style.cssText.split(';');
        var props={};
        for(var j=0;j < csss.length;j++) {
    var s=csss[j].split(/:\s/);
    if(s[0].length==1 || !s[0] || !s[1]) continue;
    var tmp=camelize(s[0].toLowerCase());
    props[trim(tmp)]=s[1];
        }
        var selectors=selector.split(',') || [selector];
        for(k=0;k < selectors.length;k++) {
    if(objs[selectors[k]]) {
        for(var attr in props)
   objs[selectors[k].toLowerCase()][attr]=props[attr];
    }
    else objs[selectors[k].toLowerCase()]=props;           }
   }
   for(var prop in this) objs[prop]=this[prop];
   return objs;
      }
}

We just take the functions and put them in the namespace of the E4CSS class.
we added a default value for the style sheet we will deal with.
Before returning the new object, we extend its possibilities with the one of the E4CSS.
Therefore, you will be able to call the parse function on the new object!
For now this is not very helpful but this will come in handy when we will see how to add insertRule and deleteRule on the object!
So for now, you just have a read object that allows you to do the following:

var css=new E4CSS('layout.css');
alert(css["#navigation"]["backgroundColor"]);
css.parse(3);
alert(css.toSource()); // firefox function to see the object structure.

Conclusion

We have seen how we could change a css style sheet into ESON allowing us for now to read the property in both actionscript or javascript!
We choose to camelize the css attributes as this is the way both javascript and actionscript access them.
We didn't do anything for the color and for the multipart attributes for now.
Safari sends back 12 properties when Firefox sends back 4 and IE sends back 2!!
If we think of the use we could have from within a javascript or flash application, the more the better.
We will see how to insert new rules or delete rules in a cross-browsers way from within our E4CSS objects in the next entry.

Flash & Javascript :How to communicate with Objects (or why JSON should be renamed ESON)

2007-10-28T00:48:00.000+09:00

Flash allows to create rich web interface : very cool effects, 3D animations,data-driven websites. Actionscript,language based on ECMAScript, offers a lot of power to Flash applications.
Here, we will be using Actionscript 3 to see how we can communicate with Javascript objects thru the literal notation and DOM !

Creating a pseudo-div in Flash

I am sorry as I cannot put any flash animations here but first, we will see how to create a textField in actionScript 3. Even if it is very different from the so-called div html elements, I will call this textField a div. Here we go with a function that will create a basic textField:

function createDiv(y:Number,x:Number,height:Number,width:Number):TextField {
     var div:TextField=new TextField();
     div.y=y;
     div.x=x;
     div.height=height;
     div.width=width;
     div.background=true;
     div.backgroundColor='0xFF0000';
     addChild(div);
     return div;
}

As you can see this function takes several parameters and create a textField that we place on the scene thru the addCild function.
This is how we will use it :

var div=createDiv(50,50,50,50);

For those of you that knows javascript this must be quite familiar.
Basically we just create a square that is at the top 50 and the left 50 from the movie clip with a height and width of 50.
We also add a default color to see it!

Talking to Javascript from Flash

Communicating with javascript from Flash is very easy in actionscript 3!
You first need to import the class that contains the function that will do so:

import flash.external.ExternalInterface;

This will load the API necessary to communicate with external entities.
Importing this give us access to the following function:

ExternalInterface.addCallback(javascriptFunctionName, actionscriptFunctionName);

This addCallback method takes 2 parameters:
The name of the function that javascript will use to call flash
the name of the actionscript function that will be used.
Most of the time the 2 parameters will have the same name!
Let's see an example:
(just place the code in the action panel of an empty flash movie)

import flash.external.ExternalInterface;

ExternalInterface.addCallback("calledByJS", calledByJS);

function calledByJS(str:String):void {
 var div=createDiv(50,50,50,50);
 div.htmlText=str;
}

So when javascript will use the calledByJS function on a flash movie passing a string, it will call the actionscript function with the same name and put the text into the textField.
But let's see how we can call this function from javascript!

Calling Actionscript functions from Javascript

The first thing javascript needs to do is to use the function on the right movie clip!
You may have several clips on your page but perhaps only one of them will have the calledByJS function.
So we need to create a javascript function that will find the movie clip object in the page:

function getFlashMovie(objectId,embedId) {
  return (window[objectId]) ? window[objectId] 
              : document[embedId];
}

Unfortunately the code that you may find in the actionscript documentation will not work under safari mac. This version should work in IE,FireFox and Safari Windows/Mac.
You should pass the id of the object tag and the id of the embed tag.
Let's see the code to add a flash movie in an html page so that you may understand:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
width="250px" height="250px" id="swf2">
<param name="movie" value="FlashWithESON.swf">
<embed src="FlashWithESON.swf" width="250px" height="250px" id="swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

The important thing to notice is the id set on the object tag and the id set on the embed tag.
you have swf and swf2 and that is what we pass in the function getFlashMovie:

var movie=getFlashMovie('swf2','swf');

And now, we can call the function calledByJS on the movie object!

movie.calledByJS('Hi from Javascript');

This code shall display the text into the textField that we have set thru actionscript in our flash movie!

Interacting with several functions with one function

We have seen that we need to specify the function that javascript will be able to call and that's fine if you only have one or two functions.
But this might be cumbersome to specify the function each time we need too:

import flash.external.ExternalInterface;

ExternalInterface.addCallback("calledByJS", calledByJS);

function calledByJS(str:String):void {
 var div=createDiv(50,50,50,50);
 div.htmlText=str;
}
ExternalInterface.addCallback("calledByJS2", calledByJS2);

function calledByJS2(str:String):void {
 var div=createDiv(50,50,50,50);
 div.htmlText=str;
}
ExternalInterface.addCallback("calledByJS3", calledByJS3);

function calledByJS3(str:String):void {
 var div=createDiv(50,50,50,50);
 div.htmlText=str;
}

You see that it is rather painfull to have to write this addCallback all the time.
Couldn't it be nice if we could build the function on the fly ? Creating one function that will be in charge of calling the final function ?
A function that will work like a factory where you put it in something raw (like a string!) and get something finished (like a function!)
This is what we are going to do:

import flash.external.ExternalInterface;

ExternalInterface.addCallback("apply", functionFactory);

function functionFactory(func:String,obj:String):void {
 this[func](obj);
}

Alright, here you see that the function that javascript will call is different from the one actionscript will really call.
Why ?
Well, if you put your self in a javascript programmer, this may be weird to write 'calledByJS' all the time!! After he/she is using javascript, no need to remember this every time!
We have seen that javascript will need to find the movie clip and call the function on the movie object so for the javascript programmer, this may make more sense to write this:

var movie=getFlashMovie('swf2','swf');
movie.apply('calledByJS','Hi from Javascript');

This could be 'call' or 'execute' or something like that!
On the other hand, this will not make that much sense on an actionscript programmer point of view!
That's why we gave an other name to the function that will describe what will be the end result:

ExternalInterface.addCallback("apply", functionFactory);

function functionFactory(func:String,obj:String):void {
        this[func](obj);
}

So the functionFactory says it all : this is a function that is in charge of building, creating,calling other function.
In actionscript, we cannot just 'eval' the string to turn it into a function so we call the function as a method of the this object (the scene) and then put the parameter into it!
We are done!
We have a factory that will launch any functions called by javascript without needing us to call ExternalInterface.addCallback every time!
But I know what you are thinking :
My function is not going to need only one parameter everytime so I will have to call the ExternalInterface anyway...
That's where objects comes in!

Passing arguments thru ESON

ESON is just a name that I give to JSON that stands for JavaScript Object Notation.
In fact, we can use this notation and send it to actionscript from javascript and we can send actionscript notation to send it to javascript too!
So this is not JSON but ESON, ECMAScript Object Notation.
So now, we will change the functionFactory so that it accepts an object, it is easy:

ExternalInterface.addCallback("apply", functionFactory);

function functionFactory(func:String,obj:Object):void {
 this[func](obj);
}

We have just change the type of obj from String to Object!
Let's say that you have build a nice actionscript API that gives hook to javascript to modify the look and feel of the application and the text too so you have several functions dedicated to communicating with javascript, one of them being:

function modifyDiv(obj:Object):void {
 
 var style=obj.style;
 div.y=parseInt(style['top']);
 div.x=parseInt(style['left']);
 div.width=parseInt(style['width');
 div.height=parseInt(style['height']);
 div.backgroundColor=style['backgroundColor'].replace(/#/,'0x');
 div.textColor=style['color'].replace(/#/,'0x');
 div.htmlText=obj['text'];
}

The modifyDiv will be called by javascript to change the appearance of the textField thru a javascript object!
Let's see the javascript side coding:

function getFlashMovie(objectId,embedId) {
  return (window[objectId]) ? window[objectId] 
              : document[embedId];
}

//wrapper that memoize the result
// i have put an alert so that you can see that
//next call to the function will return the second alert
function callFlash(func,obj) {
    alert('first call');
    var movie=getFlashMovie('swf','swf2');
    this.callFlash=function() { alert('other calls'); movie.apply(func,obj); };
    return movie.apply(func,obj); 
} 

function changeDiv() {
 var elm={style:{
                      top:'20px',
                      left:'60px',
                      width:'200px',
                      height:'80px',
                      'background-color':'#OOOOFF',
                      color:'#FF0000'
                 },
                 text:'hi from javascript! lets change your look !'
        };
   callFlash('modifyDiv',elm);
}

so as you can see we create a literal object in javascript that define the new style of the textField and the new text. Then we pass the object to the modifyDiv function define in actionscript!
Let's look back to the modifyDiv actionscript function:

function modifyDiv(obj:Object):void {
 
 var style=obj.style;
 div.y=parseInt(style['top']);
 div.x=parseInt(style['left']);
 div.width=parseInt(style['width');
 div.height=parseInt(style['height']);
 div.backgroundColor=style['backgroundColor'].replace(/#/,'0x');
 div.textColor=style['color'].replace(/#/,'0x');
 div.htmlText=obj['text'];
}

This is quite an ugly function I know but for our purpose, it will be fine! As you can see it accepts an object and then apply each element to the textField.
But why I didn't send an integer directly instead of sending the value with pixels?
Well, I guess that you have found that in fact I am simulating sending css properties from javascript to flash!
Here we have hardcoded the setting but perhaps we could create a function that will loop thru the javascript object and set the value automaticly!
So instead of creating a javascript object and putting the text into javascript, couldn't we do something else?

Passing DOM objects to Actionscript

Well, I have written this ugly actionscript function only for that purpose!
Let's see the javascript side code as the actionscript doesn't need any change:

function wrapper() {
   var elm=document.getElementById('text');
   callFlash('modifyDiv',{style:elm.style,text:elm.innerHTML});
}

As it is a very basic example, here is the xhtml that goes with it (the style is defined in the xhtml which is not a good habit but for now, forgive me!):

<div id="text" style="top:20px;left:60px;width:200px;height:80px;background-color:#OOOOFF;color:#FF0000">
<p>let's try to send some text to flash!<p>
</div>

As you can see, the javascript is fairly simple!
And now, we can manipulate the look and feel and contents of a Flash animation with properties that relate to xhtml and css!
You could build an application that will define some property of the look in a css file, the contents in a xhtml document and you will have a full SE friendly application!!
The css and xhtml will be used when javascript is off otherwise, the cool flash animation will do its wow job!

Putting the pieces together

First let's put the actionscript code that you can put on the action panel of an emply fla:

 //code to let javascript call actionscript functions

 import flash.external.ExternalInterface;

 ExternalInterface.addCallback("apply", functionFactory);

 function functionFactory(func:String,obj:String):void {
        this[func](obj);
 }

 //code related to our API(dirty example)

 var div=createDiv(50,50,50,50);
 function modifyDiv(obj:Object):void {
 
   var style=obj.style;
   div.y=parseInt(style['top']);
   div.x=parseInt(style['left']);
   div.width=parseInt(style['width']);
   div.height=parseInt(style['height']);
   div.backgroundColor=style['backgroundColor'].replace(/#/,'0x');
   div.textColor=style['color'].replace(/#/,'0x');
   div.htmlText=obj['text'];
 }
 function createDiv(y:Number,x:Number,height:Number,width:Number):TextField {
     var div:TextField=new TextField();
     div.y=y;
     div.x=x;
     div.height=height;
     div.width=width;
     div.background=true;
     div.backgroundColor='0xFF0000';
     addChild(div);
     return div;
 }

Now, let's see the javascript code:

//find the movie clip we need
function getFlashMovie(objectId,embedId) {
  return (window[objectId]) ? window[objectId] 
              : document[embedId];
}
//wrapp into one function : callFlash
function callFlash(func,obj) {
    var movie=getFlashMovie('swf','swf2');
    this.callFlash=function() { movie.apply(func,obj); };
    return movie.apply(func,obj); 
} 

//execute the modification to actionscript textField here:
function changeDiv() {
   var elm=document.getElementById('text');
   callFlash('modifyDiv',{style:elm.style,text:elm.innerHTML});
}

And in the end, the html you can find in the body:

<div id="text" style="top:20px;left:60px;width:200px;height:80px;background-color:#OOOOFF;color:#FF0000">
<p>let's try to send some text to flash!<p>
</div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
width="250px" height="250px" id="swf2">
<param name="movie" value="FlashWithESON.swf">
<embed src="FlashWithESON.swf" width="250px" height="250px" id="swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

In fact we should clean this code and load the flash animation thru swfObject in order to allow the switch between html and flash when necessary.

Conclusion

As you can see it is very easy to communicate with javascript thru ESON.
You can now create applications that gives hook to javascript with only one actionscript function, acting like a Factory, that will call the function and pass the object to it.
Using objects allow us to pass as many parameters as we want without having to redefine our main function, therefore allowing to ease maintainability of your code!
We have seen a cross-browser way to find a movie clip with javascript and how to call actionscript functions from their! There is no real standard about the name of the function javascript should use as this is pretty new in the ESON world (perhaps other bodies are doing this and if so they should give us their tips!) but it could be nice to specify a standard so that javascript could interact directly with Flash thru one function that will take the actionscript function name as a first parameter and a literal object as a second!
We didn't see how to call javascript from actionscript but you will see that there is a lot of good surprises awaiting us!
We might see in an other entry how to interact with css thru actionscript (not with the getStyle actionscript function...) so that you can offer your users to edit in real time the css thru tools like firebug and see the change in flash directly!
I hope you enjoy this article!

Javascript Animation : Curving the path (7)

2007-10-21T13:54:00.001+09:00

We've seen that we could define the core concept of an animation thru a linear equation that took basic elements like time, begin, end, change.
We have changed the equation to create some easing effects, making the animation a lot more interesting.
But there is one thing that we cannot do : describe a curve when going from point A to point B.
Let's see how to implement a curved path!

Curve by example

I guess it's easier to understand what we are talking about if we have a grasp of the final result.
First, this is what we are able to do know:
We can go from y0,x0 to y1,x1 or from top0, left0 to top1, left1.
Even if we use an easing effect, going from point A to B will describe a straight line:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Go up
As you see, the easing effect is applied and the container goes from point A to B in a straight line.
Here is the code to create the effect:

function goUp() {
 elm=document.getElementById('goup');
 var ops1={
   backgroundColor:{start:'#000000',end:'#FF0000'},
   borderColor:{end:'#000000',start:'#FF0000'},
   top:{start:0,end:-100},
   left:{start:0,end:250}
 };
 animate(elm,ops1,1500,20,easeInCirc);
}

So we get the element,set the css properties we want to animate and then specify an animation of 1 second and a half with an easeInCirc effect.

That's find, but it could be nice if we could control the path going from top.0,left.0 to top.-100,left.250.
We can set an in-between point that will 'attract' the animation.
we have 3 divs/square on the screen here:
The beginning square,
The attracting square,
The final square
You can set different value for the attracting point and see how the animation will behave:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

animate with curve

As you can see, the animation will not go straight to the final point but will describe a curve according to the attracting point you have set!
We can now have little control on the path!
But let's see how it works.

Going back to the root : y=mx+b

As you certainly remember, we've seen that a linear displacement from one value to an other could be resumed to one equation:
value =(change/duration)*frame + start
or
y=mx+b
Where m is (change/duration) or c/d

In fact, we can rewrite this linear equation so that it becomes the root of an other equation : the Bezier equation.
Let's rewrite it:
value = begin+(begin+change-begin)*(frame/totalframes)
If you look at the changement, you will see that we do we take a deturned path:
change = begin+change-begin
Which is not very helping in here!
In fact, this is the basic equation for a linear Bezier curve!
We can rewrite it like so:
value = begin+(end-begin)*(frame/totalframes)
or
var t=frame/totalframes
var b=begin
value=begin+(end-begin)*t

In the Bezier curve, t must always be within 0 and 1 and this will always be true for how frame/totalframes.
The upper equation can be rewritten again:
value = (1-t)*begin + t*end

This is an other way of creating a linear easing!

From linear to Quadratic Bezier curve

As for now, we were just rewritting a linear equation to an other linear equation!
In fact, we can add an other point, like we did in the animation above and this will allow us to curve the path.
We will need p0,p1 and p2 where p1 is the deviator point:
value= (1-t)*(1-t)*p0 + 2*t*(1-t)*p1 + t*t*p2
In our case, with javascript variable name, this will give us:

var t=frame/totalframes;
value = (1-t)*(1-t)*begin + 2*t*(1-t)*deviator + t*t*end;

Let's see the Bezier curve with a javascript implementation:

function linearBezier(frame,begin,end,totalframes) {
      var t=frame/totalframes;
      return (1-t)*begin + t*end;
}
function QuadBezier(frame,begin,end,deviator,totalframes) {
    var t=frame/totalframes;
    return (1-t)*(1-t)*begin + 2*t*(1-t)*deviator + t*t*end;
}

Implementing the Bezier Curve

Now that we know how to curve the path thru a Bezier curve, we just need to see how we can implement this in our animate function.
First, we need to add a third point, a deviator point when setting the values.
A simple way of doing it,will be to set the deviators like so:

 var ops1={
     backgroundColor:{start:'#000000',end:'#FF0000'},
     borderColor:{end:'#000000',start:'#FF0000'},
     top:{start:0,end:-100,bezier:-300},
     left:{start:0,end:450,bezier:-100}
 };
 animate(elm,ops1,1500,20,easeInCirc);

I have written it bezier because this is a common denomination that you can find in photoshop, illustrator, Flash...
The Bezier curve is used in many graphic applications so let's use a standard name!
Now, let's add this bezier into the animate function:

function animate(elm,props, duration, fps,easing) {

 duration = (duration) ? parseFloat(duration) : 1000;
 fps      = (fps)      ? parseFloat(fps)      : 20;
 easing   = (easing)   ? easing               : linearEase;

 var interval    = Math.ceil(1000/fps);
 var totalframes = Math.ceil(duration/interval);

 for(i=1;i <= totalframes;i++) {
   (function() {
      var frame=i;
      displacement=function() {
          for(var prop in props){
              if(!/olor/.test(prop)) {
                  var begin = props[prop].start*100;
                  var end   = props[prop].end*100;
    var bezier = props[prop].bezier*100;
    var actualDisplacement=
                      easing(frame, begin, end-begin, totalframes);
    if(bezier) 
                    actualDisplacement=
                    QuadBezier(frame,actualDisplacement,end,bezier,totalframes);
           setStyle(elm,prop,actualDisplacement/100;
               } else {
                    var b = hexStr2rgbArray(props[prop].start);
                    var e = hexStr2rgbArray(props[prop].end);
      var rgb=[];
                    for(j=0;j<3;j++) 
                    rgb.push(parseInt(easing(frame, b[j], e[j]-b[j], totalframes)));
                    setStyle(elm,prop,'rgb('+rgb.join(',')+')');  
        }
   }
       }
       timer = setTimeout(generalProperty,interval*frame);
   })();   
 }
}

So what do we do?
We first calculate the actual value of the property according to the easing type.
If we find that a bezier property exists,we use the value calculated by the easing type as the start for the bezier equation !
That's all!

A new effect thru Bezier : backAndForth

In the above example, we need to supply a value for the bezier curve to happen, but we can always calculate the bezier point by manipulating the beging and end value!
Let' see the code:

function backAndForth(frame,begin,change,totalframes) {
 var t=frame/totalframes;
 var end=begin+change;
 return (1-t)*(1-t)*begin + 2*t*(1-t)*(end+change) + t*t*begin;
}

As we are using the backAndForth function as an easing effect, we are not getting the end directly but the change so we need to get back the change.
Here I've decided that the deviator will be the end+change and that the final point will be the beginning!
Let's see what we get with the following settings:

 var ops1={
     backgroundColor:{start:'#000000',end:'#FF0000'},
     borderColor:{end:'#000000',start:'#FF0000'},
     top:{start:0,end:-100},
     left:{start:0,end:450},
     borderWidth:{start:5,end:1}
 };

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

back and forth
As you can see, the animation goes to the end value and goes back to where it started!
This is not really an easing effect but more an effect in itself but this can be useful!

What happens if we mix the backAndForth easing with some bezier points??
Until up to now, we've been applying the bezier points only on the top or left property but can we apply the bezier points to other properties?
Let's try, with the following settings:

 var ops={
     backgroundColor:{start:'#000000',end:'#FF0000'},
     borderColor:{end:'#000000',start:'#FF0000'},
     top:{start:0,end:-100,bezier:-300},
     left:{start:0,end:450,bezier:200},
     borderWidth:{start:5,end:1,bezier:80}
 };
 animate(elm,ops,1500,20,backAndForth);

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Go back and forth with bezier
Well, this is not going back and forth anymore!
The bezier equation is last in the function so it will reach the final destination and the backAndForth will create a kind of easing effect.
If we inverse the order in which bezier/easing is calculated, we will get an other effect...
We notice that the value set in the border-width can be used as a simple intermediate value for the animation too!

Conclusion

We have seen a basic way of implementing the a quadratic bezier curve in our animation process and we have seen that playing around with the value used in the bezier can allow some unexpected effects!
But as always, drawbacks are numerous:
- we can set only one bezier point per property, most of the time cubic bezier is used, which allows to set up 2 points per property. We could even find a way to set as many as bezier points as we like!
- we cannot add a bezier points to the colors as this will require a different calculation.
- we modified the animation directly which could lead to some weird bugs if we were to add more features (several beziers, beziers to colors...).
The core code is starting to be huge and it will certainly be better to find a way to improve some functionalities of the animate function thru callbacks for example.
Therefore we could keep the basic function simple in its process and allow us to extend its possibilities without fearing to create bugs or to create a monster function!
After all, we may not need the bezier possibilities so why put it in the core of the function?
Obviously I have specified other drawbacks in the previous entry and they still hold true!
But anyway, enjoy the function as for now and try to create your own effects based on all the tools you have!

Javascript Animation : Several elements at once (6)

2007-10-14T22:56:00.001+09:00

Until up to now, we have seen how to manipulate one css property of an element at a time and few css styles. I guess it is time to see how to manipulate several css properties in one animation!

Some examples

Before we dive into the code, we are going to see some of the effects you will be able to create.
These effects only include the linear easing, which means a fix step, but you could apply the easeInOutQuad, CircularOut, Bounce...
You can use the function in many different ways and these are just few ideas:
(Ideas inspired by the mootools demo page)

Slide Horizontal

Slide In Slide Out

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slide Vertical

Slide In Slide Out

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fade

Fade In Fade Out

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Morph

Morph to Morph back

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Manipulating several elements

Until up to now, we were manipulating only one css property at a time, it could be the width, the height, the opacity but not all of them at once!
In order to define several properties at once, we are going to use a literal object.(You can read a simple introduction about this here:Javascript literal notation:basics)
As a reminder this is how we used to call the function:

animate(elm,property,start,end,duration,fps,easingType);

You can read the previous articles of the series if necessary.
As we are going to use a literal object to define the properties, this is how we will call the function:

animate(elm,properties,duration,fps,easingType);

We could define different ways to define the css properties:

var properties={
   color:['#FFFFFF','#00FF00'],
  'background-color':['#000000','#ffffff'],
   opacity:[1,.5],
   width:[200,400]
}

Here we create a literal object and then define the start and end value in an array literal for each css properties.
This is fine but this is not very clear and if we were to add some functionalities, this might get cumbersome to remember the order, therefore, we will write it this way:

var properties={
   color:{start:'#FFFFFF',end:'#00FF00'},
  'background-color':{start'#000000',end:'#ffffff'},
   opacity:{start:1,end:.5},
   width:{start:200,end:400}
}

Instead of defining the beginning and the end of the animation thru a literal array, we use a literal object.
This is a little bit longer to write but clearer and allow to add further elements like callbacks, type of easing per property basis if we want!
As for the css properties, the colors and some cross-browsers implementation, you can read the following entries:
Javascript Animation: Changing Colors (5)
And
Setting html element style thru Javascript

We will need to use some of the functions explained in these entries so feel free to read these if you don't get it.

The animation code

Let's see the main function : animate!

function animate(elm,props, duration, fps,easing) {

 duration = (duration) ? parseFloat(duration) : 1000;
 fps      = (fps)      ? parseFloat(fps)      : 20;
 easing   = (easing)   ? easing               : linearEase;

 var interval    = Math.ceil(1000/fps);
 var totalframes = Math.ceil(duration/interval);

 for(i=1;i <= totalframes;i++) {
  (function() {
    var frame=i;
    interpolate=function() {
      for(var prop in props){
        if(!/olor/.test(prop)) {
          var begin = props[prop].start*100;
          var end   = props[prop].end*100;
          setStyle(elm,prop,
                   easing(frame, begin, end-begin, totalframes)/100);
        } 
        else {
          var b = hexStr2rgbArray(props[prop].start);
          var e = hexStr2rgbArray(props[prop].end);
          var rgb=[];
          for(j=0;j<3;j++) 
              rgb.push(parseInt(
                       easing(frame, b[j], e[j]-b[j], totalframes)));
          setStyle(elm,prop,'rgb('+rgb.join(',')+')');  
        }
      }
    }
    timer = setTimeout(interpolate,interval*frame);
   })();   
  }
}

There's not that much new:
First we define some default values for the duration, fps and easing.
Then we calculate the total number of frames and loop thru them.
We loop thru each properties in the object and set the style to the element.
We need to separate the colors from other properties as we need to calculate 3 values at a time!
We apply the easing function passed in the function.It could be Bouncing, Quad, Quart...All of them calculating the evolution from start to the end in a non-fix manner!
That's all!

Helper functions

You have certainly noticed that the function use other functions to set the style, calculate the colors.
Here is a list of all the helper functions:

function d2h(dec) { 
  return dec.toString(16);
}
function h2d(hex) { 
   return parseInt(hex,16);
}
function rgb2h(r,g,b) { 
    return [d2h(r),d2h(g),d2h(b)];
}
function h2rgb(h,e,x) {  
     return [h2d(h),h2d(e),h2d(x)];
}
function cssColor2rgb(color) {
     if(color.indexOf('rgb')<=-1) {
       return hexStr2rgbArray(color);
     }
 return rgbStr2rgbArray(color);
}
function hexStr2rgbArray(color) {
 return h2rgb(color.substring(1,3),color.substring(3,5),color.substring(5,7));
}
function rgbStr2rgbArray(color) {
 return color.substring(4,color.length-1).split(',');
}
function camelize(val) {
   return val.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
}
function setOpacity(elm,val) {
    elm.style.zoom = 1;
    elm.style.filter = "alpha(opacity=" + parseFloat(val*100) + ")";
    elm.style.opacity  = parseFloat(val); 
    return elm;
}

function setStyle(elm,prop,val) {
  if(prop=='opacity') 
     return setOpacity(elm,parseFloat(val));
  if(prop=='float')   
     prop = (window.attachEvent) ? 'styleFloat' : 'cssFloat';
  prop = camelize(prop);
  unit=(prop=='zIndex'||prop=='zoom') ? '':'px';
  elm.style[prop] = (typeof val=='string') ? val : val+unit;
  return elm;
}

function linearEase(frame,begin,change,totalframes) {
      return change*(frame/totalframes)+begin;
}

Some of them can be reused alone like the setStyle, setOpacity or even the camelize...
I don't put all the easing functions as you can find them in the past entry:
Javascript Animation: Make things move smoothly

Conclusion

The function allows us to do some nice effects, controlling the time, the number of frames per second, the type of easing and now we can manipulate several properties at a time in a cross-browser way!
But as always, the drawbacks are numerous:
- They are some css properties that need to be written in multiple stage to work like the border or margin properties.
- We can apply only one type of easing for all the properties in one animation but sometimes you will like a linear easing (color) combined with a bouncing easing (top,left properties).
- We didn't define a way to have callbacks and chain effects one after an other.
- If you click several times on a link, the animation will just go out of control! We need to keep somewhere the state of the animation!
- We need to write all the css properties, which can be cumbersome quickly and we don't keep the DRY principle (Don't Repeat Yourself!) as you will certainly define a css class and then rewrite some of the elements in the animation! From there, we can think that this could be nice to be able to set the animation from one class to an other!
- If you want to move your element from top0,left0 to top1,left1, this will be a straight line, even if you apply an easing function, you won't be able to curve the path...Perhaps, we could use a Bezier as we may already have the ingredients! The list is still long so I will stop for now but have fun!

Javascript Literal Notation: basics

2007-10-13T14:43:00.000+09:00

Javascript offers different way to create arrays.
We will see how to create them by using the literal notation and see some advantages of this notation.

Arrays creation:the old way

Javascript offers a way to store multiple values in one variable.Each variable is associated with a number starting from 0.
This variable, containing several values is called an array.
Here is how you can create an array:

var words=new Array();
words[0]='hi';
words[1]='good bye';
words[2]='good morning';
words[3]=4;

You could define in the constructor new Array the number of values that will be stored:

var words=new Array(4);

The array will contain 4 slots ready to be used.
You could also defined the values directly in the Array constructor:

var words=new Array('hi','good bye','good morning',4);

This is shorter and you can access the value by their position in the array:

var words=new Array('hi','good bye','good morning',4);
alert(words[1]); // alert good bye
alert(words[3]); //alert 4

Remember that it starts from 0 and as you can see, the value are kept in the order you have written them!
You can change a value afterward too:

words[3]='good afternoon';

What was a number,4, is now the string 'good afternoon'.

Creating an array, gives you access to different properties and method:

alert(words.length); //4
alert(words.sort()); //4,good bye,godd morning,hi
alert(words.reverse()); //hi,good morning,good bye,4
alert(words.join()); //hi,good morning,good bye,4
alert(words.join('|')); //hi|good morning|good bye|4
alert(words.toString()); //hi,good morning,good bye,4


alert(words.slice(0)); //hi,good morning,good bye,4
alert(words.slice(0,3));//hi,good morning,good bye
alert(words.slice(2,3));//good bye
alert(words.slice(0,-2));//hi, good morning
alert(words.slice(0,words.length-2));hi, good morning

You also have functions/methods to add/delete element from the array:

alert(words.pop());//4
alert(words.shift());//hi
alert(words.push());//2
alert(words.unshift());//undefined
alert(words.splice(0,2,'good afternoon')); //good morning,good bye

You can read more about this subject here

Arrays creation: the new way

The new way is an addition to the old way, which means that you can still use the old way.

var words=[];
words[0]='hi';
words[1]='good bye';
words[2]='good morning';
words[3]=4;

var words=['hi','good bye','good morning',4];

which in the end allows to do the same manipulation as above!
This is shorter and allows you to nest arrays:

var words=['hi',['salut','heil'],'good bye',['au revoir','Auf Wiedersehen']'good morning',['bonjour','Guten Morgen'],4];

Then you can do this:

alert('english'+words[0]);//hi
alert('french'+words[1][0]);//salut
alert('german'+words[1][1]);//heil

That's nice!
But nested arrays are not very easy to deal with...
You have to remember that you have the english word followed by an array containing first the French version and then the German.
It is not very intituive that's why there is an other way to store multiple values in one variable.

Associative arrays or Hash or Dictionaries

I have written all the name you may encounter in different languages.
They all define the same base ideas, having the final implementation sometimes diverging from a language to an other.
As we have seen we can store several values in one variable thru arrays.
We can then call the value we need by referencing its position in the array.
But calling values thru their position is not very as friendly as it could be and if the order change, you will have to rewrite many things in your code.
It could be nice if we could set a name to the variables we store and then we could refer to this name instead of the position.
Basically an associative array associate a name with a value and store everything into one variable.
In javascript unfortunately, you don't have associative arrays!
But you have what is called object and we can use them to create some pseudo-associative arrays.
Why aren't they true associative arrays ?
Because you don't have access to all the functions and methods we have seen for the arrays!
Let's see how we can create an object in javascript.
They are many ways:

var dictionary=new Object();
dictionary.english=['hi','good bye','good morning'];
//or
dictionary['english']=['hi','good bye','good morning'];
dictionary['french']=['salut','au revoir','bonjour'];
dictionary['german']=['heil','Auf Wiedersehen','Guten Morgen'];

Then we can do the following:

alert(dictionnary['english'][0]); // return hi
alert(dictionnary['french'][0]); // return salut
alert(dictionnary['german'][0]); // return heil

So we created an object and stored into each language an array literal of each words.
But this is not very better than our nested arrays, we still need to refer to the value thru their position in the array.
If we can nest array literal, we can aslo nest object literals!
First let's see how to create a literal object:

var dictionary={};

Here you go, you have created your object!
To notice that literal notations don't give access to all the properties/methods you could have with the usual creation.
For objects, you won't have access to the prototype methods but for now, this is ok as this won't be a problem for our purpose.
Then we could rewrite the above like this:

var dictionnary={
     english:['hi','good morning','good bye'],
     french:['salut','bonjour','au revoir'],
     german:['heil','Guten Morgen','Auf Wiedersehen']
}

As you can see we separate each new property from their value by using ':'.

So now, how could we make our access to each words easier?
Let's nest object literals!

var dictionary = {
    hi:{
       french:'salut',
       german:'heil'
    },
    'good bye': {
       french:'au revoir',
       german:'auf Wiedersehen'
    },
    'good morning':{
       french:'bonjour',
       german:'Guten Morgen'
    }
};

Let's explain the above a little.
We create an object by using the literal notation, then we can enter some properties name. Instead of assigning a simple value to the property, we assign again a literal object! We are therefore nesting objects!
This is how we can then call the different words:

dictionary['hi']['french']; // salut;
dictionary['hi']['german']; // heil;
dictionary['good morning']['french']; // bonjour;

Here we don't refer to any position of the value, we refer to their property name, which allow to create more readable programs!

A good example of literal notation use:Function parameters

The problem

It often happens that you create a function that requires several parameters:

createElement(ElementType,idName);

This function will create an element according to the parameters.This is fine for now as it is just 2 parameters, easy to remember!

createElement('div','container');

But then you decide that it could be nice if we could set the width and height:

createElement(ElementType,idName,width,height);
//example
createElement('div','container',200,150);

This starts to be harder to remember the order of each element and if somebody reads the function call, he/she won't have any clue about what are the numbers 200 and 150.
This could be the widht and height or the height and width...
But it is still just 4 parameters, that's fine.
Then as you create div very often, you choose to set the div creation as the default behavior of your function and you add the colors:

createElement(idName,width,height,backgroundColor,color,elementType);
//example
createElement('container',200,150,'#FFFFFF','#FF0000');
//example
createElement('container',200,150,'#FFFFFF','#FF0000','p');

Here again, it is starting to be harder to remember the order of each element.
Sometimes you won't even need to set the background color so you will have to write:

createElement('container',200,150,'','#FF0000');

This is not that bad but you may have a typo miss like:

createElement('container',200,150,'#FF0000','p');

Did you really want to set the background color or did you just forget to skip the background color and then set the color? Here your color will be a paragraph element!!
Hummm...That's becoming hard.

Solution:use a literal object!

If you use a literal object, you will be able to write each parameters in the order you like and only if you need them!

var parameters={
     element:'div',
     id:'container',
     height:'200',
     width:'150',
     color:'#0000FF',
     'background-color':'#FFFFFF'
}
createElement(parameters);
//or 
createElement({id:'container',element:'p'});

The code is self-explainatory, you don't have to remember the position of each paremeters in the function call and it's really easy to have optional parameters!

Conclusion

We have seen how we can create literal arrays and literal objects and how we can use them in real programming problems!
Obviously, we didn't really explain the concept of object and we have seen a very basic use of them.
We will see in an other entry what are the principle behing objects and what you can do we them!

Flash : How developers create bad SEO websites with XML

2007-10-10T20:56:00.000+09:00

There are many ways to get your website more interactive with a nice user interface embedded with little fade in effects to Real time 3D universe.
Flash, Silverlight, Javascript are some of these tools allowing you to built a rich interface nowadays.
Let's look at some data driven Flash website implementations and see why their use of XML should rethink for a better SEO approch.

Flash and XML

For whatever reasons, you want cool clunky animations within your main left navigation bar.
You have choosen to put this into a beautiful Flash applications that fulfills all your dreams.
Where is the trap ?

This animation use an XML file that allows you to update your links and all in all, it was a breathe to have this in place :
- good bye cross-browsers hacks - good bye sad navigation...
- good bye users!

As you may no it's very hard for search engines to index the contents of a flash animation.
If your contents is created on the fly and not hardcoded in the Flash animation, you cannot use the accessibility feature.
Even if you could, this will give you some raw data:
- good bye semantics,
- good bye google rank.

we don't even think of the people who does not have Flash (There are so few, it's not that big deal)
But you are loosing users and all the pages lost within Flash will ever hardly hits.

There is something really simple to do in that case:
Get a semantic XML File!

Why sometimes reinventing the wheel is not a good idea

Let's see an example of an xml file, it is I guess from a tutorial that you can find on the web:

<root>
<menu name="nav">
     <menu name="TOP" view="horizontal">
 <item name="Top1" action="gotoURL" variables="/top/index.html"/>
 <item name="Top2" action="gotoURL" variables="/top/top2.html"/>
    </menu>
    <menu name="TUTORIALS" view="horizontal">
 <menu name="Javascript" action="gotoURL" variables="/javascipt/index.html">
      <item name="Beginners" action="gotoURL" variables="/javascript/b/index.html"/>
      <item name="Seniors" action="gotoURL" variables="/javascript/s/index.html"/>
 </menu>
 <item name="PHP" action="gotoURL" variables="/php/index.html"/>
   </menu> 
</menu>
</root>

Alright, here is nice, well-formated XML!
What people says about XML ?
- it's portable
- it's easy
- it does cook late at night

These were the main arguments using XML with Flash and also the fact that the only you can manipulate data in Flash is thru an XML document.
That's true that this XML is very portable: you will be able to use it with THIS flash animation and nothing else.
It's true that it's easy, you just read the documents and figure out in 30 minutes how you should update this document.

There must be an even easier way...

XML : Somebody forgot the HT!

There's something even more portable, even easier than THIS XML file, it is called XHTML!
Alright, we are dealing with the Internet, links, websites, we are not interchanging data for something else than a browser!
If you look the XML document, you will see that it is just reinventing the XHTML:
- The navigation could be a list of ul and li!
- The action='goToUrl' is a link, a
- The variable is the href property of this link
- The name could be the title or the id, or the class

Let's change this XML into XHTML:

<div id="main_nav">
  <ul class="nav">
     <li>
         <h2>TOP</h2>
         <ul>
       <li><a title="Top1" href="/top/index.html">Top1</a></li>
       <li><a title="Top2" href="/top/top2.html">Top2</a><li>
         </ul>
    </li>
    <li>
        <h2>TUTORIALS</h2>
        <ul>
   <li><a title="Javascript" href="/javascipt/index.html">Javascript</a>
            <ul>
        <li><a title="Beginners" href="/javascript/b/index.html">Beginners</a></li>
        <li><a title="Seniors" href="/javascript/s/index.html">Seniors</a></li>
            </ul>
         </li>
 <li><a title="PHP" href="/php/index.html">PHP</a></li>
      </ul>
   </li> 
</ul>
</div>

The good thing about this document is that it is both XML compliant and XHTML compliant.
Obviously we are missing the tag at the beginning and we do not have any doctype specified.
You should see this file as an include file (like when Flash is actually calling the xml file)
You could use it as an html document and as the xml for the Flash animation.
The good point are:
- The chance that somebody knows html is bigger than the chance of knowing mr Johns XML specification.
- You can have a semantic website browsable by the search engines!
- You can add css to it (no need of xml+xslt...)
iF you call this xhtml as an xml document in Flash, even with the xml tags off, Flash will read it as long as it is a well-forment xml!

Mixing the 2 worlds

How can you have both the Flash and the XHTML together in the same page?
First of all, you should load your flash animation thru swfObject, that is thru Javascript.
If javascript is off or Flash is not going to be installed then the XHTML will be displayed.
If flash is installed, users will see the flash version while search engines will get the XHTML version!
From there, you can add the xhtml by using a noscript tag or by changing the display:block to none thru javascript/
If the users has javascript on, the content will be hidden, it javascript is off, the xhtml will be displayed normally.

Conclusion

I have seen some websites and companies saying that THEY HAVE THE TOOL TO MAKE FLASH SE FRIENDLY.
Well, all their tools is crap...
I took the example of a menu but this is likely to be true for many different texts that you will have in a Flash animation.
ALWAYS TRY TO CREATE AN XHTML STRUCTURE FIRST!
And your website should be a search-engine friendly website.
But before using Flash, try to see if a Javascript solution could be better.
In this entry, I didn't talk about the XML that were setting some styles to the Flash!
Here it is the same thing!
Don't reinvent CSS...
Obviously, this might be harder to deal with css thru Flash as it has a very poor implementation of it(less than javascript)
I was thinking about a CSS parser in PHP or Perl that will change it into a javActionScript object.
Then, actionscript could just get the element they are interested in...
But perhaps there is already such a parser?

Setting html element style thru Javascript

2007-10-09T22:55:00.000+09:00

I guess that setting some style to an html element thru CSS has become something very usual : writing an xhtml compliant document and then decorate it with css thru classes, id and all the tools we can use.
In this entry, we will see a simple way to set some style thru javascript allowing dynamic styling and why not,creating some cool transitional effects from one style to an other !
For now, let's see the dynamic setting in action:

Background-color:#00FFFF
opacity:.5
font-size:15px
width:100px

cool text

The CSS way

I am not going to explain how CSS works as this will be too long but we will just see a simple class defined in an coolStyle.css file:

div#mySuperId{
    width:200px;
    height:200px;
    color:#FFFFFF;
    background-color:#000000;  
    z-index:100;
}

Alright, we are just styling a div set with an id called mySuperId.
We set different properties like the width, height, color and background-color...
Something you have certainly done hundreds of time!
As you can see properties require to specify an unit, a color, an integer or a string.
Composite words are separated by an hyphen, therefore making it easier to read.
Do you know the other way we could do this in general ?
Well, we could use the camelcase style!
This will transform our hyphened properties to this:

backgroundColor:#000000;
zIndex:100;

Basically, we write the first word in lower-case and separate each new words by putting the first letter in upper-case, which is not without reminding the humps of the camel, thus the name!
You know what?
This is with this convention that javascript can access the style properties of an html element!

The Javascript Way

So first we need to get the element we will be working on, here an html div element:

var elm=document.getElementById('mySuperId');
//now we can work on the style properties of this element:
elm.style.width='400px';
elm.style.height='100px';
elm.style.background-color='#FF00FF'; //Won't work!
elm.style.backgroundColor='#FF00FF'; // Now, it will

From there, we can decide between 2 options : people write the css properties in javascript with the camelcase style or we find a way to let them write the css way.
Well, we need to change a word that is hyphenized by doing so :
If the string has an hyphen followed by a letter, erase the hyphen and then change the following first letter into an upper-case...
This may seem complicated, but this will be almost a one-liner!
Thanks to regular expressions, we can do this:

function camelize(val) {
   return val.replace(/-(.)/g, function(m, l){return l.toUpperCase()});
}
//example
camelize('background-color'); return backgroundColor

Thru the replace function we look for an hyphen followed by any letter ('.').
We capture the letter found thanks to the parenthizes then we apply a an anonymous function to the result.
The first parameter is the entire match which, in that case will be -c.
The following parameters represent each capturing parentheses.
We just change the captured letter to upper-case and send it back!
Was easy right ?

A first draft

As I think that being inventive is one of my best attribute in this world, I will call this function... setStyle...
This is how we are going to call the function:

setStyle(elm,prop,val);
//example
setStyle(document.getElementById('mySuperClass'),'background-color','#FF00FF');

And as you can see we will have to camelize the property, so let's do it:

function setStyle(elm,prop,val) {
           prop=camelize(prop);
           elm.style[prop]=val;
           return elm;
}

This is a blueprint because unfortunately, if we have seen the css way, the javascript way, now we have to see the browser way !

The browser way

This should be the browsers way in fact!
If you have read the entries about javascript animation, we've been already setting style to the properties and we have done some cross-browser correction.
Let's see the properties that could be troublesome.

Opacity

Well, this is easy: this property just do not exist in IE!
IE has it's own property that is filter:[typeOfFilter:value];
Where others accept a value between 0 and 1, IE wants a value between 0 and 100!
So to set the opacity of an element in cross-browser way, we will create one function :

function setOpacity(elm,val) {
          if(window.attachEvent) {
               elm.style.zoom = 1;
               elm.style.filter = "alpha(opacity=" + parseFloat(val*100) + ")";
                return elm;
          }
          elm.style.opacity  = parseFloat(val); 
   return elm;
}

First we check for an IE function that is not implemented in other browsers.
If the function exist we set an other IE property, zoom. (you can check what it is here:hasLayout
Zoom is an IE style property that gives the element the layout properties, adding some new features to the element)
We set the property the IE way and then we return.
If it's not IE, we do it the standard way.

I even think that we can simplify even more by just not checking the browser:

function setOpacity(elm,val) {
          elm.style.zoom = 1;
          elm.style.filter = "alpha(opacity=" + parseFloat(val*100) + ")";
          elm.style.opacity  = parseFloat(val); 
   return elm;
}

If we set a property that is not understood, the browser will just set it and ignore it but apply the property it can handle.

Float

The float is a keyword in Javascript and cannot be used, so javascript needs to refer to an other naming convention to refer to the style float property.

Ie refers to it as styleFloat
Others refer to it as cssFloat

let's update the function:

function setStyle(elm,prop,val) {
         if(prop=='opacity') return setOpacity(elm,parseFloat(val));
  if(prop=='float')   prop = (window.attachEvent) ? 'styleFloat' : 'cssFloat';
  prop = camelize(prop);
  elm.style[prop] = val;
         return elm;
}
function setOpacity(elm,val) {
          elm.style.zoom = 1;
          elm.style.filter = "alpha(opacity=" + parseFloat(val*100) + ")";
          elm.style.opacity  = parseFloat(val); 
   return elm;
}

we first check the 2 above properties: if it is opacity, we just return the setOpacity function, if it is the float property, we set the right naming according to the browser.
We could by the way do some lazy initialization here regarding the float property:

var styleFloat=(window.attachEvent) ? 'styleFloat' : 'cssFloat';
function setStyle(elm,prop,val) {
         if(prop=='opacity') return setOpacity(elm,parseFloat(val));
  if(prop=='float')   prop = styleFloat;
  prop = camelize(prop);
  elm.style[prop] = val;
         return elm;
}

The styleFloat variable will be set just once so we won't be checking this everytime the setStyle function is called.
This is not going to speed up your app that much but it's a way to do it.

Other properties

Well, all properties accept a unit like pixel, em, pt and whatsoever but the followings:
z-index,zoom and all the properties related to color!
So we are just going to check for the property and add the value with the proper unit:

function setStyle(elm,prop,val) {
        if(prop=='opacity') return setOpacity(elm,parseFloat(val));
  if(prop=='float')   prop = (window.attachEvent) ? 'styleFloat' : 'cssFloat';
  prop = camelize(prop);
         unit=(prop=='zIndex'||prop=='zoom'||/olor/.test(prop)) ? '':'px';
  elm.style[prop] = (typeof val=='string') ? val : val+unit;
         return elm;
}

If this is a property that doesn't require a unit, we set the unit to empty else we apply a default unit that is px,for pixel.
Then we check if the value is a string ('#FFFFFF','400px'), if it is we set it as it is, if it's a number, we set the unit to 'px'.

Here is how you can call the function:

var elm=document.getElementById('mySuperId');
setStyle(elm,'background-color','#00FFFF');
setStyle(elm,'opacity',.5);
setStyle(elm,'font-size','15px');
setStyle(elm,'width',200);

Conclusion

Well, this function allows us now to set the style of an html element in a cross-browser manner but we didn't check for complex properties like margin:0px 10px 2px 3px; or border:1px solid red and this will not work for now ! you will have to write each of them: margin-top, margin-left...
Also we can only set one property at a time, which is not a very fast way of doing it but let's see this in a next entry!

Javascript Animation : Changing Colors (5)

2007-10-07T00:45:00.001+09:00

We have seen so far how to manipulate different properties of a div such as the width, height, top, left and opacity. We also know how to apply easing to the interpolation in order not to have a mechanical animation.
Well, I guess it is time to expand the properties we can deal with and see how to animate colors !

The animation

Starting color:
End color:
test

Colors ?

What a better start than a refresher about colors ?
This may sound too much but let's see quickly some basic things about them as this will help us understand some programmatic points.
(Obviously, books exist only about colors but we will just see what is relevant for us in that case)
As you may know all the colors human can see is a combination of 3 primary colors.
The 3 primary colors are arbitrary colors that respond to some particular needs.
In art, the 3 primary colors are red, yellow and blue.
Electronic displays use for the most, red green and blue.
In printing industry, cyan, magenta and yellow.
The mixing of one set of primary colors allow to recreate all the colors you may need.
Computer displays use the red, green and blue primary colors, abbreviated to rgb.
So do the browsers!

RGB Notation

These 3 colors can be set different values, allowing different flavor of each : red or light red or light light red... for example.
Actual displays set 8 bits for each colors per pixel.
For reference' sake, 8 bits or one byte is something like : 01001100.
one bit can be set to 0 or 1, which means 2 possible value.
Therefore, one color can have 2⁸ values, 256 values or 255(starting from 0).

The RGB notation used the numerical value within 0 to 255 to define the value of one color, thus we get:

red:0 to 255
green:0 to 255
blue:0 to 255

As an example, if you set red as being 255 and green, blue as being 0, you get red
If you set red as 0, green as 255 and blue as 0, you will get... green !

But why I am talking about this ?

Because browsers deal internally with colors by using the RGB Notation like this:

rgb(255,112,220);

And this will help us a lot as we know how to interpolate and calculate numbers!

The HEXADECIMAL NOTATION

As you can see the rgb notation will certainly be helpful but have you ever written such a color when setting some style to your xhtml thru CSS ?

You have certainly written something like:
color:#FF0000;
which prints out the text in red!

This notation use the hexadecimal version of the rgb notation!
...
The hexadecimal counts from 0 to F (base 16) instead of 0 to 9 in decimal (base 10).
So A is equal to 10, B to 11, C to 12...
1A is 1*16+10=26
FF is 15*16+15=255

You won't really have to count using the hexadecimal base.
The hexadecimal system is used to set the 3 colors in a shorter way and easier way to remember, that's all we need to know!
So, #FF1AF1 is setting red as FF, green as 1A and blue as F1 which in decimal notation will be red:255,green:26 and blue:241!

Browsers and Colors

So we set the colors in hexadecimal but we need the rgb decimal numbers to animate the color!

In Firefox there won't be any problems because if you set the color in hexadecimal and query it thru javascript, Firefox will send you back the rgb notation!
But IE will send you back the hexadecimal value!
So we will need to convert the hexadecimal value back to a rgb notation!

document.getElementById('square').style.color='#FFFFFF';
alert(document.getElementById('square').style.color);
//In ie return #FFFFFF
//In Firefox return rgb(255,255,255)

Converting notations in Javascript

Well, we are lucky because javascript already has the function we need!

function d2h(dec) { 
       return dec.toString(16);
}
function h2d(hex) { 
       return parseInt(hex,16);
}

We are just wrapping them into two functions to short it up!
The d2h (decimal to hexadecimal) takes a decimal value and will send back the hexadecimal value.

alert(d2h(255));//alert FF

The h2d (hexadecimal to decimal) takes an hexadecimal value and will send back the decimal value.

alert(d2h('FF'));//alert 255

From there we can build 2 functions that will convert rgb and hexadecimal notation:

function rgb2h(r,g,b) { 
         return [d2h(r),d2h(g),d2h(b)];
}
function h2rgb(h,e,x) {
        return [h2d(h),h2d(e),h2d(x)];
}

These two functions send back an array of each value.
If you are not familiar with the [] notation, just know that it creates an array.
I'll write about this later I guess

We can use them like so:

rgb2h(255,255,255);// return [FF,FF,FF]
h2rgb('FF','FF','FF');// return [255,255,255]

Now it's time to create a cross-browser function that will allow us to get back an array of value of each rgb value:

function cssColor2rgb(color) {
     if(color.indexOf('rgb')<=-1) {
     return h2rgb(color.substring(1,3),color.substring(3,5),color.substring(5,7));
     }
     return color.substring(4,color.length-1).split(',');
}
//example:
cssColor2rgb('#FFFFFF'); return [255,255,255]
cssColor2rgb('rgb(255,255,255)'); return [255,255,255]

First we check if we do not have an hexadecimal value thru indexOf that will return the position of the search in the string if found or -1 if not found.
Then if the function didn't find the rgb string, it means that we are dealing with an hexadecimal notation so we send each value to the h2rgb thru the substring function:
color.substring(1,3) is FF as 0,3 is '#FF'
Then return
(By the way we check if rgb doesn't exist instead of looking for # because browsers start counting the value found from 0 or 1 but -1 means everywhere that it wasn't found)
Otherwise, we are in front of a string 'rgb(value,value,value)'.
The 'rgb(' and ')' are not necessary so we just get rid of them and split the string by comma returning an array.
So now we have solved the cross browser problem, let's see how to incorporate this in the animation!

The Color Animation Code

In order to simplify the code, we are going to see how to animate only the color and not other properties.
We are stepping back but this is to jump higher!

function animateColor(elm,begin,end, duration, fps) {

  if(!duration) duration = 1000;
  if(!fps) fps = 20;
  duration=parseFloat(duration);
  fps=parseFloat(fps);
  var interval    = Math.ceil(1000/fps);
  var totalframes = Math.ceil(duration/interval);

  for(i=1;i <= totalframes;i++) {
                 (function() {
                   var frame=i;
                   var b = cssColor2rgb(begin);
                   var e  = cssColor2rgb(end);
                   var change0=e[0]-b[0];
                   var change1=e[1]-b[1];
                   var change2=e[2]-b[2];

                  function color() {
                  var increase0=ease(frame, b[0], change0, totalframes);
                  var increase1=ease(frame, b[1], change1, totalframes);
                  var increase2=ease(frame, b[2], change2, totalframes);

    elm.style['backgroundColor']  = 'rgb('+parseInt(increase0)+','+parseInt(increase1)+','+parseInt(increase2)+')';        
                  }
                  timer = setTimeout(color,interval*frame);
                 })(); 
 }
}
function ease(frame,begin,change,totalframes) {
       return begin+change*(frame/totalframes);
}
//example:
animateColor(document.getElementById('squareColor'),'#ff0000','#0000ff',3000,20);

Well, this function is almost like the one we have seen so far!
We have simplify as we do not set the property we are animating for now.
Then we change the hexadecimal values to rgb notation, calculate a linear step for each rgb value and pass the integer value (parseInt)to the property!
That's all!

The hardest thing was to deal with the switching from one notation to an other!
The main function in itself doesn't change that much even if, for now, we have created a new function dedicated to color animation.
We will soon see how to reincorporate this into the main function animate!

Conclusion

We do know now how to animate colors and I guess this can be very useful but as always, there are many drawbacks;
- we have created a function to animate only the background color of the element!
We should be able to animate all the properties with only one function to allow complex animations
- we still need to add some properties to our animation tool box!
- we used the linear easing here, even if we have several easing flavors with us.
Could we create some new way of animating the element thru equations ?
I guess so...

Javascript Animation : Make things move smoothly (4)

2007-10-04T16:19:00.001+09:00

We have seen so far many ways to move a div property : you know how to make its width, height, top, left, opacity change over a chosen time and a number of frames. You also know the basic of easing and how it works, everything starts from one linear equation : y=mx+b.
Thanks to this, we are know able to create bunches of easing effects.
Let's explore them !

Easing by example : the square was the source

Let's start by a little animation that can handle what we have seen so far and some cool easing.
Obviously, they are many things we can improve and we will !

Cool Text

reset
Normal motion
Normal motion high quality
Normal motion low quality
Slow motion
Fast motion
Fade In
Fade Out
SlideIn
SlideOut

Easing equations

I hope you enjoyed this little basic effects because we will see how to do even more soon!
If you remember the last entry about easing, we have seen that everything was in relation with some core elements:
- object to animate
- start
- end - duration

From there we could built some other elements:

- object's property (we shall say properties soon!)
- frame per second or fps
- change in animation being the end-start

All these elements are linked thru one basic liner equation:
property value =(change/duration)*frame + start
or
y=mx+b
Where m is (change/duration) or c/d

We know that this is the shortest path to go from the start to the end as this equation will draw a line but we also know that life is not a straight line but something curved, changing all the time !

We tried to change the equation to something else by keeping the proportions of the equation, which means that if we had somewhere, we must remove somewhere else.

y=m*x*(x/d)+b

This is not a straight line but a curved line and that correspond to a quadratic easing !
If you multiply again by (x/d), it will be quintic...
We could create our own functions and I'm sure you will but let's for now, use the equations from Robert Penner from whom I have learn a lot !
He has spent a lot of time finding some cool equations creating effects, they are all based upon the following components:
- frame (time or t)
- change (c)
- start (begin or b)
- duration (d)

As it's not about reinventing the wheel all the time, we will use them!
I have kept Robert Penner abbreviation as you will certainly find them in many javascript frameworks like mootools, jQuery and the like !
So here we go!

easeInQuad = function (t, b, c, d) {
 return c*(t/=d)*t + b;
};
easeOutQuad = function (t, b, c, d) {
 return -c *(t/=d)*(t-2) + b;
};
easeInOutQuad = function (t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t + b;
 return -c/2 * ((--t)*(t-2) - 1) + b;
};
easeInCubic = function (t, b, c, d) {
 return c*(t/=d)*t*t + b;
};
easeOutCubic = function (t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
};
easeInOutCubic = function (t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t + b;
 return c/2*((t-=2)*t*t + 2) + b;
};
easeInQuart = function (t, b, c, d) {
 return c*(t/=d)*t*t*t + b;
};
easeOutQuart = function (t, b, c, d) {
 return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
easeInOutQuart = function (t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 return -c/2 * ((t-=2)*t*t*t - 2) + b;
};
easeInQuint = function (t, b, c, d) {
 return c*(t/=d)*t*t*t*t + b;
};
easeOutQuint = function (t, b, c, d) {
 return c*((t=t/d-1)*t*t*t*t + 1) + b;
};
easeInOutQuint = function (t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 return c/2*((t-=2)*t*t*t*t + 2) + b;
};
easeInSine = function (t, b, c, d) {
 return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
};
easeOutSine = function (t, b, c, d) {
 return c * Math.sin(t/d * (Math.PI/2)) + b;
};
easeInOutSine = function (t, b, c, d) {
 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};
easeInExpo = function (t, b, c, d) {
 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
};
easeOutExpo = function (t, b, c, d) {
 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
};
easeInOutExpo = function (t, b, c, d) {
 if (t==0) return b;
 if (t==d) return b+c;
 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
};
easeInCirc = function (t, b, c, d) {
 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
easeOutCirc = function (t, b, c, d) {
 return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
};
easeInOutCirc = function (t, b, c, d) {
 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
};
//a: amplitude (optional), p: period (optional)
easeInElastic = function (t, b, c, d, a, p) {
 if (t==0) { return b; } 
 if ((t/=d)==1) { return b+c; }
 if (!p) { p=d*.3; }
 if (a < Math.abs(c)) {  a=c; s=p/4; }
 else { a=Math.abs(c); s = p/(2*Math.PI) * Math.asin(c/a);}
 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
};
easeOutElastic = function (t, b, c, d, a, p) {
 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else {   a=Math.abs(c); var s = p/(2*Math.PI) * Math.asin (c/a);}
 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
easeInOutElastic = function (t, b, c, d, a, p) {
 if (t==0) return b;  
 if ((t/=d/2)==2) return b+c;  
 if (!p) p=d*(.3*1.5);
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else {a=Math.abs(c);var s = p/(2*Math.PI) * Math.asin (c/a);}
 if (t < 1) {return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;}
 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
};
easeInBack = function (t, b, c, d, s) {
 if (s == undefined) s = 1.70158;
 return c*(t/=d)*t*((s+1)*t - s) + b;
};
easeOutBack = function (t, b, c, d, s) {
 if (s == undefined) s = 1.70158;
 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
};
easeInOutBack = function (t, b, c, d, s) {
 if (s == undefined) s = 1.70158; 
 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
};
easeInBounce = function (t, b, c, d) {
 return c - easeOutBounce (d-t, 0, c, d) + b;
};
easeOutBounce = function (t, b, c, d) {
 if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b;} 
        else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} 
        else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;}
        else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; }
};
easeInOutBounce = function (t, b, c, d) {
 if (t < d/2) return easeInBounce (t*2, 0, c, d) * .5 + b;
 return easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
};

Wow, this was huge!
Finding evolutions to the animation thru equations might not be as easy but it gives you full control of what you want to do!
Remember that all these functions start from only one equation:
y=mx+b
So don't fear to try yourself!
3D games and much complexed animations are all based upon equations related to physics.
Why not had a friction coefficient ? an hypothetic wind ? some random evolutions too ?

Conclusion

I guess the animation function is starting to be interesting but as always, there are still many drawbacks:
- You can not animate several properties of an element! It's one property at a time.
- We do not cover all the properties possible like colors, borders and a bunch of other css properties!

Javascript Animation : take it ease-y ! (3,)

2007-10-01T21:49:00.002+09:00

Javascript Animation : basics of easing and Javascript : Controlling time entries developed some basics of what is easing and how to apply duration and frames to an animation.

In the first entry, we've seen how to create an easing out that will expand the width of a div quickly at the beginning and slowly at the end.
But we noticed that we didn't have any control over the time the animation will take and the second entry tries to answer this problem in a simple way. We were able to manipulate different properties of the div such as its width, height, opacity, left and top position thru an number of frames and a duration.

But...
We forgot about easing !
Let's see the actual function.

The animation function

function animate(elm,prop,begin,end,duration,fps) {

     if(!duration) duration=1000;
     if(!fps) fps = 12;

     var change       = end-begin;
     var interval     = Math.ceil(1000/fps);
     var totalFrames  = Math.ceil(duration/interval);
     var fixedStep    = change/totalFrames;
            
     for(i=1;i<=totalFrames;i++) {
        (function() {
           var frame=i;
           function inner() {
              var actualValue=begin+fixedStep*frame;

              unit=(elm=='opacity') ? '' : 'px';
              if(window.attachEvent && !unit) { 
                  actualValue*=100; 
                  obj.style.zoom = 1;
                  obj.style.filter = "alpha(opacity=" + actualValue + ")";
              } else {
                  obj.style[elm]  = actualValue+unit; 
              }
           }
           timer = setTimeout(inner,interval*frame);
        })();
    }
}
//example
animate(document.getElementById('bluesquare'),'width',150,400,1500,20);

You can find how this function works with some examples in the Javascript : Controlling time entry.
So, this function is basically adding a fix value to the property over time.
Let's suppose that we want to animate the width property of a div from 150px to 400px in 1.5 seconds with a 12 frames per second base, this is how the change will happen:

begin         = 150;
end           = 400;
change        = end-begin         = 400 - 150 = 250;
interval      = 1000/frames       = 1000/20   = 50;
total frames  = duration/interval = 1500/ 50  = 30;
fix value added per frame         = change/total frames = 250/30 = 8.33333..

So, we'll have a width changing from 150 to 400 pixels within 1500 milliseconds, separated by 30 frames of 50 milliseconds each, adding 8.3334 pixels
This is how then, we were calculating the new value of the width thru each frames :

var actualValue = begin+step*frame;
//first frame
var actualValue = 150 + 8.333*1  = 158.333
//second frame
var actualValue = 150 + 8.333*2  = 166.666
//third frame
var actualValue = 150 + 8.333*3  = 174.999

As you can see, we are adding a fix value multiplied by the actual frame to the original width.
When the function we'll reach the last frame, the width will be equal to 400 pixels

If you look at the calculation, we can see that the only value changing is the frame number, the actual time of the animation.
We can then write the general calculation for this animation like this:

actualValue = 150 + 8.3333*frame;

or...

 v = 150 + 8.333*frame;
//or 
y = 150 +8.333*x;

Noooooooo !!!
...

Fear not !
You shall keep reading, even if it reminds you some of these hours where you felt like everything was going upside-down in your head !
This is going to be very easy!

Linear easing equation : The Graph shows it all

Yes, I used the E-word, this is an equation but a very easy one (I can understand it, to say !)
You've seen that the animation was quite mechanical and indeed, if you take this equation and trace a graph of it, you will get a beautiful straight line !
Check for yourself with this website and enter this :
150+8.333*x
graph in new window
graph in same window

You should see this red line going straight !
In our animation code, y is equal to the value of the width and x is equal to the elapsed time expressed in frames.
So, the width (y) is a function of the time (x).
When looping thru the frames, the only unknown value is the the width that is calculated thanks to the frame.

Why Trying to get some curve ?

Before going further with this equation, we should perhaps remember what is so cool about easing.
Perhaps some of you are happy with the way the actual function perform the interpolation thru A to B, but don't you feel this is too clean ? too predictable ? too mechanical ?
In our last entry about controlling time, we took the example of a runner targeting 120 meters in 15 seconds.
We then calculated the average ratio, our runner should run per second to get from 0 to 120 meters within this 15 seconds.

var ratio = 120/15 = 8m/s

So, our runner shall run with a constant speed of 8 meters per second...
That's theoretical, mathematical but is it really realistic ?
If we change the meters into kilometers, is our runner being able to keep with a constant speed ?
He will certainly start at a slow speed at the beginning to keep some of his strength and speed up at the very end to be the first
In the meantime, he might be tired, get a sudden strength boosting him up, making its speed going up/down.

I guess that almost everything that moves is doing so with a speed that changes over time.
This is something natural and average should be kept for statistics.
Human eyes is used to see things change of speed in their run and that's the way we feel that this has to be 'real'.

Our calculation is everything but 'natural' or even closed to be !
In fact, it will never be but we can make it a little bit more natural by some calculations that will allow us to vary the ratio over time and thus, creating the Ease that will make it live !
With the first calculation, we were going straight to the point.
With easing, we will take a curved path to go to the same point!

Trying to get some life !

Now, it's time to play with this equation a little !
We are trying to add some calculation to the equation and see what we get:
y=150+8.333*x-((20*x)/x);

Don't try to understand why I have done this because I do not even know myself !
It's just an experimentation and you can copy and paste this into the above link and see how it goes!

test

You can see the value changing thru each frame.
What is important to notice is that you have the animation going back a little and then keeping its way.
This could be a kind of easing but if you look at the final value, you will see that it doesn't reach the one set !
So it's not exactly what we want...

In fact, we need to keep things related to the frame which multiply the constant.
Remember that we want to go from A to B by taking different paths.
We need therefore to keep things proportional to the main factor on which the value depends on : the time/frame.
By the way, we should perhaps change this constant back to what is was:

var step        = change/totalframes;
var actualValue = begin + step*frame;
//becomes 
var actualValue = begin + (change/totalframes)*frame;

The more constant we have, the more we'll be able to change their value during the process and create different easing type!

Ok, let's implement a basic easing out:

var actualValue=(change*frame/totalframes)*(frame/totalframes)+begin;

You should try to see the corresponding graph with the settings above:
250*((x/30)*(x/30))+150
and the original one:
150+(250/30)*x
You can see that the new equation is curved but more importantly, you can see that the two lines intersect at exactly the same point:
The final width!
We are just taking a different path, that's all.

test

If we want to create different easing, we should get the calculation of the actual value outside of the main function:

function animate(obj,elm,begin,end, duration, fps) {

  if(!duration) duration = 1000;
  if(!fps)      fps      = 20;

  begin     = parseFloat(begin);
  end       = parseFloat(end);
  duration  = parseFloat(duration);
  fps       = parseFloat(fps);

  var change      = end-begin;
  var interval    = Math.ceil(1000/fps);
  var totalframes = Math.ceil(duration/interval);
  var step        = change/totalframes;


  for(i=1;i < = totalframes;i++) {
    (function() {
        var frame=i;
        function inner() {
            var increase=easeQuad(begin,change,totalframes,frame);
            unit=(elm=='opacity') ? '' : 'px';
            if(window.attachEvent && !unit) { 
                increase*=100; 
                obj.style.zoom = 1;
                obj.style.filter = "alpha(opacity=" + increase + ")";
            } else {
                obj.style[elm]  = increase+unit; 
            }
       }
       timer = setTimeout(inner,interval*frame);
    })();
  }
}
function easeQuad(begin,change,totalframes,frame) {
 return (change*frame/totalframes)*(frame/totalframes)+begin;
}

By putting the calculation outside, we'll be able to set different easing as callback functions
You will be then able to apply your flavor of easing by adding the function you want to use!

Conclusion

We've seen how to create some easing from the function we created
We don't have that much possibilities for now so we'll see this in an other entry but don't forget to try to find some cool easing and share with everyone!
As for the function, it is still limited as we cannot apply more than one property at a time, it could be nice to be able to change the width, height, left,top and opacity properties in the same time to have something really interesting.
I'll write an other entry about some other functionalities!
Have fun with graphs and equations!
(I've never thought I will say such a thing one day!)

Javascript Animation : Controlling time (2)

2007-09-29T18:03:00.001+09:00

As we've seen in the entry basics of easing, we can apply very basic animations to a div by increasing its width.
We could change other properties like its height, opacity or color if we want, allowing some nice effects like fade in, fade out or slide in, slide out...

However,the animation didn't offer any control over the time required to reach the final width.
It will end when it will end !
This is fine if you don't need too complexed animations but being able to set the duration of the animation could be nice !

We will see in this entry how to control the time of the animation developed in basics of easing

What is an animation ?

If we go back a little and think about what is an animation, we could say that an animation offers the evolution of a value over time.
Basically, an animation starts, change something and ends.
the time between the starts and the end is the duration
So an animation will be:

- a subject to animate
- a start point
- a end point
- a duration
Let's take an example to understand a bit more what an animation involves.

Run Forest...

Let's say you want to run 120 meters in 15 seconds.
- The start line represents the beginning, 0 meter.
- The arrival point represents the end, 100th meter.
- The change between the start and the end is: chane=end-start,120-0=120
(In that case, the change is equal to the end)
- 15 seconds represent the duration.
If you want to reach 120 meters in 15 seconds, what is the number of meters(velocity) you must run per second ?
velocity = end/duration = 120/15 = 8 m/s.

We can then find back the reach point:

end = duration*velocity = 15*8 = 120 meters

Animation

Let's go back to our width animation by keeping in mind the runner example which gives a good idea of what is an animation, something in movement over time.
if our square has a width of 150px and that we want to animate it until 350px in 1000 milliseconds, we will have the following:
-start : 150
-end : 350
-duration : 1000
We will need to increase the width by:
-change : 350-150=200

- velocity = change/duration = 200/1000 = 0.2 px/ms.
We can then find back the reach point:
end = start + duration*velocity = 150+ 1000*0.2 = 350

We calculate the velocity by dividing the change by the duration in milliseconds, which give us the rise per millisecond of the width.
This can be a little bit too much to animate the width per milliseconds basis.

Movies

A movie is a sequence of images placed one after an other.
Human eyes will feel the movement is fluid if within one second you have 24 images.
It means you don't have an image changing each milliseconds !
You have the following interval:

interval=1000/24=41.66666666...

It means that we have one image every 41 milliseconds.

Animation and frames

We are going to use the same idea and use a rate that will give us the number of steps to perform the animation.
In our movie example, 24 is the number of steps or frames per second.
This is what you can add now;
- start : 150
- end : 350
- change : 350-150=200
- duration : 1000
- frames/s : 20

In that case, the interval will be :

interval = duration/frames = 1000/20 = 50

So what does it mean ?
In other words, we will have 20 frames (images for a movie) per second to create the animation.
which means that we'll animate every 50 milliseconds the width of the div 20 times or frames.

And if I want my animation to last 1700 milliseconds with 20 frames per second ??
We can find the total number of frames very easily;

interval per second = 1000/frames= 1000/20 = 50
frames required for the animation = duration/interval per second = 1700/50 = 34

It means that to perform a 20 frames per second base animation over 1700 seconds, we will need 34 frames in total.

This may seem a little bit confusing but let's see the code that will implement everything we have seen so far !

The code

First let's see how we are going to use the function;

//general definition
function changeWith(elm,begin,end,duration,fps);
//example
changeWidth(document.getElementById('bluesquare'),150,400,1500,20);

Our function takes as parameters everything we have seen so far.
So we will animate a element with an id of 'bluesquare' extends its width to 400px in 1 second and a half and with 20 frames per second.
Here is the html and css code:

HTML+CSS:

<style type="text/css">
#bluesquare {
width:150px;
height:150px;
background-color:blue;
}
</style>
<div id="bluesquare"></div>

The javascript code

We first need to do some calculation with the value passed to the function.
If you remember, we were calculating interval, change, total number of frames...

function changeWidth(elm,begin,end,duration,fps) {

       var change      = end-begin;
       var interval    = 1000/fps;
       var totalFrames = duration/interval;
       var fixedStep   = change/totalFrames;

       //code continues...
}
changeWidth(document.getElementById('bluesquare'),150,400,1500,20);

So first we calculate the difference between the start width and the end width.
In that case, it will be 400-150=250
Then we calculate the interval per second according to the frame rate.
(for a movie,we were calculating 24 images per second = 1000/24 =41.6666... milliseconds of interval between the images)
In that case, we will get 1000/20=50 milliseconds
As the animation last more than one seconds, the total of frames will differ from the frame per second rate, and we will get:
total frames = duration/interval = 1500/50 = 30

In the end, we calculate a simple constant that will tell us how many pixels we must add at every frame, which is to say every 50 milliseconds, to reach the 400 pixels.
fixedStep=change/totalFrames=400/30 = 13.33333... You can see that we have rounded the value of the interval.
We keep the fixedStep precise has it will help reach the final value of the animation.

So what's next ??
We know that we will animate a total of 30 frames spaced by 50 milliseconds for a total of 1500 milliseconds.
Each frame will add 13.333 pixels to the total of the element width and reach 400px.
A loop that goes from 1 to 30 frames will just do the job!

//...
for(i=1;i <= totalFrames;i++) {

 (function() {
      var n = i;
      function innerChangeWidth() {
           var width        = begin+(fixedStep*n);
           elm.style.width  = width+'px';
      }
      timer = setTimeout(innerChangeWidth,interval*n);
  })();
}

So we are looping thru the number of frames.
We capture the value of the actual frame within an anonymous function.
Then we calculate the value of the width :

var width        = begin+(fixedStep*n);
first frame:
var width        = 150 + (13.3333*1) = 163.3333
second frame:
var width        = 150 + (13.3333*2)= 176.6666
....

and add it to the elem.
We put these calculations within a inner function as we are not applying the new width directly but according to the value of the interval.
Therefore we set the function to a setTimeout with a delay calculated according to the frame:

timer = setTimeout(innerChangeWidth,interval*n);
first frame:
timer = setTimeout(innerChangeWidth,50*1);
second frame:
timer = setTimeout(innerChangeWidth,50*2);
...

As you can see the interval will grow accordingly from 50 to 100, then 150 until 1500 that will be the end !
If you do not understand the anonymous function and the inner function, you can have a quick look at my inner request for outer that explains the basics of this.
If we glue the pieces together, this is what we get:

function changeWidth(elm,begin,end,duration,fps) {

    var change      = end-begin;
    var interval    = Math.ceil(1000/fps);
    var totalFrames = Math.ceil(duration/interval);
    var fixedStep   = change/totalFrames;

    for(i=0;i < totalFrames;i++) {
     (function() {
         var n = i;
         function innerChangeWidth() {
              var width        = begin+(fixedStep*n);
              elm.style.width  = width+'px';
         }
         timer = setTimeout(innerChangeWidth,interval*n);
     })();
   }
}

Finally some animations here!

It's been certainly boring some times or not very clear, but we can finally see the result of this function and if you came that far, I applaud !

test

What's next ?

As you can see we have taken control over time !
This was a little bit long but I hope you have grasped the concepts.
We called this function 'changeWidth' but hey, why not make it a little bit more flexible ?
I guess we can do the following animations with very few changes:

- width
- height
- left
- top
- opacity

Refactoring the code

As I told you, we can keep the same function and change just a few things:

function animate(elm,prop,begin,end,duration,fps) {

        if(!duration) duration=1000;
        if(!fps) fps = 12;

        var change       = end-begin;
        var interval     = Math.ceil(1000/fps);
        var totalFrames  = Math.ceil(duration/interval);
        var fixedStep    = change/totalFrames;
            
        for(i=1;i<=totalFrames;i++) {
           (function() {
              var n=i;
              function innerChangeWidth() {
                 var increase=begin+(step*n);
                 unit=(elm=='opacity') ? '' : 'px';
                 if(window.attachEvent && !unit) { 
                      increase*=100; 
                      obj.style.zoom = 1;
                      obj.style.filter = "alpha(opacity=" + increase + ")";
                 } else {
                     obj.style[elm]  = increase+unit; 
                 }
             }
             timer = setTimeout(innerChangeWidth,interval*n);
           })();
       }
}
//example
animate(document.getElementById('bluesquare'),'width',150,400,1000,12);
//or 
animate(document.getElementById('bluesquare'),'width',150,400);
animate(document.getElementById('bluesquare'),'height',150,400);
animate(document.getElementById('bluesquare'),'top',0,100);
animate(document.getElementById('bluesquare'),'left',0,150);
animate(document.getElementById('bluesquare'),'opacity',0.2,0.8);

So what did we do ?
Well, we added one parameter,prop, to the function that is in charge of specifying the property on which the animation will work: width, height, top,left, opacity.
We set some default value to the duration and the fps.
There is may be an obscure part related to the opacity, but I will link to this subject later as it is just a cross-browser fix.

We are now able to move the div, create a slide in, slide out, fade in, fade out, slide in horizontal, slide out horizontal !
With one function !

test

Conclusion

In one function, we are now able to create different animations that will work on different properties, have a desired duration and frames !
We know control the time but this is far to be perfect...

We focus ourself on being able to play with the time, which in term will perhaps allow us to go back and forth in time, rewind, forward the animation as will but we forgot one element:

EASING

As we are just adding a constant to each new frame to the animated element, the animation is very mechanical and is a little bit boring.
We need to find a way to create some easing in/out like we did in the first entry so that the animation will look more appealing by having not a constant added to each frame !
Now, that we control the time and different parameters of the animation, we might be able to create some cool easing in, easing out, easing in/out !

My inner request for Outer !

2007-09-29T00:20:00.000+09:00

If you read the preceding entry basics of easing and that your are not familiar with javascript, you were perhaps surprised with the following code concept:

function greetings(msg) {
        function display() {
            alert(msg);
        }
        display();
}

So what's going on there ?
We have a main function that receives a string as a parameter.
Nothing extraordinary here!
Then we define a function within the main function that will be in charge of alerting the parameter.
Here it's a little bit unusual!
In fact, you can define a function from within a function in javascript and you can nest the functions as will !
The inner function can access the global variables define within the scope of the outer function.
Why is it so cool will you ask?
Well, the cool thing about inner functions is that they will work even if the outer function as returned and this can be very useful for dealing with variable scoping.
You can write the above inner function with an anonymous function if you want:

function greetings(msg) {
        (function() {
            alert(msg);
        })();
}

This is an anonymous function as it does not have any name !
Enclosing an anonymous function with parentheses ()();, will cause the function to be executed right away !

Ok, this example is very simple and is not very useful, so let's see something more powerful.
If you do the following, what's going to happen ?


function myEvents(elm,events) {
   for(i=0;i < events.length;i++) {
      elm['on'+events[i]]=function () { 
           alert(i);
        }
   }
}
myEvents(document.getElementById('the_click'),['mouseover','mouseout']);

try me
if you try this function, mouseovering and mouseoutting (it's new) the html element will alert... 2 every time !
We could have expect 0 for mouseover and then 1 for mouseout but no,no.
Why then ?
This is a scoping problem;
myEvents function, the main function has elm, events and i as variables.
As I said, inner functions can access the variables of the outer functions but one important thing:
If you don't call the inner function during the loop,the function will accede the value of the variables once the outer function has returned !
That is why this outputs the last value of i and not the value in between.

So how can we output the right value ?
As this is a scoping problem, we need to scope the value of the variable to the scope of an inner function that we will call right away.

function myEvents(elm,events) {
   for(i=0;i < events.length;i++) {
      function display() {
      elm['on'+events[i]]=function () {
           var n=i; 
           alert(n);
        }
      }
      display();
   }
}
myEvents(document.getElementById('the_click'),['mouseover','mouseout']);

try me
Tadam !

It doesn't work !
If you have a closer look to the function above, we are trying to scope the value of i within the anonymous function applied to the object.
But this function is not executed right away, it will be executed when you will mouseover or mouseout on the link.Therefore, this function is calling the last value of the outer function.
We need to capture the value within an inner function that will be executed right away.
So...

function myEvents(elm,events) {
   for(i=0;i < events.length;i++) {
      function display() {
        var n=i; 
      elm['on'+events[i]]=function () {
           alert(n);
        }
      }
      display();
   }
}
myEvents(document.getElementById('the_click'),['mouseover','mouseout']);

try me
Tadam !

It works !
In this last function, we capture literally the value of the global i to the scope of the display function by putting it in the variable n.
While we have this value under the hat,in our scope, we execute the function that will refer to the value we want !
If writing and finding a name to this 'capturing' function is a pain, just short it up:

function myEvents2(elm,events) {
   for(i=0;i < events.length;i++) {
      (function () {
           var n=i;
      elm['on'+events[i]]=function () { 
           alert(n);
        }
      })();
   }
}