JavaScript in small bites, Part 4

[article index] [] [@mattmight] [rss]

JavaScript is a great langauge for learning programming: you don't need any new software, and you get instantaneous feedback. "In small bites" is a by-example philosophy to language-learning: in this article, you will find code snippets showing many different ways to accomplish the same task in JavaScript. "In small bites" contrasts with the "syntax and semantics" approach to language-learning, which emphasizes top-down learning of formal grammar and specification.

Part 1 covered creating a basic JavaScript program, "Hello, World!", literal values, basic functions and basic objects.

Part 2 covers interacting with forms, object constructors, methods, prototypes and the meaning of the this keyword. The exercise is to create a hand-held calculator simulator from partially completed code.

Part 3 covers arrays, DOM tree interaction and events. The exercise is to create a simulated board game from partially completed code.

Part 4 covers (more) event-handling and how to interact with CSS from JavaScript. The exercise is to create the game Minesweeper from partially completed code.

Advanced event handling

To handle events like mouse clicks and key presses in JavaScript, you attach event handling code to HTML elements. You can attach an event handling code in HTML, by adding an onevent attribute to an element; this code will be executed whenever that event happens.

In JavaScript, the most common events are onclick, onkeypress, onkeydown, and onkeyup. The special onload event applies to the body tag, and it runs after the page has finished loading.

It is also possible to add event handlers directly in JavaScript, by accessing HTML elements and using onevent fields:

Note that when event handlers are added in JavaScript, they are added functions rather than text. That is, element.onclick = "alert('Alert me!');" does not work.

When an event fires, the event handler function receives an event object describing information about the event. Browsers disagree on the naming of these fields, but for non-IE browsers, the target field contains the event which received the action:

Interacting with CSS

CSS is a means for separating the content of a web page from the style of a web page. JavaScript can interact with the CSS styles associated with each element using the style field. In JavaScript, there are two ways to access a given style property--as a literal field, or as a an index. For example, one can render the following page:

by accessing all of the styles as fields:

or by accessing all of the styles as indexes:

Note that for CSS styles which contain hyphens, their name in JavaScript changes to "camel case"; for example, background-color becomes backgroundColor.

Exercise: Minesweeper

Below, you'll find a partially constructed Minesweeper game. The code creates the board with DOM tree manipulation, and stores information about the game inside the DOM tree. It randomly initializes the board with mines. At the moment, it calls the procedure DisplayDebugInfo when it starts, which overlays information on the board. (If you want, have DisplayDebugInfo invoked when the user presses the character "C".)

You can decide on the precise controls, but it's recommend that a user should be able to highlight a cell, and click "F" to toggle the flag, or "B" to "clear" the cell.

For simplicity, you can use blue to mark a cell as flagged. If you're feeling adventurous, add some graphics!