1. Web Forms and Calculations in JavaScript

2. Web Forms

3. Why Forms? Web Server Web Browser Identification, settings, etc. Transaction Data

4. Forms and Form Fields Form

5. Defining a Form and Elements HTML and form fields go here.

6. Basic Form Elements

7. Basic Form Elements <input type="text" name=“sname" size="30" /> <input type="checkbox" name="student" checked />

8. Basic Form Elements <input type="radio" name="sex" value="M" /> <input type="radio" name="sex" value=“F" />

9. Basic Form Elements Management Information Systems Computer Information Systems Information Security and Privacy

10. Basic Form Elements <textarea name="comments" rows="5" cols="50">

11. Basic Form Elements <input type="submit" name="submit" value="Record Entry" />

12. Accessing Form Fields by Name document.getstuff.sname.value document.getstuff.student.checked...documentformfieldproperty

13. Focus, Blur, and Change Focus Event (onfocus) Blur Event (onblur) Change Event (onchange) (after exit field with changes)

14. Event Order Blur Event Change Event Single Action  Multiple Events Change value in form field and hit tab: Order varies (see DOM references)

15. Functions and Return Values

16. function byValue(a) { alert('In byValue (start): ' + a) a = a * 10000 alert('In byValue (end): ' + a) } var parm = 5 alert('In body (start): ' + parm) byValue(parm) alert('In body (end): ' + parm) By Value: Function calls using variables pass values. In body (start): 5 In byValue (start): 5 In byValue (end): 50000 In body (end): 5

17. function byReference(b) { alert('In byReference (start): ' + b.parm) b.parm = b.parm * 10000 alert('In byReference (end): ' + b.parm) } var obj = new Object obj.parm = 5 alert('In body (start): ' + obj.parm) byReference(obj) alert('In body (end): ' + obj.parm) By Reference: Function calls using objects pass references to memory address. In body (start): 5 In byReference (start): 5 In byReference (end): 50000 In body (end): 50000

18. function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate document.write('Gross = ' + gross + ' ') } var hours = 40.0 var rate = 9.88 calcGrossPay(hours, rate) Gross = 395.20000000000004

19. function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } var hours = 40.0 var rate = 9.88 var grossPay = 0.00 grossPay = calcGrossPay(hours, rate) document.write('Gross = ' + grossPay + ' ')

20. function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } var hours = 40.0 var rate = 9.88 var grossPay = 0.00 var netPay = 0.00 grossPay = calcGrossPay(hours, rate) netPay = grossPay * 0.6 document.write('Net = ' + netPay + ' ')

21. Returning Values Global variable. Object – by reference. Returned value.

22. Calculations

23. Basics d = d + 1 r = q - m a = t * b c = a / m p = n + m / g - z p = (n + m) / (g - z)

24. Increment and Decrement Increment b++  b = b + 1 ++d  d = d + 1 a = b++  a = b; b = b + 1 c = ++d  c = d + 1; d = d + 1 Decrement b--  b = b - 1 --d  d = d - 1 a = b--  a = b; b = b - 1 c = --d  c = d - 1; d = d - 1

25. Math Object Enables higher math operators. Examples: –Square root. –Exponentiation. –Trigonometry calculations. –Random number generator.

26. Numeric Conversion Number as string. Conversion Methods: –parseFloat()  decimal. –parseInt()  integer.