Until today, I'd never really delved into when and when not to use a semicolon to close a line in JavaScript. I used to use them excessively, which is safe, but recently tried abandoning the semicolon after all closing brackets ("}"). This apparently broke some of my code today though, and I discovered that I need to keep the semicolon after the closing bracket of function expressions, while it is safe to leave it out after the closing bracket of a function statement. The different usage being illustrated here:

// Function expression

var myFunction = function(...) {
    ...
};

// Function statement

function myFunction(...) {
    ...
}

One of the projects I've been working on does a lot with communication between JavaScript and Flash. The ExternalInterface available in ActionScript 3 makes this a lot easier, and I've been wanting to do something cool with it. For now, I've worked on this example to illustrate the basics of how ExternalInterface works and its simplicity.

The relevant portion of the ActionScript:

// Add an ExternalInterface callback for communication from JavaScript

function flashCallback(data:String):void {
    textBox.text = "JavaScript: You clicked " + data + ".";
}
ExternalInterface.addCallback("flashCallback", flashCallback);

// Add listeners to communicate to JavaScript via ExternalInterface

circle.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
    ExternalInterface.call("jsObject.callback", "Green Circle");
});
square.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
    ExternalInterface.call("jsObject.callback", "Red Square");
});

The relevant portion of the JavaScript:

// Create a JavaScript object containing the callback for communication from Flash and triggers to communicate to Flash

var jsObject = (function() {
    var triggers = document.getElementsByTagName('a');
    var init = (function() {
        YAHOO.util.Event.addListener(triggers, 'click', function(e) {
            YAHOO.util.Event.stopEvent(e);
            YAHOO.util.Dom.get('mySWF').flashCallback(this.innerHTML);
        });
    })();
    return {
        callback: function(data) {
            YAHOO.util.Dom.get('flash_response').innerHTML = 'Flash: You clicked the ' + data + '.';
        }
    }
})();

View source on the example for more details.

Example

Download the FLA

Here are two examples of how to use setTimeout in an object constructor with public methods added to the prototype. Functions called using setTimeout are executed in the scope of the window object, so the this keyword does not apply. In both of these examples, clicking on a link triggers an alert after a pause of two seconds. In the first example, the alert function and the setTimeout are both in a public method of the object instance. In the second example, the setTimeout is in one public method while the alert is in another.

Example 1

var myObject = function(myArgument) {
    this.myProperty = myArgument;
    this.myTrigger = document.getElementById('myLink');
    this.init();
};
myObject.prototype.init = function() {
    this.myProperty = 'New Value';
    YAHOO.util.Event.addListener(this.myTrigger, 'click', this.myMethod, this);
};
myObject.prototype.myMethod = function(e, obj) {
    var myFunction = function() {
        alert(obj.myProperty);
    };
    YAHOO.util.Event.preventDefault(e);
    setTimeout(myFunction, 2000);
};
new myObject('Initial Value');

Example 2

var myObject = function(myArgument) {
    this.myProperty = myArgument;
    this.myTrigger = document.getElementById('myLink');
    this.init();
};
myObject.prototype.init = function() {
    this.myProperty = 'New Value';
    YAHOO.util.Event.addListener(this.myTrigger, 'click', this.myMethod1, this);
};
myObject.prototype.myMethod1 = function(e, obj) {
    YAHOO.util.Event.preventDefault(e);
    setTimeout(function() { obj.myMethod2(); }, 2000);
};
myObject.prototype.myMethod2 = function() {
    alert(this.myProperty);
};
new myObject('Initial Value');

Putting something up here again for my own reference. The comments on this article are the part that interested me. I like using object literal notation and wanted to know if it would be possible to write a reusable object constructor in literal notation. From all the discussion, it seems that making object constructors is best still done using a prototype function. Object literal notation is great for creating a single instance of an object but not ideal for creating an object constructor that can be used to create multiple instances of an object. If anyone knows differently, I'd be interested.

JSON for the Masses

Edit: Here are two sites that offer utilities to create constructor classes from an object in literal notation:

• Classier JSON
• A Base Class for JavaScript Inheritance

Throwing this up here partly for my own reference.

AJAX: Selecting the Framework that Fits

Reviews five JavaScript libraries (Dojo, Prototype/Scriptaculous, Direct Web Remoting, Google Web Toolkit, and the Yahoo! User Interface Library) and evaluates them on a couple categories. Article picks the YUI library. Glad I use and am a part of that one. It's one of Yahoo's strongest points in my opinion. Check it out if you are looking for a JavaScript library:

http://developer.yahoo.com/yui/