Let’s say that we have one large text document and we have a a bunch of keywords that we want to parse the document for.  We don’t care how many times times the keyword appears — we just care that it’s been used.  When we find a keyword, we need to record that keyword been found so that we may check at a later time.

Inefficient Method:  Array Collection and Search

The first method to record that a keyword has been found is by pushing the keyword into one array:

//Assume an array called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords.push(keyword);
}

At the end of the document search, we’d end up with an array like:

//the foundKeywords array looks like:
//['keyword1','keyword2','keyword2',...]

When it comes to checking this array for the existence of a given keyword, this method will prove inefficient.  Why?  Because we’d need to loop through the array and search until we found the given keyword (if ever).  Those are a lot of “wasted” or fruitless cycles, even if we break the loop when the keyword was found.  Inefficient is the only word to describe this process.

The Efficient Method:  Object with Index

The fastest method of checking a storing keywords for later reference is by object (in JavaScript) or associative array (in PHP).  Instead of adding the keyword to an array, we add the keyword as an index to a master object, giving the value as 1:

//Assume an object {} called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords[keyword] = 1;
}

Why is this faster?  No wasted cycles looking blindly through an array.  The check is quick and simple:

if(foundKeywords[keyword]) { //FOUND!
	//do something
}

It’s either an index or it’s not!  In PHP, we’d save the keyword to an associative array:

//Assume an array called "$found_keywords" was defined above
if(shouldSave($keyword)) {
	$found_keywords[$keyword] = 1;
}

//Later: checking if the keyword was there...
if($found_keywords[$keyword]) { //or array_key_exists($keyword,$found_keywords)
	//FOUND!
}

In a word…awesome.  Not only fast but simple!

I cannot provide a benchmark because the speed of execution depends on how large the keyword array is.  Suffice to say, for the sake of simplicity and speed, using an object with keyword index is definitely the way to go!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Quick Tip: Object Indexing vs. Array Collection

Related posts:

1. Element Collection Manipulation Shortcut Using MooTools 1.2
2. Implementing an Array.count() Method in JavaScript
3. dojo.connect: A Powerful Object and Event Listener
4. Implement Array Shuffling in MooTools
5. Access JavaScript Object Variable Properties

Step 1:  Pull Dojo From CDN

<!-- pull from Google -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
<!-- OR pull from AOL -->
<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>

You can pull the base Dojo JavaScript file from Google or AOL.  This file is very small and loads extremely fast from CDN.

Step 2:  dojo.require

As mentioned earlier, the dojo.require method asynchronously requests Dojo classes from a module path.  Dojo’s smart enough to be able to request its classes from CDN even though it’s cross-domain.  You can change the module paths if you’d like but that’s out of the scope of this post.  Let’s say I want to use Dojo’s behavior class within my page.  The first step is “requiring” it:

dojo.require('dojo.behavior');

That require statement fires the request for that class from the CDN.  Of course, you can’t do anything with the functionality of that class until it has loaded so you need to add a dojo.ready wrapper which doesn’t execute until all requires have loaded and the DOM is ready:

//equivalent to jQuery's document.ready and MooTools' window.addEvent('domready')
dojo.ready(function() {
	
	//this only executes when my "requires" have loaded!
	dojo.behavior.add({
		'a.alert': {
			onclick: function(e) {
				alert('You clicked me!');
			}
		}
	})
	
});

Boom!  The behavior class has loaded and you’re now ready to use it!

Another cool part about dojo.require is that since each class must define the modules it requires, dependencies are automatically required when you request a class.  For example, let’s pretend I want to use a class from DojoX charting library.  I manually require once class, but Dojo’s smart enough to figure out I need many more than that:

//I manually type this...
dojo.require('dojox.charting.widget.Chart2D');
//...but Dojo internally knows to also require more classes that help charting...

Firebug can tell you exactly which dependency classes get pulled from CDN:

Dojo’s require system is absolutely brilliant;  it speeds up development ten-fold.  When it comes to production, however, it’s best to use Dojo’s build system to create one static JavaScript build for speed and caching purposes.  For development, however, dojo.require is a Godsend!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: The Beauty of dojo.require()

Related posts:

