Lecture 6

CS 3520: Website Development
HTML Forms and JavaScript
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 & frames, timeouts, cookies
Event-driven programs
in C++, programs are serially executed
▪ start with main function, execute sequentially from first statement
▪ may loop or skip sections of code, but the program 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
result of 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
OnLoad & OnUnload
<html>

the simplest events are
<head>
<title>Hello/Goodbye page</title> when the page is loaded or
<script type="text/javascript">
unloaded
function Hello()
{
globalName=prompt("Welcome to my page. " +
▪ the ONLOAD attribute of the
"What is your name?","");
BODY tag specifies
} JavaScript code that is
automatically executed when
function Goodbye() the page is loaded
{
alert("So long, " + globalName + ▪ the ONUNLOAD attribute
}
" come back real soon."); similarly specifies JavaScript
</script>
code that is automatically
</head> executed when the browser
leaves the page
<body onLoad="Hello();" onUnload="Goodbye();">
Whatever text appears in the page.
</body>
</html>
view page in browser
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 in a page
<form name="FormName">
…
</form>
form elements include:

for input: button, selection list, radio button, check box, password, …
for input/output: text box, text area, …
we will revisit forms when we consider CGI programming

▪ a form groups together elements, whose contents are submitted as one
Button element
the simplest form element is a button
▪ analogous to a real-world button, can click to trigger events
<input type="button" … />
attributes include: VALUE : specifies label that appears on the button

ONCLICK : specifies code to be executed when clicked
<html>
<head>
<title> Fun with Buttons</title>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Click Me"
onClick="alert('Thanks, I needed that.');" />
</form>
</body>
</html>
Buttons & JavaScript
the ONCLICK event-handler can specify any JavaScript code
▪ can be a sequence of statements inside quotes, can call functions, …
<html>
<head>
<title> Fun with Buttons</title>
<script type="text/javascript"
src="http://www.creighton.edu/~davereed/csc551/JavaScript/random.js">
</script>
</head>
<body>
<input type="button" value="Click for Lucky Number"
onClick="num = RandomInt(1, 100);
alert('The lucky number for the day is ' + num);" />
</form>
</body>
</html>

<html>
Buttons &
<head>
<title> Fun with Buttons</title> functions
function Greeting()
// Results: displays a time-sensitive greeting
{ for complex tasks,
var now = new Date(); should define function(s)
if (now.getHours() < 12) {
alert("Good morning"); and have the ONCLICK
} event trigger a function
else if (now.getHours() < 18) {
alert("Good afternoon"); call
}
else {
alert("Good evening");
}
}
</script>
</head>
<body>
<input type="button" value="Click for Greeting"
onClick="Greeting();" />
</form>
</body>
</html>

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
but could open a new browser window and write there
var OutputWindow = window.open(); // open 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
<html>
 Window
<head>
<title> Fun with Buttons </title>
example
function Help()
// Results: displays a help message in a separate window
{
var OutputWindow = window.open();
OutputWindow.document.open();
OutputWindow.document.write("This might be a context-" +

"sensitive help message, depending on the " +
"application and state of the page.");
OutputWindow.document.close();
}
</script>
</head>
<body>
<input type="button" value="Click for Help"
onClick="Help();" />
</form>
</body>
</html>

<html>
 Window
<head>
<title> Fun with Buttons </title>
example
function Help() refined
// Results: displays a help message in a separate window
{
var OutputWindow =
window.open("", "",
"status=0,menubar=0,height=200,width=200");
OutputWindow.document.open();
can have
arguments to
OutputWindow.document.write("This might be a context-" + window.open
1st arg specifies
OutputWindow.document.close();
} HREF
</script>
</head> 2nd arg specifies
internal name
<body>
<form name="ButtonForm"> 3rd arg specifies
<input type="button" value="Click for Help"
onClick="Help();" /> window
</form> properties (e.g.,
</body>
</html> size)
Text boxes
a text box allows for user input
▪ unlike prompt, user input persists on the page & can be edited
<input type="text" …>
attributes include: NAME : name by which its contents can be referred

SIZE : width of the box (number of characters)
VALUE : initial contents of the box
<html>
<head>
<title> Fun with Text Boxes </title>
</head>
<body>
<form name="BoxForm">
Enter your name here:
<input type="text" name="userName" size=12 value="" />
<br /><br />
<input type="button" value="Click Me"
onClick="alert('Thanks, ' + document.BoxForm.userName.value +
', I needed that.');" />
</form>
view page in
</body> browser
</html>
Read/write text boxes
can access text box contents as document.FormName.BoxName.value
similarly, can change the contents with an assignment

