1. JavaScript II ECT 270 Robin Burke

2. Outline Functions Events and event handling Form validation

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

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

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

6. Example slide show with functions

7. Events Event handling makes JavaScript useful Examples rollover effects go to a page on menu selection validate the contents of a form

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

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

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

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

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

13. Example slide show with buttons

14. Events for elements onClick onDblClick onMouseOver onMouseOut

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

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 rollover on the slide show buttons bold red handling menu selection menu of URLs menu of images

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

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

21. Creating events We can generate form events from within JavaScript code Useful to control the

22. Example Change of password

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

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

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

29. To add new name When What to do

30. Trickier Adding the new name to the menu

31. Create totals When What

32. Checkbox When What

33. Homework #7