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

8. 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

9. 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

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

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