N341 Home Work 1 HTML/JavaScript

Modified:

Essentials and Downloads

Match your name and photo.
Download the class photo ZIP file and place photos in a directory named \N341\HW1. Put all homework files in HW1 subdirectory.
1. Zone.Identifier files are created by IE can all be deleted.
Download class names, emails and photos in semicolon separated fields. Copy and save to N341\HW1\HW1.txt

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. 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.

The first page will be used to link to ALL other home work pages.
It should be hand created and minimally display:

Identification - your name.
Navigation - a menu (selection) bar at the top of the page with:
1. Links - link the page to itself,
2. Links - link to second page below.
3. Email - clickable email address to send you mail.
Modified date - a last modified time and date. This can be automated, to see how click View | Source on this page in IE.

The second page should be linked from the first page above.
It should minimally contain or display:

Comment - your name in comments, not displayed.
Navigation - the same navigation selection bar at the top as in first page.
Images - at least one clickable image. When clicked an HTML file should be loaded, the first page is sufficient.
Tables - a table with some cells that themselves contain tables. Populate the cells with clickable images or text.
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 valid stock symbol and get the corresponding stock performance chart.
Modified date - a last modified time and date.
Assignment 2A, 2B, 2C - add a clickable link to individual HTML files for Assignment 2A, 2B and 2C given below.

2. JavaScript

Part A View video.

Implement a dynamic user interface that turns a light ON or OFF by displaying the images at right.

Some hints:

Right click on the light bulb images and save.
In FrontPage, save the following in the same directory as the two image files, then Preview. HTML can display the ON image by:

<img src="on.png" />
We'd like to change the image without redrawing the browser display, the most general approach is using innerHTML which requires a tag name.
The following uses the non-displaying span element to name the tag "light".

<span id="light"> <img src="on.png" /> </span>
Adding the JavaScript can change the HTML of the "light" tag from <img src="on.png" /> to <img src="off.png" />

<script language="JavaScript">
light.innerHTML = '<img src="off.png" />' ;
</script>

Clicking the HTML button executes the JavaScript function flip().

When executed 3 or more times the OFF image is displayed.

<span id="light"> <img src="on.png" /> </span>

<form name="Example0">
     <INPUT type="button" value="Change" name="Switch" onClick="flip()" />
</form>

<script language="JavaScript">
   var times = 0;

   function flip() {
      alert("Change button clicked:" + times);
      document.Example0.Switch.value = "Change " + times;
      times = times + 1;
      if(times > 3) 
         light.innerHTML = '<img src="off.png" />' ;
      else 
         light.innerHTML = '<img src="on.png" />' ;
  }

</script>

Consider using an if-else statement to check a Boolean variable, changing true-to-false or false-to-true each time the light changes.
Note that in the above JavaScript, times is defined outside any function so is a global variable.

Parts 2B and 2C

For B and C, you should read through the below description of Data services and Dynamic User Interface first, then complete the assignments in order.
Use the course Web server address for testing in a browser: http://iu-...

B View video.
1. Modify one line in Example 3 below to display, given a person's name, their full name and photo, and clicking the photo sends the person email using the mailto attribute.
C View video.
1. Display one photo and name at a time, moving to the next person or previous person in the list when a button is clicked.

Suggested Start for B and C

The assignment uses photos and names of our class. We need names to match photos but you'll need to help by matching your own.

Click here to list class student names and photos. This file should be ready the day following the first class.

Find yours and check the button that matches your name and photo.

Click the Match ME button.

Download the class photo ZIP file and extract the photo files to a directory named \N341\HW1.

Put all files in HW1 subdirectory.

Download class names, emails and photos in semicolon separated fields:

Copy from the browser screen, paste and save to HW1.txt

Data services

Data services can provide dynamic data from over the Web (Web services) such as weather radar images or static data from files.

In this assignment, we will create a JavaScript photo gallery from the class photo information stored as a text file on your computer.

AJAX (asynchronous JavaScript and XML) is commonly used to describe the techniques employed in the assignment, though for simplification, we are using a semicolon delimited text file for data rather than than XML.

The data is organized for each person as: name; photo; email each separated by ; to allow splitting into a string array.

Shato, William Paul;1.jpg;wshato@ius.edu;
Wisman, Raymond F.;2.jpg;rwisman@ius.edu;
Abourabine, Kristin M;3.jpg;kabourab@ius.edu;
Adams, Vanessa Rene;4.jpg;vadams@ius.edu;
Apple, William;5.jpg;wapple@indiana.edu