1. Create a Simple Dojo Accordion
2. Dive Into Dojo Series: Dive Into Dojo Chart Theming
3. Dive Into Dojo Series: Dijit and Charting
4. SitePen: Creating and Enhancing Dojo Classes
5. Create a Dynamic Flickr Image Search with the Dojo Toolkit

Let’s be honest…WordPress’ search functionality isn’t great. Let’s be more honest…no search functionality is better than Google’s. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!

Sign Up!

Google’s AJAX Search API requires that you sign up for an API key.  Signing up is free and you’ll be done with the process of retrieving a key in a few minutes.

You’ll also need to provide a domain for which they key will work for; one key per domain.

The HTML

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
	<!-- HTML5 SEARCH BOX!  -->
	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
	<!-- SEARCH davidwalsh.name ONLY! -->
	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
	<!-- SEARCH BUTTON -->
	<input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
<script type="text/javascript">
	google.load('mootools','1.2.4');
	google.load('search','1');
</script>

You’ll want to use a “real” form so that if the user doesn’t have JavaScript, they’ll get directed to Google for their search.  Beyond that, follow the hidden input line to ensure your search will work.  You may also note that the search box has autocomplete and placeholder attributes — those are HTML5 functionality, nothing to do with Google’s AJAX Search API.

The CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!

The JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

There’s a fair amount of JavaScript above so stay with me.  The following are the steps for implementing the Google AJAX API:

• Create an element to house the results of the search.
• Create a “Close” link which will allow the user to close the search results window.
• Create our Google-given class instance:
  • A Web Search (you can also create Local Search if you’d like…). google.search.WebSearch options. I’ve chosen to add tabs and set the input as my search box.
  • A SearchControl instance. google.search.SearchControl options. “siteSearch” is my suffix for results, I’ve restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window).
  • A DrawOptions instance. google.search.DrawOptions options. With my DrawOptions instance, I’ve set search control, set the draw container with the options we’ve created, and I’ve decided to use Google’s default “no results” message

Once the search controls are created, it’s time to attach events to the search box to show and hide the search results container based on the contents of the search box. That’s all!

As you can see, I’ve chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the “Close” link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.

In all honesty, I couldn’t believe how easy it was to implement Google AJAX search.  It’s an easy want to implement search on your website, especially if you’re currently using WordPress’ search.  I recommend taking the time to implement Google’s AJAX Search API — the day it takes you to get it working will save your users hours of pain!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Implement the Google AJAX Search API

Related posts:

1. Search Type Options with MooTools
2. Create a Dynamic Flickr Image Search with the Dojo Toolkit
3. google.load(): Utilize Google’s AJAX Libraries API
4. AJAX Username Availability Checker Using MooTools 1.2
5. Form Element AJAX Spinner Attachment Using jQuery

More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple “file” INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can’t imagine how annoyed my users would be.  Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.

The HTML

<!-- IMPORTANT:  FORM's enctype must be "multipart/form-data" -->
<form method="post" action="upload-page.php" enctype="multipart/form-data">
  <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
</form>

Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element.  If you’re a stickler for validation, you’ll want to assign the multiple attribute a value of multiple.

Listing Multiple Files with JavaScript

//get the input and UL list
var input = document.getElementById('filesToUpload');
var list = document.getElementById('fileList');

//empty list for now...
while (list.hasChildNodes()) {
	list.removeChild(ul.firstChild);
}

//for every file...
for (var x = 0; x < input.files.length; x++) {
	//add to list
	var li = document.createElement('li');
	li.innerHTML = 'File ' + (x + 1) + ':  ' + input.files[x].name;
	list.append(li);
}

The input.files property provides an array of files for which you can check the length;  if there’s a length, you can loop through each file and access the file paths and names.

Receiving and Handling Files with PHP

if(count($_FILES['uploads']['filesToUpload'])) {
	foreach ($_FILES['uploads']['filesToUpload'] as $file) {
	    
		//do your upload stuff here
		echo $file;
		
	}
}

PHP creates an array of the files uploaded with the given INPUT’s name.  This variable will always be an array within PHP.

Of course, you could a Flash-based equivalent for Internet Explorer and Opera, but having to add and support another component can be taxing.  Hopefully these browsers add support for multiple file uploads soon!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Multiple File Upload Input

Related posts:

1. Basic File Uploading Using PHP
2. Increase PHP’s File Upload Limit Using php.ini
3. Using Form Input Arrays For Checkboxes
4. Basic PHP File Handling — Create, Open, Read, Write, Append, Close, and Delete
5. Create a Zip File Using PHP

