CS 101 - Intro to Computing, Spring 2008

Lab 6

JavaScript

• <div> </div> - attributes: id

  The <div> tag allows us to create a division or section in a web page that can then be accessed or treated in some special manner. Cascading Style Sheets use this tag quite often to set up custom formatting of a section of a web page.

  The id attribute allows us to give a unique identification for the element. Note that the id attribute can be used with just about any HTML tag. Once the HTML element has a unique id, it can be accessed from the HTMl Document Object Model (DOM) by use of the document.getElementById() method. For more discussion and an example of getElementById() check out http://www.w3schools.com/htmldom/met_doc_getelementbyid.asp.

For this lab, we will want to explore the HTML DOM innerHTML Property. This property allow us to have access to the HTML text that was used to describe an element of a web page. This access allows us to both retrieve or change the current element. Check out http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp for a simple discussion of this and the following "TryIt" sections:

• Example of retrieving the HTML text via innerHTML
• Example of changing the HTML text via innerHTML
• More complicated example of changing the HTML text via innerHTML (perhaps too complicated)

• prompt (string1, string2)

  This is another built-in JavaScript function. It takes two strings as its parameters. The prompt function will display a dialog box on the computer. The dialog box will display the first parameter string as its message. The dialog box will also have a text field for the user to input a value. The second parameter string will be the default value for the text field.

  The dialog box also has two buttons: "cancel" and "OK". When the user clicks the "OK" button, the value in the text field is returned by the prompt function. When the user clicks the "cancel" button, the null value is returned by the prompt function. The null value is a special string value. It is written without quotes, so it is not the same as the string "null" nor the empty string ("").

Lab Assignment 6

For this lab assignment, complete the following:

1. Create an HTML file that lists:
   • your name
   • day and time of your CS 101 lab section (i.e. Wednesday at 9:00)
   • a button that invokes a JavaScript function. Check out lab6template.html.
   • a <div> section that will change as the user interacts with the web page.

   When the button is clicked, the JavaScript function is to prompt the user for some input and whatever the user inputs is added/appended to the <div> section of the web page. Use the string concatentation operator "+" to add/append the new text to the <div> section of the web page. Note that if the user types in HTML tags, they will be processed by the browser.

2. This web page must be placed in your web space (in your WWW directory) on your CS account.

3. You are also required to put a link on your CS Home Page to the page you created for this lab.

   Verify that your link and the file are viewable via a web browser from the URL of:

        http://www.cs.uic.edu/~USERID
   
   where USERID is your CS account login name.
   

   You can check this out via the link to your home page on the CS 101 Student List page. Once you are at your home page, follow the link you added to your home page for this lab assignment.

4. You are also to submit the HTML file electronically by using the UNIX turnin command.

   To use the UNIX turnin command to electronically hand-in your html file using the project name of lab6. To submit the file in <filename> for lab6, the turnin command is entered as:

        turnin -c cs101 -p lab6 <filename>
   

   To verify what you submitted using the turnin command type:

        turnin -c cs101 -p lab6 -v
   

Grading Criteria

• Identifying Info - 33
• Working Button - 33
• Correctly Appends to some <div> tag - 34