Below are ten JavaScript functions that, over the course of several years, I have found to be indispensable, awesome, and at times life-saving.

1. addEvent()

This function takes all the work out of determining the correct way to add an event to an element (depending on the user’s browser).

function addEvent(obj, eventtpye, functn, usecapture) {
    if (obj.addEventListener) {
        obj.addEventListener(eventtype, functn, usecapture);
        return true;
    } else if (obj.attachEvent) {
       return obj.attachEvent('on' + eventtype, functn);
    } else {
        obj['on' + eventtype] = functn;
    }
}

2. addLoadEvent()

This function adds events that trigger after the page has loaded by attaching them to the onload event handler. It first stores the existing onload contents to a variable. Then, if the onload handler is not set to a function, it assigned the given function to the handler. Otherwise, it adds the function to the existing onload contents.

function addLoadEvent(functn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = functn;
    } else {
        window.onload = function() {
            oldonload();
            functn();
        }
    }
}

Note: Another way of adding events to the onload handler is to simply use the addEvent() function, as described above, like so:

addEvent(window, 'load', functn1, false);
addEvent(window, 'load', functn2, false);
// etc.

3. getElementsByClass()

You would think that JavaScript would already have such a function, but surprisingly (or not, depending on your cynicism) it isn’t an original DOM method. We have getElementById(), getElementsByName(), and getElementByTagName()… so why not a getElementsByClass() method? Well, here it is:

function getElementsByClass(findclass, node, tag) {
    var classElems = new Array();
    if (node == null)
        node = document;
    if (tag == null)
        tag = '*';
    var elems = node.getElementsByTagName(tag);
    var pattern = new RegExp('(^|\\\\s)'+finclass+'(\\\\s|$)');
    var j = 0;
    for (i = 0; i < elems.length; i++) {
        if (pattern.test(elems[i].className)) {
            classElems[j] = elems[i];
            j++;
        }
    }
    return classElems;
}

To return an array of all anchor (<a>) elements of the “foo” class, call the following:

var foos = getElementsByClassName('foo', document, 'a');

4. toggle()

The strict definition of “toggling” is hiding or showing an element upon the occurence of an event. This function, which does just that, is short, simple, and to the point.

function toggle(objid) {
    var elem = document.getElementById(objid);
    elem.style['display'] = (elem.style['display'] == 'none') ? '' : 'none';
}

5. insertAfter()

One would think that this would be a DOM core method (like getElementsByClassName()) but, sadly, it is not. Fortunately, it only requires one line of code, though it is hard to remember and is thus suited to having its own function.

function insertAfter(parent, node, refNode) {
    if (refNode.nextSibling)
        parent.insertBefore(node, refNode.nextSibling);
    else
        parent.appendChild(node);
}

6. inArray()

This is yet another simple method that really should already be built into the JavaScript DOM. While not a function, it is a prototype that extends the existing Array object to add this functionality.

Array.prototype.inArray = function(value) {
    for (i = 0; i < this.length; i++) {
        if (this[i] === value) return true;
    }
    return false;
}

7. getCookie(), setCookie(), delCookie()

I included all three of these methods into one entry because they all go together like gears in a machine. PHP’s implementation of cookies is such an easy, painless process, but this is not so for JavaScript. These three will be like Vicodin after the pain of dealing with cookies in JS.

function getCookie(name) {
    var start = document.cookie.indexOf(name + '=');
    var len = start + name.length + 1;
    if (!start && name != document.cookie.substring(0, name.length)) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf( ';', len );
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len, end));
}

function setCookie(name, value, expires, path, domain, secure) {
    var today = new Date(today.getTime());
    if (expires)
        expires = expires * 1000 * 60 * 60 * 24;
    var expires_date = new Date(today.getTime() + expires);
    document.cookie = name + '=' + escape(value) +
        (expires ? ';expires=' + expires_date.toGMTString() : '') +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        (secure ? ';secure' : '' );
}

