bride of javascript
Post on 01-Jan-2016
31 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
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 Va
lue EXAMPLE: Displaying Read Only Pr
operties
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. Dobject.method();
history.back();form.submit();document.write(“Thank You”);
some methods use parameters (like above)
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
Event Handlers Syntax<HTML_tag Properties event_handler = "JavaScript
Commands;">
HTML_tag = name of tagProperties = properties associated with
the tagevent_handler = the name of an event
handler (9-15 on 9.17)JavaScript commands = function to be run
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)
document.ORDERS.PRODUCT.focus();
document.ORDERS.PRODUCT.blur();document.ORDERS.submit();
After changes--you might need to save and re-open the file. . .
Complete Syntaxfunction 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");
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 asthis.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 APGARPart 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(); }}
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(); }}
top related