N341 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 - 3 parts

0.    Assignment 2 below uses photos of our class. Later in the course, we'll need names to match photos so you can help by matching your own now.

• Click here to list class names and photos.
• Find yours and check the button that matches your name and photo.
• Click the Match ME button.

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's 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.
7. Assignment 2 - a clickable link to Assignment 2 given below.

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 Tries

After 3 matches Tries

Assignment

Implement the memory game to:

1. each time the game is played, 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 indicating the tiles have been matched,
5. the current number of tries is continually displayed (you can count only mismatches or the total tries),
6. the player can choose to play a new game at any time, resetting the game to its initial state.

Suggestions and Insights

1. Syntax errors - The browser often just displays the current directory listing on a JavaScript syntax error, not helpful. Use FrontPage (or other development tool) and switch between code and preview modes to execute the script.
    
2. Debugging - The most common means of debugging is to print values as the script executes. The simplest is to define a form with a textarea:

   <form name="debug">
       <textarea name="output" rows=10> </textarea>
   </form>

   and assign values as the script executes (the "\r\n" adds a new line). The following simply prints "Debugging" each time executed; function variables can also be printed.

   document.debug.output.value= document.debug.output.value + "Debugging"+"\r\n";

3. Reset game - Resetting the game is most easily done by reloading the HTML file. The following defines a form with a submit button that when clicked loads MemoryGame.htm from the current directory on the server (or local computer).

   <form name="Memory" action="MemoryGame.htm">
       <input type="submit" value="New Game?">
   </form>

4. Random numbers - generate a random integer 0..11 by: Math.floor(Math.random()*12)
    
5. Clickable images - below, the image Ray.jpg is first displayed, when clicked the function pick is invoked with the parameter value 1:
      
       <img name="IMAGE1" src="Ray.jpg" onClick="pick(1);">
      
   One important point is that the object is named IMAGE1 allowing attribute values to be changed in a script. To change the file displayed from "Ray.jpg" to "curly.jpg":
   
        IMAGE1.src = "curly.jpg";
    
6. Comparing strings - We'd like to be able to compare two strings by (assuming IMAGE1.src defined as above):

   if( IMAGE1.src == "curly.jpg" ) ...

   but the == and != only compare numbers.

   To determine if two strings are the same:

   if( (IMAGE1.src).indexOf( "curly.jpg" ) != -1 ) ...

   The source.indexOf( substring ) function returns the starting source index of the substring or -1 if substring is not in the source string. For example:

   "abcedfg".indexOf("ed")

   returns 3, recall that array indices start at 0.

    

7.  Arrays - consider using arrays; they behave much as in VB, C++ or Java but are not typed and are automatically sized.

    

   • 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"];

   0	1	2
   "larry.jpg"	"moe.jpg"	"curly.jpg"

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

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

   0	1	2
   IMAGE0	IMAGE1	IMAGE2

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

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

8. Functions

   Remember that any JavaScript defined outside a function is executed when the page is loaded. JavaScript inside a function is executed when the function is called.

   When an interface object is clicked, a function can be called. In 5 above, pick( 1 ) is called when IMAGE1 is clicked.

   Suppose we wanted to change the image src attribute of IMAGE1 to "moe.jpg" whenever the IMAGE1 object is clicked. The parameter n has been mapped to correspond to the image object number, so n==1 means IMAGE1.

   function pick( n ) {
       if (n==1) IMAGE1.src="moe.jpg";
   }

   A more general solution using the arrays defined in 7 above would be to use parameter n as array index:

   function pick( n ) {
       imgObjects[ n ].src = pics[ n ];
   }

9. Putting tables/arrays/functions/objects together
   • The board can consist of 3x4 table for the 12 tiles.
   • Each table cell can contain a clickable image object as described in 5 above.
   • Each clickable image is named (e.g. IMAGE1) and, when clicked, calls a function with the number assigned to the image object (e.g. pick( 1 ) for image object numbered 1).
   • A reference to each image object is stored in an array according to the number assigned. In 7 above, a reference to object IMAGE0 is stored at imgObjects[0], etc.
     • For example, when IMAGE1 is clicked, pick( 1 ) is called; the 1 corresponds to the array index.
   • When the image object is clicked, the pick( n ) parameter defines the number of the object. The n value can then be used to flip a tile by changing the src attribute to the image file name to display.

    

10. 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 or size the image by: width="120" height="80".
    • Get some great looking photos from our class.

Turn in

IUS server Install Home Work 1 files to your IUS student directory or other Web server for grading. Email  Email instructor with link to the first page of Assignment 1. 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. Notify rwisman@ius.edu with subject: N341 Homework 1 - Your name

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:\N341\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, XP and Vista CD-ROM. See Setting Up the IIS Web Server for detailed installation instructions for XP and Vista.

• 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 N342 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:\N341\HTML\Syllabus.htm on my IUS directory can be accessed over the WWW by:

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

Files can be copied to the W: drive by:

1. In the browser address bar enter:

   ftp://webftp.ius.edu
    

2. Login using your IUS ADS\username and password. A listing of files on W: should appear.
3. Open the directory containing the files to copy.
4. Copy files to W: