if (Math.random() < 0.5) {
myFunc = function() {
alert('heads');
};
} else {
myFunc = function() {
alert('tails');
};
}

myFunc(); // alerts "heads" or "tails" depending on random value
You can also pass functions as parameters to other functions, which is very useful for callback functions:
function do_something(callback_function) {
alert('hello');

if (callback_function) {
callback_function();
}
}

var my_callback = function() {
alert('goodbye');
};

do_something(my_callback); // alerts "hello" and then "goodbye"
You can also return a function from a function:
function get_multiplier(factor) {
return function(num) {
return num * factor;
};
}

var times_5 = get_multiplier(5);
var result = times_5(10);

alert(result); // alerts "50"

var six_times_two = get_multiplier(6)(2);

alert(six_times_two); // alerts "12"
You can also define "anonymous" functions without a name and even execute them:
(function(first_name, get_last_name) {
var last_name = get_last_name();

alert(first_name + ' ' + last_name); // alerts "Jesse Skinner";
})('Jesse', function(){ return 'Skinner'; });
Note that in order to execute an anonymous function you have to wrap it in () parentheses first.
So that's just some of the unusual stuff you can do with JavaScript. Once you get familiar with the concept, you can really start to reuse code in great new ways.
Tags: javascript functions

Are you attaching an onload function to an image but finding it doesn't always get called?
The problem is almost always this: you need to set the onload before you set the src. The reason is obvious when you think about it: if the image is in the cache, the image will be loaded immediately after setting the src, even before the onload is set.
Adding fuel to the fire, Firefox and Safari will let you set an onload immediately after (it seems they don't call the onload until the block of JavaScript finishes). This doesn't happen in Internet Explorer or Opera.
Long story short:
// evil:
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
// sometimes called
alert('image loaded');
};

// good:
var image = new Image();
image.onload = function() {
// always called
alert('image loaded');
};
image.src = 'image.jpg';
No matter how many times I come across this bug and find the solution, I end up making the same mistake a few weeks later. I'm hoping that blogging about it will get this stuck in my long-term memory.

if (debug_mode()) {
alert('We are in debug mode!');
}
Now you can just add #debug to the URL (and hit enter) to turn on debug mode, or just drop the #debug to turn it off. You can even have more than one special "mode" and use different hash values to switch between these modes.

Great news: jQuery 1.2 is out, and the heavily-awaited jQuery UI (an "official" replacement to Interface) will be out on Sunday.
Be sure to have a read of the jQuery 1.2 release notes, but here are a few highlights that I can't wait to use:
• Partial .load()
If you want to load a whole web page with Ajax, but only want to cut out a portion of the page and stick it in to an element on your page, you can now do this:
$('#stats').load('same_page.php #stats');
This will make it really easy to refresh an element on the page without needing to change the server-side logic.
• New Traversing Features
Traversing and selecting remain the most powerful features in jQuery, and it'll be great to be able to use .andSelf() to include the original set when traversing, and .prevAll()/.nextAll() to select all the siblings to one side or the other.
• New Effect Features
There are a ton of new Effects features, but my favourite is probably .stop(), allowing us to finally stop animations. Together with the new :animated selector, it's trivial to stop all ongoing animations at once:
$(':animated').stop();
Some of the other Effects features have a lot of potential, like being able to use percents or animating by a relative amount (eg. add 100px).
Extremely powerful is the new ability to write extensible animations. I assume they did this to ease in the development of jQuery UI, but this allows all of us to harness the power of jQuery animations to do anything we want! Okay I'm starting to drool...
Oh, one more thing. If you're used to creating elements in jQuery like this:
var link = $('<a>');
then you need to stop using invalid HTML and either make it XHTML compliant or add a closing tag, otherwise it will break in Internet Explorer. This is true since jQuery version 1.1.4, and I've had to make a lot of changes in my code as a result.
Now any of the following is okay:
// okay, XHTML-style
var xhtmllink = $('<a/>');

// also okay, valid HTML style
var htmllink = $('<a></a>');

for (var i=0;i < 100;i++) {
// create a new <div> element
var div = document.createElement('div');

// assign a unique ID and increment counter
div.id = 'div_' + (guid_counter++);

// append to the page
document.body.appendChild(div);
}
With this you'll end up with 100 <div>s with IDs from "div_0" to "div_99". But our guid_counter is just sitting out there in the open! Someone could come along (like us making a typo) and write guid_counter = 0 or guid_counter-- and mess everything up! We could end up with 2 elements with the same ID!
We can improve on this by using a private variable. Private variables give us more control over global variables like our guid_counter, because we can choose when and how they are accessed and updated. Let's create a function which contains our guid counter as a private variable:
// 'guid' is assigned to the return value of this outer function
var guid = (function() {
// same guid counter, but we keep it hidden inside here
var guid_counter = 0;

// return a function that has access to guid_counter
return function() {
// whenever guid() is called, return and increment the counter
return guid_counter++;
};

})(); // note the () - this executes the outer function right now!
If this is the first time you're seeing this syntax (or the hundredth) it can be a bit confusing. Really, we're doing the same thing as this:
function generate_guid_function() {
// nothing outside of generate_guid_function() can access this
var guid_counter = 0;

// return a function that has access to guid_counter
return function() {
// return and increment the counter
return guid_counter++;
};
}

// 'guid' is assigned to return value of generate_guid_function()
var guid = generate_guid_function();
The magic of all this is in JavaScript Closures. The inner function has access to guid_counter because of where it's defined, but our code outside has no way to change or access guid_counter. This is exactly like private instance variables in Java and other languages.
Now, we can safely rely on our guid() function to generate unique IDs without worrying about our guid_counter being touched:
for (var i=0;i < 100;i++) {
// create a new <div> element
var div = document.createElement('div');

// assign a unique ID from our new guid() function
div.id = 'div_' + guid();

// append to the page
document.body.appendChild(div);
}
Tags: javascript private variables

I got tripped up today by something that took me a few minutes to figure out. I wrote this:
if (a == b == 0) {
// only execute if both a and b are zero
}
But this was wrong. In fact, you can write this:
alert(3 == 4 == 0); // alerts "true"
Why is that? Because of the order things are evaluated. I made the mistake of thinking == has the same result as doing =:
var x, y;

x = y = 10;

alert(x); // 10
alert(y); // 10
But when you use == like that, it actually compares the firsts two values, then compares the result (true or false) against the 3rd value. It's the same as writing:
alert(3 == 4 == 0); // true
alert((3 == 4) == 0); // true
because 3 == 4 is false, and false == 0 is true!
Tags: javascript