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.