Deferring Your Scripts

<script>
	//do stuff (runs first)
</script>
<script defer="defer">
	//do stuff, but defer it  (runs last)
</script>
<script>
	//do more stuff (runs second)
</script>

The deferred SCRIPT element’s code will execute once the rest of the page’s resources have loaded.  What does this mean?  Be sure that your document doesn’t rely on any of the code within the script during page load.  In the example above, the middle block will execute once the page has loaded even though it appears before the last block.

More Details

Olivier Rochard has written an outstanding (and more detailed) post about using the defer attribute on the Mozilla Hacks blog.  His post details browser support (and quality of browser support…or lack thereof), advanced examples, and tips for using the defer attribute.

What I find funny about this tag is that it seems as though most of the script I see should be using this attribute.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using SCRIPT’s defer Attribute

Related posts:

1. HTML5′s placeholder Attribute
2. Add the Script & Style Feed to Your Website
3. You Script. You Style. Introducing Script & Style.
4. Script & Style Revamp with Submission Favelet
5. Confessions of a Web Developer VI

The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node.  classList also allows developers to check if a CSS class has been assigned to a given node.

node.classList

{
	length: {number}, /* # of class on this element */
	add: function() { [native code] },
	contains: function() { [native code] },
	item: function() { [native code] }, /* by index */
	remove: function() { [native code] },
	toggle: function() { [native code] }
}

node.classList, as you can see, is a small but useful collection of methods.

Adding a CSS Class

myDiv.classList.add('myCssClass');

Removing a CSS Class

myDiv.classList.remove('myCssClass');

Toggling a CSS Class

myDiv.classList.toggle('myCssClass'); //now it's added
myDiv.classList.toggle('myCssClass'); //now it's removed

Note: If toggle is called and the element does not have the provided CSS class, the class is added.

Contains CSS Class Check

myDiv.classList.contains('myCssClass'); //returns true or false

Mozilla Firefox is the only browser that currently supports the classList API.  As more browsers add classList support, look for the JavaScript libraries to include classList checks instead of parsing an element’s class attribute!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: HTML5 classList API

Related posts:

1. Using HTML5 Web Storage
2. HTML5 Link Prefetching
3. HTML5: Wrap Block-Level Elements with A’s
4. QuickBoxes for Dojo
5. Set Up Your WordPress Blog To Allow Trackback Toggling

Font Request Format

Many of the fonts within Google’s font archive are available not only in standard format but also in Italic, Bold, and Italic Bold.  The format for requesting a given font variant is:

{font}:{variant1},{variant2}

Here are a few examples of requesting each variant:

Cantarell
Cantarell:bold
Cantarell:italic
Cantarell:bolditalic

Now let’s see how we can include special fonts in our page and use these them.

The CSS Stylesheet Method

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />

The stylesheet gets included into the page like any other stylesheet would be.  A query string with a family parameter is appended to the stylesheet’s URL containing the font(s) to be loaded.  Multiple fonts can be requested with the use of the “|” (pipe) character.  A few examples:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn|IM+Fell+Great+Primer" />

Take a moment to examine the stylesheet from Google:

@font-face {
	font-family: 'IM Fell Great Primer';
	font-style: normal;
	font-weight: normal;
	src: local('IM Fell Great Primer'), url('http://themes.googleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype');
}
@font-face {
	font-family: 'Vollkorn';
	font-style: normal;
	font-weight: normal;
	src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype');
}

The @font-face method of font embedding is Google’s chosen method.  Using the font is as simple as using a system font:

.mySpecialFontClass	{ font-family:'Vollkorn', serif; }

You may also embed the font within the “style” attribute of a given element:

<p style="font-family:'Vollkorn';">Lorem ipsum....</p>

I t doesn’t get more painless than that.

The Simple JavaScript Method

Google also provides a simple JavaScript method for including custom fonts within a page.  This method requires including the JSAPI JavaScript file and a very small snippet of JavaScript:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('webfont','1');
	google.setOnLoadCallback(function() {
		WebFont.load({
			google: {
				families: ['Tangerine','Cantarell']
			}
		});
	});
</script>

Selecting font variants is done with a simple “:” delimiter between the font and the variant:

