bride of javascript

Bride of JavaScript

Working withJavaScript 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 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”></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)

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

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)

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

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


<INPUT maxLength=1 name=RESP


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 Boxalert("Message");

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

Hints Go through Tutorial 9 and

complete each step Let's discuss JavaScript issues on-

line Time in class Practice. . .

bride of javascript

Documents