JavaScript II

ECT 270

Robin Burke

Outline

Functions Events and event handling Form validation

Functions

In Javayou wrote functions associated with

classes• methods

In JavaScriptwe won't be defining new classeswe write functions with global scope

• can be called anywhere on the pagefunctions can also simplify programs

Functions cont'd

Syntaxfunction name(parameter list)

{

... function code ...

}

Placementbest place is in the HEAD element

• recall skeleton

must be before first invocation

Function cont'd

Functions need not return a value different from VB

If a function does return a value, usereturn value;

Scope variables declared with var inside a function

• are local

different from Java• all variables in a method are local

Example

slide show with functions

Events

Event handling makes JavaScript useful

Examplesrollover effectsgo to a page on menu selectionvalidate the contents of a form

Basic idea

Events are generated user actions (clicking, submitting a form

moving mouse) browser actions (loading, closing)

To use an event, the programmer writes JavaScript code associates it with the appropriate document

element associates it with the appropriate event

Event-driven programs

Modern UIs are all event-driven Different kind of programming from sequential (batch)

execution programmer does not control when code is executed user controls that

Programmer provides capabilities the user invokes them may be multiple ways to do the same thing

Basic idea = "event handlers" small bits of code that the application calls when certain events occur

Event-driven programming

Imperative program load payroll data do payroll computation output checks

Event-oriented program establish payroll application interface associate loading routine with "load" menu item associate payroll computation with "compute" menu

option associate check printing operation with "print" menu

options User is in charge of the sequence

Application

Using form buttons as event generatorswe're not interested in form behavior<input type="button" onClick="...code

here..."> When user clicks the button

code executed• typically a function call

"this"

Useful to know which element generated the event<img ... onClick="foo(this)">

When foo will be calledwith one argument= the image element clicked the user

Example

slide show with buttons

Events for elements

onClick onDblClick onMouseOver onMouseOut

Syntax for action links

href="javascript:code" Example

<a href="javascript:myFn();">

Events for windows

onLoad onUnload onResize

Events for forms

for input elementsonFocusonBluronSelectiononChange

for the form itselfonSubmitonReset

Example

rollover on the slide show buttonsboldred

handling menu selectionmenu of URLsmenu of images

Form validation

Problem detecting erroneous input round-trip to server too slow HTML controls limited

Solution use JavaScript to detect bad input get user to correct before hitting the server

Note an efficiency tool not a data quality guarantee server must validate the data again to easy to generate a rogue request

Technique

Use onSubmit event Special syntax

onSubmit="return fn()" if fn returns true

form data sent to server if fn returns false

form data not sent

Creating events

We can generate form eventsfrom within JavaScript code

Useful to control the

Example

Change of password

Form contents

For validationwe need to be able to extract the

contents from the form Navigating

getting to the element Extracting information

different techniques for each widget

Navigating the document

JavaScript nativerepresents content in arraysaccessible by numberaccessible by nameindex notation optional for names

Can be confusing

Examples

Assume "myform" is the first form in a document document.forms collection

and other collections document.forms[0] documents.forms["myform"] documents.forms.myform

document.tag_name document.form1 works because form1 is a "top-level" element

document.all collection document.all[1] document.all["myform"] document.all.myform

document.all.tags collection document.all.tags("FORM")[0]

That's not all!

JavaScript has been unified with the W3C DOMdocument object modelworld-wide web consortium

A whole additional suite of document navigation methods

We will talk about these next week

Example

form validation for APGARinsert correct datehandle "other" doctors namecalculating totalsreal-time entry checkconsent checkbox

Handling selections

Get the select element document.formname.selectname

Which is selected selectobj.selectedIndex

options collection options[0] is the first option

An option value = what is passed to the server text = what is displayed selected = true if it is selected

To add new name

When What to do

Trickier

Adding the new name to the menu

Create totals

When What

Checkbox

When What

Homework #7