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