Event-driven Programming

Robin Burke

IT 130

Fall 2004

Outline

The event-driven model Web applications Form HTML

forms buttons text boxes accessing form content

Handlers onClick onChange

Imperative programming

Program defines a series of operations

User invokes program waits for result

"Batch" processing

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

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

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

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

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

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

Example applications

Course online Any search engine

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

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

Input elements

name and value attributes user can change the value attribute how depends on the type

text field selection list radio button, etc

Example

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

Input elements

Textarea

for multi-line input <textarea name="message" rows=4 cols=40

wrap="virtual"></textarea>

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>

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

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 "" />

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

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();" />

Example

lucky.html

Programming

rollem.html

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

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;

Examples

lucky1.html convert1.html

Programming

convert2.html

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

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

Homework #5

Metric conversions two conversions work inches <--> cm feet <--> meters

You need to add miles <--> km

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

Advice

Start early 45-50 lines of code to write

Use cut, paste and edit! Don't forget documentation Test each step

Wednesday

Lab (Rm 722) Forms and Events Good practice for the homework