Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006)

176	C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

Figure 5-7. Testing an entry while it is being typed in

keyChecking.js

voucherCheck={

errorMessage:'A voucher can contain only numbers.', error:false,

errorClass:'error',

init:function(){

if (!document.getElementById || !document.createTextNode) { return; } var voucher=document.getElementById('Voucher');

if(!voucher){return;}

voucherCheck.v=voucher;

DOMhelp.addEvent(voucher, 'keyup', voucherCheck.checkKey, false);

},

checkKey:function(e){

if(window.event){

var key = window.event.keyCode;

}else if(e){

var key=e.keyCode;

}

var v=document.getElementById('Voucher'); if(voucherCheck.error){

v.parentNode.removeChild(v.parentNode.lastChild);

voucherCheck.error=false; DOMhelp.closestSibling(v,1).disabled='';

}

C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

177

if(key<48 || key>57){ v.value=v.value.substring(0,v.value.length-1); voucherCheck.error=document.createElement('span');

DOMhelp.cssjs('add', voucherCheck.error, voucherCheck.errorClass); var message = document.createTextNode(voucherCheck.errorMessage) voucherCheck.error.appendChild(msg); v.parentNode.appendChild(voucherCheck.error); DOMhelp.closestSibling(v,1).disabled='disabled';

}

}

}

DOMhelp.addEvent(window, 'load', voucherCheck.init, false);

First, you’ll start by defining some properties, like an error message, a Boolean indicating whether there is an error already displayed, and a class to get applied to the error message. You test for the necessary element and attach a keyup event pointing to the checkKey() method.

keyChecking.js (excerpt)

voucherCheck={

errorMessage:'A voucher can only contain numbers.', error:false,

errorClass:'error',

init:function(){

if (!document.getElementById || !document.createTextNode) { return; } var voucher=document.getElementById('Voucher');

if(!voucher){return;}

voucherCheck.v=voucher;

DOMhelp.addEvent(voucher, 'keyup', voucherCheck.checkKey, false);

},

The checkKey method determines whether window.event or the event object is in use and reads out the keyCode in the appropriate manner.

keyChecking.js (excerpt)

checkKey:function(e){

if(window.event){

var key = window.event.keyCode;

}else if(e){

var key=e.keyCode;

}

178	C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

It then retrieves the element (in this case via getElementById(), although you could as easily use DOMhelp.getTarget(e), but why make it more complex than needed?) and checks whether the error property is true. If it is true, there is already a visible error message and the Submit button is disabled. In this case, you need to remove the error message, set the error property to false, and enable the Submit button (which is the next sibling of the input ele- ment—use closestSibling() here to ensure it is the button and not a line break).

keyChecking.js (excerpt)

var v=document.getElementById('Voucher'); if(voucherCheck.error){

v.parentNode.removeChild(v.parentNode.lastChild);

voucherCheck.error=false; DOMhelp.closestSibling(v,1).disabled='';

}

You determine that the key that was pressed is not any of the digits from 0 to 9—that is, that its ASCII code is not between 48 and 57 inclusive.

■Tip You can get the values of each key in any ASCII table, for example, at http://www.whatasciicode.com/.

If the key is not a number key, delete the last key entered from the field value and create a new error message. Create a new span element, add the class, add the error message, append it as a new child to the parent of the text entry box, and disable the form button. The last thing missing is to start voucherCheck.init() when the page has finished loading.

keyChecking.js (excerpt)

if(key<48 || key>57){ v.value=v.value.substring(0,v.value.length-1); voucherCheck.error=document.createElement('span'); DOMhelp.cssjs('add',

voucherCheck.error,

voucherCheck.errorClass);

var message = document.createTextNode(voucherCheck.errorMessage) voucherCheck.error.appendChild(msg); v.parentNode.appendChild(voucherCheck.error); DOMhelp.closestSibling(v,1).disabled='disabled';

}

}

}

DOMhelp.addEvent(window, 'load', voucherCheck.init, false);

C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

179

■Note Normally, it’d be enough to check whether the field contents is a number on every keyup event, but this demonstrates the power you have with keyboard events.

If you want to read keyboard combinations with Shift, Ctrl, or Alt, you need to check for the shiftKey, ctrlKey, or altKey event properties in your event listener method, for example:

if(e.shiftKey && key==48){alert('shift and 0');} if(e.ctrlKey && key==48){alert('ctrl and 0');} if(e.altKey && key==48){alert('alt and 0');}

The Dangers of Event Handling

With these functions, you can listen and react to any event initiated by the user. You can make navigations that react to rollovers rather than clicks of the links, you can add keyboard shortcuts only available to your page, and you can make things react on movements of the mouse.

It is very tempting to use event handling to the fullest and come up with whole new concepts of navigation, user journey flow, and how forms interact with the user. The question is whether that is a good or a bad thing.

With your own ideas of what is good and usable in mind, you might sometimes consider a drag-and-drop interface the best there is, but what about users who cannot move a mouse? You can make anything in the document an interactive element by attaching events; however, not all user agents will allow the visitor to reach the element without a mouse. A clickable headline is not available to keyboard users, but a headline with an embedded link is as the user can tab to the link, but cannot tab to the headline.

Basic accessibility guidelines and legal requirements make a very strong point that you have to remain input device independent if you want to create your own rich interfaces with DOM scripting and HTML.

There is nothing wrong with a drag-and-drop interface, as long as you also allow for keyboard access to it. As you should not rely on JavaScript being available, you’ll need real links on the draggable elements anyway, which could be enhanced with a click event or even keyboard access.

Keyboard event handling is another can of worms. While most browsers support keypress (which is not mentioned in the W3C specs—they favor keyup), you can never know if the keyboard shortcut you want to assign to an element isn’t necessary for another piece of software on the user’s machine.

Keyboard access is universally part of the operating system, and visitors who need certain key combinations to use it will not take kindly to your hindering them in their work by hijacking those combinations for your purposes. Clever web applications therefore make their keyboard shortcuts optional or even customizable by the user.

The same problem occurs in HTML when you use the accesskey attribute. This attribute tells the browser to activate the element when the key defined in the attribute’s value is pressed (together with the Alt key on MSIE and Mozilla —via other combinations on other browsers). In effect, this is adding an event and assigning an event listener that sets the focus of the

180	C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

element or follows the default action of that element. Until recently, it was common practice and deemed safe to use numerical keys for these attributes—which works, until you have a user who has special characters in her name and needs to use Alt and the ASCII number of the character to enter it.

All of this said, research is under way in the area of rich HTML and JavaScript interfaces, and you can take a look at and use the rich controls developed by IBM and Mozilla at http:// www.mozilla.org/access/dhtml/.

Summary

You’ve made it to the end of this chapter, and I hope it was not too much information at once. In the first half, we talked about the interaction of CSS and JavaScript, covering the

following:

•How to change presentation in JavaScript via the style collection

•How to help CSS designers by keeping the look and feel of your script in CSS classes

•How to provide the CSS designers with hooks to style the document differently depending on scripting being enabled or disabled

•An introduction to different third-party style switchers and the idea that published JavaScript scripts are not necessarily set in stone but can be improved and refined over time

•How to ease the maintenance of CSS and JavaScript working together by introducing objects only containing CSS name information

•Fixing a CSS issue with JavaScript—in this chapter’s example, multicolumn displays not having the same height

•Helping the CSS designer by applying cross-browser hover effects

•The dangers of using JavaScript to create lots of HTML elements to support CSS effects instead of implementing these effects via JavaScript from the start

We then moved on to what makes web sites click—literally at times—in other words, event handling. We talked about

•How to apply event handling in old browsers via the DOM-1 onevent properties (like onclick, onmouseover, and so on)

•What the W3C has to say about events in the DOM-2 specifications and how to use what they recommend

•How to make noncompliant browsers do the same

•How to avoid display glitches when the page is not fully loaded

•How to deal with keyboard entries

•The dangers of event handling

C H A P T E R 5 ■ P R E S E N T A T I O N A N D B E H A V I O R ( C S S A N D E V E N T H A N D L I N G )

181

This is it—you should now have all the tools you need to go out there and “wow” the masses with stable, easy-to-maintain, slick JavaScript. In the next chapter, we will go through some of the most common uses of JavaScript and have a go at developing up-to-date solutions for them to replace old scripts you may already use.

C H A P T E R 6

■ ■ ■

Common Uses of JavaScript:

Images and Windows

If you read the last few chapters, you should be well equipped now with your knowledge of JavaScript and its interaction with CSS and HTML. Now you will learn about some of the most common uses of JavaScript on the Web these days, and we’ll go through some examples. In these examples, you’ll see how to ensure that they work independently of other scripts on the page, and I’ll explain what problems might occur. We’ll also touch on what functionality is tempting to use but might not be the safest of options.

■Note This chapter consists of a lot of code examples, and you will be asked to open some of them in a browser to test the functionality for yourself, so if you haven’t been to http://www.beginningjavascript.com yet to download the code examples for this book, it might be a good time to do so now.

Most of the full code examples here use DOM-2 event handling. This makes them a bit more complex than their DOM-1 equivalents, but it also makes them work a lot better with other scripts, and they are much more likely to work in future browsers. Just bear with me, and I promise that by repeatedly using these methods, you will get the hang of them quite quickly.

The examples are also developed with maintenance and flexibility in mind. This means that everything that might be changed at a later stage by non-JavaScript-savvy people is stored in properties and that you can easily have several parts of the same document use the scripts’ functionality. This also adds to the complexity of some of the scripts, but it is a real-life deliverable most clients ask for.

Images and JavaScript

Dynamic changing of images was most likely the first “wow” effect JavaScript was used for. When CSS was not supported by browsers yet (and—to be fair—was still in the process of being defined), JavaScript was the only way to change an image when the user moved the mouse over it or clicked it. In recent years, more and more of the image effects traditionally achieved via JavaScript have been replaced by pure CSS solutions that make maintenance a lot easier. We’ll discuss these later; for now, let’s take a look at the basics of what JavaScript can do to images.

183

184 C H A P T E R 6 ■ C O M M O N U S E S O F J A V A S C R I P T : I M A G E S A N D W I N D O W S

Basics of Image Scripting

In JavaScript you can reach and amend images in two ways: the DOM-2 way via getElementsByTagName() and getElementById(), or an older way, which involves the images collection that is stored in a property of the document object. As an example, let’s take an HTML document with a list of photos:

<ul class="slides">

<li><img src="pictures/thumbs/cat2.jpg" alt="Lazy Cat" /></li>

<li><img src="pictures/thumbs/dog10.jpg" alt="Dog using the shade" /></li> <li><img src="pictures/thumbs/dog12.jpg" alt="Squinting Dog" /></li>

<li><img src="pictures/thumbs/dog63.jpg" alt="Dog cooling off in the sand" /></li> <li><img src="pictures/thumbs/dog7.jpg" alt="Very flat dog" /></li>

<li><img src="pictures/thumbs/donkeycloseup.jpg" alt="Curious Donkey" /></li> <li><img src="pictures/thumbs/donkeyeating.jpg" alt="Hay-eating Donkey" /></li> <li><img src="pictures/thumbs/kittenflat.jpg" alt="Ginger and White Cat" /></li>

</ul>

You can retrieve all these photos in JavaScript to do something to them in both ways:

// Old DOM

var photosOldDOM=document.images; // New DOM

var photos=document.getElementsByTagName('img');

Both methods result in an array containing all the images as objects. As with any object, you can read and manipulate their properties. Say, for example, you want to know the alternative text of the third image. All you need to do is to read out the alt property of the object:

// Old DOM alt property

var photosOldDOM=document.images; alert(photosOldDOM[2].alt);

// W3C DOM-2 alt attribute

var photos=document.getElementsByTagName('img'); alert(photos[2].getAttribute('alt'));

C H A P T E R 6 ■ C O M M O N U S E S O F J A V A S C R I P T : I M A G E S A N D W I N D O W S

185

Images have several properties, some of which are obvious, but others you may not have heard about:

•border: The value of the border attribute in the HTML

•name: The name attribute of the img tag

•complete: A property that is true if the image has finished loading (read-only—you cannot change this attribute)

•height: The height of the image (in pixels—returned as an integer)

•width: The width of the image (in pixels—returned as an integer)

•hspace: The horizontal space around the image

•vspace: The vertical space around the image

•lowsrc: The image preview as defined in the attribute of the same name

•src: The URL of the image

You can use these properties to access and change images dynamically. If you open the example document exampleImageProperties.html in a browser, you can read and write the properties of the demonstration image as Figure 6-1 shows.

Figure 6-1. Reading and writing the properties of an image