Note: the contents are raw text, no HTML formatting
Also: contents are accessed as a string, must parseFloat if want a number
<html>
<head>
</head>
<body>
Enter a number here:
<input type="text" size=12 name="number" value=2 />
<br /><br />
<input type="button" value="Double"
onClick="document.BoxForm.number.value=
parseFloat(document.BoxForm.number.value) * 2;" />
</form> view page
</body>
in browser
</html>
<html>
Text box
<head>
events
function FahrToCelsius(tempInFahr)
// Assumes: tempInFahr is a number (degrees Fahrenheit)
ONCHANGE
// Returns: corresponding temperature in degrees Celsius triggered when
{ the contents of
return (5/9)*(tempInFahr - 32);
} the box are
</script> changed
</head>
<body>
<form name="BoxForm"> ONFOCUS
Temperature in Fahrenheit: triggered when
<input type="text" name="Fahr" size=10 value="0"
onChange="document.BoxForm.Celsius.value =
the mouse
FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));" /> clicks in the
<tt>----></tt> box
<input type="text" name="Celsius" size=10 value=""
onFocus="blur();" />
in Celsius
</form> blur()
</body> removes focus
</html>
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
▪ at ONCHANGE, verify that new value is legal (otherwise, reset)
▪ the verify.js library defines several functions for validating text boxes
function VerifyNum(textBox, resetValue)

// Assumes: textBox is a text box, resetValue is optional
// Results: alert if textBox does not contain a number, resets if provided
{
var boxValue = parseFloat(textBox.value);
if ( isNaN(boxValue) ) {
alert("You must enter a number value!");
if (resetValue != null) {
textBox.value = resetValue;
}
}
}
<html>
 Validation
example
<head>
src="http://www.mcs.csuhayward.edu/~bhecker/CS-
3520/Examples/JavaScript/verify.js">
</script>
function FahrToCelsius(tempInFahr)
{
return (5/9)*(tempInFahr - 32);
}
</script>
</head>
<body>
Temperature in Fahrenheit:
<input type="text" name="Fahr" size=10 value=0
onChange="VerifyNum(this, 0); // this refers to current element
document.BoxForm.Celsius.value =
FahrToCelsius(parseFloat(this.value));" />
<tt>----></tt>
<input type="text" name="Celsius" size=10 value="" onFocus="blur();" />
in Celsius
</form>
</body>
</html>
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
<TEXTAREA NAME="TextAreaName" ROWS=NumRows COLS=NumCols WRAP="virtual">

Initial Text
</TEXTAREA>
▪ Note: unlike a text box, a TEXTAREA has closing tag

initial contents of the TEXTAREA appear between the tags
▪ WRAP="virtual" specifies that text in the box will wrap lines as needed
▪ as with a text box, no HTML formatting of TEXTAREA contents