The following examples work through the concepts and techniques needed to implement the assignment.

Dynamic User Interface

Save the below example in the same directory with HW1.txt and the photo images.

HTML is static but can be changed dynamically by JavaScript.

The following JavaScript displays the form:

Display the photo: <span id="display">Your picture</span> here.

<script type=text/javascript>
   function showPhoto() {
      display.innerHTML = "<img src='2.jpg'/>";
   }
</script>

<form name="Example1">
   <input type=button value="Show" onclick="showPhoto()"/>
</form>

Display the photo: Your picture here.

Clicking Show would insert the HTML code to display an image.

<span id="display">Your picture</span> here.

is changed by:

display.innerHTML = "<img src='2.jpg'/>";

to:

<span id="display"><img src='2.jpg'/></span> here.

Example 1

Save the example in the same directory with HW1.txt and photo images.
Load the example into IE or other browser, FrontPage cannot execute.

Notice that:

There are ' inside the " of the element: "<img src='2.jpg' />"
<span id="display">Your picture</span> has text Your picture between <span> and </span>.
Always put some text there, otherwise, it is an error in some cases.

Example 1<br/>

Display the photo: <span id="display">Your picture</span> here.

<script type=text/javascript>
   function showPhoto() {
      display.innerHTML = "<img src='2.jpg'/>";
   }
</script>

<form name="Example1">
    <input type=button value="Show" onclick="showPhoto()"/>
</form>

Display the photo: here.

InnerHTML

The two parts that dynamically changes what the user sees is:

<span id="display">Your picture</span>

display.innerHTML = "<img src='2.jpg'/>"

where:

display is the element name.
display.innerHTML changes Your picture to <img src='2.jpg'/>

Combining Data and a Dynamic User Interface

Shato, William Paul;1.jpg;wshato@ius.edu;
Wisman, Raymond F.;2.jpg;rwisman@ius.edu;
Abourabine, Kristin M;3;kabourab@ius.edu;
Adams, Vanessa Rene;4.jpg;vadams@ius.edu;
Apple, William;5.jpg;wapple@indiana.edu

Data retrieved from a data service can be used to dynamically update the page.

The important ideas below are:

req = new ActiveXObject("Microsoft.XMLHTTP") - Creates an object capable of retrieving data from a Web server or file.

To determine the browser to create the correct HTTP request object:

if(typeof ActiveXObject != "undefined")                             // IE
       var req = new ActiveXObject("Microsoft.XMLHTTP");
   else                                                                          // Other browsers
       var req = new XMLHttpRequest();

req.open('GET', 'hw1.txt', false) - Sends a GET request, which returns the contents of the hw1.txt file.
s=req.responseText - Assigns s the response from the file:
s = "Shato, William Paul;1.jpg;wshato@ius.edu;Wisman, Raymond F.;2.jpg;rwisman@ius.edu; ..."
myArray = s.split(";") - Splits the string s at ; into a String array. The array contents include:

Wisman, Raymond F.;2.jpg;rwisman@ius.edu (the 2nd person) split in the array locations:
- myArray[3] = Wisman, Raymond F.
- myArray[4] = 2.jpg
- myArray[5] = rwisman@ius.edu
display.innerHTML="<img src='"+myArray[4]+"'/>"; - Dynamically change the text to:

<img src = '2.jpg'/>

which displays the photo.

Example 2

Save the example in the same directory with HW1.txt and photo images.

Load the example into IE or other browser, FrontPage cannot execute.
Use the course Web server address for testing in a browser: http://iu-...

Example 2<br/>
Display the photo: <span id="display">.</span> here.

<script type=text/javascript>
   if(typeof ActiveXObject != "undefined")                             // IE
       var req = new ActiveXObject("Microsoft.XMLHTTP");
   else                                                                             // Other browsers
       var req = new XMLHttpRequest();

req.open('GET', 'hw1.txt', false);
req.send(null);

s=req.responseText;

var myArray = s.split(";");
function showPhoto() {

    alert( "<img src='"+myArray[4]+"'/>" );
    display.innerHTML="<img src='"+myArray[4]+"'/>";
}
</script>

<form name="Example2">
<input type=button value="Show" onclick="showPhoto()"/>
</form>

Display the photo: . here.

HW1.txt example

Shato, William Paul;1.jpg;wshato@ius.edu;
Wisman, Raymond F.;2.jpg;rwisman@ius.edu;
Abourabine, Kristin M;3;kabourab@ius.edu;
Adams, Vanessa Rene;4.jpg;vadams@ius.edu;
Apple, William;5.jpg;wapple@indiana.edu

