Suggested Solution to HW #5 CSCI 4230, Spring 2001

CSCI 4230
Internet Applicaiton Development
Spring 2001
Suggested Solution to Homework #5

(1) For example:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkAll(field) {
    for (i = 0; i < field.length; i++) {
        field[i].checked = true;
    }
    return true;
}

function uncheckAll(field) {
    for (i = 0; i < field.length; i++) {
        field[i].checked = false;
    }
    return true;
}

function toggleAll(field) {
    for (i = 0; i < field.length; i++) {
        field[i].checked = !field[i].checked;
    }
    return true;
}
// End -->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#CCFFFF">

<FORM NAME="myform" ACTION="someprogram.pl" METHOD="get">
Favorite color (check all):<BR>
<INPUT TYPE="checkbox" NAME="color" VALUE="red">red<BR>
<INPUT TYPE="checkbox" NAME="color" VALUE="green">green<BR>
<INPUT TYPE="checkbox" NAME="color" VALUE="blue">blue<BR>
<INPUT TYPE="checkbox" NAME="color" VALUE="yellow">yellow<BR>
<P>
<INPUT TYPE="button" VALUE="Check All Colors" onClick="checkAll(this.form.color)">
    
<INPUT TYPE="button" VALUE="Uncheck All Colors" onClick="uncheckAll(this.form.color)">
    
<INPUT TYPE="button" VALUE="Toggle All Colors" onClick="toggleAll(this.form.color)">
    
<P>
Your Favorite Server Side Technologies: <BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="CGI-Perl">CGI-Perl<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="CGI-C">CGI-C<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="ASP">Acitve Server Pages<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="Cold Fusion">Cold Fusion<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="PHP">PHP<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="Java Servlets">Java Servlets<BR>
<INPUT TYPE="checkbox" NAME="tech" VALUE="JSP">Java Server Pages
<P>
<INPUT TYPE="button" VALUE="Check All Tech" onClick="checkAll(this.form.tech)">
    
<INPUT TYPE="button" VALUE="Uncheck All Tech" onClick="uncheckAll(this.form.tech)">
    
<INPUT TYPE="button" VALUE="Toggle All Tech" onClick="toggleAll(this.form.tech)">
    
</FORM>
</BODY>
</HTML>

(2) For example:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Global porting variable
var NUM_OF_IMAGES = 6;

// Preload img.
vals = new Array
img = new Array;
for (i=1; i<=NUM_OF_IMAGES; i++) {
img[i] = new Image();
img[i].src = "images/img" + i + ".jpg";
}

// current image on display.
var currentImage = 1;

// Get the index of the image to be displayed next.
function nextImageIndex(mode) {
    var result;
    if (mode == "random") {
        do {
            result = Math.floor(NUM_OF_IMAGES * Math.random()) + 1;
        } while (result == currentImage);
        currentImage = result;
        return result;
    }
    else {
        currentImage++;
        if (currentImage > NUM_OF_IMAGES) {
            currentImage = 1;
        }
    return currentImage;
    }
    return 0;
}

// End -->
</script>
</HEAD>
<BODY bgcolor="#ccccff">
Click one of the following buttons to view additional image:
<P>
<FORM>
<INPUT TYPE="button" VALUE="Next Image" onClick='document.theImage.src = img[nextImageIndex("next")].src;'>
    
<INPUT TYPE="button" VALUE="Random Image" onClick='document.theImage.src = img[nextImageIndex("random")].src;'>
<P>
</FORM>
<IMG NAME="theImage" src="images/img1.jpg">
</BODY>
</HTML>