Examples and Source Code at http://cogsci.ucsd.edu/~jnelson/JavaScript.html

Goals

The assignment, in brief, consists of: (to top)

What to do: (to top)

Intro. (to top)

Form one: a "fortune translator" (to top)

Form 2: change background color (to top)

Form 3: user feedback (to top)

Important notes on forms and JavaScript: (to top)

Integrating the forms in an existing page: (to top)

Check our grading criteria

Appendix 1: Why not stick with HTML? (to top)

Appendix 2: Further JavaScript Resources (to top)

These are compiled at http://cogsci.ucsd.edu/~jnelson/JavaScript.html

Goals

· gain a feel for the types of situations in which JavaScript and other technologies improve the power, flexibility, and interactivity of HTML

· explore how HTML forms and JavaScript can work together

· take your interaction.html page, and make a new, better version of it, while learning to use JavaScript and HTML forms.

The assignment, in brief, consists of: (to top)

· making a web page, called fortune.html, with some simple forms and scripts. There are three separate elements of this page, described below

· modifying fortune.html, so that the functions on it correspond to what you would like on an expanded version of your topic.html page

· incorporating the html forms and javascript functions of fortune.html into a new page, called interaction.html, based on your topic.html page

What to do: (to top)

Before you begin the assignment,

· Go to http://cogsci.ucsd.edu/~jnelson/js3.html, the demo page that has all the elements of the final assignment,

· Try each form,

· Look at the source code (View PageSource), and

· Think about how you might modify those forms, for inclusion in a revised version of your topic.html page.

Intro. (to top)

We'll keep technical aspects of programming to a minimum—a neat thing about JavaScript is how much you can do without learning a lot of programming—but some points are critical. If you work through this example, trying-out the code on a computer as you go, and pay attention to the structure of the code, you will be well on your way. Here are a couple basic, and important, ideas:

· Your web page is an object, and it has certain properties. For instance, the background color of your page is represented by document.bgColor.

· functions, or "methods," as they are sometimes called, perform calculations, and can change the properties of objects. Functions often have arguments, on which they operate. For instance, you might have a "change color" button on your page that calls a changeColor function, with "yellow" as an argument, to change the background color to yellow.

Often, you will use forms to allow the user to interact with the page, and to change the appearance of the page, after it's been loaded. (Each form on a page is an object.) One common form element is a button; another is a text box. These are each included in the sample page, in the next section.

Form one: a "fortune translator" (to top)

Below, you can see a simple web page, which includes a simple form. The example is inspired by code at JavaScript for the Total Non-programmer. I've changed it a little bit to make it more interesting. Study the code, and make a page called fortune.html, in your public_html directory, that does the same thing.

<HTML>

<HEAD>

<title> a fortune translator </title>

<!--

function MsgBox (something) {

alert(something.value +" in bed");

something.value=":-)";

}

-->

</SCRIPT>

</HEAD>

<BODY>

<INPUT NAME="submit" TYPE=Button

VALUE="Show Me" onClick="MsgBox(funnyForm.text1)">

</FORM>

</BODY>

</HTML>

Remember, the page fortune.html needs to be readable by others. When your fortune.html page is ready, open it up in Netscape or Internet Explorer. To check how it is supposed to work, you can visit http://cogsci.ucsd.edu/~jnelson/js1.html, and compare to my sample. When you click the button "Show Me," the onClick event handler takes the value of the text box called text1, and passes it as an argument to the function MsgBox.

Once the code is functional, you'll want to change what it does, to make it relate to your topic.html page. Mainly, you may be interested in changing the appearance of the button (the "value" tag), the initial contents of the text1 box, and the alert message that the function MsgBox gives the user. For example, if your page is about "My trip to Cancun," you could ask the user where their next vacation is going to be, and wish them a fun time in [the location of their next vacation].

Form 2: change background color (to top)

The second part of the assignment is to incorporate another form, with a text input, in your fortune.html page, that allows the user to set the background color. The command used to set the background color is document.bgColor="[new color]". You can specify a color by its six-digit RGB value. Depending on the color, and on what browser you are using, you may also be able to name a color, e.g. "red," and have the browser interpret that as a particular RGB value.

This part of your fortune.html page should work as follows:

· when the user clicks the button called "changeIt", the background color of their page changes to the color in the text input, and the contents of the text input change be of the form "#RRGGBB ", where RRGGBB is the RGB value of the color they selected. (If they selected purple, it might read "#800088".)

One way to achieve the above objectives is to add the following function to the JavaScript section in the <HEAD> section of the fortune.html page:

