4.1

from

1 to 12

4 How to work with JavaScript objects, functions, and even Chapte Exercise 4-1 In this exercise, you'll Enhance the MPG application Il enhance the validation for the MPG application, and v l provide for clearing the entries from the form. Calculate Miles Per Gallon Mies Driven Gallons of Gas Used Mles Per Gallon Calculate MPG Clear Entries This page says Miles must be numeric and greater than zero oK l you have any problems when you're testing, remember to use Chrome's developer tools as shown in figure 1-16 of chapter 1. Test the application . Open your text editor or IDE, and open this HTML file: enjavascript-jqueryexercises \ch04\mpg\index.html Then, review the JavaScript code to see that it's the same as in figure 4-10. 2. Tes this application with valid data to see how it works. When you click the Calculate MPG button, the corret result should be displayed. the data validation routine. Note that one error message is displayed in an g box if either entry is nonnumeric or if either entry is less than or equal to zero. Fabance the data validation e ke he es statement that provides the data validation so it checks each e dipl paralely, If the data in a text box is invalid, an error message should lext box and the focus should be moved to that text box. Test this change to be sure bx if it contains invalid data. wide error message is displayed for a text Aad s Clee Fing the entries from the form TML tries buto MPG button. To do that, copy he istments for the Calculate button, and paste Cment for the Calculate button. Then, modify the HTMI on so it has a unique id and an appropriate value Section1JavaScript essentials Add a function expression named clearEntries) that clears the entries in the four text boxes. Then, add a statement in the onload event handler that attaches the clearEntries) function to the click event of the Clear Entries button. 7. Add a statement to the onload event handler that attaches the clearEntrieso) function to the double-click event of the miles text box. Then, test this change 8. See what happens when you remove strict mode 9. Change the second statement in the calculateMpgO function as follows so the variable name is misspelled as Mpg instead of mpg. var nog -(miles / gallons) Mpa mpg.torixed(1) return mpg 10. Test this application with valid entries, and note that it doesn't work. Then, press F12 to display the developer tools, click on the Console tab, and see this error message: Mpg is not defined. This shows that strict mode prevents the declaration of a variable without using the var keyword. 11. Delete the strict mode declaration, and test again with the 1000 for miles and 33 for gallons. This time, the application works, but the result isn't rounded. That's because the JavaScript engine treated Mpg as a new variable. 12. Restore the strict mode declaration and return the variable name to mpg Exercise 4-2 Build a new Future Value In this exercise, you will build a new version of the Future Value application of Then, test again to make sure the application is working. application chapter 3. Its user interface will look like this: Future Value Calculator Total Investment 10000 Annual Interest Rate 75 Number of Years: 10 Future Value 206 10 32 Calculate If you have any problems when you're testing, remember to use Chrome's developer tools as shown in figure 1-16 of chapter 1. Open and review the starting files 1. Open your text editor or IDE, and open the HTML and JavaScript iles in this folder: javascript iquerylexercisesich04\future_value Chapter 4 How to work with JavaScript objects. fiunctions, and events The Miles Per Gallon application in a browser Calculate Miles Per Gallon Miles Driven 2021 Gallons of Gas Used p63 Mies Per Gallon The HTML and JavaScript for the application chead>

Figure 4-10 The Miles Per Gallon application