Transcript lec12

Introduction to Programming
the WWW I
CMSC 10100-01
Summer 2003
Lecture 12
Topics Today
•
•
•
•
More JavaScript Code Libraries
Working with Forms
Working with Dates and Times
Cookies
2
Reminder
• Final project presentation this Friday
3
More JavaScript Code
Libraries
• Code library not only support code reuse,
but can help with Web site maintenance
 How? Separate the code from Web pages!
• Three more complicated code examples
you might want to put into your code
libraries
4
Code 1: Browser Detection
• Tool number 1 in your code library
• Detect browsers by feature support
var theDOM1 = (document.getElementById) ? true : false;
• Detect browsers by name
var UA = navigator.userAgent.toLowerCase();
• Detect the platform in use
var isMAC = (UA.indexOf('mac') >= 0) ? true : false;
var isWIN = (UA.indexOf('win') >= 0) ? true : false;
• Example Web page:
 listing4-2.html
5
Code 2: Object Positioning
•
•
•
•
•
Create a getObj() function
Create a shiftTo() function
Create functions to find x, y, and z
Create a function to empty a node
Example Web page:
 listing4-3.html
6
Code 3: Change Window Size
•
•
•
•
•
A function to get the available width
A function to get the available height
A function to set the window size
A function to maximize the window
Example Web page:
 listing4-4.html
7
Topics Today
•
•
•
•
More JavaScript Code Libraries
Working with Forms (validation)
Working with Dates and Times
Cookies
8
Form Validation
• HTML forms contain fields, select menus,
radio buttons, and check boxes
• Form validation procedures:
 Check the data the visitor enters on the form
 Reminds the visitor to enter missing data
 Reformats the visitor’s data as needed
9
Text Fields: Bad or Missing
Data
•
•
•
•
•
•
•
The <input> tag - single line of text
The <textarea> tag - multiple lines of text
Always include name and value attributes
The onSubmit event handler calls the
validate() function
The validate() function checks for bad or
missing data
If the function returns false then the form is not
submitted
Example: listing3.2.html
10
Text Fields: Reformatting
Data
• U.S. telephone numbers require specific format
•
•
•
•
•
(555) 333-4444
A visitor types a phone number into a text field
then types the tab key
An onChange event handler calls the
formatNumber() function
The formatNumber() function finds the first
ten numbers in the text field and adds the
necessary parentheses and spaces
The reformatted number is displayed in the field
Example: listing3.3.html
11
Validating Text Fields
To validate a text field, you first determine
whether a value has been entered. For example,
to determine whether the visitor neglected to
enter information into a required field, you may
test the expression
(!document.survey.visitor.value). If
that expression is true then the visitor failed to
enter required information into the visitor
field.You can also check to make sure the
information is in the correct format in terms of
numbers and punctuation
12
Radio Buttons
• Radio buttons are used for questions like
gender which have a limited number of
possible responses
• The getRadioValue() function finds the
value of the checked radio button
• The showRadioValue() function checks
the desired radio button
• Place these functions in your code library
13
Validating Radio Buttons
• Browsers automatically store a set of radio
•
buttons, all bearing the same name, in an array.
For example, if you have two radio buttons
called gender, the first one, gender[0], might
have a value of male and the second one,
gender[1], might have a value of female. You
can use JavaScript expressions to see which
button is checked and to find its value
Example: listing3.4.html
14
Check Boxes
• Check boxes for “check all that apply”
questions.
• When form is submitted, names and
values of checked boxes are sent
• Test for the checked property
• Often it is helpful to use sequential names
for check boxes (q1, q2, q3).
15
Selection Menus
• <select> tag creates a popup selection menu
with options set in the <option> tag
• Select and go navigation
• The getSelectValue() function finds the
•
value of the selected option
The showSelectValue() function changes to
the display of a <select> to a given value
• Store these functions in your code library
16
Validating Selection Menus
• A common technique for obtaining the
value of a selected item in a SELECT
menu is to store the SELECT object in a
variable, find the number of the selected
option (the selectedIndex property),
and then find the value of the selected
option
• Example: listing3.7.html
17
Topics Today
•
•
•
•
More JavaScript Code Libraries
Working with Forms
Working with Dates and Times
Cookies
18
The Date Object
• JavaScript contains a set of core objects,
including the Date object, that exist
independently of any host environment
such as a Web browser
• To use the Date object, you first create an
instance of it and then apply a method to
obtain date and time information
19
Date Examples
• A simple clock
 Using the toLocaleString() method of the
Date object
 Example Web page: listing6.1.html
• A better clock
 Obtaining the current hour, minute, and
seconds and then concatenating them to
create a new format
 Example Web page: listing6.2.html
20
Date Examples (cont’d)
• Creating dynamic Greetings
 It is possible to vary the information displayed
on your Web page according to the time or
date
 Example Web page: listing6.4.html
21
Date Mathematics
• JavaScript’s Math object is a built-in calculator
 Math methods summary:
http://tech.irt.org/articles/js069/#11
• To perform math operations on information
obtained from text fields, you first convert the
values to numbers using the top-level
parseInt() or parseFloat() function
• Date mathematics allows you to create
countdown pages to important events
22
Topics Today
•
•
•
•
More JavaScript Code Libraries
Working with Forms
Working with Dates and Times
Cookies
23
What are Cookies?
• Cookies are small pieces of information
stored on the visitor’s hard drive
• Cookies are mostly harmless, but valid
privacy concerns exist about the use of
cookies in conjunction with invasive
marketing techniques
• You can create as many as 20 cookies per
domain
24
Creating Cookies
• Cookies are set when a JavaScript statement
in a Web page assigns content to the cookie
property of the document object. By default,
the content includes information about the
domain and directory location of the page that
created it
25
Retrieving A Cookie
• When a Web page attempts to retrieve a
cookie, the location of the Web page is
compared to the domain and directory of the
page that created the cookie. If the two
locations do not match, the cookie cannot be
retrieved
26
Deleting Cookies
• You can set an expiration date for your
•
cookies. The form of the expiration date is
always GMT
You can eliminate a cookie by setting its
expiration date to a date in the past
27
Public Domain Cookie Code
• Bill Dortch’s cookie code is widely used on the
Internet and has been placed in the public
domain
 Source code
• Several key functions defined




SetCookie()
GetCookie()
GetCookieVal()
DeleteCookie()
28
Example 1: First Cookie
• A simple program to store visitor’s name
and favorite color information in cookies
• Example Web page: listing7.2.html
29
Example 2: Storing
Preferences
• One popular use of cookies is to store
visitor preferences, such as background
color and login information
• When a Web page retrieves information
from a cookie, the page can act on that
information by changing the page
appearance to suit the expressed
preferences of the visitor
• Example Web page: listing7.3.html
30