Download JavaScriptLesson04

JavaScript 101
Lesson 4: Formatting Input Data
for Arithmetic
Lesson Topics





Data types
String data versus numeric data
How input data (from the prompt method) is
stored as a string
Why you need to format input data for arithmetic
How to use built in JavaScript functions to format
input data for arithmetic (parseInt, parseFloat, and
eval)
Data Types



Data type is a category of information
used by a programming language
Identifies the type (kind) of information
a program can represent
JavaScript has three basic data types:



String
Numeric
Boolean
String data vs. numeric data



String data is used to input and output
information
Numeric data can carry out arithmetic
All information in a computer is stored using
just 0s and 1s


Inside the computer, strings and numbers use
different patterns to store information
Need to change a string pattern into a number
pattern before computer can execute arithmetic
String data versus Numeric
data


When the prompt method is used to
collect data from a Web page visitor,
information input is a string
Information in the form of a string must
be formatted as a number before it can
be used for arithmetic
How to convert strings to
numbers

Use these JavaScript methods



The parseFloat() method
The parseInt() method
The eval() method
The parseFloat() Method


Syntax:
var number=parseFloat(string1);
parseFloat takes the value stored in string1
and translates it to a decimal format and
stores the number in the variable number
The parseInt() Method


Syntax:
var wholeNumber=parseInt(string1):
parseFloat takes the value stored in
string1 and translates it to a decimal
format and stores the number in the
variable number
The eval() Method



The eval() method evaluates a numeric
expression in the form of a string and
returns its value
Syntax:
var result=eval(string1);
Where string1 is a numeric expression
in string format
In the lab




Use JavaScript methods to convert user input
from string format to numeric format and
then carry out arithmetic operations
Open Notepad and create a new HTML
document named lesson0401.html
Enter the code on p. 4-6 exactly as you see it
Save the file and open it using either Internet
Explorer or Netscape
Student Modifications

Modify the code on p. 4-6 to prompt users to
enter the age of their dog, using parseFloat(),
convert the dog’s age to human years using
the following formula
dogToHumanYears = ((dogAge-1) * 7) + 9

Do other conversions, from cat years (cats
live about 20 years) to human years. Look on
the internet for other possibilities
Lesson Summary






Data types
String data versus numeric data
Input data from the prompt method stores is a
string
Data in string format cannot be used for arithmetic
JavaScript methods to convert strings into
numbers
After conversion, arithmetic can be carried out
Lesson Summary (cont.)



The parseFloat method, which converts a string to
a decimal number
The parseInt method, which converts a string to an
integer
The eval method, which converts an expression in
the form of a string into a numeric value