". To select multiple options, one must use control key and click on the selected option simultaneously. The size attribute specifies the number of options must be visible to the user at one time. The following code has five options; only two will be visible at a time.
Age:
Under 18
19 to 25
26 to 35
36 to 49
50 or higher
The checkbox form gives user a way to select one or more items from a group of items quickly and easily. Name and value attributes are required for checkboxes. The code below will enable the user to select one or more of the options.
Select the degree(s) that you hold (check one or more)
High School Diploma
AS Degree
BS Degree
MS Degree
Ph.D. Degree
The final two buttons are simple submit, and reset button. Submit button submits the entries and reset button clears all of the entries.
The actual data received by submitting the above form is:
firstname=John
lastname=Doe
streetaddress=121 1st St
state=IN
zipcode=23444
tel
sex=male
age=19 to 25
highschool=hs
2. CLIENT SIDE WEB APPLICATION DEVELOPMENT USING JAVASCRIPT
2.1 What is Client Side Programming?
Client side programming refers to web pages that use processor of client computer to execute the scripting program. The client computer is a desktop or a laptop computer that is used to view a web page. Using client side programming to do some of the processing improves efficiency, because it shifts some of the burden away from server computer to client computer. If your form requires calculations, or input validation you can do them in JavaScript or VBScript on the user's machine without a need to use processor time of your server. In this chapter we also cover window and document objects of the browser, which are used in client side programming.
2.2 A simple client side program
Example 2.2.1: Write a client side program in JavaScript, which simulates toss of a coin n times. Use your editor to edit the following program. Save the program in a file, name it example2_2_1.html.
Toss a coin n times
This is my First Client Side Program
The scripting portion of the program must start with the tag . You can inset JavaScript code in different locations of a document as far as the script tags are used to specify beginning and end of the code. The attribute, language is optional in new versions of explorer. Unlike Java and C++, JavaScript does not require that a variable be declared prior its usage. The user has option to declare the variable if he desires so. The syntax to declare a variable in JavaScript is:
var tails; // declares a variable in JavaScript
The function prompt() of the window object is used in following statement to prompt the user to enter a value
number = parseInt(window.prompt("Enter an integer number: ",""));
The function writeln() of the document object is used to writes the content of the string parameter on the HTML document using document object. document.writeln("The coin is tossed: " + number + " times " + "");
Both window and document are objects of BOM (Browser Object Model).
Use your browser to view the file example2_2_1.html, the output, for the input value of 111 is:
This is my First Client Side Program
The coin is tossed: 1111 times
The number of tails is: 545
The number of heads is: 566
2.3 Using client computer to validate input before a form is submitted:
In this section, we create a form where a user enters his first name, last name, zip code, and we write a JavaScript program to do some basic validation of the form client side, and only post the form if it's actually filled in, and zip code field consists of exactly five digits. To validate the zip code field we use a JavaScript object called RegExp. The statement: var myRegExp = /\d\d\d\d\d/; creates an object of RegExp object that can test if an string has exactly five digits using the member method test(). The statement myRegExp.test(str)); returns true if string str has exactly five digits and false otherwise. The function alert() of the object window alerts the user to re-enter an incorrect input.
Example 2.3.1: Edit the following program and view it using your browser. Test the program with invalid entries.
Validate Input
The program will not submit the entries as long as the validating functions validInput() return false. The function validInput() should be embedded in the tag form as:
Upon submission of this form the content of the form will be transferred to the server, and can be returned using Request object of ASP. In our example the content of the form sent by the user is available to the file processreg.asp using Request object. The content of each field of the form can be returned by the function Form() of the object Request, for example the value of the field firstname can be returned using:
Request.Form("firstname");
The function Write() of the object Response of ASP can be used to display the content of the field:
Response.Write "Request.Form("firstname")"
In general the program processorreg.asp can process the information in the form as instructed by the programmer. Another application may be to modify content ofa Database based on user's input.
Please also note that the symbol "=" can be used to display field firstname instead of Response.Write:
= "Request.Form("firstname")"
Use your editor to create the following file and save it under the name processreg.asp in the same directory as example3_2_1.asp:
Registration Response
Registration Response
The information that you entered:
First Name: <%Response.Write "Request.Form("firstname")" %>
Last Name: <%Response.Write "Request.Form("lastname")" %>
Street Address: Last Name: <%Response.Write "Request.Form("streetaddress")" %>
State: <%Response.Write "Request.Form("state")" %>
Zip Code: <%Response.Write "Request.Form("zipcode")" %>
Please note that the code
<%Response.Write "Request.Form("firstname")" %>
will be executed by the server. The statement Request.Form("firstname") returns the content of the field firstnsme and statement Response.Write displays the returned value on HTML document.
The output viewed by the user after the file example3_2_1.asp is submitted is:
First Name:
Last Name:
Street Address:
State:
Zip Code:
3.3 An e-commerce application for an Internet shopping center.
In this section we implement an e-commerce store at which a user can shop for items, put them into a cart, and check them out. Since we need an inventory of some kind we have prepared a file "shopdata.txt". The items in the file are tab separated and have the following form: product id, product name, supplier name, category, quantity, price and description.
Example 3.3.1: The Shop Till Drop Internet store has following main areas:
1. The shopping center (shop.asp): this is where the inventory is displayed dynamically from text file. The user is allowed to select the categories using checkboxes and submission button that loads a page with only items in the checked categories. Next to each item is a checkbox that allows the buyer to place an item into the cart. In submission your choice of items are added to the shopping cart and a link on web page takes you to the shopping cart (cart.asp) web page that displays the confirmation of the buyer's choices.
2. The shopping cart (cart.asp): The shopping cart web page displays the current content of the cart and total cost. There are also an input item next to each item where buyer can enter the quantity desired and a recalculate button to recalculate the total cost.
3. The item page (item.asp): This will dynamically display all of the available items at the store.
4. The checkout page (checkout.asp): There is a login for this page that asks information (name, credit card number, address, etc.). After logging in, the buyer will be taken to a page bringing up the order from the cart, and a submit button will submit the order.
All of the files of examples3.3.1: shop.asp, cart.asp, itempage.asp, checkout.asp, shopdata.txt, and all examples of this tutorial are available at:
http://www.cis.calumet.purdue.edu/raoufi/isecon01
First we go over the procedure that is needed to make the content of the file shopdada.txt available for reading:
<% CONST ForReading = 1, ForWriting = 2, ForAppending = 8
CONST TristateUseDefault = -2, TristateTrue = -1, TristateFalse = 0
' Procedures openFile()
sub openFile(objFileTextStream, strVirtualPath)
DIM strPhysicalPath
strPhysicalPath = Server.MapPath(strVirtualPath)
DIM objFSO, objFile
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objFile = objFSO.GetFile(strPhysicalPath)
Set objFileTextStream = objFile.OpenAsTextStream(ForReading, TristateUseDefault)
end sub
The procedure openFile() used in this example to read input file. Please note that in this procedure we have used the FileSystemObject object of ASP. This object provides functionality to manipulate the files; it is at the top of the hierarchy and has several child objects: Drive object, Folder object, and File object, for more discussion of these objects please refer to (Morneau 2001)
We can use the CreateObject function of Server object of ASP to create an instance of the FileSystemObject object. Once a FileSystemObject object is created, it can be incorporated into VBScript as:
DIM objFSO
Set objFSO = CreateObject("Scripting.FileSystemObject")
We use the method GetFile() of FileSystemObject object to get a file object, where physical path of the file is provided as parameter:
Set objFile = objFSO.GetFile(strPhysicalPath)
Please note that physical path; physical location of a file can be obtained using the logical (virtual) path of the file. In our example the file name shopdata.txt is logical path and we can use the method Mappath of Server object to obtain the physical path of the file shopmap.txt as:
strPhysicalPath = Server.MapPath(strVirtualPath)
And finally the procedure needs to open the file as a text stream:
Set objFileTextStream = objFile.OpenAsTextStream(ForReading, TristateUseDefault)
Where first parameter equal to 1 is for reading and second parameter -2 is the default character format.
The TextStream object can be used to manipulate the information contained in the file.
After the content of the file is available for reading, the following program segment reads and displays the buyer's choices: