The Problem: Server-side

To get a better feeling for the problem, I’ll show you what happens when we pass an array to json_encode:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

// Now encode the array to JSON format
$json = json_encode($foo);

// Send to to the client
echo $json;
...
// This sends the following string to the client:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"function(){return \"foo bar\";}"
}

Because PHP reports some errors when we don’t enclose the ‘function’ with quotation marks, it not possible to omit those. So basically, it’s not possible to use json_encode() to create a JSON formatted string with functions.

The solution

My solution is very simple:

• Loop over the associative array that is about to be encoded
• Look for values that start with a function definition (like ‘function(’)
• Remember the value and replace it with a unique key (within the assoc array)
• Encode the changed assoc array to JSON using json_encode()
• Replace the unique keys enclosed in quotation marks with their original values
• Echo the json string

In PHP:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

$value_arr = array();
$replace_keys = array();
foreach($foo as $key => &$value){
  // Look for values starting with 'function('
  if(strpos($value, 'function(')===0){
    // Store function string.
    $value_arr[] = $value;
    // Replace function string in $foo with a 'unique' special key.
    $value = '%' . $key . '%';
    // Later on, we'll look for the value, and replace it.
    $replace_keys[] = '"' . $value . '"';
  }
}

// Now encode the array to json format
$json = json_encode($foo);

// $json looks like:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"%function%"
}

// Replace the special keys with the original string.
$json = str_replace($replace_keys, $value_arr, $json);

// Send to to the client
echo $json;

// This echoes the following string:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":function(){return "foo bar";}
}

Now the ‘function’ key is not a String anymore, but it’s a function. So our problem is solved. When using Prototype, it will look something like this:

new Ajax.Request('json_server.php', {
  method:'get',
  onSuccess: function(transport){
     var json = transport.responseText.evalJSON();
     alert(json.function()); // => alerts 'foo bar'
   }
});

There might be dozens of solutions to the problem stated above, but I couldn’t find ‘em on the net. If you know a better technique, please share it!

GChart is a small piece of javascript (packed 2.4kb) that enables using the Google Chart API in an easy way. GChart translates passed options to a url that can be used to request a chart from the Google Chart API. Also it provides several ways to insert, apply or return the chart based on the passed options.

It implements almost all parameters the Google Chart API accepts. You can read more about it on the GChart Project Page. For a quick download, go here, and if you just want to see the GChart source, go here.

GChart

To use GChart, just include gchart.js in the header of your page, and when the window’s finished loading, do something like this:

Chart.render({
	renderTo: 'div-target', 	// Target element to append the image to.
	data: [[1,10,3],[14,20,213]], 	// Two datasets.
	encoding: 't',			// Use the text encoding.
	title: 'Foo',			// Set the title of the chart.
	type: 'lc'			// Specify the type.
	axistype: 'x,y'			// Specify the axis type.
	size: '300x200'			// Specify the size of the chart.
});

Chart generated with the code above.

The type, axistype and size have default values, but I added them for illustration. This javascript appends a basic chart to ‘div-target’. The options you can pass to GChart.render() are:

/**
 * @type {String/Element} The id of the node or a DOM node that will be the container to render the chart into.
 */
renderTo: false,
/**
 * @type {String/Element} The id of the node or a DOM node corresponding to an IMG that is already present.
 */
applyTo: false,
/**
 * @type {String} Specifies the size of the chart like x (defaults to 300x200).
 */
size: '300x200',
/**
 * @type {String} Specifies the type of the chart (defaults to 'lc').
 */
type: 'lc',
/**
 * @type {String} Specifies the chart encoding, can be 'simple' or 's', 'text' or 't' and 'extended' or 'e' (defaults to 's').
 */
encoding: 's',
/**
 * @type {String/Array} Dataset(s) for the chart, can be a multidimensional array or a encoded string (defaults to []).
 */
data: [],
/**
 * @type {Integer} Specifies the max value of a dataset, read  maxValue (defaults to false).
 */
max: false,
/**
 * @type {String} Image alt attribute (defaults to '').
 */
alt: '',
/**
 * @type {String} Chart title (defaults to null).
 */
title: null,
/**
 * @type {String/Array} Legend, can be an array or a formatted string (defaults to null).
 */
legend: null,
/**
 * @todo implement!
 * @type {String/Array} Labels for the dataset(s), can be an array or a formatted string (defaults to []).
 */
labels: [],
/**
 * @type {String} Axis type.
 */
axistype: 'x,y'

As you can see I implemented just a few of the API supported arguments, but I expect to have implemented all arguments this weekend.

To get started, you should first get familiar with the Chart API. It’s necessary you understand the encoding types. GChart accepts all of them, but also it accepts an array of datasets and encodes it for the encoding type you specify.

function test(){
	return ['first!', 'second!'];
}

[first, second] = test();

alert(first); // should say 'first!'
alert(second); // should say 'second!'

