Online Book Reader

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [182]

♦ The sprite div has a local style. Your code can change only styles that have been defined locally. The sprite div has a local style specifying absolute position, left, and top properties.

♦ It has buttons in a form. This particular program uses form buttons to discern the user’s intent. Those buttons are in a form.

onclick = “moveSprite(-5, 0)”>

left

♦ Each button calls the moveSprite() method. The moveSprite() method is defined in the movement.js file. It accepts two parameters: dx determines how much the sprite should move in the x (side to side) axis, and dy controls how much the sprite will move in the y (vertical) axis.

Getting an overview of the JavaScript

The following programming concepts improve programmer efficiency, which is good when the JavaScript code becomes more complex:

♦ Move code to an external file. As with CSS code, when the JavaScript starts to get complex, it’s a good idea to move it to its own file, so it’s easier to manage.

♦ Encapsulate code in functions. Rather than writing a long, complicated function, try to break the code into smaller functions that solve individual problems. If you design these functions well, your code is easier to write, understand, and recycle.

♦ Create a few global variables. You can reuse a few key variables throughout your code. Create global variables for these key items, but don’t make anything global that doesn’t need to be.

♦ Define constants for clarity. Sometimes having a few key values stored in special variables is handy. I’ve created some constants to help me track the boundary of the visual surface.

Creating global variables

The first part of this document simply defines the global variables I use throughout the program:

//movement.js

//global variables

var sprite;

var x, y; //position variables

//constants

var MIN_X = 15;

var MAX_X = 365;

var MIN_Y = 85;

var MAX_Y = 435;

The movement program has three main global variables:

♦ sprite represents the div that moves around on the screen.

♦ x is the x (horizontal) position of the sprite.

♦ y is the y (vertical) position of the sprite.

You don’t need to give values to global variables right away, but you should define them outside any functions so that their values are available to all functions. (See Chapter 4 in this minibook for more about functions and variable scope.)

In computer graphics, the y axis works differently than it does in math. Zero is the top of the screen, and y values increase as you move down the page. (This increase happens because video memory models the top-to-bottom pattern of most display devices.)

This program also features some special constants. A constant is a variable (usually global) whose value isn’t intended to change as the program runs. Constants are almost always used to add clarity.

Through experimentation, I found that the ball’s x value should never be smaller than 15 or larger than 365. By defining special constants with these values, I can make it clear what these values represent. (See the section called “Checking the boundaries” later in this chapter to see how this feature really works.)

Traditionally, you put constants entirely in uppercase letters. Many languages have special modifiers for creating constants, but JavaScript doesn’t. If you want something to be a constant, just make a variable with an uppercase name and treat it as a constant. (Don’t change it during the run of the program.)

Initializing

The init() function is small but mighty:

function init(){

sprite = document.getElementById(“sprite”);

} // end init

It does a simple but important job: loading up the sprite div and storing it into a variable named sprite. Because sprite is a global variable, all other functions have access to the sprite variable and are able to manipulate it.

You often use the init()