table of contents | all slides | link list | examples ...mar 21, 2006 · 5 of 90 3/21/2006 1:04...

http://localhost:8080/cocoon/projects/cscie12/slides/20060321/handout.html

1 of 90 3/21/2006 1:04 PM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Forms, JavaScript, AJAXMarch 21, 2006

Harvard UniversityDivision of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2006 David P. Heitmeyer

My email: [email protected] staff email: [email protected]


2 of 90 3/21/2006 1:04 PM

Building XHTML/HTML Forms and Using CGI ProgramsForms are the "front-end" for the HTTP Client to send information back to the HTTP Server. Often, the information is sent to a program running under the CommonGateway Interface (CGI).

We are not yet discussing writing CGI programs -- only using them!


3 of 90 3/21/2006 1:04 PM

HTTP Client and ServerHTTP client makes request to server. Server responds to client.

HTTP client makes request to server. Server invokes CGI program; CGI program generates response, returns content to server, which then responds to client.


4 of 90 3/21/2006 1:04 PM

The "form" elementThe form element:Attributes

method (GET|POST)action (URL of CGI program)enctype

Each element within a form has a name associated with it. When the information is sent back to the server, the CGI program will access the information by name.Thus, the front-end form and the back-end process must use the same names.

Example 7.1Example 7.1 Source:

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Email Address:

<input type="text" name="email" /><br/><input type="submit" />

</div></form>

Example 7.1 Rendered:

Email Address: Submit Query


5 of 90 3/21/2006 1:04 PM

"Echo" program: http://minerva.dce.harvard.edu/cgi-bin/echo.cgiWhile exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (http://minerva.dce.harvard.edu/cgi-bin/echo.cgi).

The echo.cgi doesn't really "do" anything. It simply takes input and creates a page that displays the input that it was given.


6 of 90 3/21/2006 1:04 PM

Form Input Elements: text field


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Email Address:

<input type="text" name="email" size="50" /><br/>

Year of Birth:<input type="text" name="year_of_birth" size="50" maxlength="4" /><br/>

Year of Birth:<input type="text" name="year_of_birth_2" size="5" maxlength="4" /><br/><input type="submit" name="action" value="Proceed" />

</div></form>


Email Address: Year of Birth: Year of Birth:

Proceed


7 of 90 3/21/2006 1:04 PM

Form Input Elements: radio buttons



<input type="text" name="email" size="50" /><br/>

Please send me spam:<br/><input type="radio" name="spam" value="yes" checked="checked" />

yes<br/><input type="radio" name="spam" value="no" />

no<br/><input type="submit" name="action" value="Proceed" />

</div></form>


Email Address: Please send me spam:

yesno

Proceed


8 of 90 3/21/2006 1:04 PM

Form Input Elements: checkbox


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> What ice cream do you like?

<br/><input type="checkbox" name="icecream" value="chocolate" />

Chocolate<br/><input type="checkbox" name="icecream" value="herrell's chocolate pudding" />

Herrell's Chocolate Pudding<br/><input type="checkbox" name="icecream" value="chocolate peanut butter" />

Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" value="vanilla" />

Vanilla<br/><input type="checkbox" name="icecream" value="strawberry" />

Strawberry<br/><input type="submit" name="action" value="Proceed" />

</div></form>

Example 7.4 Rendered:What ice cream do you like?

ChocolateHerrell's Chocolate PuddingChocolate Peanut ButterVanillaStrawberry

Proceed


9 of 90 3/21/2006 1:04 PM

Form Input Elements: textarea


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Please enter comments:

<br/><textarea rows="10" cols="50" > comments go here.... </textarea><br/><input type="submit" name="action" value="Proceed" />

</div></form>

Example 7.5 Rendered:Please enter comments:

Proceed

comments go here....


10 of 90 3/21/2006 1:04 PM

Form Input Elements: select


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div>

<select name="state" ><option value="" >Select your favorite New England state</option><option value="CT" >Connecticut</option><option value="ME" >Maine</option><option value="MA" >Massachusetts</option><option value="NH" >New Hampshire</option><option value="RI" >Rhode Island</option><option value="VT" >Vermont</option>

</select><br/><input type="submit" name="action" value="Proceed" />

</div></form>


Select your favorite New England stateSelect your favorite New England state

Proceed


11 of 90 3/21/2006 1:04 PM

Form Input Elements: select


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Select your favorite New England states:

<br/><select name="state" size="3" multiple="multiple" >

<option value="CT" >Connecticut</option><option value="ME" >Maine</option><option value="MA" >Massachusetts</option><option value="NH" >New Hampshire</option><option value="RI" >Rhode Island</option><option value="VT" >Vermont</option>

</select><br/><input type="submit" name="action" value="Proceed" />

</div></form>

Example 7.7 Rendered:Select your favorite New England states:

Proceed

ConnecticutMaineMassachusetts


12 of 90 3/21/2006 1:04 PM

Form Input Elements: password


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Secret word:

<input type="password" name="secretword" size="10" /><br/><input type="submit" name="action" value="Proceed" />

</div></form>


Secret word: Proceed


13 of 90 3/21/2006 1:04 PM

Form Input Elements: "hidden"



<input type="hidden" name="myhiddenvariable" value="myhiddenvalue" /><input type="submit" name="action" value="Proceed" />

</div></form>


Proceed


14 of 90 3/21/2006 1:04 PM

Disabled Form Input Elements


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div>Your email address:

<input type="text" name="email" disabled="disabled" value="[email protected]" size="30" /></div><div> You have selected your favorite ice cream:

<br/><input type="checkbox" name="icecream" disabled="disabled" checked="checked" value="chocolate" />

