Web Forms and Calculations in JavaScript

Web Forms

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

Forms and Form Fields Form

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

Basic Form Elements

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

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

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

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

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

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

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

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

Functions and Return Values

function byValue(a) { alert('In byValue (start): ' + a) a = a * 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): In body (end): 5

function byReference(b) { alert('In byReference (start): ' + b.parm) b.parm = b.parm * 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): In body (end): 50000

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 =

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 + ' ')

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 + ' ')

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

Calculations

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

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

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

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