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.

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.

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 Libraries

• 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 ;

Prototype

• Binding is one of the most useful functions in Prototype. In particular, when iterating over objects with an each and a defined function, the function won't be binded to the current object. You must manually bind it.

• When using classes, use the Prototype classes functions (Class.create()).

• evalJSON() works well, but not the same way as eval() as it is a String method, thus you call it directly on your JSON string.

Problems & Questions

• Best way to make the equivalent of a static property in a JS class?