javascript ii ect 270 robin burke. outline javascript review processing syntax events and event...
TRANSCRIPT
![Page 1: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/1.jpg)
JavaScript II
ECT 270
Robin Burke
![Page 2: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/2.jpg)
Outline
JavaScript reviewProcessingSyntax
Events and event handling Form validation
![Page 3: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/5.jpg)
Example
slide show with do and while convert to functions
![Page 6: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/8.jpg)
Event handling in JavaScript
Event handling very useful Examples
rollover effectsgo to a page on menu selectionvalidate the contents of a form
![Page 9: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/11.jpg)
"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
![Page 12: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/12.jpg)
Example
slide show with buttons
![Page 13: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/13.jpg)
Events for elements
onClick onDblClick onMouseOver onMouseOut
![Page 14: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/14.jpg)
Syntax for action links
href="javascript:code" Example
<a href="javascript:myFn();">
![Page 15: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/15.jpg)
Example
slide show with links
![Page 16: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/16.jpg)
Events for windows
onLoad onUnload onResize
![Page 17: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/17.jpg)
Events for forms
for input elementsonFocusonBluronSelectiononChange
for the form itselfonSubmitonReset
![Page 18: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/18.jpg)
Example
handling menu selectionmenu of URLs
![Page 19: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/19.jpg)
Development process
Determine the dynamic effectdesired actionelement for user activation
Codefunction implementing actionattach function call to element
![Page 20: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/22.jpg)
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
![Page 23: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/23.jpg)
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
![Page 24: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/24.jpg)
Navigating the document
JavaScript nativerepresents content in arraysaccessible by numberaccessible by nameindex notation optional for names
Can be confusing
![Page 25: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/25.jpg)
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]
![Page 26: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation](https://reader036.vdocument.in/reader036/viewer/2022062801/56649e725503460f94b70b7c/html5/thumbnails/27.jpg)
Homework #7
Write form validation code for a simple application