Forms and Parameter passing

User input is through a form text box, button, etc.

In the following form, a name can be entered and the button clicked, producing the same results as above.

Display the photo: . here.

The key change is that we now need to search the array for a string, the name entered.

We can do a linear search by iterating through the array searching for an approximate, "Ray" approximately matches "Raymond", or is a substring.

"Raymond".indexOf("mon") returns 3

"Raymond".indexOf("Fred") returns -1

If an approximate match is found, change the innerHTML to the image.

Other changes are:

<input type=text id="Name"/> - Defines the text box with the id of Name.
showPhoto( document.Example3.Name.value ) - Calls the function showPhoto() with the actual parameter of the value of the text. document.Example3.Name is the complete identifier of the text box with id Name.
function showPhoto( findName ) - The formal parameter, findName, will have the value of the actual parameter: document.Example3.Name
if( findName == "" ) return; - return from function if no name.
for(i=0; i<myArray.length; i++) - Iterate over the length of the String array.
if( myArray[i].indexOf( findName ) != -1 ) - If the index is != -1, a match has been found.
return - returns from the function so only the first match is displayed.

Example 3

Save the example in the same directory with HW1.txt and photo images.
Load the example into IE or other browser, FrontPage cannot execute.
Use the course Web server address for testing in a browser: http://iu-...
Enter Ray for the name.

Example 3<br/>
Display the photo: <span id="display">.</span> here.

<script type=text/javascript>
   if(typeof ActiveXObject != "undefined")                             // IE
       var req = new ActiveXObject("Microsoft.XMLHTTP");
   else                                                                             // Other browsers
       var req = new XMLHttpRequest();

   req.open('GET', 'hw1.txt', false);
   req.send(null);
   s=req.responseText;

   var myArray = s.split(";");
   function showPhoto( findName ) {
    if( findName == "") return;

    for(i=0; i<myArray.length; i++)
         if( myArray[i].indexOf( findName ) != -1 ) {
              display.innerHTML="<img src='" + myArray[i+1] + "'/>";
              return;
         }
}
</script>

<form name="Example3">
<input type=button value="Show" onclick="showPhoto( document.Example3.Name.value )"/>
<input type=text id="Name"/>
</form>

Example 4

Save the example in the same directory with HW1.txt and photo images.
Load the example into IE or other browser, FrontPage cannot execute.
Use the course Web server address for testing in a browser: http://iu-...

This example retrieves a complete list and displays each name as a hyperlink to the corresponding photo.

myArray = s.split(";") - Splits Wisman, Raymond F.;2.jpg;rwisman@ius.edu; into a String array. The contents are:
- myArray[0] = Wisman, Raymond F.
- myArray[1] = 2.jpg
- myArray[2] = rwisman@ius.edu
"<a href='" + myArray[i+1] + "'>" + myArray[i] + "</a>" becomes:

<a href = '2.jpg'>Wisman, Raymond F.</a>

Note the single ' inside the double ".

Example 4<br/>
<span id="displayList">.</span>

<script type=text/javascript>
   if(typeof ActiveXObject != "undefined")                             // IE
       var req = new ActiveXObject("Microsoft.XMLHTTP");
   else                                                                             // Other browsers
       var req = new XMLHttpRequest();

req.open('GET', 'hw1.txt', false);
req.send(null);

s=req.responseText;

var myArray = s.split(";");

var result="";

for(i=0; i<myArray.length; i=i+3)
     result=result + "<a href='" + myArray[i+1] + "'>" + myArray[i] + "</a><br/>";

displayList.innerHTML=result;
</script>

Produces the clickable hyperlinks to photos.

Shato, William Paul
Wisman, Raymond F.

Hints

<a href='mailto:obama@whitehouse.gov'>President</a> is HTML for sending email via a text link.

<a href='mailto:obama@whitehouse.gov'><img src='obama.jpg'/></a> is HTML for sending email via an image link.

myArray.length is the length or number of elements in myArray.

Define a global variable to index myArray to the current image to display.

Define a form in HTML with the two buttons Next and Previous.

The Next button should execute function next() when clicked.

<input type=button value="Next" onclick="next( )"/>

Function next() should increment the global index and assign displayList.innerHTML the current image to display.

Turn in

HTML and JavaScript

Install Home Work 1 files for Assignment 1, 2A, 2B and 2C to course Web server for testing and grading by instructor.

Use the course Web server address for testing in a browser: http://iu-...

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