I was inspired by the PHP list function. Funny enough it worked in Firefox and Opera, but Safari and IE failed this simple test. A bit disappointed I came up with a list() implementation in javascript:

// My list javascript implementation.
function list(variables, values, scope){
	for(var i = 0; i < variables.length && i < values.length; i++){
		(scope || this)[variables[i]] = values[i];
	}
}

// Example usage:
list(['first','second'], test());
alert(first); // says 'first!'
alert(second); // says 'second!'

// Example explaining the scope argument.
var obj = {};
list(['first','second'], test(), obj);
alert('obj.first:'+obj.first); // says 'obj.first:first!'
alert('obj.second:'+obj.second); // says 'obj.second:second!'

The list function takes three arguments. The first argument is an array of variable names and the second one is an array of values. The values are mapped on the variable names. The variables are available in the passed scope (the third argument). The default scope is the 'this' scope. When you're not familiar with the scope thingy, go read 'Getting Funky With Scopes and Closures' written by Mark Wubben.

The javascript ‘with’ keyword

The javascript with keyword is a handy function when you’re dealing with long namespaces like objname.attributename.element.style.display. Here’s an example:

// Original code.
object.attr.element.style.display = 'block';
object.attr.element.style.padding = '10px';
object.attr.element.style.fontSize = '1.4em';

// Code using 'with'.
with(object.attr.element.style){
	display = 'block';
	padding = '10px';
	fontSize = '1.4em'
}

// Another example.
var foo = object.attr.arrayObj[0].value;
var bar = object.attr.arrayObj[1].value;
var baz = object.attr.arrayObj[2].options[object.attr.arrayObj[2].selectedIndex];

// Example nested 'with'
with(object.attr){
	var foo = arrayObj[0].value;
	var bar = arrayObj[1].value;
	with(arrayObj[2]){
		var baz = options[selectedIndex];
	}
}

Note that code without with is slightly faster because with forces the specified object to be searched first for all unqualified name lookups. The with keyword can help reducing the file size of your javascript. Read more about it on Mozilla Development Center.

Replacing if conditions with ‘String.indexOf’

If you have an if condition and you’re comparing a variable with some string, use String.indexOf to shorten the condition:

var tagname = document.getElementById('someElement').tagName.toLowerCase();

if(tagname == 'div' || tagname == 'input' ||
	tagname == 'p' || tagname == 'span'	||
	tagname == 'blockquote'){
	// do some action
}

if('div|input|p|span|blockquote'.indexOf(el.tagName.toLowerCase()) != -1){
	// do some action
}

This technique also reduces the file size, but the computation if the index might take a little longer. When you’re not using this in loops that loop more than 100 times, I don’t think you’ll notice a delay.

Using the ‘arguments’ variable

I find myself using the arguments array quite a lot when debugging. It’s an easy way to understand how a function’s called, and which arguments are passed to it. In some older browsers there are two handy properties in the arguments variable: arguments.caller and arguments.callee. Modern browsers deprecated those two, but kept the arguments.length property. Here’s an example:

// You want to know which arguments are passed to someFunc().
function someFunc(){
	for(var i = 0; i < arguments.length; i++){
		alert(arguments[i]);
	}
}

I think most people already knew this one. But when you're learning a new javascript lib with a lack of documentation, or trying out code someone else wrote (without proper documentation), this technique let's you understand functions much quicker/better. Read more about arguments on the Mozilla Development Center.

// Detect Google Gears.
try{
	window.gears = !!(typeof GearsFactory != 'undefined' || navigator.mimeTypes['application/x-googlegears'] || new ActiveXObject('Gears.Factory'));
}catch(e){}

// Detect Dojo Offline.
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.setAttribute('src', 'http://localhost:8123/polipo/offline');
window.offlineCacheCallback = function(name, results){
	head = script = null;
	window.djoffline = true;
};
head.appendChild(script);

// Use a timeout because IE isn't finished
// with dojo on the window.onload event.
setTimeout(function(){
	alert('gears: ' + window.gears);
	alert('dojo offline: ' + window.djoffline);
},1000);

To see this working, go visit the example page. To detect Google Gears is quite obvious. Just check if some variables exist. To detect a Dojo Offline installation, we to insert a script tag in the html head. The script tags’ src attribute points to some localhost service called Polipo, a caching web proxy Dojo Offline is built on. When the service exists, it’ll call the window.offlineCacheCallback function. So when that function is called, we know Dojo Offline is installed and running.

Other engines?

I also tried to sniff Adobe Air, the former Adobe Appollo, but I couldn’t find a way to do this. I don’t think it’s possible to do this through javascript (only through flash/actionscript). Another client side storage provider is Microsoft Silverlight. I didn’t do any research on this one, because I couldn’t get any examples running.

Array.sort()

You can use Array.sort() for basic numerical and alphabetical sorting. Here are some examples:

