I have several JavaScript's running on my blog that I use to enhance the user experience.  On the right pane I allow the visitor to collapse the different content sections to reduce the clutter on the page.  In the header of the page the tag line does a little code scramble during the page load (did you notice?).  I also use a script to add the favicon images to external links.  And lets not forget about the SyntaxHighlighter and Lightbox scripts that are excellent additions to any blog.

All of these scripts are helpful and provide a more rich environment for the visitor.  There are a couple of things you can do to help effectively and correctly call your JavaScript's.

Use the JavaScript Handler

BlogEngine.NET includes a web handler that assists in loading your scripts.  I say assist because it compresses and caches the script to help minimize the impact to your server when serving up this file.  In order to use the handler you need to call your scripts using the syntax http://www.domain.com/js.axd?file=path/scriptname.js.  For a real-world example consider the following links that I use on my blog:

http://www.dscoduc.com/js.axd?path=js/codespeak.js
http://www.dscoduc.com/js.axd?path=js/faviconize.js

You will notice that I have placed all of my JavaScript files into a folder called ~/js.  This step allows all themes access to the scripts and simplifies the paths required to add them to your blog.

Use a Dynamic Window.OnLoad Method

A web page can only run Window.Onload one time.  Whenever you attempt to load scripts that include Window.OnLoad then you are going to run into problem with one of the scripts since the Window.OnLoad for one will get overwritten with the other script.  To solve this I would recommend using a function called addLoadEvent.  The code looks like the following:

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

Using this function you can add multiple functions to the Window.OnLoad event.  After adding the function above you need the following script tag:

addLoadEvent(spin);
addLoadEvent(faviconize);

Now each time the page is rendered the Window.OnLoad method will include my two scripts without losing the any existing Window.OnLoad functions.  But wait, there is one more step you can do to make sure there aren’t any errors thrown when loading your script.  Using the following addLoadEvent syntax will prevent the addLoadEvent from firing when the script hasn’t loaded:

if (typeof (spin) == 'function') { addLoadEvent(spin); }
if (typeof (faviconize) == 'function') { addLoadEvent(faviconize); }

Verify Scripts Loaded Before Calling Them

You’ve added the script tags to your header section, then added a function to your AddLoadEvent function, and then now you are ready to use the script functions right?  Almost.  One last step you could use is to verify the scripts during your calls.  For my blog I use the following syntax when executing an OnClick method:

onclick="if (typeof (animatedcollapse) == 'function'){OpenClose(this,ccategories);}"

Now my page will check that the function animatedcollapse is available before attempting to use the function.

Miscellaneous Checking Steps

Configure your scripts so that they check if they can actually bind-to/create page elements:

if (!document.getElementsByTagName) return false;
if (!document.createElement) return false;

When binding a variable to an element perform a quick check to make sure the bind was successful:

var myDiv = document.getElementById(‘elmentID’)
if (!myDiv) { return false};

Hopefully these steps will help those out there who, like me, aren’t completely skilled in using JavaScript.  If you have any additional steps or suggestions I would be happy to receive them!