A textarea is a form element (control) that allows the user to enter free-form text. It is rendered as a box. Attribute rows specifies the number of rows in the box, and cols specifies the number of columns (width as the number of character positions). The content of the textarea element (between the opening and closing tags) is the initial content of the box. Used in a form, a text area is given a name attribute so that the server may identify it. Here we give it an id attribute so that the JavaScript script may identify it. The content of the text area is available as the value of the value (not innerHTML) attribute of the corresponding object. For an example, consider the following HTML document. The initial rendering is shown just below the listing. Enter text here.

The teaxtarea element specifies an area with two rows and 25 columns. It has an id attribute with value "txt", and the initial text is between then opening and closing tags. This also illustrates another form element, namely, an input element with type="button". This is rendered as a clickable button. The label on the button is the value of the value attribute. The value of the onclick attribute is the code executed when the button is click; in this case, it is a call to copy(), which is defined in JavaScript file prob2ex.js, referenced in the script element. Function copy() copies the content of the text area to the innerHTML of the div element with id "target", just below the button. The next screenshot shows text we have entered in the text area, and the following screenshot shows the result of clicking the button. The following is the definition of copy(). Note that the copied text (value of variable cTxt) is obtained from the value attribute of the object corresponding to the element with id "text" (viz., the textarea element). function copy() { var cTxt=document.getElementById("txt").value, copyRef=document.getElementById("target"); copyRef.innerHTML = cTxt; } For this problem, you are provided the following HTML document (prob2.html, which you download from the assignment site). The rendering is shown just after the listing. Enter text here.

Note that the id of the text area is "inText" and that clicking the button labeled Count calls function count(), defined in file prob2.js, which is referenced in the script element (and which you write). The next screenshot shows text entered in the text area, and the following screenshot shows the result when the Count button is clicked. The counts displayed are exactly the same values provided by Word. Where txt contains text (assumed to have words separated by spaces), txt.split(" ") returns an array of substrings of txt delimited by space characters. Two adjacent spaces determine an empty substring. For example, "a b c" (where there are two spaces between "b" and "c") splits into ["a", "b", "", "c"]. If not for adjacent spaces, the number of words in the text would be just the length of the array we get by splitting the text on spaces. What we have to do is loop over this array and count the number of empty strings in it. The number of words, then, is the length of the array minus this count. (Note that we, like Word, have a rather extended notion of word. For example, "city," counts as a word.) The number of characters (including spaces) is just the length of the text. The number of spaces is the length of the split array minus one (each element in the array but the first is preceded by a space), and the number of non-space characters is the length of the text minus the number of spaces.