bride of javascript working with javascript objects and events

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



</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) {


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

bride of javascript working with javascript objects and events

Documents