Suggested Solution to HW #5 CSCI 4230, Fall 2001

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

(1) For example:

<html>


<head>
<title>Count words</title>
<script language=Javascript>

<!-- Hide scripts from older browsers.

//
//    Show the line count and the word count
//
function showCounts() {
    var totalWordCount = 0;
    var lineCount = 0;
    var inputString = document.convertForm.inputArea.value;
var wordCounts = new Object();

    if (inputString != "") {
       // Remove last character if it is a \n.
       // If not, then the next split statement will create an erroneous empty
       // line as the last element of lineArray.
       if (inputString.charAt(inputString.length-1) == "\n") {
           inputString = inputString.substring(0, inputString.length-1);
       }

       // set line count.
       var lineArray = inputString.split("\n");
       lineCount = lineArray.length;

       // set word count.
       var tempArray;
       for (var i=0; i<lineArray.length; i++) {
           tempArray = lineArray[i].split (/\W+/);

           //   Only non-empty words after splitting are counted.
           for (var j=0; j<tempArray.length; j++) {
                if (tempArray[j] != "") {
     if (wordCounts[tempArray[j].toLowerCase()]) {
      wordCounts[tempArray[j].toLowerCase()]++;
     }
     else {
      wordCounts[tempArray[j].toLowerCase()] = 1;
     }
                    totalWordCount++;
                }
           }
       }
    }

// Show total counts
    document.convertForm.lineCount.value = lineCount;
    document.convertForm.wordCount.value = totalWordCount;
// Show individual counts
    document.convertForm.outputArea.value = "";

var words = new Array();
for (var prop in wordCounts)
words[words.length] = prop;
words.sort();

for (var i = 0; i <words.length; i++) {
document.convertForm.outputArea.value += (words[i] + ": " + wordCounts[words[i]] + "\n");
}
} // show counts.

// -->
</script>
</head>

<body bgColor="#ccccff">

<h3 style="color:blue;">Counting words</h3>
Type (or copy) text into the input box and click the button to get word count.

<p>
<form name="convertForm">
Input Text:
<br>
<textarea name="inputArea" cols="60" rows="5"></textarea>
<p>

<input type="button" name="Count" value="Count words!" onClick="showCounts()">
   

<h3 style="color:blue;">Output Area</h3>
Word Count:
   
<input type="text" name="wordCount" size="7">
   
Line Count:
<input type=text name="lineCount" size="7">
   
<p>
Output Text:
<br>
<textarea name="outputArea" cols="60" rows="9"></textarea>
</form>

</body>
</html>

(2) Many solutions are reasonable, for examples,

body {
font-family: Verdana;
color: #000000;
background-color: #FFFFCC
}
.box {
float: right;
width: 300px;
border: 3px #0000FF double;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.chapter {
font-size: large;
background-color: #CC99FF
}