JavaScript 101

1
JavaScript 101

• Lesson 4 Formatting Input Data for Arithmetic

2
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)

3
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

4
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

5
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

6
How to convert strings to numbers

• Use these JavaScript methods
• The parseFloat() method
• The parseInt() method
• The eval() method

7
The parseFloat() Method

• Syntax
• var numberparseFloat(string1)
• parseFloat takes the value stored in string1 and
  translates it to a decimal format and stores the
  number in the variable number

8
The parseInt() Method

• Syntaxvar wholeNumberparseInt(string1)
• parseFloat takes the value stored in string1 and
  translates it to a decimal format and stores the
  number in the variable number

9
The eval() Method

• The eval() method evaluates a numeric expression
  in the form of a string and returns its value
• Syntax
• var resulteval(string1)
• Where string1 is a numeric expression in string
  format

10
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

11
Student Modifications

• Modify the code on p. 4-6 to prompt users to
  enter the age of their dog, using parseFloat(),
  convert the dogs 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

12
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

13
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