function delCookie(name, path, domain) {
    if (getCookie(name))
        document.cookie = name + '=' +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        ';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

8. $()

The Prototype Dollar Function

In all honesty, this function was new to me as of recently. It never really occurred to me to have a function whose name consists of one character (a dollar sign, no less!), that takes in either strings or objects and any number of arguments, and that returns either one object or an array of objects.

Now I can’t live without it. Here it is:

function $() {
    var elems = new Array();
    for (var i = 0; i < arguments.length; i++) {
        // For each argument passed to $()
        var elem = arguments[i];
        if (typeof elem == 'string')
            elem = document.getElementById(elem);
        if (arguments.length == 1)
            return elem;
        elems.push(elem);
    }
    return elems;
}

It’s only a few lines of code, too! You can use it to call up one object in one way:

var textbox = $('mytextbox');

or many objects in many ways:

var images = $(objImage1, 'myimg', 'badimage', objImagePlaceHolder);

The return value is always an object, or an array of objects.

9. getXMLHttpObject()

If you’re working with AJAX and have to keep checking your notes for the function that returns the XML-HTTP object, this one’s for you. This works for nearly all browsers in existence.

function getXMLHttpObject() {
    var xmlHttp;
    // IE only...
    try {
        xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
        } catch (E) {
            xmlHttp = false;
        }
    }
    // All other browsers...
    if (!xmlHttp && typeof xmlHttpRequest != 'undefined') {
        try {
            xmlHttp = new xmlHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    return xmlHttp;
}

10. randomRange()

Last, but certainly not least, is the ultra-useful randomRange() function, which returns a random integer between two numbers, inclusive.

function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Conclusion

I keep every single one of these functions inside one external JavaScript file called common.js and call it in the header file that I include in all pages of whatever site I’m working on. That way, all the code is available to me no matter what, whenever I need it. And trust me, I’ve needed it plenty of times in the past, and will continue to need them well into the future.

Many sites are starting to add rich text boxes, which are text fields that let you create text and alter formatting in a WYSIWYG environment: “What You See Is What You Get”. This basically means a text box that is like a word processor; if you select text and click on the “Bold” button (such as a bold letter B), the text will actually show up in bold.

If such a concept has eluded you, look no further for a detailed tutorial on how to create one.

If you have been thinking of a rich text field as its own control (like the <textarea> element), then you are thinking about it all wrong. Instead, think of the text field as being its own web page. It makes sense, doesn’t it? You’re applying HTML formatting to the text, after all.

The Structure

The text field itself is an <iframe> element, which (quite conveniently) comes with a JavaScript function called execCommand(). This function will become your colleague and your confidant. Your most trusted ally, and your most intimate friend.

To start off, create a new page with an iframe, a regular button, a submit button, and a hidden text field. The regular button will toggle the bold setting of any selected text within the iframe. The submit button is there for decoration only, and as a reminder that sometimes a form will need to be submitted. As such, the iframe cannot be used as a form input field; instead, we will use the hidden text field to store the HTML code of the iframe element. Its contents will be updated upon submitting the form, as we will see later.

<html>
<head>
	<title>Rich Text Editor</title>
</head>
<body>
<form method="post" name="myform">
	<input type="button" onclick="formatText('bold')" value="Bold" /><br/>
	<iframe id="textbox" style="width: 300px; height: 150px"></iframe><br/>
	<input type="submit" value="Submit" />
	<input type="hidden" id="text" name="text" />
</form>
</body>
/html>

The Backbone

The formatText() function, called by clicking the “Bold” button, is defined below. You can either save it in an external .js file and call it from the HTML page, or add it to the <head> section.

var objEditor;	// Globally define the text box object
unction formatText(action) {
	objEditor.execCommand(action, false, null);
}
window.onload = function() {
	objEditor = document.getElementById('textbox').contentWindow.document;
	objEditor.designMode = 'on';
	document.myform.onsubmit = function() {
		document.getElementById('text').value = objEditor.body.innerHTML;
	}
}

As you can see above, the text editor object (with the ID “textbox”) is set to a global variable, which can then be called by any other functions. The formatText() function calls the omnipotent execCommand() function, which applies only to the <iframe> object and is extremely powerful. There is a complete list of commands below. The command used above is the “bold” command. The second argument determines whether a user interface is displayed. Since this is not needed, it is set to false. The third argument is the value of the command. Since we are toggling the “bold” setting, we set this to null.

Next, we define what will happen when the page loads by setting the document’s onload event handler to do a few things. First, the text editor object variable is set to the object itself. Next, the text editor iframe’s designMode setting is turned on; this makes it so that the HTML within the iframe is editable. This is a huge deal, because this is essentially what turns the iframe into a rich text field.

(Actually, you can even set the entire document’s designMode variable to “on”, rendering the entire document editable. Just imagine the possibilities!)

Finally, we set it so that when the user submits the form, it sets the “text” hidden field’s value to the HTML of the iframe.

The Commands

The following commands are some of the simpler commands that can be used: Bold (<b></b>), Italic (<i></i>), Underline (<u></u>), StrikeThrough (<s></s>), SuperScript (), SubScript (), Cut, Copy, Paste, Undo, Redo, InsertOrderedList (<ol></ol>), InsertUnorderedList (<ul></ul>), Outdent, Indent, JustifyLeft, JustifyCenter, JustifyRight, and JustifyFull.

SuperScript and SubScript raise or lower text, for things such as mathematic variables (like 7² and H₂O). The commands Cut, Copy, Paste, Undo and Redo function the same way they do in word processors. InsertOrderedList inserts a numbered (ordered) list, while InsertUnorderedList inserts a bulleted (unordered) list. Outdent moves a paragraph of text to the left, while Indent moves it inward (to the right). The Justify commands align the text to the direction specified.

Change Font Size

The FontSize command changes the size of the selected text in the iframe, and requires a value from 1 to 7, 1 being the smallest size, 7 being quite large. This command is based on the soon-to-be obsolete <font> tag, which uses the same values for its size attribute.

This function is best used with a drop-down list whose onchange event handler calls a custom function that changes the font size to the selected value. To most accurately show the user what the end result would be, each line should resemble the following.

<option value="X"><font size="X">X</font></option>

Each item’s value is the size number, while the item is shown in that size, displaying the size number.

Change Font Name

There is a certain list of fonts that is safe to assume all users have installed on their systems. Known as the Core Fonts, these include Andale Mono, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings. It is also safe to include a few fonts that are on most users’ systems, but not all: Arial Black, Lucida Console, Lucida Sans Unicode, Tahoma, and Wingdings.

Like we did with the font sizes, if we had a drop-down list of fonts, each displayed in its own font, we could then set the list’s onchange event handler to call up the FontName command, like so:

objEditor.execCommand("FontName", false, "Times New Roman");

It’s pretty straightforward how it works.

Further Inspiration

There are so many possibilities, especially with the sheer number of commands available at your disposal. For example, there is the 2D-Position command, which allows absolutely positioned elements to be moved by dragging. There is also the CreateLink, which adds a hyperlink or changes text into a hyperlink. InsertButton, InsertImage and
SaveAs are just a microscopically small selection of commands also at your disposal. For a full list of commands available, check out http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx.