A346/A348 Home Work 1 HTML/JavaScript

Overview

The purpose of the first homework is to introduce some of the basic concepts of HTML and JavaScript.

HTML limits user interaction to a mostly static user interface; a scripting language adds dynamic interaction through programming to that possible in HTML alone. There are two approaches that use client-side scripting for user interaction: 1) define the user interface in HTML but change elements displayed as the user interacts, and 2) generate new HTML as the user interacts.

The following assignments are designed to practice interacting with the user using both HTML and the JavaScript scripting language.

Assignment - 2 parts

1. HTML - Design two Web pages, each should fit completely on one screen.
1. The first page will be used to link to other home work pages. It should be hand created and minimally display:
1. Identification - your name.
2. Navigation - a selection bar at the top of the page with:
   1. Links - link the page to itself,
   2. Links - link to Homework 1, part B below.
   3. Links - link to Homework 1 Assignment 2 memory game described below,
   4. Email - clickable email address to send you mail.
3. Modified date - a last modified time and date. This can be automated, to see how click View |  Source on this page in IE.
2. The second page of Homework 1, Assignment 1. It should be linked from the first page. It should minimally contain or display:
1. Comment - your name in comments, not displayed.
2. Navigation - the same navigation selection bar at the top as in part A.
3. Images - at least one clickable image. When clicked an HTML file should be loaded, the first page is sufficient.
4. Tables - a table with some cells that themselves contain tables. Populate the cells with clickable images or text.
5. Input form - a user input form that links to Yahoo! financial page to produce a chart of a stock recent trading. The Yahoo! financial site is http://finance.yahoo.com. A user should be able to type in a stock symbol and get the corresponding stock performance chart.
6. Modified date - a last modified time and date.
• Install Home Work 1 files to your IUS student directory or other Web server for grading.
• Email instructor with link to the first page. Make the link active so that when clicked a browser will display the page. Try sending it to yourself first to make sure it works.

2.  Memory Game

You probably played a memory game as a child where all tiles were initially face down and you attempted to match one tile with its pair; the tiles were removed on a match or again placed face down when no match. The object is, of course, to match all tiles in the fewest tries.

The following illustrates the start of the game with no tiles matched and after matching 3 pairs while attempting another match.

Initial

After 3 matches

Assignment

Implement the memory game to:

1. arrange matching pairs of tiles randomly in a table of rows and columns,
2. initially the backs of all tiles are exposed,
3. when clicked, a tile is turned over exposing the front, no more than two tiles at a time can have the front exposed,
4. the player indicates when to try again, when selected tiles fail to match the tiles are turned over exposing the back, when two exposed tiles match they are replaced by a special tile,
5. the current number of tries is continually displayed,
6. the player can choose to play a new game at any time.

Suggestions and Insights

1. Random numbers - generate a random integer 0..11 by: Math.floor(Math.random()*12)
    
2. Clickable images - below, the image back.jpg is first displayed, when clicked the function pick(1) is invoked with the parameter value 1:
      
       <A HREF="" onClick="pick(1); return false;">
             <img name="IMAGE1" src="back.jpg" alt="click to flip">
       </a>
      
   One important point is that the object is named IMAGE1 allowing attribute values to be changed in a script, to change the file displayed:
   
        IMAGE1.src = "curly.jpg";
    
3.  Arrays - consider using arrays; they behave much as in C++ or Java but are not typed and automatically expand in size.

    

   • An empty array is defined by:

           var pics = new Array();

   • An array initialized to three strings by:

           var pics = new Array("larry.jpg", "moe.jpg", "curly.jpg");

                               or

           var pics = ["larry.jpg", "moe.jpg", "curly.jpg"];

   • An array initialized to reference (alias) three objects named IMAGE1, IMAGE2, IMAGE3 by:

           var imgObjects = new Array(IMAGE1, IMAGE2, IMAGE3);

       The src attribute of IMAGE1 can now be changed by either of the following:

           IMAGE1.src = pics[2];
           imgObjects[0].src = pics[2];
    

4. Tiles - Use photos of friends or family, pets, cars, etc. Screen shots can also be captured and edited by:
   • Press Alt Prnt Scrn to copy the screen to the clipboard,
   • Use the Paint program to paste from the clipboard and edit the image to the size needed.
   • Some great looking photos from a previous class are available here as thumbnails: Mary, Emma, Sarah, Ryan, Jordan, Ray.
   • I'll post new ones of our class.

Turn in

• Email - Email instructor with link to the first page of Assignment 1.

Getting Started

Home - HTML and XML pages can be browsed in two ways, the simplest is given first.

Browser - The simplest approach is to copy the HTML or other files to your computer and enter the path to the file in the address bar of IE (or other browser). The address bar entry would be similar to: 

• C:\A348\HW1.htm

  OR

• C:\A346\HW1.htm

Internet Information Server (IIS) - Though not needed for this assignment, the IIS can be used on your home system to complete all assignments. The server is intended to be simple to install and administer. It is supplied on the Windows 2000 and XP CD-ROM. See Setting Up the IIS Web Server for detailed installation instructions for XP.

• Administration - The main IIS administrator function is to define virtual directories that are visible to the WWW, this will be examined in detail later in the course. For now, this function can be avoided simply by copying any directories to be visible over the Internet in the directory C:\InetPub\wwwroot created automatically when installing IIS. Unless your login has administrator rights, you will need to login in as Administrator to have access to the C:\InetPub\wwwroot directory.
• Browser access - The name of the local machine is localhost or 127.0.0.1 and can be used as part of the URL to access files stored on your local machine. The file path C:\InetPub\wwwroot\HW1\First.htm can be accessed from a browser on the same machine in at least two ways:
1. http://localhost/HW1/First.htm
2. http://127.0.0.1/HW1/First.htm

IUS - Files stored on the W: directory are accessible to the WWW.

The file path W:\A348\HTML\Syllabus.htm on my IUS directory can be accessed over the WWW by:

• http://homepages.ius.edu/RWISMAN/A348/HTML/Syllabus.htm