//sorting integers
[1,3,2,5,4].sort(); // => 1,2,3,4,5
//sorting floats
[1.2,1.1,1.5,2.6,0.21].sort(); // => 0.21, 1.1, 1.2, 1.5, 2.6
//sorting both integers and floats
[1.0,1,2,2.0,1.5,2.5].sort(); // => 1, 1, 1.5, 2, 2, 2.5

//sorting chars
['a','c','e','b','d'].sort(); // => a,b,c,d,e
//sorting strings
['aa','cz','bd','cc','bcc','bc'].sort(); // => aa,bc,bcc,bd,cc,cz
//sorting both strings and chars
['aa','az','b','cc','bc'].sort(); //=> aa,az,b,bc,cc

//sorting integers and strings
['a',1,'c',3,'e',2,'b','d'].sort(); // => 1,2,3,a,b,c,d,e

Array.sort(callbackFunc)

You can also define your own sorting function. This callback function must have two input arguments, and always returns -1 (all integers < 0), 0 or 1(all integers > 0).

• if callbackFunc(a,b) is less than 0, place a before b.
• if callbackFunc(a,b) returns 0, leave a and b unchanged in respect to eachother.
• if callbackFunc(a,b) is greater than 0, place a after b.

A basic example for sorting an array of integers using a callback function:

function callbackFunc(a, b){
	return a - b;
}

[1,3,2,5,4].sort(callbackFunc); // => 1,2,3,4,5

The callback function really come in handy to sort arrays of objects. Let’s say we have an array of object with three properties: ‘firstname’, ‘lastname’ and ‘age’. Let’s say we want to sort the object on the lastname and on the firstname. This is a way we could sort those objects:

var objectArray = [
	{firstname: 'Marie', 	lastname: 'Doe', 	age: 28},
	{firstname: 'Will', 	lastname: 'Brown', 	age: 28},
	{firstname: 'James', 	lastname: 'White', 	age: 28},
	{firstname: 'John', 	lastname: 'Doe', 	age: 25},
	{firstname: 'Sarah', 	lastname: 'Doe', 	age: 25},
	{firstname: 'George', 	lastname: 'Williams', 	age: 25}
];

function callbackFunc(a,b){

	if(a.lastname == b.lastname){

		if(a.firstname == b.firstname){
			return 0;
		}

		return (a.firstname < b.firstname) ? -1 : 1;
	}

	return (a.lastname < b.lastname) ? -1 : 1;
}

objectArray.sort(callbackFunc);

/**
 * After sorting the objectArray will be like this:
 * [
 * 	{firstname: 'Will', 	lastname: 'Brown',	age: 28},
 * 	{firstname: 'John', 	lastname: 'Doe',	age: 25},
 * 	{firstname: 'Marie', 	lastname: 'Doe',	age: 28},
 * 	{firstname: 'Sarah', 	lastname: 'Doe',	age: 25},
 * 	{firstname: 'James', 	lastname: 'White',	age: 28},
 * 	{firstname: 'George', 	lastname: 'Williams',	age: 25}
 * ]
 */

If you want to know more about sorting with Array.sort(), check out the Core JavaScript 1.5 Reference:Global Objects:Array:sort.

Some things you should know

Before telling you under which rocks you should look for javascript guru’s, I’ll give an example of how you should not ask for help. Panky wrote the following comment on an article I wrote:

Hy! I used the full-full packed mootools (v1.0) and dosen’t work the code! What can I do? I don’t understand what’s the problem. :’(

Panky

When I read this I needed about ten minutes to get back on my seat again because I was rolling on the floor laughing (read: rofl). If you’ve got a question/problem, you really have to be more specific. Always include the code that’s not working. Otherwise the javascript wizards can’t help! If it’s a lot of code and you don’t have your own website/ftp server, just drop the code at Pastebin. Another important thing is to tell others which browser you’re testing with. Summarized:

• Include the code that’s not working.
• Post the name and version of the browser you’re testing with.

Google Groups

Don’t like newsgroups? Try Google Groups! There are a lot of javascript related groups. Also you can find an awful lot of threads with questions, examples and solutions. There are even javascript groups in other languages than English. A good place to start is comp.lang.javascript. All you have to do is subscribe to the group and you can start asking questions. Do you have a question about using a javascript framework? Just look around for framework specific groups like the ones for jQuery, Prototype or the Dojo toolkit.

Forums

Almost every framework has it’s own forum, so when you’re stuck with some framework specific code then you should definitely look around for the developers forums. Just like Google Groups there are lots of solved problems, maybe even that are the same like yours. To get you started, here’s the forum for Mootools.

IRC and mailinglists

Well, I’m not using IRC or mailing lists, but I heard there are lots of javascript masterminds hiding from the crowd.

So, now you know where to look for javascript Buddha’s, also don’t hesitate to ask me!

Version 0.2 has different syntax than 0.1. It now looks in the dom automatically for elements with the ‘history’ attribute set, so you don’t have to pass the elements to HistMan.start(). Also, you can add elements programmatically to the HistMan register by using some javascript. Just take a look at the project page for more information and downloads.