HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [137]
♦ substring(begin, end) returns the substring of the variable from the beginning character value to the end.
Why are the first three characters (0, 3)?
The character locations for JavaScript (and most programming languages) will seem somewhat strange to you until you know the secret. You may expect text.substring(1,3) to return the first three characters of the variable text, yet I used text.substring(0,3). Here’s why: The indices don’t refer to the character numbers but to the indices between characters.
|a|b|c|d|
0 1 2 3 4
So, if I want the first three characters of the string “abcd”, I use substring(0,3). If I want the “cd” part, it’s substring(2,4).
Understanding Variable Types
JavaScript isn’t too fussy about whether a variable contains text or a number, but the distinction is still important because it can cause some surprising problems. To illustrate, take a look at a program that adds two numbers together, and then see what happens when you try to get numbers from the user to add.
Adding numbers
First, take a look at the following program:
(As usual for this chapter, I’m only showing the script part because the rest of the page is blank.)
This program features three variables. I’ve assigned the value 5 to x and 3 to y. I then add x + y and assign the result to a third variable, sum. The last line prints the results, which are also shown in Figure 1-9.
Figure 1-9: This program (correctly) adds two numbers together.
Note a few important things from this example:
♦ You can assign values to variables. It’s best to read the equal sign as “gets” so that the first assignment is read as “variable x gets the value 5.”
var x = 5;
♦ Numeric values aren’t enclosed in quotes. When you refer to a text literal value, it’s always enclosed in quotes. Numeric data, such as the value 5, isn’t placed in quotes.
♦ You can add numeric values. Because x and y both contain numeric values, you can add them together.
♦ You can replace the results of an operation in a variable. The result of the calculation x + y is placed in a variable called sum.
♦ Everything works as expected. The behavior of this program works as expected. That’s important because it’s not always true. (You can see an example of this behavior in the next section — I love writing code that blows up on purpose!)
Adding the user’s numbers
The natural extension of the addNumbers.html program is a feature that allows the user to input two values and then returns the sum. This program can be the basis for a simple adding machine. Here’s the JavaScript code:
This code seems reasonable enough. It asks for each value and stores them in variables. It then adds the variables and returns the results, right? Well, look at Figure 1-10 to see a surprise.
Figure 1-10: Wait a minute . . . 3 + 5 = 35?
Something’s obviously not right here. To understand the problem, you need to see how JavaScript makes guesses about data types (see the next section).
The trouble with dynamic data
Ultimately, all the information stored in a computer, from music videos to e-mails, is stored as a bunch of ones and zeroes. The same value 01000001 can mean all kinds of things: It may mean the number 65 or the character A. (In fact, it does mean both those things in the right context.) The same binary value may mean something entirely different if it’s interpreted as a real number, a color, or a part of a sound file.
The theory isn’t critical here, but one point is really important: Somehow