CSC325 2010F Web and Databases

Warning! The Web site for this class is in beta form.

Laboratory: Javascript

Summary: We ground our learning of Javascript in some hands-on exercises.

Prerequisites: Familiarity with basic HTML.

Preparation

a. Create a Web directory for this lab.

b. Open a browser window onto that directory.

c. Open a browser window to the Javascript reference of your choice.

Exercises

Exercise 1: An Alert (aka Hello World)

We're going to start by looking at exercises that use alert boxes. While alert boxes are annoying and rarely used in good Web pages (except for error reporting), they are a nice way of providing quick feedback on whether or not your program is running correctly.

Create a Web page that links to a separate Javascript program that brings up a simple alert. You may choose the text of the alert.

Exercise 2: A Delayed Alert

Create a Web page that links to a separate Javascript program that brings up a simple alert after five seconds have passed. You may choose the text of the alert.

Exercise 3: A User-Selectable Alert

Create a Web page with two buttons, one that brings up one alert, another that brings up another alert.

Exercise 4: A Customizable Alert

Create a Web page with a field and a button and that brings up an alert whose text contains the text of the field.

Exercise 5: Query Processing

Create a Web page that brings up an alert whose text depends on the query string of the page. (E.g., if the page is animal.html?name=tiger&characteristic=stripes, you should do something with the value of name (which is currently tiger) and characteristic (which is currently stripes).

Exercise 6: Changing Page Contents

Okay, now you've had fun looking dialog boxes. Let's start to explore some more serious changes to the page.

Create a Web page with two parts. In the top section, place some stylized text (e.g., surrounded by a border). In the bottom section, place a simple form with a field and a button. When the user clicks the button, the text in the field should replace the text in the top section.

Exercise 7: Changing Page Contents, Revisited

Extend your solution from the previous page so that it restores the text in the top section after ten seconds.

Exercise 8: Filling Pages Locally

Create a Web page with two parts. In the top section, place an extended set of preformatted text. In the bottom section, place a simple form with a field and a button.

The user should enter the name of a file on the local filesystem. When the user clicks the button, if the file exists, the body of that file should be placed in the preformatted text section. If the file does not exist, you should bring up an alert.

Exercise 9: Filling Pages Globally

Create a new version of the previous page in which the user must supply the URL of a Web page, rather than the path to a local file. (You should do your best to present the fetched value as plain text.)

For Those With Extra Time

Make a list of the security holes we've opened not just in our own applications, but also on our server, by writing those last two program.

 

History

Wednesday, 3 November 2010 [Samuel A. Rebelsky]

 

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Mon Nov 29 09:06:18 2010.
The source to the document was last modified on Wed Nov 3 10:52:12 2010.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/javascript-lab.html.
A PDF version of this document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/javascript-lab.pdf

You may wish to validate this document's HTML ; Valid CSS! ; Creative Commons License

Samuel A. Rebelsky, rebelsky@grinnell.edu

Copyright © 2010 Samuel A. Rebelsky. This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. To view a copy of this license, visit or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.