Ajax Combat: Binding event handler function code

The JavaScript file (code listing 4-3) binds the event to the key programmatically.

Code Listings 4-3 Musical.js

Window.onload called the Assignkeys () function (you can define window. onload directly in this file, but this limits its portability). Discovers the keyboard element through a unique ID, and then uses getElementsByTagName () traversal to access all the DIV elements within it. This requires some knowledge about the structure of the page, but it allows the page designer to freely move the keyboard div in the page in the way it wants.

The DOM element that represents the key returns a separate string as the ClassName property. We use a built-in string. The Split function converts it to an array and checks to see if the element is a Musicalbutton class. It then reads another part of the style-it represents the note played by the key-and is appended to the DOM node as an additional attribute that can be obtained by the event handler function.

Playing music through a Web browser requires a lot of skill, and here we're just programming the console on the keyboard and using innerHTML is enough. Figure 4-4 shows the music keyboard in the active. Here we have a good role separation, assuming that the page designer has removed the keyboard and console div tags from somewhere on the page, as long as the page includes stylesheets and JavaScript, the application can still work and the risk of accidentally breaking the event logic is small. HTML pages are effectively a template, and we inject variables and logic into them, which provides a good way to keep the logic separate from the view. We have done this example by hand to demonstrate the details of the working mechanism. In a production environment, you might like to use a few third-party libraries that solve the same problem.

Figure 4-4 Music Keyboard application running in the browser. The top color area is mapped to the notes, and when the mouse is moved above, the notes are printed in the console area below

The RICO Framework (www.openrico.org) has the concept of a behavior object that targets specific parts of the DOM tree and adds interactivity to them. 3.5.2 section has simply examined the behavior of Rico accordion.

Similar methods for separating HTML tags and interactivity can be implemented through Ben Nolan's behaviour library (see the "Resources" section of this chapter). This library allows the event handler function code to be assigned to the DOM element based on CSS selector rules (see chap. 2nd). In the previous example, the Assignkeys () function used keyboard as the ID to programmatically select the document element, and then use the DOM processing method to get all the DIV elements it directly contains. We can use a CSS selector to express:

#keyboard Div

You can use the CSS selector to set styles for all keyboard elements. Using the Behaviour.js library, you can also apply the event handler functions in the same way as follows:

Most of the logic is the same as the previous example, but the use of CSS selectors provides a concise alternative to programmatically locating DOM elements, especially when you need to add a few actions immediately.

This approach keeps the logic separate from the view, but it can also mix views and logic together, as we'll see here.