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

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

3. Imperative programming
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 To use an event, the programmer
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 New HTML attributes
forms
interface widgets
buttons, text boxes, etc.
New HTML attributes
event generation
New JavaScript capabilities
associate code with events

8. Web application Application Web 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 Not in our scope But
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 Input 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 Text box more typical (with label)
<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 Commonly-used
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 Getting a value Setting a value
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 Example
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 For text elements Example
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 You need to add two conversions work
inches <--> cm
feet <--> meters
You need to add
miles <--> km

32. Structure convert.js hwk5.html Tasks
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 Use cut, paste and edit! Don't forget documentation
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