Event Driven Programs and HTML Form Elements-Web Programming-Lecture Slides, Slides of Web Programming and Technologies

This lecture was delivered by Prof. Arun Ullal at Ankit Institute of Technology and Science for Web Programming course. It includes: Event-driven, Programs, HTML, Forms, Properties, Methods, Handlers, Timeouts, Attributes

Typology: Slides

2011/2012

Uploaded on 07/18/2012

palvani
palvani 🇮🇳

4.5

(2)

83 documents

1 / 30

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
COMP 519: Web Programming
Autumn 2011
.
Event-driven programs and HTML form elements
event-driven programs
onload, onunload
HTML forms & attributes
button, text box, text area
selection list, radio button, check box, password, hidden, …
JavaScript form events
properties: name, type, value, …
methods: blur(), focus(), click(), …
event handlers: onblur(), onfocus(), onchange(), onclick(), …
advanced features & techniques
windows, timeouts, cookies
docsity.com
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e

Partial preview of the text

Download Event Driven Programs and HTML Form Elements-Web Programming-Lecture Slides and more Slides Web Programming and Technologies in PDF only on Docsity!

COMP 519: Web Programming

Autumn 2011

Event-driven programs and HTML form elements

event-driven programs

onload, onunload

HTML forms & attributes

button, text box, text area
selection list, radio button, check box, password, hidden, …

JavaScript form events

properties: name, type, value, …
methods: blur(), focus(), click(), …
event handlers: onblur(), onfocus(), onchange(), onclick(), …

advanced features & techniques

windows, timeouts, cookies

Event-driven programs

with C++ or Java, programs are usually serially executed

start with main function, execute sequentially from first statement

may loop or skip sections of code, but the program generally proceeds step-by-step

the programmer specifies the sequence in which execution occurs (with some variability due

to input values)

there is a beginning and an end to program execution

computation within a Web page is rarely serial, instead the page

reacts

to

events such as mouse clicks, buttons, …

much of JavaScript's utility is in specifying actions that are to occur in the page as a resultof some event

the programmer may have little or no control over when code will (if ever) be executed,

e.g., code that reacts to a button click

there is no set sequence, the page waits for events and reacts

HTML forms

most event-handling in JavaScript is associated with form elements

an HTML form is a collection of elements for handling input, output, and events ina page

• document.forms[ ] is an (associative) array that will contain elements for eachform on the webpage, using the "name" associated with the form as the arrayindex • Using the "dotted" syntax, we can then access other HTML elements of the form(using their names given to those elements). Recall that HTML pages are storedas a hierarchy of parent/child relationships, and this defines the way to access the elements. (More examples to come...)

HTML forms (cont.)

elements. (More examples to come...)

Buttons & Functions

Fun with Buttons

view page

Buttons & Windows

alert boxes are fine for displaying short, infrequent messages

not well-suited for displaying longer, formatted text

not integrated into the page, requires the user to explicitly close the box

QUESTION: could we instead use document.write?^ NO

would overwrite the current page, including form elements

NO

would overwrite the current page, including form elements

but could open a new browser window and write there

var OutputWindow = window.open();

// open a window and assign//

a name to that object

//

(first arg is an HREF)

OutputWindow.document.open();

// open that window for//

writing

OutputWindow.document.write("

WHATEVER

");

// write text to that//

window as before

OutputWindow.document.close();

// close the window

Window Example Refined

Fun with Buttons

rd

arg specifies

windowproperties (e.g.,size)

view page

Text Boxes

a text box allows for user input (and could also be used for output)

unlike prompt, user input persists on the page & can be edited

optional attributes:

size

: width of the box (number of characters)

value : initial contents of the box

JavaScript code can access the contents in the example below as

document.forms['BoxForm'].userName.valuedocument.forms['BoxForm'].userName.value

Fun with Text Boxes

Enter your name here:



view page

Text Box Events

onchange

triggered whenthe contents ofthe box arechanged

Fun with Text Boxes

onfocus triggered when

the mouse clicksin the box blur() removes focus

Temperature in Fahrenheit:

---->

in Celsius

view page

Text Box Validation

what if the user enters a non-number in the Fahrenheit box?

solution: have the text box validate its own contents

start with legal value (or an empty text box)

at

onchange

, verify that new value is legal (otherwise, reset)

the

verify.js

library defines several functions for validating text boxes

http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/

the

verify.js

library defines several functions for validating text boxes

http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/

function VerifyNum(textBox)// Assumes: textBox is a text box// Returns: true if textBox contains a number, else false + alert{

var boxValue = parseFloat(textBox.value);if (

isNaN

(boxValue) ) {

//

**

isNaN

function

alert("You must enter a number value!");textBox.value = "";return false;

} return true;

}

Text Areas

a

TEXT

box is limited to one line of input/output

a

TEXTAREA

is similar to a text box in functionality, but can specify any number

of rows and columns



Note:

unlike a text box, a

TEXTAREA

has a separate closing tag

initial contents of the

TEXTAREA

appear between the tags

as with a text box, no HTML formatting of

TEXTAREA

contents in performed

TEXTAREA Example

Fun with Textareas

Show the numbers from

to

raised to the power of





view page

Using getElementById

Fun with Text Boxes

Temperature in Fahrenheit:

---->

in Celsius

view page

•A check box is a list of items, one or more of which can be selected•This is easy to create in HTML, simply using the “checkbox” input item•Give the checkbox a name and use this for each of the elements in the checkbox list(with a separate

value

for each one)

Check boxes

•The set of checkboxes are stored internally as an array.