Lecture # 13 JavaScript Functions: A Trip to the Grocery Store

1. Lecture # 13 JavaScript Functions: A Trip to the Grocery Store

2. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

3. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

4. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

5. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

6. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

7. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

8. But first …

9. Calculating Payments for a Loan

10. Calculating Payments for a Loan … if you don’t have a spreadsheet

11. The Payment “Power” Algorithm

12. How to code in javascript:

13. How to code in javascript: Why this?

14. How to code in javascript: Why this?

15. How to code it in javascript: And this?

16. A Trip to the Grocery Store

17. Lets first make a table of groceries

18. Now add a button

19. What else do we need?

20. What Functions Do We Need? • function CalcSubTotal() • For each item, add price * quantity to subtotal • Fill in the subtotal text box • Return the subtotal • function CalcSalesTax(subtotal) • Multiply 6.25% * subtotal • Fill in the tax text box • Return the tax

21. What Functions Do We Need? • function CalcTotal() • Call CalcSubTotal • Call CalcTax • Add subtotal and sales tax together, and fill in the total text box

22. function CalcSubTotal() function CalcSubTotal() { subtotal = (demoform.milk.value * 2.59) + (demoform.bread.value * 1.09) + (demoform.oranges.value * 0.89) + (demoform.apples.value * 1.09) + (demoform.tortillas.value * 0.99) + (demoform.cheese.value * 2.49); subtotal = Math.round(subtotal*Math.pow(10,2))/Math.pow(10,2); demoform.subtotal.value = subtotal; return subtotal; }

23. Creating the Event Handler <input type="button" value="Calculate Total" onClick="CalcTotal()">

24. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.

25. Group Exercise: Add the Tax

26. function CalcSalesTax(subtotal) function CalcSalesTax(subtotal) { salestax = subtotal * 0.0625; demoform.tax.value = Math.round(salestax*Math.pow(10,2))/Math.pow(10,2); return salestax; }

27. function CalcTotal() function CalcTotal() { subtotal = CalcSubTotal(); salestax = CalcSalesTax(subtotal); total = subtotal + salestax; demoform.total.value = Math.round(total*Math.pow(10,2))/Math.pow(10,2); }

28. Today Questions: Homework # 3? Lab # 4? Lab 5? 1. Introduce: How can you make an On-line Grocery List? 2. Explain: document.write, Text Concatenation, Debugging JavaScript Functions, loops for calculations 3. Demo: A Trip to the Grocery Store (10-15 min.) 4. Practice: You solve a problem: Add the Tax (10 min.) 5. Evaluate: Share and evaluate your solution 6. Re-practice: Write a JavaScript function using a Selection List to convert Celsius to Fahrenheit and vice versa Review for Quiz 2.