1 / 38

Bride of JavaScript

This comprehensive guide delves into working with JavaScript objects, focusing on server-side and client-side form validation techniques. Explore how to effectively manage events and the role of objects in JavaScript, including properties and methods. Learn about different validation mechanisms, and see practical code examples that illustrate how to implement effective form handling and user input management. This resource is essential for enhancing your JavaScript skills and improving data entry interfaces.

gavin-spears
Download Presentation

Bride of JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bride of JavaScript Working with JavaScript Objects and Events

  2. Form Validation • Neonatal Feeding Study

  3. 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. Client vs. Server Side Validation

  4. Object-based Language • Objects • Properties • Methods • [9.06]

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

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

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

  8. 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>

  9. 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)

  10. The Revenge of JavaScript Managing Events

  11. 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

  12. Events in Data Entry • Look at Figure 9-14 on 9.16

  13. Event Handlers • Code added to an HTML tag that is run whenever a particular event occurs.

  14. 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

  15. Example onClick Event Handler

  16. StartForm() function StartForm() { document.REG.FORMDATE.value= DateToday(); } <BODY onLoad="StartForm();">

  17. 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

  18. Emulating Events(Figure 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. . .

  19. Working with a Selection Object • The Doctors. . . [9.24]

  20. Complete Syntax function CheckOther(){ if(document.REG.PHYSICIAN.selectedIndex==7) { document.REG.OTHERNAME.value=prompt("Enter name of physician","Name"); } document.REG.ACT.focus(); }

  21. Prompting for Input prompt("Message", "Default_text"); prompt("Enter your name", "Type name here"); Simple Input

  22. Getting the Physician's Name document.REG.OTHERNAME.value= prompt("Enter the name of physician","Name");

  23. Son of JavaScript Calculations

  24. 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.

  25. Converting Text to a NumberThe eval function TOTAL = eval("10"); You try: TOTAL = "10" + "5" TOTAL = eval("10") + eval("5")

  26. 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; }

  27. 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.

  28. 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);">

  29. 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

  30. 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.

  31. 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>

  32. 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>

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

  34. Notifying the User [9.37] • Alert Box alert("Message"); • Confirm confirm("Continue with Program?");

  35. 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

  36. Reloading a Page onClick=“location=location.href;” <INPUT onClick="location=location.href;" type=button value="Reload Page">

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

  38. Hints • Go through Tutorial 9 and complete each step • Let's discuss JavaScript issues on-line • Time in class • Practice. . .

More Related