My understanding of javascript has increased as I have scoured google.com looking for functions and frameworks to fulfill my page or project needs, but I still feel there is a lot more to learn. I have decided to create this list to help anyone who might just be starting out and needs some direction.

1. Pick up a copy of “DOM Scripting: Web Design with JavaScript and the Document Object Model” by Jeremy Keith. This book is not easy enough to understand, but it also reminds new javascript users about graceful degradation. Before using any framework, I used many of the scripts in the book religiously. (find the book at http://www.friendsofed.com/book.html?isbn=9781590595336)
2. Use good web developer tools. Depending on your browser, make sure you are using web developer tools and checking for errors. Firebug is very popular for Firefox browser, but I still prefer the Web Developer tool bar. Microsoft offers a web developer tool bar for free download as well, but this does not have any javascript debugging included. You will need to enable javascript debugging in the IE browser and I would suggest downloading the Microsoft Debugging tool. (Firefox Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60, Firefox Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843 and Microsoft Script Debugger: http://www.microsoft.com/Downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en)
3. Never depend on javascript. Good mark up will always gracefully degrade so that the end product is accessible and usable.
4. Use the javascript validator at http://jslint.com. Douglas Crockford knows his javascript and his validator (even though it is strict) will help you write good script.
5. Once your javascript validates, you can minify your script using one of the many javascript compressor/minification tools available. I have used http://javascriptcompressor.com/ with the Base62 encode and shrink variables checked and it has worked well. Another that I just started using is Closure Compiler found here: http://code.google.com/closure/compiler/
6. Once you are comfortable with javascript, use a framework to speed development. There are several frameworks available such as Jquery, YUI, Prototype, Dojo, Mootools, etc. Find the framework that best suits your needs and learn to use it.

I hope this toolkit will help you create accessible and usable applications. I might add to it as I think of more, but this is a great start (I know I wish I would have had it to start with).

I decided to try to combine some css with some javascript to make a nice reusable piece to display my form messages. Here is the fruit of that labor.

The function is going to take three arguments. The first argument is a message and or list of messages. The second is the id of the node you would like to stick the message before. The last argument is a classname.

/*global document */
function showMessage(thismessage, location_id, classname) {
//first clear showmessage div
if (document.getElementById("showmessage")) {
var clearerror = document.getElementById("showmessage");
clearerror.parentNode.removeChild(clearerror);
}

The first part of the function will check to see if the div “showmessage” exists. If it does then it will remove it from the document.

// create an showmessage div
var location = document.getElementById(location_id);

We define the location so it can be used later. Below we create a new div and set the id attribute to showmessage. We then can style the div for each instance using the className. After that we create an unordered list.

With the list ready, the messages can then be put into an array. We will split the messages up in this example with a pipe “|”.  You can substitute your own delimiter.

var showmessagediv = document.createElement("div");
showmessagediv.setAttribute("id", "showmessage");
showmessagediv.className = classname;
var showmessageul = document.createElement("ul");
showmessageul.setAttribute("id", classname + "list");
var showmessage = [];
showmessage = thismessage.split("|");
var i;
for (i = 0; i < showmessage.length; i++) {
var showmessageli = document.createElement("li");
var showmessagelitxt = document.createTextNode(showmessage[i]);
showmessageli.appendChild(showmessagelitxt);
showmessageul.appendChild(showmessageli);
}
showmessagediv.appendChild(showmessageul);
location.parentNode.insertBefore(showmessagediv, location);
// have to add this to display error until css corrected
}

Looping through the array, we create a new list element and insert the message. We append the message to the new list element and then append the list element to the unordered list element. When it is all done then we append the unordered list to the showmessage div. The last step of the function is to insert the new showmessage div right before the location_id.

Attached is the style I used with both the successful messages and the unsuccessfull images.

.errormsg {
clear: both;
display: block;
width: 90%;
color: #FFFFFF;
font-weight: bold;
background-color: #FF9D9D;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #FF0000;
}

.successmsg {
clear: both;
display: block;
width: 90%;
color: #333333;
font-weight: bold;
background-color: #9bc19b;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #039b03;
}

#errormsglist, #successmsglist {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#errormsglist li, #successmsglist li{
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0;
}

#errormsglist li { background-image: url(/icon/exclamation.png); }

#successmsglist li { background-image: url(/icon/accept.png); }

You can modify the CSS and change the class name to what ever you wish. The only think to remember is if you style the list, to append “list” to the style.

showMessage.js

showMessage.css

exclamation.png

accept.png

To save some time, I will explain the javascript and how to call it. You can grab the css from the example page.

<script type="text/javascript">
//<![CDATA[
var listing = {

g:function(id) {
    return document.getElementById(id);
},

// function to change the background and border of listing on mouse over
highlight:function(id) {
    listing_el = listing.g("listing" + id);
    if(id != 1) { //this is what to do for all divs other then first one
        id_above = id - 1;
        listing_above_el = listing.g("listing" + id_above);
        listing_above_el.style.border = "#fff 2px solid"; //removes border on result above highlighted
        listing_el.style.backgroundColor = "#fffae7";
        listing_el.style.border = "#837b97";
    }
    else {
        listing_el.className = "highlight_el";
        listing_el.style.backgroundColor = "#fffae7";
        listing_el.style.border = "#837b97";
    }
},

normal:function(id) {
    listing_el = listing.g("listing" + id);
    if(id != 1) {
        id_above = id - 1;
        listing_above_el = listing.g("listing" + id_above);
        listing_above_el.style.borderBottom = "#cccccc 2px dotted"; //restores border to result above highlighted
	listing_el.style.backgroundColor = "#ffffff";
	listing_el.style.border = "#ffffff 2px solid";
        listing_el.style.borderBottom = "#cccccc 2px dotted";
    }
    else {
        listing_el.className = "normal_el";
        listing_el.style.backgroundColor = "#ffffff";
	listing_el.style.border = "#ffffff 2px solid";
        listing_el.style.borderBottom = "#cccccc 2px dotted";
    }
}
//]]>
</script>

The HTML can be spit through some query or loop and is straight forward.

<div id="listing1" class="listing" onmouseover="listing.highlight('1');" onmouseout="listing.normal('1');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</div>
<div class="clear"></div>
</div></code></code>

<code><div id="listing2" class="listing" onmouseover="listing.highlight('2');" onmouseout="listing.normal('2');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</div>
<div class="clear"></div>
</div>