JavaScript II

ECT 270

Robin Burke

Outline

JavaScript reviewProcessingSyntax

Events and event handling Form validation

JavaScript so far

An interpreted programming languagedesigned to work in the web client /

browser environment Execution model

top-to-bottom of pagebut defined functions are resident

while page is displayed

JavaScript so far, cont'd

Syntax similar to Java / C++but no class definitionsfunctions instead of methods

Dynamic HTMLCan write to the web pageCan modify the attributes of HTML

elements

Example

slide show with do and while convert to functions

Event-driven programming

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 cont'd 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

Event handling in JavaScript

Event handling very useful Examples

rollover 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

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

Example

slide show with links

Events for windows

onLoad onUnload onResize

Events for forms

for input elementsonFocusonBluronSelectiononChange

for the form itselfonSubmitonReset

Example

handling menu selectionmenu of URLs

Development process

Determine the dynamic effectdesired actionelement for user activation

Codefunction implementing actionattach function call to element

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

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

Example

Change of password Action

check that password and retype are the same

Event form submission

Content needed contents of two password fields can use form.field_name syntax

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

Homework #7

Write form validation code for a simple application