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 Objects Properties Methods [9.06]

JavaScript Object Hierarchy [9.08]-object hierarchy window.document.REG.MEDRECNO document.REG.MEDRECNO [9.09]-objects in neonatal form

Object Properties [9.10]-partial list of objects and properties object.property = expression EXAMPLE: Changing an Object’s Value EXAMPLE: Displaying Read Only Properties EXAMPLE: Displaying Read Only Properties

Assigning a Property to a Variable var PageColor = document.bgColor; var FrameNumber = window.length; var Browser = navigator.appName;

Properties in Conditional Expressions <!--Hide from older browsers if(document.bgColor=="black") { document.fgColor="white"; } else { document.fgColor="black"; } //Stop hiding-->

Object Methods [ ]-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 events Event: 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 = 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(); }

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 Almost the same for the other 4... Gets a string and you need to calculate and verify.

Converting Text to a Number The 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 function SetVal(field) { field.value = 0; }

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 ): function APGAR(field) { var score = field.value; if(score==0 || score==1 || score==2) { var A = eval(document.REG.ACT.value); In the form:

Using this on APGAR fields <input maxLength="1" name="ACT" 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; } The return keyword returns a boolean

Reloading a Page onClick=“location=location.href;”

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(); }