WebFont.load({
	google: {
		families: ['Tangerine:bold']
	}
});

You may also load multiple fonts within the families array:

WebFont.load({
	google: {
		families: ['Tangerine:bold','Cantarell','Lobster']
	}
});

Simple, no?  If it’s too simple for you, there’s more advanced method.

The Advanced JavaScript Method

The advanced JavaScript method employes an async JavaScript method paired with a WebFontConfig object.  The advanced method also adds callbacks for font requests:

WebFontConfig = {
	google: {
		families: [ 'Tangerine', 'Cantarell' ]
	},
	/* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
	loading: function() {
		// do something
	},
	/* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontloading: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontinactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
	active: function() {
		// do something
	},
	/* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
	inactive: function() {
		// do something
	}
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

If you’re like me, you loooooooove JavaScript callbacks.  You would use this method if you wanted to “preload” fonts before assigning fonts to specific elements. What’s also great about this method is that Google uses “active” and “inactive” CSS class representations on the HTML element to designate what an element’s settings should be before and after a font has been loaded:

.wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */
	font-family: serif
}
.wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */
	font-family: 'Tangerine', serif
}
.wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */
	font-family: serif;
	font-size: 16px
}
.wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */
	font-family: 'Cantarell', serif;
	font-size: 16px
}

Unfortunately you need to add these directives to you stylesheet; I prefer not to.

What do you think of Google latest JavaScript API?  On one side I see the Font API as extremely useful but the other side of me sees Google trying to grab a stronger hold of the Web;  trying to make websites dependent upon them.  What are your thoughts?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Google Font API

Related posts:

1. Font Replacement Using Cufón
2. My CSS Wishlist
3. MooTools FontChecker Plugin
4. Combine Your CSS Media Styles Into One File
5. Secure (SSL) Google Analytics

One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user’s location. Let’s examine how you can use Geolocation within Firefox to get location details down to the street!

Detecting Browser Geolocation Capabilities

if(navigator.geolocation) {
	//w00t!
}
else {
	alert('No soup for you!  Your browser does not support this feature');
}

They key to detecting Geolocation within your browser is the navigator.geolocation object.

Querying For Geolocation Information

if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
		alert('Your lat-long is: ' + position.coords.latitude + ' / ' + position.coords.longitude);
		alert('You live in ' + position.address.city + ', ' + position.address.state)
	});
}

The navigator.geolocation.getCurrentPosition method is the driving force behind retrieving location details. Once you call this method (providing it a function which will execute if your request is successful), the browser will ask the user if they will allow you to retrieve their location information:

When the user allows the website to retrieve their location information, Firefox fetches the information, providing you a position object with two very useful attributes: position.coords and position.address. position.coords gives you latitude and longitude while position.address gives you streetNumber, street, premises, city, county, region, country, countryCode, and postalCode. Firefox may even take a picture of your user through his/her window soon. (Editor’s note: I completely made that up)

Of course most of this functionality is only available within Firefox. Safari will retrieve the user’s latitude and longitude but that’s the extent of WebKit’s support. I look forward to bigger and better things from the W3C’s Geolocation API in the future!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using Firefox’s Geolocation API

Related posts:

1. “Favorite” Link — How To Create a Bookmark Link
2. My Firefox Plugins
3. iPhone & iPod Detection Using JavaScript
4. Detecting Google Chrome Using JavaScript
5. jQuery Code Documentation Favelet

Simple Web Storage Facts

• Values can be any data type supported by the structured clone algorithm.
• User agents should not expire data from a browsing context’s session storage areas, but may do so when the user requests that such data be deleted, or when the UA detects that it has limited storage space, or for security reasons.
• Storage items are available on the entire domain.

HTML5 Web Storage Methods

• setItem(key,value): adds a key/value pair to the sessionStorage object.
• getItem(key): retrieves the value for a given key.
• clear(): removes all key/value pairs for the sessionStorage object.
• removeItem(key): removes a key/value pair from the sessionStorage object.
• key(n):retrieves the value for key[n].

Setting a Key/Value

There are two different methods for setting information into sessionStorage:

sessionStorage.setItem('someKey','someValue');

…or you could just use the shortcut method:

sessionStorage.someKey = 'someValue';

Getting a Value

There are two methods to retrieve a key/value pair as well:

sessionStorage.getItem('someKey'); //returns 'someValue'

…or simply reference the sessionStorage object:

sessionStorage.someKey; //returns 'someValue'

Removing a Key/Value

sessionStorage.removeItem('someKey'); //returns 'undefined' for someKey

All you need to do is provide the key to the removeItem method.

Clearing Storage

sessionStorage.clear(); //everything gone!

A simple clear call — that’s it.

(Very) Basic Web Storage Usage Example

<a href="javascript:;" onClick="if(sessionStorage && sessionStorage.getItem('name')) { alert('Come back soon, ' + sessionStorage.getItem('name')); }">Sign Out</a>

When the user clicks the sign out link, we ask them to come back soon!

Browser Support…Ugh

Like every other cool feature available today, browser support is a concern.  Internet Explorer did not support Web Storage until IE8 so you will need to create your own sessionStorage object/class (maybe with MooTools or Dojo?) if you want to support earlier IE browsers.

HTML5 Web Storage is very simple but very intriguing.  Since HTML5 Web Storage requires JavaScript, you wont want to use this for any mission critical application unless you want to force users to use a browser that supports the feature.

What are your thoughts about HTML5 Web Storage?  Have you used this for any applications yet?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using HTML5 Web Storage

Related posts:

1. HTML5 classList API
2. HTML5 Link Prefetching
3. HTML5: Wrap Block-Level Elements with A’s
4. HTML5′s placeholder Attribute
5. Using Firefox’s Geolocation API

dojo.connect’s Signature

dojo.connect = function(
	obj,		//Object|null
	event,		//String
	context,	//Object|null
	method,		//String|Function
	dontFix		//Boolean
) //.....

A more detailed explanation of each argument (as taken from the Dojo documentation):

• obj: The source object for the event function. Defaults to dojo.global if null. If obj is a DOM node, the connection is delegated to the DOM event manager (unless dontFix is true).
• event: Name of the event function in obj. I.e. identifies a property obj[event].
• context: The object that method will receive as “this”. If context is null and method is a function, then method inherits the context of event. If method is a string then context must be the source object object for method (context[method]). If context is null, dojo.global is used.
• method: A function reference, or name of a function in context. The function identified by method fires after event does. method receives the same arguments as the event. See context argument comments for information on method’s scope.
• dontFix: If obj is a DOM node, set dontFix to true to prevent delegation of this connection to the DOM event manager.

dojo.connect returns a handle that you will need to remove the connection later. Also note that any arguments passed to the object (function) will be received by the listener! Holy hell that’s useful!

Example Usages: DOM Node Event Handling

var eventHandle = dojo.connect(dojo.byId('myElement'),'onclick',null,function() { //null = dojo.global
	alert('you clicked myElement');
});

//...or:

var eventHandle = dojo.connect(dojo.byId('myElement'),'onclick',function() { //context isn't required
	alert('you clicked myElement');
});

When myElement is clicked, my messaged is alerted.

Example Usages: Object Handling

var someFunction = function() {
	alert('run!');
};
var val = dojo.connect(null,'someFunction',null,function() { //null = dojo.global
	alert('you ran someFunction!()');
});

When someFunction is called, my listener function alerts the message. How cool is that?!

Example Usages: NodeList Event Handling

dojo.query('.myElements').connect('onClick',function() { //this becomes the "current" element
	alert('you clicked this link');
});

Event handling even works on dojo.connect — you don’t need to cycle through each element in the collection to add the event listeners individually.

Example Usage: Removing an Event

var eventHandle = dojo.connect(dojo.byId('myElement'),'onclick',function() { //context isn't required
	alert('you clicked myElement');
});

//....
//something happens; we want to remove the event listener
//....

dojo.disconnect(eventHandle);

We pass the handle provided by dojo.connect to disconnect the listener.

That’s just a quick taste of what you can do with dojo.connect. Be sure to check out Dojo and experiment with the different ways you can use dojo.connect. Since dojo.connect is one of the core methods of the library, dojo.connect is used everywhere. dojo.connect also plays an important role within Dijit, Dojo’s UI branch.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: dojo.connect: A Powerful Object and Event Listener

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III
3. Create a Context Menu with Dojo and Dijit
4. QuickBoxes for Dojo
5. MooTools Plugin: Event.Mock