Chocolate<br/><input type="checkbox" name="icecream" disabled="disabled" checked="checked" value="herrell's chocolate pudding" />

Herrell's Chocolate Pudding<br/><input type="checkbox" name="icecream" disabled="disabled" checked="checked" value="chocolate peanut butter" />

Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" disabled="disabled" value="vanilla" />

Vanilla<br/><input type="checkbox" name="icecream" disabled="disabled" value="strawberry" />

Strawberry<br/>

</div></form>


Your email address: You have selected your favorite ice cream:


[email protected]


15 of 90 3/21/2006 1:04 PM

Accessible FormsAccessible Forms Tutorials are available from The Web Standards Project.


16 of 90 3/21/2006 1:04 PM

Label Elementlabel element lets us use markup to associate text with an input element.

id attribute for form inputlabel element for input labelfor attribute in label to link label element with input via the value of id



<p>Do you watch NCAA Basketball?</p><input type="radio" name="basketball" id="basketball_y" value="Y" /><label for="basketball_y" >Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N" /><label for="basketball_n" >No</label><br/><input type="submit" />

</div></form>


Do you watch NCAA Basketball?

YesNo

Submit Query


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> What ice cream do you like?

<br/><input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" /><label for="icecream_chocolate" >Chocolate</label><br/><input type="checkbox" name="icecream" id="icecream_hcp" value="herrell's chocolate pudding" />


17 of 90 3/21/2006 1:04 PM

<label for="icecream_hcp" >Herrell's Chocolate Pudding</label><br/><input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter" /><label for="icecream_cpb" >Chocolate Peanut Butter</label><br/><input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /><label for="icecream_vanilla" >Vanilla</label><br/><input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry" /><label for="icecream_strawberry" >Strawberry</label><br/><input type="submit" name="action" value="Proceed" />

</div></form>



Proceed


18 of 90 3/21/2006 1:04 PM

fieldset and legendfieldset and legend elements can further help group related input fields.



<fieldset><legend>Name</legend><label for="fname" >First Name </label><input type="text" name="fname" id="fname" size="30" /><br/><label for="lname" >Last Name </label><input type="text" name="lname" id="lname" size="30" /><br/>

</fieldset><fieldset>

<legend>Sports</legend><div>Do you enjoy basketball?</div><input type="radio" name="basketball" id="basketball_y" value="Y" /><label for="basketball_y" >Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N" /><label for="basketball_n" >No</label><br/><div>Do you enjoy baseball?</div><input type="radio" name="baseball" id="baseball_y" value="Y" /><label for="baseball_y" >Yes</label><br/><input type="radio" name="baseball" id="baseball_n" value="N" /><label for="baseball_n" >No</label><br/>

</fieldset><input type="submit" />

</div></form>



19 of 90 3/21/2006 1:04 PM

NameFirst Name Last Name

SportsDo you enjoy basketball?

YesNo

Do you enjoy baseball?YesNo

Submit Query


20 of 90 3/21/2006 1:04 PM

fieldset and legendYou can apply CSS rules to fieldset and legend


In style element (within head element):

