JavaScript Programming

The best documentation on JavaScript available on the Internet is the one on the Mozilla development center. All the other sources are just not worthy and full of errors.

Syntax and Concepts

Using the var keyword means that the declared variable is local to the function (and thus is discarded once the function exits). To bind a variable to the global scope (window), just declare the variable without using var.

Hints and Tips

• Deleting options in a select element (in a form):

document.my_form.my_select.options[index] = null;

Note that this syntax probably also works for other arrays of objects (untested yet, though).

• Outputting quickly (for debugging) an array:

alert(my_array);

will display all the elements of the array, separated by commas.

• Clickable link, calling some JS code:

<a href="page_no_JS.html" onclick="javascript: doSomething(); return false;"> ?

This works very well if you have two versions of your site. This will hide the JavaScript code in the status bar in Firefox, which is much better.

• There is NO default arguments for JavaScript functions. You can however easily "simulate" default arguments by testing if a given argument is undefined, and setting it to a default value in that case (Prototype uses this technique).

• In a class, or object related code, you must use the this keyword explicitly all the time. Even when calling methods.

• Be careful when outputting text that needs to be parsed as a JavaScript string, but in fact contains JSON data. You will need in that case to double escape each backslash, as the first JS parsing (by the interpreter) will remove this backslash and the special character it contained. For example:

var myJSONString = '{ "data" : "Some text.\nAgain some text."}';
var data = myJSONString.evalJSON(); // This won't work as there is in fact a newline in the string, whereas it should be encoded data.

var myJSONString = '{ "data" : "Some text.\\nAgain some text."}';
var data = myJSONString.evalJSON(); // This works fine.

• This code will simulate a static method for the class Item (same is possible for properties):

Object.extend(Item,
{
	createNewItem: function(referenceItemId)
	{
		// doSomethingHere();	
	}
});

Preloading Images

• Note that once an image is preloaded, you must attach it to the document somehow. Else it seems Firefox can somehow 'forget' it, and it will be fetched again, thus you lose the benefits of preloading.

• Sample code for preloading (this uses Prototype):

function preloadNormalImages(url_array)
{
	url_array.each(function(url)
	{
		var normal_image = new Image;
		normal_image.onload = function() { $(image_preload).setAttribute("src", url); };
		normal_image.src = url;
	});
}

JavaScript Frameworks & Libraries

• Prototype is a fantastic JavaScript framework. It is so good that it's almost impossible to program in JavaScript without it.

• ExtJS is an advanced JS framework for managing page layouts, etc. It can be used as a good foundation to build a web application similar to a desktop one.

• FCKeditor: a rich text editor that can be integrated into any web page. Integration is really easy, at least for a PHP environment.
  • Warning: due to a strange encoding of the source files on the package, it seems some UTF BOM characters are present. This causes some weird character output when using PHP integration (at least, untested with other environments). Remove these strange characters from the PHP integration files (fckeditor.php and all).
  • By default, FCKeditor converts the latin characters directly to HTML entities (eg, é is converted to é). To disable that, set IncludeLatinEntities to false in the configuration (the file fckconfig.js).

FCKConfig.ProcessHTMLEntities	= true;
FCKConfig.IncludeLatinEntities	= false;
FCKConfig.IncludeGreekEntities	= false;

Events

• When submit() is called on a form programmatically, it won't be caught by an event set on the form.