Web Forms and Calculations in JavaScript
27
description
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. . HTML and form fields go here. - PowerPoint PPT Presentation
Transcript of Web Forms and Calculations in JavaScript
Web Forms andCalculations in JavaScript
Web Forms
Why Forms?
Web Server
WebBrowser
Identification, settings, etc.
Transaction Data
Forms and Form FieldsForm
Defining a Form and Elements<body><form name="form_name">
</form></body>
HTML and form fields go here.
Form<form name="getstuff">
</form>
Text Box
<input type="text" name=“sname" size="30" />
Text Area
<textarea name="comments" rows="5" cols="50"></textarea>
Buttons
<input type="submit" name="submit" value="Record Entry" />
Text Box and Text Area
document.getstuff.sname.value
. . .document form field value
Focus, Blur, and ChangeFocus 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
<html><head><script type="text/javascript">
function byValue(a){
alert('In byValue (start): ' + a)a = a * 10000alert('In byValue (end): ' + a)
}</script></head><body><script type="text/javascript">
var parm = 5alert('In body (start): ' + parm)byValue(parm)alert('In body (end): ' + parm)
</script></body></html>
By Value: Function calls using variables pass values.
In body (start): 5
In byValue (start): 5
In byValue (end): 50000
In body (end): 5
<html><head><script type="text/javascript">
function byReference(b){
alert('In byReference (start): ' + b.parm)b.parm = b.parm * 10000alert('In byReference (end): ' + b.parm)
}</script></head><body><script type="text/javascript">
var obj = new Object()obj.parm = 5alert('In body (start): ' + obj.parm)byReference(obj)alert('In body (end): ' + obj.parm)
</script></body></html>
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
Memory Reference
var a = new Object()
a.p1 = 15
body
a
15(p1) doStuff(a)
p.p1 = 25
function doStuff(p)p
25(p1)
p.p1 = ? a.p1 = ?
<html><head><script type="text/javascript">
function calcGrossPay(hours, rate){
var gross = 0.00gross = hours * ratedocument.write('Gross = ' + gross + '<br />')
}</script></head><body><script type="text/javascript">
var hours = 40.0var rate = 9.88calcGrossPay(hours, rate)
</script></body></html>
Gross = 395.20000000000004
<html><head><script type="text/javascript">
function calcGrossPay(hours, rate){
var gross = 0.00gross = hours * ratereturn gross
}</script></head><body><script type="text/javascript">
var hours = 40.0var rate = 9.88var grossPay = 0.00grossPay = calcGrossPay(hours, rate)document.write('Gross = ' + grossPay + '<br />')
</script></body></html>
<html><head><script type="text/javascript">
function calcGrossPay(hours, rate){
var gross = 0.00gross = hours * ratereturn gross
}</script></head><body><script type="text/javascript">
var hours = 40.0var rate = 9.88var grossPay = 0.00var netPay = 0.00grossPay = calcGrossPay(hours, rate)netPay = grossPay * 0.6document.write('Net = ' + netPay + '<br />')
</script></body></html>
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 + 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
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.
