cmpt165

@SFUSurrey

Classes:

MWF 1:30-2:20 -- SUR 2600

Labs (Thursdays):

D201: 1:30-2:20 -- SUR 3140

D202: 1:30-2:20 -- SUR 3130

D203: 2:30-3:20 -- SUR 3140

D204: 2:30-3:20 -- SUR 3130

D205: 3:30-4:20 -- SUR 3130

D206: 4:30-5:20 -- SUR 3140

cmpt165

Spring 2007

CMPT 165-D2 @ Surrey: Lab 8

The objective of this lab is to continue familiarizing yourself with JavaScript programming, and adding JavaScript to your XHTML pages.

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 with the other labs, create a file called lab8.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. For the first part of your lab, you will use the confirm dialog box that we talked about in lecture 13 to get feedback from the user (see lec13.ppt in WebCT -- in particular refer to slide 6 of 20 for an example). Ask the user if they would like the background of the current page to be changed to yellow. If they click OK, the background should change to yellow. If they click Cancel, the background should stay the same colour.

3. Next, add a form to your page using the <form> element. In that form, add a text box. Recall that a text box is assigned to the <input> element like so <input type="text" value="" /> Note that whatever value you assign to the value attribute will be displayed in the text box when you load the page. Try this now. Load your page so far, and look at the text box. Now change the value attribute to equal some other string (i.e. not the empty string). Reload your page and observe.

4. Recall there are two ways to refer to a particular element in an XHTML document assuming it has a unique identifier. Add the id attribute to your textbox, and assign it to some string.

   1. In the first case, we can use the getElementById() method. This method is part of the window.document object that defines things about the current XHTML document. To access any particular element, we can simply type window.document.getElementById("id_of_element"). To refer to an attribute of that particular element you can simply type window.document.getElementById("id_of_element").attribute, where attribute is any attribute relevant to that element. Note that if the attribute is not currently assigned (i.e. is mentioned within the element tags), you can still assign it to something. A good example of this is the value attribute of a text box. You might wish to leave the text box empty to start, and thus define it as <input type="text"> id="some_id". However, you can later change this using JavaScript by making window.document.getElementById("some_id").value equal to some string value. Once that portion of the JavaScript code runs, the contents of the text box will be changed.

   2. The second way we can refer to a particular element using its id is a little more direct: window.document.forms.form_name.id_of_element, while window.document.forms.form_name.id_of_element.attribute refers to any attribute associated with that particular element.

   Keeping all of this in mind, now add one more <input> element for a button. Recall we saw this in class: <input type="button" value="what the button says" id="id_for_your_button" />.

   Write a function that when called will modify the contents of your text box so that it contains some other string (that string can be anything you choose). Call this function by setting the onclick event handler. Recall that any event handler can be an attribute of an element. Since we only want this function to run when we click the button (and not any other time), add the onclick="your_function_name()" to your button element. Run your program and see what happens.

5. Finally, we have seen a variety of other events and event handlers (in particular, refer to lec15.ppt). Try at least two other event handlers and get them to change some aspect of your page (e.g. text box content, background colour, text colour via the style.color -- more of these are listed on slide 16 of lec16.ppt).

Make sure you have uploaded the final version of your XHTML and JavaScript files to the course web server. Load your pages and see what happens.

When you're done, show your latest XHTML and JavaScript files to your lab TA, and what they do.

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.