JavaScript II

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 • <input type="button" onClick="...code here..."> • When user clicks the button • code executed • typically a function call

12. "this" • Useful to know which element generated the event • <img ... onClick="foo(this)"> • 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 • <a href="javascript:myFn();">

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