CS 101 - Intro to Computing, Spring 2008

Lab 4

JavaScript

• <script> </script> - attributes: type

  This tag is used to separate the JavaScript code from the remainder of the HTML code. The type attribute should have the value of "text/javascript". Also in case the browser viewing the page does not recognize the JavaScript code, all of the code should be enclosed in an HTML comment. The following example shows this done.

  <script type="text/javascript">
  <!-- This is the HTML Comment that hides the JavaScript code from old browsers

  JavaScript code goes here

  // stop hiding the JavaScript code -->
  </script>

  Note the line before the <script> tag also contains a JavaScript comment. The use of the JavaScript comment is very important.

The JavaScript code can add dynamic information to a web page that static HTML code cannot. The use of the JavaScript statement document.write() is very useful for this.

The document object in JavaScript allows a number of useful methods and properties. Check out http://www.w3schools.com/htmldom/dom_obj_document.asp for a discussion of more items.

• document.write()

  The document.write() method allows text information (strings) to be added to the the HTML code. The parameter of the method (the stuff placed between the parentheses) can be a single string or a multiple strings separated by commas. Whatever is written will then be interpreted by the web browser as HTML code, so you can include HTML tags to help format the information being written.

• document.URL

  The document.URL property gives the URL of the current page.

• document.lastModified

  The document.lastModified property gives the date and time that the web page was last modified. Note this property gives the information as a Date object.

The Date object allows JavaScript code to retrieve specific information about the date stored in the Date object. See http://www.w3schools.com/js/js_obj_date.asp for addition information about the Date object.

• new Date()

  This will create a new Date object with the current date and time.

• getMonth() - get month of year (January = 0)
• getDate() - get date within the month (1 - 31)
• getYear() - get year (0 = 1900)
• getDay() - get day of week (Sunday = 0)
• getHours() - get hour of day in 24 hour time
• getMinutes() - get minute of hour
• getSeconds() - get second of minute

  The above methods will return the specified data when used with a Date object that alread has a date stored in it.

Lab Assignment 4

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)
   • the URL of the web page (using the document.URL property)
   • the month, day and year when the web page was last modified (using the document.lastModified property). It is probably simpliest to write this out using a month/day/year format like "2/6/2008". You may need to use the JavaScript addition operator of + for this.
   • the "current" time in hours and minutes. By "current" time, list the time when the page was load. You do not have to keep updating the time value as every minute passes. The time can be listed using a 24 hour clock format.

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 this web page 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 lab4. To submit the file in <filename> for lab4, the turnin command is entered as:

        turnin -c cs101 -p lab4 <filename>
   

   Thus if your file has the name of lab4.html, the command would be:

        turnin -c cs101 -p lab4 lab4.html
   

   To verify what you submitted using the turnin command type:

        turnin -c cs101 -p lab4 -v
   

Grading Criteria

• Your identifying info - 16
• URL using JS - 17
• Last Modified using JS - 17
• Current time using JS - 17
• On web - 17
• Link to CS Home Page - 16 Thanks to that one guy from the 1st section for pointing out this mistake. Extra points, all round!