cmpt165

Spring 2007

CMPT 165-D2 @ Surrey: Lab 7

The objective of this lab is to continue familiarizing yourself with JavaScript programming, and adding JavaScript to your XHTML pages. In particular, you will experiment with string handling, opening new windows, and using buttons.

  1. Begin this lab by downloading this XHTML file. This file contains the necessary tags to load in your JavaScript file. Make sure you recognize and understand what they are.

    As you've been shown in class, you are going to create a separate file, called lab7.js, where you will write your JavaScript program. You can use Notepad to create this file. (You may need to change the name of the JavaScript program listed in the XHTML document you just downloaded).

  2. In your JavaScript file, add two lines. Line one is a prompt that asks the user to type in their first name. Store this result in a variable called "first_name". Line two is a prompt that asks the user to type in their last name. Store this result in a variable called "last_name". Recall that a prompt has two variables, the message to the user (e.g. "Enter your first name..." etc) and the default entry -- that is, the entry that be used if the user does not type anything in and just clicks OK (or hits Return).

    Next, create a new variable "full_name" that contains both the first and the last name. Display the full name using a single alert dialog box.

    Using the new full_name string that you have created, change the name to upper case. Then determine the character that is stored at position 3 in the string array. Create another alert (just one) that displays the full name, and some message indicating what the character is at location 3.

    Add one more prompt to your program and ask the user for a list of three friends, separated by commas. Store this in a string variable called "friends". Using the String.split() method we have discussed in class, split this list of friends up so that each friend's name is stored by itself as an element in an array. Recall that by assigning the result of String.split() to a variable, that variable now contains an array, where each element of the array holds a portion of the original string -- where it is split up depends, of course, on the delimeter chosen (refer to the lecture notes). Notice what happens if the user separates the names by commas and spaces -- how could you handle this?

    Next, assign each friend (from the array you have just created) to its own variable: "friend1", "friend2", "friend3". Output these friends as a single string with a "&" inbetween each name, using a single alert box.

    Finally, download the popup.html file that was demonstrated in class. Note that you will need to create an XHTML document called "pop.html" that will be loaded when the window pops up. This is an XHTML like any other you have created, except also note that you can adjust the dimensions and features of the pop-up window in which it is displayed. Some of these dimensions and features were demonstrated in class (refer to the lecture notes from Wednesday for a full list of what features are available), but now is your chance to figure out what the remaining features/dimensions do.

  3. Finally, upload your XHTML and JavaScript files to the course web server. Load your pages and see what happens.

    4. When you're done, show your latest XHTML and JavaScript files to your lab TA. Demonstrate the string manipulation you have done in your file "lab7.js" and finally demonstrate your "popup.html" page.

    Please note that you are expected to keep a copy of the work that you have done. You can keep a record on the student server (SIAT), a portable hard drive (e.g. key drive), or simply by email the URL you have created to yourself.