Event-driven Programming

1. Event-driven Programming Robin Burke IT 130 Fall 2004

2. Outline • The event-driven model • Web applications • Form HTML • forms • buttons • text boxes • accessing form content • Handlers • onClick • onChange

3. Imperative programming • Program • defines a series of operations • User • invokes program • waits for result • "Batch" processing

4. Event-driven programming • Modern applications are 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

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

6. Basic idea • Events are generated • user actions (clicking, 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

7. Pieces we need • New HTML elements • forms • interface widgets • buttons, text boxes, etc. • New HTML attributes • event generation • New JavaScript capabilities • associate code with events

8. Web application • Application • "A complete, self-contained program that performs a specific function directly for the user" • Web application • an application delivered over the WWW

9. Web applications • Core of web development • 90% of the web's "pages" are generated from user input • only 10% are static pages • Not in our scope • IT 230 teaches how to build those kinds of applications • we will not use forms as input to applications • But • web applications need input • input comes from HTML forms • we can use form element to explore event handling

10. Example applications • Course online • Any search engine

11. What all these share... • The need to get user input from a web page • Format of input • name-value pair • Interaction idea • web form • How to get from user? • depends on the data

12. Form elements • Form element • identify a part of the page where the user can input data • Input element • specific data items • name and value attributes • user can change the value attribute

13. Input elements • name and value attributes • user can change the value attribute • how depends on the type • text field • selection list • radio button, etc

14. Example

15. Input elements • Treated like other page elements • can be organized into paragraph, tables, etc. • Form layout is almost always table-based • All use the same base element • INPUT • what kind of input controlled by the type attribute

16. Input elements

17. Textarea • for multi-line input • <textarea name="message" rows=4 cols=40 wrap="virtual"></textarea>

18. Select / Option • for menus and lists <select size="3"> <option>BS CGA-DES</option> <option>BS CGA-DEV</option> <option>BA DC</option> <option>BS DC</option> ... </select>

19. Input elements we will use • type="button" • rendered as a "raised" rectangle • user can click • type="text" • rendered as an "indented" box • can display text • user can enter text

20. Examples • Button • <input type="button" value="Click Here for Lucky Number" /> • Text box • <input type="text" name="fahrBox" size="10" value "" /> • more typical (with label) • Enter a temperature in degrees Fahrenheit:<input type="text" name="fahrBox" size="10" value "" />

21. Events • Any HTML element can generate events • many different types • Commonly-used • button  click event • when the user clicks on the button • text  change event • when the user changes the value

22. Linking element and event • event handler attribute • when the event occurs on that element • the JavaScript statement will execute • Example • onClick="Convert();" • In Element • <input type="button" value="Convert to Celsius" onClick="Convert();" />

23. Example • lucky.html

24. Programming • rollem.html

25. Interacting with form values • Form data • name / value pairs • processed by the server • can also be manipulated by JavaScript • Change the value of a form element • changes what the user sees • Linked to events • we can create simple browser-based applications

26. Syntax • Refer to subparts using dot (.) syntax • Format • document.FORM_NAME.ELEMENT_NAME.value • Getting a value • tempF = document.TempForm.fahrBox.value; • Setting a value • document.TempForm.celsiusBox.value = tempC;

27. Examples • lucky1.html • convert1.html

28. Programming • convert2.html

29. Dynamic HTML • JavaScript can alter many HTML properties • "dynamic HTML" • we see more of this later in the class • Example • alter the src attribute of an img element • pics.html

30. onChange event • onClick event • user presses a button • For text elements • onChange event • when the user alters the contents • and then clicks outside the element • Example • copybox.html

31. Homework #5 • Metric conversions • two conversions work • inches <--> cm • feet <--> meters • You need to add • miles <--> km

32. Structure • convert.js • a library with the conversion functions • hwk5.html • the page that interacts with the user • Tasks • add lines for miles / km and text elements • add functions that handle onChange events • add conversion functions to convert.js

33. Advice • Start early • 45-50 lines of code to write • Use cut, paste and edit! • Don't forget documentation • Test each step

34. Wednesday • Lab (Rm 722) • Forms and Events • Good practice for the homework