JavaScript

Embedding
The JavaScript itself should be surrounded with this:

 //

This is because the characters &amp; &lt; &gt; have special meaning in both HTML and JavaScript, and while JavaScript is embedded in HTML, it cannot be HTML-quoted. So replacing &amp; with &amp;amp; and &lt; with &amp;lt; does not work as it should. This is why the comment kludge is necessary.

Quoting
Because of the strange behaviors described above, some things just can't be quoted without trickyness. Here's an easy trick:

var email = unescape("%22Full%20Name%22%20%3Cemail%40somewhere%3E"); alert(email);

will display the alert box:

"Full Name" 

This is particularly useful when inserting dynamic strings into JS code on the fly, but it can also be useful if you simply have characters that would mess up a JS string, such as:



URI encoding is a nice solution because it's nestable (unlike quotes). However, do not use the decodeURI function in place of unescape. It does not do what its name implies -- only about half. For example, it decodes %20 to space, but not %40 to at-sign.

Arrays
To construct your own array:

var my_array = []; my_array.push('element zero'); my_array.push('element one'); my_array[2] = 'element two';

Arrays seem to be constructed out of other things. How this works is irrelevant here. What you need to know is:


 * This always works:

for(count = 0; count < my_array.length; count++)


 * This does not always work, particularly with arrays of objects fetched from the document:

for(count in my_array)

Hashes
Hashes are constructed the same way. I don't really know what the difference is, to be honest.

var my_hash = []; my_hash['key1'] = 'value1'; my_hash['key2'] = 'value2';

for(key in my_hash) { alert(my_hash[key]); }

Styling
If you assign an id="foo" attribute to an object, you can do some nifty things with it:

document.getElementById("foo").style.color = "red"; document.getElementById("foo").style.background = "black";

To put the color back to whatever its parent element's color is:

document.getElementById("foo").style.color = ""; document.getElementById("foo").style.background = "";

Forms
If you assign an id="foo" attribute to an input object, you can control it:


 * Get the value of an input field, such as a text field:

document.getElementById("foo").value


 * Set a radio button or checkbox to checked:

document.getElementById("foo").checked = "checked";

Or unchecked:

document.getElementById("foo").checked = "";

To reset or submit the form, use the id assigned to the form tag:

document.getElementById("my_form").reset; document.getElementById("my_form").submit;

Popups
There are lots of wrong ways to do popups. A correct popup:
 * Will always work, even when JavaScript is off or broken
 * Will be pulled to the front if possible
 * Will not fill the full screen if possible

This can be accomplished like this:



Notice that the return false will cancel the href action, which means that if the JavaScript popup works, the href is never followed. However, if the user has JavaScript off, the site is still functional with the old-style somewhat-annoying target popup that isn't pulled forward if it's already open and usually pops up full-screen. The popup function is as follows:

 //