function setColor (somethingElse) {

document.bgColor=somethingElse.value;

somethingElse.value=documegrid-align:none;text-autospace:none'>

and also the following form, somewhere in the body of your page:

<INPUT NAME="text1"

TYPE=Text

VALUE="(enter a color)">

<INPUT NAME="changeIt"

TYPE=Button

VALUE=" change color"

onClick="setColor(colorForm.text1)">

</FORM>

You can check an example page, http://cogsci.ucsd.edu/~jnelson/js2.html, to see how it will work, integrated with the fortune translator form and MsgBox function. You may also wish to View the Page Source code on the example page, to see how to integrate new forms and functions in the page.

Form 3: user feedback (to top)

The only thing other form to include in fortune.html is a a form with a textArea in which the user may e-mail you feedback on the page. All you need to do for this is add a form. No additional JavaScript functions will be required. Sample code is posted at http://cogsci.ucsd.edu/~jnelson/js3.html. Text for the form only is given below. Note that you will wish to change the mailto link to send email to your email address.

<FORM NAME="feedbackForm"

method=POST

action="mailto:jnelson@cogsci.ucsd.edu"

enctype="text/plain">

<TEXTAREA NAME="feedbackTextArea"

ROWS=5

COLS=28>

</TEXTAREA>

<BR>

<INPUT type="submit"

VALUE=" send feedback ">

</FORM>

To transmit the contents of the form, use the Post command, to e-mail the form to you. Note only people who visit your page will be able to send you comments only if they have their browsers cofigured to send email. It is also possible – but technically much more difficult – to implement server-side processing of forms, that doesn't require people to have their browsers configured to send email. By this point, the means by which you create a new form should be clear. Go ahead and give it a try.

Important notes on forms and JavaScript: (to top)

· the name of an object in the body of your page does not need to be the same as the name of that object in your function. Here, we refer to funnyForm.text1 in the body of the document, but something in the function MsgBox.

· functions can operate on more than one object, e.g., another form could also use MsgBox.

· there are lots of types of form elements, like buttons, checkboxes, and some others that we'll discuss later. Although the different types of form elements can appear very different from one another, functions that operate on them can be structured in similar ways. Similarly, more than one function can operate on a given object. For instance, you may wish to have one thing happen when a user first moves the mouse over a picture, and another thing happen if the user clicks on the picture.

· JavaScript code is preceded by a <SCRIPT language="JavaScript"> tag. Next, there should be  at the end of the script, to prevent older browsers from reading the code. Remember that HTML comments are of the form . (Newer browsers—e.g., if you are using IE or Netscape 4.0 or higher, you'll be fine—know to process the script, even though it's within a comment.)

· functions appear within curly braces { ... }. In JavaScript functions, it's good programming practice to end lines with semicolons; however, JavaScript is fairly forgiving if you forget a semicolon.

Integrating the forms in an existing page: (to top)

To complete the assignment, you will make a copy of topic.html, called interaction.html, and incorporate the forms and JavaScript functions from fortune.html into interaction.html. Do that now:

cp topic.html interaction.html
chmod o+r interaction.html

Make sure you read this whole section, before you make changes to your page. Once you have done so, you are ready to integrate your forms and JavaScript functions (in fortune.html), into interaction.html. Here we must pay careful note to the structure of the final page:

· there is a head and a body section of the page. The title of the page should appear in the head; the main contents of the page should appear in the body. JavaScript functions generally go in the head.

· The title should be in the head; all other existing parts of the page (except the <HTML> and </HTML> tags) should be in the body.

· there should be only one <BODY> tag. Presumably, you will wish to use the same <BODY bgcolor="RRGGBB" link="RRGGBB" vlink="RRGGBB"> tag that you used in topic.html.

· Where to place the forms on the page is up to you. Standard practice is to put the feedback form at toward the end of the page.

· Feel free to add additional information that will be useful to people who view your page. For instance, you might include the text "I hope you enjoyed my page. Please send me feedback by using the form below:", before the feedback form.

Study the sample code below, and also check the source code at http://cogsci.ucsd.edu/~jnelson/js3.html.

<HTML>

<HEAD>

<!--

function someFunction (arguments) {

// contents of function here

}

function anotherFunction (arguments) {

// contents of function here

}

-->

</SCRIPT>

</HEAD>

<H1> Here is a heading </H1>

Here is more text on the page.

Forms and other parts of the page can be put where you like:

<FORM Name="SomeForm">
//the contents of the form here

</FORM>

After all the content of the page, and all the forms, don't forget to close the body section, and the html:

</BODY>

</HTML>

When you are ready, go ahead and modify your interaction.html page to include the forms of your fortune.html page. Follow the above format, and pay careful attention to the following:

· Before you add forms or JavaScript to interaction.html, make sure your page follows the above style. You may need to add a <HEAD> tag before the title tag.

· Remember that when you close a tag, such as with </BODY>, its attributes, such as bgcolor, are omitted. This is true of all HTML tags. (E.g., if you have <FONT size="+2">, you close the tag with </FONT>, not </FONT size="+2">.)

There will likely be a couple of problems at first, so start small. First, add your version of the fortune translator form, and its MsgBox JavaScript function, to interaction.html. Then, add the other forms and JavaScript functions.

Check our grading criteria

When your interaction.html forms function, without errors, your assignment is complete! The interaction.html page will be graded based on

(1) having all three forms, and their associated JavaScript functions, described in the assignment,

(2) having modified the sample forms and JavaScript functions to be different from the sample code in the assignment notes, and

(3) the interaction.html page, including its forms and JavaScript functions, functioning. It will be graded with Internet Explorer.

More specifically, your final interaction.html page should include:

· a form with a text input and button, and functions that operate on the text input, putting up an "alert" message when the user clicks the button;

· another form with a text input and button, with functions that change the background color of the page to be the color the user has typed in the text input, when the user presses the button. After the page color changes appropriately, the RGB value of the background color (e.g., purple is #800088) should appear in the text input.

· still another form, with a text area, for user feedback, that is submitted using the Post method as email to your email address.

· Note that we haven't specified where on your interaction.html page the new elements should appear. Take this as a design challenge—the object is to make a coherent, usable, and fun page—and redesign your page, if necessary, so that your new form elements mesh well with the page.

Appendix 1: Why not stick with HTML? (to top)

Hypertext is a powerful idea, and the easy integration of sound, pictures, text, and hyperlinks provides new opportunities for communication. However, HTML has some limitations. Consider the following situations, which you might like your page to handle:

· Suppose you want your home page to greet you differently, according to the time of day. Between 5 AM and noon, you want it to say "good morning"; from noon to 6 PM, "good afternoon"; and from 6 PM to 5 AM, "good evening." How do you do this?

Unfortunately, with html, you can't.

· Or suppose you were giving a survey, and you wanted to randomize the order of the options.

For instance, you might be interested in asking people which UC campus is the most fantastic—specifically, whether it is UCSD or Berkeley. But if you ask

What is the most fantastic UC school?

A. UCSD

B. UC Berkeley

C. Some other campus

You'll probably get different responses than if you ask:

What is the most fantastic UC school?

A. UC Berkeley

B. UCSD

C. Some other campus

One way to cope with the fact that the order of options affects how people respond to a question is to randomize the order of the options. To start, you might want half of respondents to randomly get the first version of the question, and half to get the second version of the question. How would you do this?

· Or suppose that you were extremely enamored with Brittney Spears—to the point that you wished to make elaborate Web pages in her honor, for the benefit of yourself and the legions of Brittney fans. For instance, you might like to have a fan page in which you can see what Brittney would look like in different outfits, in different weather conditions, or at different places in the world. What would Brittney look like in the reflection of the fountain outside the Louvre? Would she look better in concert-like dance attire, or in an evening gown?

Summary. Each of these situations illustrates some limitations—problems, if you will—of HTML. HTML is ill suited to providing different Web surfers with different experiences. HTML is static, and cannot provide live animation, or dynamic visual special effects, like a falling waterfall, burning fire, or the ripples caused by tossing a stone in a pond.

But several technologies are available to provide individualized and dynamic browsing experiences. These include Microsoft's active server pages, Java server pages, CGI scripts, Flash, Java, and JavaScript. JavaScript, of these various technologies, has advantages of being powerful, flexible, and relatively easy to learn. That's why we're focusing on it.

Appendix 2: Further JavaScript Resources (to top)

These are compiled at http://cogsci.ucsd.edu/~jnelson/JavaScript.html

· a great tutorial, JavaScript for the Total Non-programmer, may be found at http://www.webteacher.com/javascript/

· O'Reilly publishes a book, JavaScript: The Definitive Guide. This is an excellent resource—and when you're working from campus, you have access to it online. It's at http://online-books.ora.com/mod-bin/books.mod/webref/index.htm

· Netscape, the company that invented JavaScript in the first place (now part of AOL Time Warner) has a vast array of JavaScript resources, at developer.Netscape.com (go to Technologies, and then to JavaScript).

· to find neat scripts, available for public use, go to your favorite search engine, and search for "JavaScript gallery free", or something similar

· For an excellent, extended treatment of how to make use of Web technologies in a sophisticated and user-friendly way, you may wish to take Cognitive Science 187 A, Cognitive Aspects of Multimedia Design, with Prof. David Kirsh.

· remember, "use it or lose it." Make minor modifications to the scripts and forms you used for this assignment, to begin with. Find some scripts off the Web, and build them into your pages. Modify them to learn their structure, and try writing some of your own. It's virtually impossible to do any damage with JavaScript, so jump in head first :-). A couple of good projects to start with include adding a random image or a random link

· we used onClick event handlers to get information from the viewer, when calling JavaScript functions from HTML forms. Sometimes, the person visiting your page will press Enter with the expectation that this will have the same effect as pressing the appropriate button. What happens if you press Enter, rather than clicking the appropriate button, in Netscape? What happens in Internet Explorer? (Presumably, Internet Explorer resets the form, and Netscape does nothing at all.) A nice improvement to the page would involve using onKeyPress or onKeyUp event handlers to check whether the user has pressed Enter, and if so, to call the appropriate JavaScript functions. This improvement would standardize the experience across browsers, and make that experience better correspond to users' expectations.

Contents