Bride of JavaScript
Working with
JavaScript Objects
and Events
Form Validation
Neonatal Feeding Study
Client vs. Server Side Validation
Server-side User submits form to
Web server Server validates
response and returns to user if correction necessary
User resubmits
Client-side User submits form
and validation is performed on user’s computer
After an error correction, form is submitted.
Object-based Language
ObjectsPropertiesMethods[9.06]
JavaScript Object Hierarchy
[9.08]-object hierarchywindow.document.REG.MEDRECNOdocument.REG.MEDRECNO[9.09]-objects in neonatal form
Object Properties
[9.10]-partial list of objects and propertiesobject.property = expressionEXAMPLE: Changing an Object’s ValueEXAMPLE: Displaying Read Only Properti
es
Assigning a Property to a Variable
var PageColor = document.bgColor;
var FrameNumber = window.length;
var Browser = navigator.appName;
Properties in Conditional Expressions
<script language=“JavaScript”>
<!--Hide from older browsers
if(document.bgColor=="black") {
document.fgColor="white";
} else {
document.fgColor="black";
}
//Stop hiding-->
</script>
Object Methods
[9.13-9.14]-partial list of methods -- also App. D
object.method();
history.back();form.submit();document.write(“Thank You”);
some methods use parameters (like above)
The Revenge of JavaScript
Managing Events
Managing Events (session 8.2)
[9.15]-list of eventsEvent: a specific action that triggers the
browser to run a block of JavaScript commands
Events in Data Entry
Look at Figure 9-14 on 9.16
Event Handlers
Code added to an HTML tag that is run whenever a particular event occurs.
Event Handlers Syntax
<HTML_tag Properties event_handler = "JavaScript Commands;">
HTML_tag = name of tag
Properties = properties associated with the tag
event_handler = the name of an event handler (9-15 on 9.17)
JavaScript commands = function to be run
Example
onClick Event Handler
StartForm()
function StartForm() {
document.REG.FORMDATE.value=
DateToday();
}
<body onLoad="StartForm();">
function DateToday()
function DateToday() {var Today=new Date();
var ThisDay=Today.getDate();
var ThisMonth=Today.getMonth()+1;
var ThisYear=Today.getFullYear();
return ThisMonth+"/"+ThisDay+"/"+ThisYear;
See 9.20
Emulating Events(Figure 9-22, page 9.22)
document.ORDERS.PRODUCT.focus();
document.ORDERS.PRODUCT.blur();
document.ORDERS.submit();
After changes--you might need to save and re-open the file. . .
Working with a Selection Object
The Doctors. . . [9.24]
Complete Syntax
function CheckOther(){
if(document.REG.PHYSICIAN.selectedIndex==7) {
document.REG.OTHERNAME.value=prompt("Enter name of physician","Name");
}
document.REG.ACT.focus();
}
Prompting for Input
prompt("Message", "Default_text");
prompt("Enter your name", "Type name here");
Simple Input
Getting the Physician's Name
document.REG.OTHERNAME.value=
prompt("Enter the name of physician","Name");
Son of JavaScript
Calculations
Calculating APGAR (9.32)
TOTAL = ACTIVITY + PULSE + GRIMACE + APPEARANCE + RESPIRATION
<input name="act" value="0" size="1" maxlength="1" onBlur="APGAR();">
Almost the same for the other 4. . .
Gets a string and you need to calculate and verify.
Converting Text to a NumberThe eval function
TOTAL = eval("10");
You try:
TOTAL = "10" + "5" ;
TOTAL = eval("10") + eval("5");
APGAR
[9.32]
function APGAR() {
var A = eval(document.REG.ACT.value);
var P = eval(document.REG.PULSE.value);
var G = eval(document.REG.GRIMACE.value);
var AP = eval(document.REG.APP.value);
var R = eval(document.REG.RESP.value);
document.REG.TOTAL.value = A + P + G + AP + R;
}
Passing User Input to the Array (in the APGAR function)The this keyword: A word reserved by
JavaScript to refer to the currently selected object (field)document.REG.PULSE.value=2;
would be the same as
this.value=2;
if the current field is the PULSE field in the form bring passed to the array.
Pass Information about the Currently Selected Field to a Function
<script>
function SetVal(field) {
field.value = 0;
}
</script>
-------------------------------------------------------------
<input name = "PULSE" onFocus="SetVal(this);">
<input name = "RESP" onFocus="SetVal(this);">
this is a tracker
The object a method is invoked through becomes the value of this. object.method();
we can now refer to object with this
Let's extend this to the APGAR
With APGAR
You use this to pass information from the current APGAR field in the form to the APGAR function to make sure the function knows which field is currently selected.
In this manner the APGAR function knows if the user enters a 2 for Activity, a 1 for Pulse, etc.
this APGAR
Part of the APGAR function (in <head>):
function APGAR(field) {
var score = field.value;
if(score==0 || score==1 || score==2) {
var A = eval(document.REG.ACT.value);
In the form:
<input maxLength="1" name="ACT" onblur="APGAR(this);" size=1 value=0>
Using this on APGAR fields
<input maxLength="1" name="ACT"
onblur="APGAR(this);" size="1" value="0">
<input maxLength="1" name="PULSE" onblur="APGAR(this);" size="1" value="0">
<input maxLength="1" name="GRIMACE" onblur="APGAR(this);" size="1" value="0">
<input maxLength="1" name="APP"
onblur="APGAR(this);" size="1" value="0">
<input maxLength="1" name="RESP"
onblur="APGAR(this);" size="1" value="0">
Validating
[9.35]
function APGAR(field) {
var score = field.value;
if(score==0 || score==1 || score==2) {
var A = eval(document.REG.ACT.value);
var P = eval(document.REG.PULSE.value);
var G = eval(document.REG.GRIMACE.value);
var AP = eval(document.REG.APP.value);
var R = eval(document.REG.RESP.value);
document.REG.TOTAL.value = A + P + G + AP + R;
} else {
alert("You must enter a 0, 1, or 2");
field.focus();
}
}
Notifying the User [9.37]
Alert Box
alert("Message");
Confirm
confirm("Continue with Program?");
Controlling Form Submission [9.39]
function CheckData(){ var parents_agree=document.REG.CONSENT.checked; if(parents_agree) { alert("Form submitted successfully"); return true; } else { alert("You still need parental consent."); return false; }
return parents_agree;}<form name="REG" onSubmit="return Check_Data();">The return keyword returns a boolean
Reloading a Page
onClick=“location=location.href;”
<input onClick="location=location.href;" type=button value="Reload Page">
Complete Syntax
function APGAR(field) { var score = field.value; if(score==0 || score==1 || score==2) { var A = eval(document.REG.ACT.value); var P = eval(document.REG.PULSE.value); var G = eval(document.REG.GRIMACE.value); var AP = eval(document.REG.APP.value); var R = eval(document.REG.RESP.value); document.REG.TOTAL.value = A + P + G + AP + R; if(field.name=="RESP") { document.REG.BWGT.focus(); } } else { alert("You must enter a 0, 1, or 2"); field.focus(); }}