Transcript Event-driven Programming

JavaScript IV
Event-Driven Programming
Outline



The event-driven model
Web applications
Form HTML





forms
buttons
text boxes
accessing form content
Event Handlers


onClick
onChange
Imperative programming

Program


User



defines a series of operations
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



Imperative program Example
 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


New HTML attributes


buttons, text boxes, etc.
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



Not in our scope



90% of the web's "pages" are generated from user input
only 10% are static pages
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


Interaction idea


name-value pair
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:
<P><B>Please enter your comments below:</B></p>
<TEXTAREA NAME="comments" ROWS="5“ COLS="40">
</TEXTAREA>
Select / Option

for menus and lists
<select size="3">
<option>BS
<option>BS
<option>BA
<option>BS
...
</select>
CGA-DES</option>
CGA-DEV</option>
DC</option>
DC</option>
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



Example


when the event occurs on that element
the JavaScript statement will execute
onClick="Convert();"
In Element

<input type="button" value="Convert to Celsius"
onClick="Convert();" />
Example

lucky.html
Interacting with form values

Form data




Change the value of a form element


name / value pairs
processed by the server
can also be manipulated by JavaScript
changes what the user sees
Linked to events

we can create simple browser-based applications
Syntax


Refer to subparts using dot (.) syntax
Format


Getting a value


document.FORM_NAME.ELEMENT_NAME.value
tempF = document.TempForm.fahrBox.value;
Setting a value

document.TempForm.celsiusBox.value = tempC;
Examples



lucky1.html
convert3.html
Greetbox.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


For text elements




user presses a button
onChange event
when the user alters the contents
and then clicks outside the element
Example

copybox.html