1. JavaScript II ECT 270 Robin Burke

2. Outline JavaScript review Processing Syntax Events and event handling Form validation

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

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

5. Example slide show with do and while convert to functions

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

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

8. Event handling in JavaScript Event handling very useful Examples rollover effects go to a page on menu selection validate the contents of a form

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

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

11. "this" Useful to know which element generated the event When foo will be called with one argument = the image element clicked the user

12. Example slide show with buttons

13. Events for elements onClick onDblClick onMouseOver onMouseOut

14. Syntax for action links href="javascript:code" Example

15. Example slide show with links

16. Events for windows onLoad onUnload onResize

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

18. Example handling menu selection menu of URLs

19. Development process Determine the dynamic effect desired action element for user activation Code function implementing action attach function call to element

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

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

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

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

24. Navigating the document JavaScript native represents content in arrays accessible by number accessible by name index notation optional for names Can be confusing

25. 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]

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

27. Homework #7 Write form validation code for a simple application