JavaScript II ECT 270 Robin Burke

Outline JavaScript review Processing Syntax Events and event handling Form validation

JavaScript so far An interpreted programming language designed to work in the web client / browser environment Execution model top-to-bottom of page but defined functions are resident while page is displayed

JavaScript so far, cont'd Syntax similar to Java / C++ but no class definitions functions instead of methods Dynamic HTML Can write to the web page Can 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 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

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

Example slide show with links

Events for windows onLoad onUnload onResize

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

Example handling menu selection menu of URLs

Development process Determine the dynamic effect desired action element for user activation Code function implementing action attach 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 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

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

Homework #7 Write form validation code for a simple application