1 / 26

Web Forms and Calculations in JavaScript

Web Forms and Calculations in JavaScript. Web Forms. Web Browser. Transaction Data. Web Server. Why Forms?. Identification, settings, etc. Form. Forms and Form Fields. Defining a Form and Elements. <body> <form name= " form_name"> </form> </body>. HTML and form fields go here.

benard
Download Presentation

Web Forms and Calculations in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Forms andCalculations in JavaScript

  2. Web Forms

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

  4. Form Forms and Form Fields

  5. Defining a Form and Elements <body> <form name="form_name"> </form> </body> HTML and form fields go here.

  6. <form name="getstuff"> </form> Basic Form Elements

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

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

  9. <select name="major"> <option value="mis">Management Information Systems</option> <option value="cis">Computer Information Systems</option> <option value="isp">Information Security and Privacy</option> </select> Basic Form Elements

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

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

  12. Accessing Form Fields by Name document . form . field . property document.getstuff.sname.value document.getstuff.student.checked

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

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

  15. Functions and Return Values

  16. <html> <head> <script type="text/javascript"> function byValue(a) { alert('In byValue (start): ' + a) a = a * 10000 alert('In byValue (end): ' + a) } </script> </head> <body> <script type="text/javascript"> var parm = 5 alert('In body (start): ' + parm) byValue(parm) alert('In body (end): ' + parm) </script> </body> </html> In body (start): 5In byValue (start): 5In byValue (end): 50000In body (end): 5 By Value: Function calls using variables pass values.

  17. <html> <head> <script type="text/javascript"> function byReference(b) { alert('In byReference (start): ' + b.parm) b.parm = b.parm * 10000 alert('In byReference (end): ' + b.parm) } </script> </head> <body> <script type="text/javascript"> var obj = new Object obj.parm = 5 alert('In body (start): ' + obj.parm) byReference(obj) alert('In body (end): ' + obj.parm) </script> </body> </html> In body (start): 5In byReference (start): 5In byReference (end): 50000In body (end): 50000 By Reference: Function calls using objects pass references to memory address.

  18. <html> <head> <script type="text/javascript"> function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate document.write('Gross = ' + gross + '<br />') } </script> </head> <body> <script type="text/javascript"> var hours = 40.0 var rate = 9.88 calcGrossPay(hours, rate) </script> </body> </html> Gross = 395.20000000000004

  19. <html> <head> <script type="text/javascript"> function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } </script> </head> <body> <script type="text/javascript"> var hours = 40.0 var rate = 9.88 var grossPay = 0.00 grossPay = calcGrossPay(hours, rate) document.write('Gross = ' + grossPay + '<br />') </script> </body> </html>

  20. <html> <head> <script type="text/javascript"> function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } </script> </head> <body> <script type="text/javascript"> 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 + '<br />') </script> </body> </html>

  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 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 Increment and Decrement

  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.

More Related