<html>
Textarea
<head>
<title> Fun with Textareas </title>
function Table(low, high, power)
example
// Results: displays table of numbers between low & high, raised to power
{
var message = "i: i^" + power + "\n-------\n";
for (var i = low; i <= high; i++) {
message = message + i + ": " + Math.pow(i, power) + "\n";
}
document.AreaForm.Output.value = message;
}
</script>
</head>
<body>
<form name="AreaForm">
<div style="text-align:center">
Show the numbers from
<input type="text" name="lowRange" size=4 value=1 /> to
<input type="text" name="highRange" size=4 value=10 />
raised to the power of <input type="text" name="power" size=3 value=2 />
<br /> <br />
<input type="button" value="Generate Table"
onClick="Table(parseFloat(document.AreaForm.lowRange.value),
parseFloat(document.AreaForm.highRange.value),
parseFloat(document.AreaForm.power.value));" />
<br /> <br />
<textarea name="Output" rows=20 cols=15 wrap="virtual"></textarea>
</div>
</form>
</body> view page in browser
</html>
<html>
Textarea example
<head>
<title> Fun with Frames </title>
refined
3520/Examples/JavaScript/verify.js">
</script>
function Table(low, high, power) { /* AS BEFORE */ }
</script>
</head>
<body>
<form name="AreaForm">
<input type="text" name="lowRange" size=4 value=1
onChange="VerifyInt(this, 1);" /> to
<input type="text" name="highRange" size=4 value=10
onChange="VerifyInt(this, 10);" /> raised to the power of
<input type="text" name="power" size=3 value=2
onChange="VerifyInt(this, 2);" />
<br /> <br />
onClick="Table(parseFloat(document.AreaForm.lowRange.value),
parseFloat(document.AreaForm.highRange.value),
parseFloat(document.AreaForm.power.value));" />
<br /><br />
<textarea name="Output" rows=20 cols=15 wrap="virtual" onFocus="blur();">
</textarea>
</div>
</form>
</body> view page in browser
</html>
More examples
Hoops tournament
▪ text boxes in a table to form brackets
▪ users selects teams by clicking on text boxes, automatically filling in brackets
Letter sequence generator

▪ text boxes to input sequence length, number of sequences, letter choices
▪ button to initiate generation of sequences
▪ text area to display sequences
Substitution cipher
▪ text box to enter substitution key
▪ text areas for message & code, generates code at ONCHANGE event
Prisoner's Dilemma simulation

▪ select boxes for choosing strategies to compete
▪ text boxes for results of each round, scores
▪ buttons to play a single round, complete all rounds, reset
Random walk simulator

▪ text box to display position of walker, number of steps
▪ button to initiate a step
JavaScript & frames
alternatives for program output:
1. alert box : good for small messages
2. separate window : good for longer text, outside of page
3. text box / text area : integrated into page, but awkward & no formatting
4. frames : can easily write lots of output, integrated & fully formattable
<html>

<head>
<title>Table of Squares</title>
</head> src="about:blank" loads
<frameset rows="20%,*"> a blank page into the frame
<frame name="Input" src="form13.html"> (ready to be written to)
<frame name="Output" src="about:blank">
</frameset>
</html>
Frame example
<html>
<head>
<title> Fun with Frames</title>
function Help()
// Results: displays a help message in a separate frame
{
parent.Output.document.open();
parent.Output.document.write("This might be a context-" +
parent.Output.document.close();
}
</script>
</head>
<body>
<input type="button" value="Click for Help" onClick="Help();" />
</form>
</body>
</html>

<html>

Better
<title>Fun with Frames</title>
<script type="text/javascript"> example
function Table(low, high, power)
{
parent.Output.document.open();
parent.Output.document.write("<table border=1><tr><th>i</th>" +
"<th>i<sup>2</sup></th></tr>");
for (var i = low; i <= high; i++) {
parent.Output.document.write("<tr><td align='right'>" + i + "</td>" +
"<td align='right'>" + Math.pow(i, power) + "</td></tr>");
}
parent.Output.document.write("</table>");
parent.Output.document.close();
}
</script>
</head>
<body>
<input type="text" name="lowRange" size=4 value=1 /> to
<input type="text" name="highRange" size=4 value=10 />
raised to the power of <input type="text" name="power" size=3 value=2 />
<br /><br />
onClick="Table(parseFloat(document.ButtonForm.lowRange.value),
parseFloat(document.ButtonForm.highRange.value),
parseFloat(document.ButtonForm.power.value));" />
</div>
</form>
</body>
</html>
JavaScript & timeouts
the setTimeout function can be used to execute code at a later time
setTimeout(JavaScriptCodeToBeExecuted, MillisecondsUntilExecution)
Example: forward link to a moved page

<html>
<head>
<title> Fun with Timeouts </title>
function Move()
// Results: sets the current page contents to be newhome.html
{
self.location.href = "newhome.html";
}
</script>
</head>
<body onLoad="setTimeout('Move()', 3000);">

