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