<style type="text/css" >fieldset { border: thin dashed #900; }legend { font-family: Arial,Helvetica,sans-serif; font-weight: bold; font-size: 1.1em; }

</style>

In body element:


<fieldset><legend>Name</legend><label for="fname" >First Name </label><input type="text" name="fname" id="fname" size="30" /><br/><label for="lname" >Last Name </label><input type="text" name="lname" id="lname" size="30" /><br/>

</fieldset><fieldset>

<legend>Sports</legend><div>Do you enjoy basketball?</div><input type="radio" name="basketball" id="basketball_y" value="Y" /><label for="basketball_y" >Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N" /><label for="basketball_n" >No</label><br/><div>Do you enjoy baseball?</div><input type="radio" name="baseball" id="baseball_y" value="Y" />


21 of 90 3/21/2006 1:04 PM

<label for="baseball_y" >Yes</label><br/><input type="radio" name="baseball" id="baseball_n" value="N" /><label for="baseball_n" >No</label><br/>

</fieldset><input type="submit" />

</div></form>


With StylesWithout Styles


22 of 90 3/21/2006 1:04 PM

optgroupThe optgroup element allows you to group a long select list.


<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><select name="school" >

<optgroup label="ACC" ><option>Boston College</option><option>Clemson</option><option>Duke</option><option>Florida State</option><option>Georgia Tech</option><option>Maryland</option><option>Miami (FL)</option><option>North Carolina</option><option>North Carolina State</option><option>Virginia</option><option>Virginia Tech</option><option>Wake Forest</option>


23 of 90 3/21/2006 1:04 PM

</optgroup><optgroup label="Big 10" >

<option>Illinois</option><option>Indiana</option><option>Iowa</option><option>Michigan</option><option>Michigan State</option><option>Minnesota</option><option>Northwestern</option><option>Ohio State</option><option>Penn State</option><option>Purdue</option><option>Wisconsin</option>

</optgroup><optgroup label="Big XII" >

<option>Baylor</option><option>Colorado</option><option>Iowa State</option><option>Kansas</option><option>Kansas State</option><option>Missouri</option><option>Nebraska</option><option>Oklahoma</option><option>Oklahoma State</option><option>Texas</option><option>Texas A&M</option><option>Texas Tech</option>

</optgroup><optgroup label="Ivy League" >

<option>Brown</option><option>Columbia</option><option>Cornell</option><option>Dartmouth</option><option>Harvard</option><option>Penn </option><option>Princeton</option><option>Yale</option>

</optgroup><optgroup label="Pac 10" >

<option>Arizona</option><option>Arizona State</option><option>California</option><option>Oregon</option><option>Oregon State</option>


24 of 90 3/21/2006 1:04 PM

<option>Stanford</option><option>UCLA</option><option>USC</option><option>Washington</option><option>Washington State</option>

</optgroup></select><div>

<input type="submit" /></div>

</form>


Boston CollegeBoston College

Submit Query


25 of 90 3/21/2006 1:04 PM

tabindexUse the tabindex attribute to control the tabbing order of elements. tabindex can be an attribute of:

aareabuttoninputobjectselecttextarea


<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="application/x-www-form-urlencoded" ><table>

<tr><td>

<strong>Red:</strong><input tabindex="3" type="text" name="r" value="0" size="5" maxlength="3" />

</td><td>

<strong>Green:</strong><input tabindex="2" type="text" name="g" value="0" size="5" maxlength="3" />

</td><td>

<strong>Blue:</strong><input tabindex="1" type="text" name="b" value="0" size="5" maxlength="3" />

</td></tr>

</table><div>

<input tabindex="6" type="radio" name="units" value="decimal" checked="checked" />decimal

<br/><input tabindex="5" type="radio" name="units" value="percent" />

percent<br/><input tabindex="4" type="radio" name="units" value="hexadecimal" />

hexadecimal<br/><input tabindex="7" type="submit" name="submit" value="Submit" />


26 of 90 3/21/2006 1:04 PM

</div></form>


Red: Green: Blue:decimalpercenthexadecimal

Submit

0 0 0


27 of 90 3/21/2006 1:04 PM

accesskeyThe accesskey attribute can be used to assign an access key to an element:

aareabuttoninputlabellegendtextarea


<ul><li>

<a href="http://www.w3.org" accesskey="w" >W3C</a></li><li>

<a href="http://www.harvard.edu/" accesskey="h" >Harvard</a></li><li>

<a href="http://cscie12.dce.harvard.edu/" accesskey="c" >CSCI E-12</a></li>

</ul><form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="post" >

<div> Last name:<input type="text" name="last_name" accesskey="l" /><br/>

First name:<input type="text" name="first_name" accesskey="f" /><br/><input type="submit" accesskey="s" />

</div></form>


W3CHarvardCSCI E-12


28 of 90 3/21/2006 1:04 PM

Last name:First name:

Submit Query


29 of 90 3/21/2006 1:04 PM

Method: Get vs. Postget: parameters and values are passed to the HTTP server via the query string in the URL. The query string is everything after the question mark ? in the URL. http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12post: parameters and values are passed to the HTTP server as part of the HTTP exchange, which is not visible to the user.


<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" ><div> Email Address:


</div></form>






</div></form>




30 of 90 3/21/2006 1:04 PM

Query StringQuery string is everything after the question mark (?) in the URL. The query string is made of parameter=value pairs, separated by an ampersand (&).

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP&os=Linux

You may also see parameter/value pairs separated by a semicolon

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David;course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP;os=Linux


31 of 90 3/21/2006 1:04 PM

URI EscapingSome characters cannot be passed directly to the server; they must be URI-escaped first. Escaped characters are represented by a triplet consisting of the character %followed by two hexadecimal digits.

Character needing escaping:

Decimal numbers: 0 to 32Hexadecimal: 00 to 20# % ; < > ? { } | \ ^ ~ ` [ ]Decimal numbers 126 to 255Hexadecimal: 7F to FF

For example, a space has a decimal value of 32 (hexadecimal value of 20. Therefore a space in a URI should be encoded as %20, as in Sever%20Hall. Note: spacesare also sometimes represented as "+", as in "Sever+Hall".

echo.cgi?location=Sever%20Hallecho.cgi?location=Sever+Hall

Another example is the @ sign. It has a decimal value of 94, which is a hexadecimal value of 40, so in query string this becomes %40.

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?email=david_heitmeyer%40harvard.edu


32 of 90 3/21/2006 1:04 PM

What you need to remember about URI EscapingClient will take care of encoding of form input elements.CGI Program will take care of decodingYour only concern in creating content: if you are writing query strings in URL links.

Don't confuse URI escaping with XHTML/HTML character entities.But do use XHTML/HTML character entities within URI strings.


33 of 90 3/21/2006 1:04 PM

HTML Character Entities and Query StringsIf you have a URI in X/HTML, you need to use X/HTML character entities for any characters (such as the ampersand (&) that would normally need characterentities. The bottom line is URI strings in href attributes should be treated the same, with respect to using X/HTML character entities, as text in other parts of X/HTML.

The colors.cgi script expects four parameters: r, g, b, and units. For example:

r=80g=80b=00units=hexadecimal

If I want to create links for some of the colors defined in HTML/XHTML, I can code the URLs in the href attributes of the a elements; I need to use the HTML character entity for the ampersand (&) that separates the parameter=value pairs.

BlackSilverPurpleMaroonOlive


34 of 90 3/21/2006 1:04 PM

Using CGI ProgramsColorsRedirectMailCounterSearchWeatherMaps


35 of 90 3/21/2006 1:04 PM

Colorsaction

http://cscie12.dce.harvard.edu/tools/colors.cgiparameters

rgbunits=(hexadecimal|decimal|percent)


<form action="http://cscie12.dce.harvard.edu/tools/colors.cgi" method="get" ><div>

<input type="hidden" name="r" value="00" /><input type="hidden" name="g" value="80" /><input type="hidden" name="b" value="80" /><input type="hidden" name="units" value="hexadecimal" /><input type="submit" name="color" value="Teal" />

</div></form>


Teal


36 of 90 3/21/2006 1:04 PM

Colors, Part 2


<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="application/x-www-form-urlencoded" ><table>

<tr><td>

<strong>Red:</strong></td><td>

<input type="text" name="r" value="0" size="12" maxlength="3" /></td>

</tr><tr>

<td><strong>Green:</strong>

</td><td>

<input type="text" name="g" value="0" size="12" maxlength="3" /></td>

</tr><tr>

<td><strong>Blue:</strong>

</td><td>

<input type="text" name="b" value="0" size="12" maxlength="3" /></td>

</tr><tr>

<td/><td>

<input type="radio" name="units" value="decimal" checked="checked" />decimal

<br/><input type="radio" name="units" value="percent" />

percent<br/><input type="radio" name="units" value="hexadecimal" />

hexadecimal<br/>


37 of 90 3/21/2006 1:04 PM

</td></tr><tr>

<td/><td>

<input type="submit" name="submit" value="Submit" /></td>

</tr></table>

</form>


Red:Green:Blue:

decimalpercenthexadecimal

Submit

0

0

0


38 of 90 3/21/2006 1:04 PM

Redirectaction

http://minerva.dce.harvard.edu/cgi-bin/redirect.cgiparameters

URL


<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype="application/x-www-form-urlencoded" ><div>

<select name="URL" ><option value="" >Select your destination:</option><option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option><option value="http://www.w3.org/TR/html401" >HTML 4.01</option><option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option><option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option><option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option><option value="http://www.w3.org/WAI" >Web Accessibility Initiative (WAI)</option><option value="http://validator.w3.org/" >XHTML/HTML Validator</option><option value="http://jigsaw.w3.org/css-validator/validator-uri.html" >CSS Validator</option><option value="http://www.w3.org/People/Raggett/tidy/" >HTML Tidy</option>

</select><input type="submit" value="Go!" />

</div></form>


Select your destination:Select your destination: Go!


<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype="application/x-www-form-urlencoded" ><div>

<select name="gothere" ><option value="" >Select your destination:</option><option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option><option value="http://www.w3.org/TR/html401" >HTML 4.01</option><option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option>


39 of 90 3/21/2006 1:04 PM

<option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option><option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option><option value="http://www.w3.org/WAI" >Web Accessibility Initiative (WAI)</option><option value="http://validator.w3.org/" >XHTML/HTML Validator</option><option value="http://jigsaw.w3.org/css-validator/validator-uri.html" >CSS Validator</option><option value="http://www.w3.org/People/Raggett/tidy/" >HTML Tidy</option>

</select><input type="submit" value="Go!" />

</div></form>


Select your destination:Select your destination: Go!


40 of 90 3/21/2006 1:04 PM

MailFormMail Documentation. Note that this script can be used to send email only to addresses ending with .harvard.edu

actionhttp://minerva.dce.harvard.edu/cgi-bin/FormMail

parametersrecipientsubjectemailredirectrequiredsortenv_reportprint_configprint_blank_fields...see documentation for complete list


41 of 90 3/21/2006 1:04 PM

Mail Form


<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" ><div>Your Email Address:

<input type="text" name="email" /></div><div>Your Name:

<input type="text" name="realname" /></div><div>Subject:

<select name="subject" ><option value="Lecture Question" >Lecture Question</option><option value="Assignment Question" >Assignment Question</option><option value="Syllabus Question" >Syllabus Question</option><option value="Website Question" >Website Question</option>

</select></div><div>Message:

<br/><textarea rows="10" cols="60" name="message" > Please type message here... </textarea>

</div><div>

<input type="hidden" name="recipient" value="[email protected]" /></div><div>

<input type="submit" value="Send Email" /></div>

</form>


Your Email Address: Your Name: Subject: Lecture QuestionLecture Question

Message:


42 of 90 3/21/2006 1:04 PM

Send Email

Please type message here...


43 of 90 3/21/2006 1:04 PM

Mail Form


<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" ><div>Your Email Address:

<input type="text" name="email" /></div><div>Your Name:

<input type="text" name="realname" /></div><div>

<input type="hidden" name="subject" value="Favorite Ice Cream" />What ice cream do you like?

<br/><input type="checkbox" name="icecream" value="chocolate" />

Chocolate<br/><input type="checkbox" name="icecream" value="vanilla" />


Strawberry<br/><input type="hidden" name="recipient" value="[email protected]" /><input type="hidden" name="redirect" value="http://www.herrells.com/" /><input type="hidden" name="required" value="icecream,realname" />

</div><div>

<input type="submit" value="Send Email" /></div>

</form>


Your Email Address: Your Name: What ice cream do you like?

ChocolateVanillaStrawberry

Send Email


44 of 90 3/21/2006 1:04 PM

45 of 90 3/21/2006 1:04 PM

Form Data to a Database?FAS Computer Services offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database. The data can be viewed online (inHTML) or downloaded in an Excel file. Note that a Harvard HUID and PIN are required to use this tool.


<form method="post" action="http://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi" ><div>

<input type="hidden" name="form2db" value="cscie12_test" />

<div> What ice cream do you like?<br/><input type="checkbox" name="icecream" value="chocolate" />

Chocolate<br/><input type="checkbox" name="icecream" value="herrell's chocolate pudding" />

Herrell's Chocolate Pudding<br/><input type="checkbox" name="icecream" value="chocolate peanut butter" />

Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" value="vanilla" />


Strawberry </div><input type="submit" />

</div></form>



Submit Query


46 of 90 3/21/2006 1:04 PM

CountCount 2.5 Documentation. Note that this script can be used from within the .harvard.edu domain.

actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi

parametersdf (data file)See http://minerva.dce.harvard.edu/Counter#optisrgb, prgb


<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" />



47 of 90 3/21/2006 1:04 PM

CountCount 2.5 Documentation. Note that this script can be used from within the .harvard.edu domain.

actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi

parametersdf (data file)See http://minerva.dce.harvard.edu/Count/docs/Count.html#optisrgb, prgb


<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" />



48 of 90 3/21/2006 1:04 PM

CountChanging colors:


<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&srgb=00ff00&prgb=ff00ff" alt="counter" />


Changing digit styles:


<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&dd=C" alt="counter" />


More examples are given in the documentation.


49 of 90 3/21/2006 1:04 PM

Search


<form method="get" action="http://www.google.com/search" ><div>

<input type="text" name="as_q" size="50" /><input type="submit" value="Search CSCIE-12 with Google" /><input type="hidden" name="as_sitesearch" value="cscie12.dce.harvard.edu" />

</div></form>


Search CSCIE-12 with Google


50 of 90 3/21/2006 1:04 PM

Weather


<div>Weather from <a href="http://www.weather.com" >weather.com</a>

:</div><ul>

<li><a href="http://www.weather.com/search/search?where=02138" >Cambridge, Massachusetts</a>

</li><li>

<a href="http://www.weather.com/search/search?where=66045" >Lawrence, Kansas</a></li>

</ul>

Example 7.32 Rendered:Weather from weather.com:

Cambridge, MassachusettsLawrence, Kansas


<form method="get" action="http://www.weather.com/search/search" ><div> Input zip code:

<input type="text" name="where" /><br/><input type="submit" name="submit" value="Get Forecast" />

</div></form>


Input zip code: Get Forecast


51 of 90 3/21/2006 1:04 PM

Mapshttp://maps.yahoo.com/


<ahref="http://maps.yahoo.com/maps_result?ed=Q8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX&csz=Cambridge%2C+MA+02138&country=us&new=1&name=&qty="> 1 Oxford St, Cambridge, MA 02138 </a>

Example 7.34 Rendered:1 Oxford St, Cambridge, MA 02138

edQ8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX

cszCambridge, MA 02138

countryus

new1

nameqty


52 of 90 3/21/2006 1:04 PM

Random ImageRotating content or images can be an effective way to keep a page "fresh".

Harvard UniversityHarvard CollegeHarvard@Home

CGI program at http://minerva.dce.harvard.edu/cgi-bin/randomimg accepts a dir parameter, and returns the contents of a randomly chosen image from that directory.

[dheitmey@minerva images]$ pwd; ls -l/home/staff/dheitmey/public_html/boeing/777/images-rw-r--r-- 1 dheitmey teaching 20822 Mar 16 00:10 777200-k58103.jpg-rw-r--r-- 1 dheitmey teaching 36340 Mar 16 00:10 777200-k58224.jpg-rw-r--r-- 1 dheitmey teaching 13155 Mar 16 00:10 777200-k58379.jpg-rw-r--r-- 1 dheitmey teaching 19382 Mar 16 00:10 777200-k58432.jpg-rw-r--r-- 1 dheitmey teaching 25709 Mar 16 00:10 777200-k58533.jpg-rw-r--r-- 1 dheitmey teaching 9310 Mar 16 00:10 777200-k58557.jpg-rw-r--r-- 1 dheitmey teaching 13476 Mar 16 00:10 777200-k58784.jpg-rw-r--r-- 1 dheitmey teaching 14714 Mar 16 00:10 777200-k60629.jpg-rw-r--r-- 1 dheitmey teaching 6410 Mar 16 00:10 777300-k59953.jpg-rw-r--r-- 1 dheitmey teaching 9490 Mar 16 00:10 777300-k59962.jpg-rw-r--r-- 1 dheitmey teaching 5362 Mar 16 00:10 777300-k60026.jpg-rw-r--r-- 1 dheitmey teaching 9525 Mar 16 00:10 777300-k60609.jpg-rw-r--r-- 1 dheitmey teaching 22492 Mar 16 00:10 777-k57216.jpg-rw-r--r-- 1 dheitmey teaching 26874 Mar 16 00:10 777-k58380.jpg


<div style="border: thin solid; width: 300px; float: left; margin-right: 1em;" ><img src="http://minerva.dce.harvard.edu/cgi-bin/randomimg?dir=/home/staff/dheitmey/public_html/boeing/777/images/" style="width: 300px; float: left; margin-right: 1em;" alt="random image" /><p style="color: #333; text-align: center; font-size: 0.5em;" >Image courtesy of

<a href="http://www.boeing.com/" >Boeing</a></p>

</div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellus facilisis ultrices. Morbi commodo accumsan arcu. Aliquam erat volutpat. Fusce neque tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquam eleifend enim quis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat molestie. Duis in mi. Sed ultrices enim et ante. Praesent turpis velit, semper ac, sollicitudin nec, consequat sit amet, mauris. Mauris sed felis. Fusce sit amet nunc a urna feugiat cursus. Pellentesque vehicula vestibulum odio. Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quis tortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac massa laoreet ultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue in, lorem. Cras dictum fermentum ante. Aliquam lacus. Proin diam ipsum, venenatis et, tempor eu, ornare id, libero. Curabitur varius semper mauris. Aenean nequenunc, commodo non, posuere non, sagittis quis, massa. Vestibulum blandit. Nam adipiscing semper risus. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et, neque. Proin commodo pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a, nonummy non, dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sit amet ipsum nec wisi placerat malesuada. Mauris ut pede non enim ornare condimentum.</p>


53 of 90 3/21/2006 1:04 PM

Image courtesy of Boeing


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellus facilisis ultrices. Morbi commodo accumsan arcu. Aliquam erat volutpat. Fusce neque tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquam eleifend enim quis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat molestie. Duis in mi. Sed ultrices enim et ante. Praesent turpis velit, semper ac, sollicitudin nec, consequat sit amet, mauris. Mauris sed felis. Fusce sit amet nunc a urna feugiat cursus. Pellentesque vehicula vestibulum odio. Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quis tortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac massa laoreet ultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue in, lorem. Cras dictum fermentum ante. Aliquam lacus. Proin diam ipsum, venenatis et, tempor eu, ornare id, libero.Curabitur varius semper mauris. Aenean neque nunc, commodo non, posuere non, sagittis quis, massa. Vestibulum blandit. Nam adipiscing semper risus. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et, neque. Proin commodo pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a, nonummy non, dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sit amet ipsum nec wisi placerat malesuada. Mauris ut pede nonenim ornare condimentum.


54 of 90 3/21/2006 1:04 PM

Introduction to JavaScript and DHTMLJavascriptDynamic HTML (DHTML)

XHTML/HTMLCSSJavaScriptDocument Object Model (DOM)


55 of 90 3/21/2006 1:04 PM

JavaScriptWhat?

Client-side scripting languageWhy?

control document appearancecontrol browserinteract with document contentinteract with userread/write cookies


56 of 90 3/21/2006 1:04 PM

JavaScript and DHTML ResourcesWeb Design in a Nutshell

Chapter 28 (Introduction to JavaScript)Chapter 29 (Introduction to DHTML)

Online ResourcesWebDeveloper, http://www.webdeveloper.com/javascript/CNET, http://www.builder.com/Programming/Javascript/The JavaScript Source, http://javascript.internet.comInternet Related Technologies, http://www.irt.org/Look for JavaScript, JScript and ECMAScript

Recommended BooksGoodman, Danny and Michael Morrison. 2004. The JavaScript Bible. New York: IDG Books Worldwide. 1236 p.

Goodman, Danny. 2003. JavaScript and DHTML Cookbook. Sebastol (CA): O'Reilly. 576 p.

Flanagan, David. 2001. JavaScript: The Definitive Guide. 4th ed. Sebastol (CA): O'Reilly. 900 p.


57 of 90 3/21/2006 1:04 PM

JavaScript ObjectsObjects

windowdocumentformlocationhistory

Object: Properties

window.locationdocument.title

Object: Methods

document.writewindow.openform.submit


58 of 90 3/21/2006 1:04 PM

Event AttributesThese are event attributes defined in X/HTML:

onbluronfocusonchangeonclickondblclickonkeydownonkeyuponkeypressonloadonunloadonmousedownonmousemoveonmouseoutonmouseoveronmouseuponresetonselectonsubmit


59 of 90 3/21/2006 1:04 PM

JavaScript and HTMLScripts in HTML Documents from the HTML 4 Specificationhttp://www.w3.org/TR/html4/interact/scripts.html<script> element

<!ELEMENT script - - %Script; -- script statements --><!ATTLIST script charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #REQUIRED -- content type of script language -- src %URI; #IMPLIED -- URI for an external script -- defer (defer) #IMPLIED -- UA may defer execution of script -- >

Note the <noscript> element for clients without JavaScript.


60 of 90 3/21/2006 1:04 PM

JavaScript in XHTML/HTMLDocument Head or Body

<script>...</script>

External Script

<script src="url">src attribute to refer to external JavaScript document.

"Inline" scripts as values of event attributes


61 of 90 3/21/2006 1:04 PM

JavaScript Examples: FormsCalculations Redirect / Window LocationForm Validation and Control


62 of 90 3/21/2006 1:04 PM

Calculation with onclick


In example36.js

var PI = 3.14159;function CalcCircumference(r) { return 2*PI*r;}function CalcArea(r) { return PI*r*r}

In head element:

<script type="text/javascript"src="example36.js"/>

In body element:

<form name="SimpleCalc1" action="" ><table cellpadding="10" >

<tr style="background: #99FFCC" ><td>Radius:</td><td>

<input type="text" size="10" name="radius" /></td><td>cm</td>

</tr><tr style="background: #CCCCCC" >

<td>Circumference:</td><td>

<input type="text" size="10" name="circumference" /></td><td>cm</td>


<td>Area:</td><td>

<input type="text" size="10" name="area" /></td><td>cm

<sup>2</sup></td>


63 of 90 3/21/2006 1:04 PM

</tr></table><div>

<input type="button" value="Calculate!" onclick="document.SimpleCalc1.circumference.value=CalcCircumference(document.SimpleCalc1.radius.value); document.SimpleCalc1.area.value=CalcArea(document.SimpleCalc1.radius.value)" />

</div></form>

Example 7.36 Demonstrated


64 of 90 3/21/2006 1:04 PM

Calculation with onblur


In example37.js

var PI = 3.14159;function CalcCircumference(r) { return 2*PI*r;}function CalcArea(r) { return PI*r*r}

In head element:


In body element:

<form name="SimpleCalc1" action="" ><table cellpadding="10" >

<tr style="background: #99FFCC" ><td>Radius:</td><td>

<input type="text" size="10" name="radius" onblur="document.SimpleCalc1.circumference.value=CalcCircumference(document.SimpleCalc1.radius.value); document.SimpleCalc1.area.value=CalcArea(document.SimpleCalc1.radius.value)" />

</td><td>cm</td>


<td>Circumference:</td><td>

<input type="text" size="10" name="circumference" /></td><td>cm</td>


<td>Area:</td><td>

<input type="text" size="10" name="area" /></td><td>cm


65 of 90 3/21/2006 1:04 PM

<sup>2</sup></td>

</tr></table>

</form>



66 of 90 3/21/2006 1:04 PM

Redirect onclick


In script element (within head element):

<script type="text/javascript" >function doJump(menu) { window.location = menu.options[menu.selectedIndex].value;}

</script >

In body element:

<form name="JumpTo1" action="" ><div>

<select name="GotoURL" ><option value=" " >Select an Apache "How-To/Tutorial"</option><option value="http://httpd.apache.org/docs/2.2/howto/auth.html" >Authentication, Authorization, and Access Control</option><option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic Content</option><option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" >.htaccess files</option><option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side Includes (SSI)</option><option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" >Per-user Web Directories (public_html)</option>

</select><input type="button" onclick="doJump(document.JumpTo1.GotoURL)" value="Go!" />

</div></form>



67 of 90 3/21/2006 1:04 PM

Redirect onchange



<script type="text/javascript" >function doJump(menu) { window.location = menu.options[menu.selectedIndex].value;}

</script >

In body element:

<form name="JumpTo1" action="" ><div>

<select name="GotoURL" onchange="doJump(document.JumpTo1.GotoURL)" ><option value=" " >Select an Apache "How-To/Tutorial"</option><option value="http://httpd.apache.org/docs/2.2/howto/auth.html" >Authentication, Authorization, and Access Control</option><option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic Content</option><option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" >.htaccess files</option><option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side Includes (SSI)</option><option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" >Per-user Web Directories (public_html)</option>

</select></div>

</form>



68 of 90 3/21/2006 1:04 PM

Form ControlValidate form input using the onsubmit event handler.



<script type="text/javascript" >function Validate(thisform) { if(thisform.YourName.value == null || thisform.YourName.value == "") { alert("Please enter your name!"); thisform.YourName.focus(); return false; }}

</script >

In body element:

<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="get" onsubmit="return Validate(this)" ><div>Enter your name:

<input type="text" name="YourName" /><br/><input type="submit" value="Submit Information" />

</div></form>



69 of 90 3/21/2006 1:04 PM

Form Validation and Regular ExpressionsValidate form fields with Regular Expressions

Regular Expression:/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/

^[\w]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$


In example41.js

// validates that the field value string has one or more characters in itfunction isNotEmpty(elem) { var str = elem.value; var re = /.+/; if(!str.match(re)) { alert("Please fill in the required field."); return false; } else { return true; }}// validates that the entry is formatted as an email addressfunction isEMailAddr(elem) { var str = elem.value; var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; if (!str.match(re)) { alert("Verify the email address format."); return false; } else { return true; }}

In head element:



70 of 90 3/21/2006 1:04 PM

In body element:

<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" ><div> Email Address:

<input type="text" size="32" name="email" id="email" onblur="if (isNotEmpty(this)) {isEMailAddr(this)}" /><br/><input type="submit" />

</div></form>



71 of 90 3/21/2006 1:04 PM

Validation onsubmit


In example42.js

// validates that the field value string has one or more characters in itfunction ValidateForm(thisform) { if(isNotEmpty(thisform.email)) { isEMailAddr(thisform.email) } else { return false; }}function isNotEmpty(elem) { var str = elem.value; var re = /.+/; if(!str.match(re)) { alert("Please fill in the required field."); return false; } else { return true; }}// validates that the entry is formatted as an email addressfunction isEMailAddr(elem) { var str = elem.value; var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; if (!str.match(re)) { alert("Verify the email address format."); return false; } else { return true; }}

In head element:


In body element:

<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" onsubmit="return ValidateForm(this)" ><div> Email Address:

<input type="text" size="32" name="email" id="email" /><br/><input type="submit" />

</div></form>


72 of 90 3/21/2006 1:04 PM



73 of 90 3/21/2006 1:04 PM

Form Validation: ResourcesTutorials

Javascript form validation - doing it rightJavascript form validation - doing it right with checkboxes

Libraries and Examples

JavaScript Form Validations Made Easy!


74 of 90 3/21/2006 1:04 PM

Exposing Additional Form Elements



<script type="text/javascript" >

function displayIceCreamOptions() { var divico = document.getElementById('icecream_options'); var state = divico.style.display; if (document.forms['ice_cream'].want[0].checked) { divico.style.display = 'block'; } else { divico.style.display = 'none'; }}

</script >

In body element:

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" name="ice_cream" id="ice_cream" ><div> Would you like ice cream?

<br/><input type="radio" name="want" value="yes" onclick="displayIceCreamOptions()" />

Yes<br/><input type="radio" name="want" value="no" onclick="displayIceCreamOptions()" />

No </div><div style="display: none;" id="icecream_options" >

<p>How would you like it?</p><input type="radio" name="container" value="cup" />

Cup<br/><input type="radio" name="container" value="cone" />

Cone<br/><p>Available toppings:</p><input type="checkbox" name="toppings" value="whipcream" />

Whipped cream<br/><input type="checkbox" name="toppings" value="jimmies" />

Jimmies<br/><input type="checkbox" name="toppings" value="cherry" />

Cherry on top


75 of 90 3/21/2006 1:04 PM

<br/></div><p>

<input type="submit" /></p>

</form>



76 of 90 3/21/2006 1:04 PM

Search Box Example


<form name="search" action="http://www.google.com/search" ><div>

<input type="text" value="Enter search terms" name="q" size="25" onfocus="this.form.q.value=''" /><input type="submit" value="Search" />

</div></form>


SearchEnter search terms


77 of 90 3/21/2006 1:04 PM

Body onload and focusBody onload and focus on a form input.

<body onload="document.forms[0].YourName.focus()"><form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="get" onsubmit="return Validate(this)"><div>Enter your name: <input type="text" name="YourName" /><br /><input type="submit" value="Submit Information" /></div></form>


78 of 90 3/21/2006 1:04 PM

JavaScript Examples: ImagesRollover effects

Rollover effects (document.images object)Rollover effects (Image object; preloading images)


79 of 90 3/21/2006 1:04 PM

JavaScript Examples: Browser PropertiesOpening windows


80 of 90 3/21/2006 1:04 PM

Dynamic HTML (DHTML)HTMLCSSDOMJavaScript


81 of 90 3/21/2006 1:04 PM

DHTML: Visible and Hidden

Showing and Hiding Menus: Relative


<ul><li>

<a href="#" onclick="document.getElementById("menu").style.visibility = "visible"" >Show Menu</a></li><li>

<a href="#" onclick="document.getElementById("menu").style.visibility = "hidden"" >Hide Menu</a></li>

</ul><div style="visibility: hidden" id="menu" >

<a href="http://www.harvard.edu/" >Harvard University</a><br/><a href="http://www.dce.harvard.edu/" >Division of Continuing Education</a><br/><a href="http://www.extension.harvard.edu/" >Extension School</a><br/><a href="http://cscie12.dce.harvard.edu/" >Fundamentals of Web Site Development</a>

</div>


Showing and Hiding Menus: Absolute

Block whose visibility is set can be positioned absolutely.


<ul><li>

<a href="#" onclick="document.getElementById("menu2").style.visibility = "visible"" >Show Menu</a></li><li>

<a href="#" onclick="document.getElementById("menu2").style.visibility = "hidden"" >Hide Menu</a></li>


82 of 90 3/21/2006 1:04 PM

</ul><div style="position: absolute; left: 200px; top: 100px; visibility: hidden" id="menu2" >

<a href="http://www.harvard.edu/" >Harvard University</a><br/><a href="http://www.dce.harvard.edu/" >Division of Continuing Education</a><br/><a href="http://www.extension.harvard.edu/" >Extension School</a><br/><a href="http://cscie12.dce.harvard.edu/" >Fundamentals of Web Site Development</a>

</div>



83 of 90 3/21/2006 1:04 PM

Another example of Simple DOM manipulationsWe can show, hide, and change the style properties via Javascript


In example47.js

function align(val) { node = document.getElementById('description'); node.setAttribute('align',val);}function hidedesc () { node = document.getElementById('description'); node.setAttribute('style','display: none;');}function showdesc () { node = document.getElementById('description'); node.setAttribute('style','display: block;');}function backgroundcolor(color) { node = document.getElementById('description'); node.setAttribute('style','font-family: helvetica; background-color: '+ color + ';');}

In head element:


In body element:

<ul><li>Description Align:

<ul><li>

<a href="javascript:align('right')" >right</a></li><li>

<a href="javascript:align('left')" >left</a></li><li>

<a href="javascript:align('justify')" >justify</a></li>

</ul>


84 of 90 3/21/2006 1:04 PM

</li><li>Show/Hide Description:

<ul><li>

<a href="javascript:hidedesc()" >Hide</a></li><li>

<a href="javascript:showdesc()" >Show</a></li>

</ul></li><li>Background-color:

<ul><li>

<a href="javascript:backgroundcolor('red')" >red</a></li><li>

<a href="javascript:backgroundcolor('blue')" >blue</a></li><li>

<a href="javascript:backgroundcolor('green')" >green</a></li><li>

<a href="javascript:backgroundcolor('yellow')" >yellow</a></li>

</ul></li>

</ul><div style="border: thin solid black; padding: 1em;" >

<h1>Web Development Using XML</h1><p> Harvard Extension School, Summer 2006

<br/>CSCI S-L

<br/>Tuesdays and Thursdays, 6 to 8:30 pm </p><p id="description" > This course will focus on using XML technologies in website development. The first part of the course will cover fundamental XMLtechnologies (XML, XPath, XSL, XSLT, XSLFO, XML Schemas, DTDs, and DOM) and open-source web-based XML publishing frameworks (Cocoon, AxKit). The second part of the course will cover specific markup languages (applications of XML) relevant to website development (XHTML, SVG, RDF, RSS, DocBook, and WML), with an emphasis on developing dynamic, data-driven sites that deliver content in a variety of media types (HTML, text, PDF, graphics) to a variety of devices (desktop and handheld computers, WAP-enabled cellular phones) and audiences. In addition, XML-based web services will be surveyed.</p>

</div>



85 of 90 3/21/2006 1:04 PM


86 of 90 3/21/2006 1:04 PM

AJAX: Asynchronous JavaScript and XMLAjax: A New Approach to Web ApplicationsAJAX (Wikipedia)

Technologies Involved

XHTML/HTMLCSSJavaScript - XMLHttpRequest objectDocument Object Model (DOM)XML

Applications that are based on AJAX

Google MapsGMail


87 of 90 3/21/2006 1:04 PM

Hierarchical MenusWebreference.com is a useful resource for DHTML and for a thoroughly tested cross-browser solution for implementing hierarchical menus.http://www.webreference.com/dhtml/


88 of 90 3/21/2006 1:04 PM


89 of 90 3/21/2006 1:04 PM

FaveletsFavelets (http://www.favelets.com/) are JavaScript code that is "bookmarked". The JavaScript gets executed when selected.

javascript:void(document.location='http://validator.w3.org/check?uri='+document.location)javascript:void(document.location='http://jigsaw.w3.org/css-validator/validator?uri='+document.location)javascript:void(window.resizeTo(640,480))javascript:void(window.resizeTo(800,600))Outline "div" elements

javascript:var t=document.getElementsByTagName('div');\for (i=0;i<t.length;i++)\{void(t[i].style.border='2px solid green');\void(t[i].style.padding='3px');)


90 of 90 3/21/2006 1:04 PM

More examples with JavaScriptBuilding a table of Character Entities with JavaScriptBuilding a Web Safe Color Palette with JavaScript

Table of Contents | All Slides | Link List | Examples | CSCI E-12