This page has moved to <a href="newhome.html">newhome.html</a>.
</body> view page in
</html> browser
Another timeout example
<html>
<head>
<title> Fun with Timeouts </title>
function timeSince()
// Assumes: document.CountForm.countdown exists in the page
// Results: every second, recursively writes current countdown in the box
{
// CODE FOR DETERMINING NUMBER OF DAYS, HOURS, MINUTES, AND SECONDS
// UNTIL GRADUATION
document.CountForm.countdown.value=
days + " days, " + hours + " hours, " +
minutes + " minutes, and " + secs + " seconds";
setTimeout("timeSince();", 1000);
}
</script>
</head>
<body onLoad="timeSince();">
<form name="CountForm">
Countdown to Graduation 2003 <br>
<input type="text" name="countdown" size=50 value="" onFocus="blur();" />
</div>
</form>
</body>
</html> view page in browser
Cookies & JavaScript
recall that cookies are data files stored on the client machine
▪ can be accessed and/or modified by the server
▪ can also be accessed and/or modified directly by JavaScript code in a page
potential applications:
▪ e-commerce: remember customer name, past visits/purchases, password, …
▪ tutorials: remember past experience, performance on quizzes, …
▪ games: remember high score, best times, …
each Web page can have its own cookie

▪ document.cookie is a string of attribute=value pairs, separated by ;
"userName=bhecker;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT"

function getCookie(Attribute)
// Assumes: Attribute is a string
// Results: gets the value stored under the Attribute
{
cookie.js
if (document.cookie.indexOf(Attribute+"=") == -1) {
return "";
}
else {
var begin = document.cookie.indexOf(Attribute+"=") + Attribute.length+1;
var end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
function setCookie(Attribute, Value)

// Results: stores Value under the name Attribute, expires in 30 days
{
var ExpireDate = new Date();
ExpireDate.setTime(ExpireDate.getTime() + (30*24*3600*1000));
document.cookie = Attribute + "=" + escape(Value) +
"; expires=" + ExpireDate.toGMTString();
}
function delCookie(Attribute)
// Results: removes the cookie value under the name Attribute
{
var now = new Date();
document.cookie = Attribute + "=; expires=" + now.toGMTString();
}
<html>

Cookie
<title> Fun with Cookies </title>
<script type="text/javascript" example
3520/Examples/JavaScript/cookie.js">
</script>
function Greeting()
// Results: displays greeting using cookie
{
visitCount = getCookie("visits");
if (visitCount == "") {
alert("Welcome to my page, newbie.");
setCookie("visits", 1);
}
else {
visitCount = parseFloat(visitCount)+1;
alert("Welcome back for visit #" + visitCount);
setCookie("visits", visitCount);
}
}
</script>
</head>
<body onLoad="Greeting();">
Here is the stuff in my page.
<form name="ClearForm" align="center">
<input type="button" value="Clear Cookie" onClick="delCookie('visits');" />
</div>
</form>
</body>
</html>

End of Lecture

Lecture 6

Uploaded by

Copyright:

Available Formats

Lecture 6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 6

Uploaded by

Copyright:

Available Formats

CS 3520: Website Development

HTML Forms and JavaScript

Event-driven programs and HTML form elements

there is a beginning and an end to program execution

computation within a Web page is rarely serial

form elements include:

we will revisit forms when we consider CGI programming

<input type="button" … />

attributes include: VALUE : specifies label that appears on the button

view page in browser

view page in browser

QUESTION: could we instead use document.write ?

but could open a new browser window and write there

var OutputWindow = window.open(); // open window and assign

OutputWindow.document.write("This might be a context-" +

view page in browser

attributes include: NAME : name by which its contents can be referred

similarly, can change the contents with an assignment

solution: have the text box validate its own contents

function VerifyNum(textBox, resetValue)

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

<TEXTAREA NAME="TextAreaName" ROWS=NumRows COLS=NumCols WRAP="virtual">

▪ Note: unlike a text box, a TEXTAREA has closing tag

▪ as with a text box, no HTML formatting of TEXTAREA contents

Letter sequence generator

Prisoner's Dilemma simulation

Random walk simulator

view page in browser

Example: forward link to a moved page

<body onLoad="setTimeout('Move()', 3000);">

each Web page can have its own cookie

"userName=bhecker;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT"

function setCookie(Attribute, Value)

view page in browser

You might also like