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.

• There are no constants in JS. The const keyword is a Mozilla extension (supported by Opera); this does not allow class constants though. The best for creating a class constant is just to declare a MyClass.MY_CONSTANT property. But the fact that it's a constant is not actually enforced (eg, it is only a convention).

• The for (property in obj) construct allows you to loop over the properties of a JS object (which is always a Hash). Note that the property variable gets assigned the key name, if you want to access the actual value, write obj[property] in the loop. Also, don't forget that it will loop over all the properties, including the methods! This statement should then only be used when dealing with plain data holding objects.

Hints and Tips

• document.write() should *never* be used. It is an extremely dangerous method. Instead rely on Prototype which has much safer methods.

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

• To create static methods, properties and constants for a class, don't use Object.extend(); this would return an object (which cause problems in Opera if you don't allocate the object to a variable), and with Prototype Object.extend() is not necessary anymore. Just declare the methods directly on the class:

ShopItem.createNewItem = function(referenceItemId)
{
	// doSomethingHere();	
}
});

Images

• If you preload 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;
	});
}

• You can obtain in JS the width and height of an Image. Just create a new Image via new Image(), set the source. Then when the onload event is fired, you can obtain the width and height directly as property of the image.

• new Image() is equivalent to document.createElement("img");

• On Internet Explorer, if the image is already on the cache, the load event won't fire *if you set the image source before you register the event*. In order to avoid that, just register the event first. The event will then fire as soon as you set the source of the image.
• Also note that on IE, when the event fires in this way, the code of the event is executed instantly. The behavior seems to be different from Firefox when the current running script finishes its execution before the event code runs.

Events

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

Standard Library (and crossbrowser methods)

• Be careful about the replace() method of strings; it will only replace one occurrence at most. Use the gsub() method in Prototype.

JavaScript Frameworks & Libraries

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

• Scriptaculous is a add-on to Prototype. It provides visual effects, drag and drop support, and more.

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