JavaScript II ECT 270 Robin Burke

Outline Functions Events and event handling Form validation

Functions In Java you wrote functions associated with classes methods In JavaScript we won't be defining new classes we write functions with global scope can be called anywhere on the page functions can also simplify programs

Functions cont'd Syntax function name(parameter list) {... function code... } Placement best 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, use return 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 Examples rollover effects go to a page on menu selection validate 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 generators we're not interested in form behavior When user clicks the button code executed typically a function call

"this" Useful to know which element generated the event When foo will be called with 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

Events for windows onLoad onUnload onResize

Events for forms for input elements onFocus onBlur onSelection onChange for the form itself onSubmit onReset

Example rollover on the slide show buttons bold red handling menu selection menu of URLs menu 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 events from within JavaScript code Useful to control the

Example Change of password

Form contents For validation we 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 native represents content in arrays accessible by number accessible by name index 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 DOM document object model world-wide web consortium A whole additional suite of document navigation methods We will talk about these next week

Example form validation for APGAR insert correct date handle "other" doctors name calculating totals real-time entry check consent 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