IT 180 Web Development I, Fall 2009
Lesson 12: Strings and Numbers
The alert method
Another way of displaying something is to use the JavaScript's alert method. Alert pops up a box with a message in it, called an alert box. The user must click OK for before the program will continue. The user cannot change or enter anything.
alertmay have only one input argument in the parentheses, the message to be displayed.
alert("Something");
produces
Concatenation: stringing strings together with +
The input message provided for an alert box must be a single string. It cannot be a list of them.
We can combine several strings into a longer one. This operation is called concatenation - the two strings are simply "stuck together" into one bigger string. In JavaScript, the string catenation operation is indicated with the + sign. For example
// create variables
var part1;
var part2;
var together;
// assign values
part1 = "house";
part2 = "boat";
// perform computation and assign to variable
together = part1 + part2;
// announce result in dialog box
alert(together);
shows "houseboat" in the alert box.
This is our first example of an expression that involves an operator - a symbol that combines two values to make a new one. In this case we assigned the result of the concatenation to a variable.
Changing the value of a variable
The value of a variable can be changed to a new one with another assignment statement. When changed, the old value is irrecoverably replaced with the new one. We say the new value overwrites the old one in memory.
var my_word = "Today"; //variable declared; first value assigned
//Two separate steps combined into one
document.write( "At this point the value of the variable is " , my_word , ". <br/>" );
//Notice there is no "var" in the next statement, just the assignment
my_word = "Tomorrow"; //second value assigned
document.write( "At this point the value is: " , my_word , ". <br/>");
//another value assigned, this time it is obtained from the prompt
my_word = prompt( "Enter another value for it:", my_word );
document.write( "At this point the value is : " , my_word , ".");
Assignments are actions, not formulas or equations
The statements in a program are executed in sequence step-by-step. A variable will be changed only when a new assignment is made.
In the following example, what will the second alert show?
// declare the variables
var part1;
var part2;
var together;
// perform computation and assign to variable
part1 = "house";
part2 = "boat";
together = part1 + part2; // compute the concatenation
//announce value of variable named together
alert(together);
part2 = "fly"; //assign a new value to together
alert(together); //announce value of together
Although the value of part2 was changed, that of together was not. The assignment
together = part1 + part2;
is not a formula that will be automatically recalculated if part of the expression is changed. If we want the value to change, we must make a new assignment.
// declare the variables
var part1;
var part2;
var together;
// perform computation and assign to variable
part1 = "house";
part2 = "boat";
together = part1 + part2; //compute concatenation
//announce value of variable named together
alert(together);
part2 = fly; //assign a new value to variable
together = part1 + part2; //recompute so uses changed value
alert(together); //announce value of together
Using an expression in alert
The alert method is not limited to displaying a single variable or string. It can be given an expression, as long as the result of that expression is a single string. The example could be rewritten as
var part1 = "house"; //Create variables and assign values
var part2 = "boat"; //Two steps combined into one
alert(part1 + part2); //computer contatenation before alerting
Example 12.1
Here's an example that uses all the JavaScript commands we've learned so far: variables, strings, prompt, alert, and document.write.
var greeting;
var whozit
greeting = "Hiya ";
whozit = prompt("Please enter your name", "In here!");
alert (greeting + whozit);
document.write("This page is customized for ", whozit, ".");
Here is example 12.1 incorporated into a page.
Numeric values
In addition to strings, JavaScript can handle numbers and computations. (It can also handle a type of value called boolean (true/false), but we won't discuss in in this class.)
When numbers are written directly in a program, they are called numeric literals. Numeric literals are not enclosed in quotes. This signals that they are numbers rather than strings. They are written using only digits and a decimal point (except for scientific notation, which we will see later.) Negative numbers begin with a minus sign (-). For example
var first = 10; // These three are numeric values
var second = 8.5;
var third = -19
var fir = "17"; // These three are string values
var sec = "8.5";
var thi = "-19"
There are also two special values Infinity and NaN which we will see later.
Arithmetic operations
There are several arithmetic operations that can be performed on numbers. The symbols for them are called operators
+ addition
- subtraction
* multiplication
/ division
% remainder
Expressions
An expression is something that can be evaluated to produce a value. It can involve literals (values that are typed directly in the program), variables, operatiors, and parentheses. In the following examples, the 3, 4, and 4.0 are literals:
4.0 + 3/4 (4.0 + 3)/4 2 * (length + width) 4 % 3
The operations are evaluated, and parentheses change the order of operations, according to the usual rules of arithmetic.
Example
var first = 10;
var second = 3;
var result = first + second;
document.write("Using + operator: " , result);
result = first - second;
document.write("<br/>Using - operator: " , result);
result = first * second;
document.write("<br/>Using * operator: " , result);
result = first / second;
document.write("<br/>Using / operator: " , result);
result = first % second;
document.write("<br/>Using % operator: " , result);
Run this script in the the JavaScript Test Area to see the results.
Numbers and Strings
Unlike some other programming languages, variables in JavaScript are not restricted to containing one specific type of data, such as strings or numbers. There is no extra declaration necessary for a variable to hold a number. There is also no distinction between whole numbers (integers) and numbers that have a decimal point (called floating point or real numbers).
This flexibility is useful, but it can also be confusing.
Because a variable can hold both strings and numbers, the JavaScript interpreter has to decide which to use in an expression. It tries to guess using both how the value was originally defined and the context, the statement in which you use the variable - the operators and values in the surrounding expression. If you use it in a computation with operators that are only for numbers, there is no problem. JavaScript figures out that you mean for it to be a number. But if you use the + operator, it can't tell because the + is also the string concatenation operator.
In the second computation in this example, the operator * can only be used with numbers, so JavaScript treats the values as numbers.
var first = "10"; // Quotes means a string
var second = "3";
var result = first + second; // So + means concatenation
alert("sum: " + result);
result = first * second; // * is only for numbers
alert("product: " + result);
If you combine strings and numbers
var x = 10;
var y = 3;
document.write(x + y , "<br/>"); //With only numbers, + means addition
//Mixing strings and numbers in document.write, using commas
//Each part is handled separately, so x + y is still a number
document.write("With commas the result is ", x + y , "<br/>");
//Mixing strings and numbers in alert, using + to make a long string
//The first item is a string, so the whole expression is a string
alert("With all + the result is " + x + y );
//Mixing strings and numbers in alert, using + to make a long string
alert("With all * the result is " + x * y );
Prompting for numbers.
When you use the prompt function to get a value from the user, the result is always a string, even if it is made up of digits.
var length;
var width
length = prompt("Enter length of rectangle.", "");
width = prompt("Enter width of rectangle.", "");
//Multiply to calculate the area
//JavaScript realizes it needs to use numbers with *.
var area = length * width;
document.write("The area is " , area , "<br/>");
//In this one, the variables are used with a +. it is regarded
//as string concatenation because they came from using prompt
//and are originally strings, just as if they were quoted.
var perimeter = length + length + width + width;
document.write("The perimeter is " , perimeter , "<br/>");
The parseFloat function
The solution is to use the parseFloat function. It tells JavaScript to turn its input into a number.
As long as the input to parseFloat begins with something that can be a number, it will return the longest number it can make. But if the input does not begin with something that can be a number, parseFloat stops and retuns the special value NaN (Not a Number). Compare the results of the following two JavaScript statements.
alert(parseFloat("abc12"));
alert(parseFloat("12abc"));
Example 12.2
var length;
var width
length = prompt("Enter length of rectangle.", "");
//Tell JavaScript to ensure the value is a number, not a string
length = parseFloat(length);
//You can also do it all in one statement
width = parseFloat(prompt("Enter width of rectangle.", ""));
//The rest is the same
var area = length * width;
document.write("The area is " , area , "<br/>");
var perimeter = length + length + width + width;
document.write("The perimeter is " , perimeter , "<br/>");
Here is example 12.2 incorporated into a page.
Scientific Notation
JavaScript represents extremely large or extremely small numeric values using scientific notation, with a decimal number followed an exponent representing a power of 10. The first part always has one digit to the left of the decimal point. For example, if you execute
alert(.0000008); //the display shows 8e-7, meaning 8 times 10 to the -7th power alert(.00000099); //it shows 9.9e-7 alert(18100000000000000000000); //it shows 1.81e+22
To convert the value back to "normal" notation, a negative exponent means the decimal point should be moved to the left, and a positive one means it should be moved to the right.
Scientific notation allow you to write larger numbers than you would normally expect to type in, such as 1e100. However computers have limits to the size of the numbers they can handle, though mathematics does not. If you execute:
alert(1e308); //the display shows 1e308, meaning 8 times 10 to the -7th power. alert(1e309); //it shows "Infinity" bacause JavaScript cannot internally store the number it represents. alert(1e-323); //the display shows 1e-323 alert(1e-324); //it shows 0
While you probably won't need to use scientific notation when writing programs, you may see it as program output, and should know how to interpret it.
Example
Which of the following are numbers, which are strings, which could be variable names, and which are illegal? (Note: anything that looks like a zero is a zero, not an oh; anything that looks like a one is a one, not a lower case L.)
12 "12" 1.2 twelve "twelve" 12000000 12,000,000
1.2e12 e12 12e 012 12.0 "1.2.e12" 12000.000
Guidelines
- Remember that assignment is an action.
- JavaScript terms are case-sensitive; be sure to type
parseFloatand other names correctly. - If you are prompting for a number, be sure to use
parseFloatto ensure the value is numeric. - If you are mixing strings and numbers in
document.write, use the comma rather than concatenation. - If you are mixing strings and numbers in an expression, use parentheses to make sure any arithmetic additions are performed first.
Hood College Department of Computer Science: Course materials © 1997-2007 by Elizabeth Chang.
