|
|
Lines 6-18 create an array of bookInfo objects. This process was discussed in the array object pages.Lines 20-37 define the function checkBook(), which is called in response to a submission of the first form object on the page (lines 64-72). Why did I create two forms on this page? First, just to show that it can be done. Second, I wanted to allow the user to be able to simply hit the [Enter] key to submit the first form. When a submit button is defined or more than one text box (not textarea!) is defined, hitting [Enter] no longer causes the form to submit.
I defined the second form (lines 77-96) separately from the first one so that the second one could have a submit button or another text field (though I didn't implement one for this demo).
checkBook() sets the variable "input" equal to the text that the user entered in the first text box:
var input = form.userFave.value;Then, it cycles through each element of the array "book" (which contains bookInfo objects) and checks whether the name property of the bookInfo object matches the user's input:
if (book[i].name == input)
If it does, a positive response is sent to the textarea named "response", and a break statement is used to jump out of the for loop. If there is a match, the looping variable i will be equal to or less than 4 when the for loop is stops.
If there is no match, the looping variable i will be equal to 5 (because the break statement would never have executed) and a negative response is then sent to the textarea.
A very important element of the method checkBook() is the last statement:
return false;
This return statement is required because the method was called in response to an onSubmit= event handler (line 65). The onSubmit= handler must include or evaluate to the statement "return true" or "return false". Thus, the word return must be placed in front of the method call in the event handler:
onSubmit="return checkBook(this)"
In this case, checkBook() returns "false", so the event handler evaluates to "return false" and the submission is canceled. Note that this does not mean that the script inside checkBook( ) did not run. Instead, canceling a submission means that the input values of the form are NOT sent back to the server hosting the web page. Since we are processing all user input on the user's machine (the client) with JavaScript, there is no need to send back the user's input to the web server.
Before moving on to the second form and its function call, note that the method checkBox( ) requires the user to input the title of the book exactly as it was written into the name property of its corresponding bookInfo object. See the "side note" at the bottom of this page for two methods that can be added to this script to make our script more flexible.
Function moreInfo() at Line 39 is called in response to an onChange= event handler in the selection list in form 2 (Line 85). It receives the form that called it as an argument (Line 39) and uses it to save the select object "booklist" in var "s". Line 45 is an important one:
selection = s.options[s.selectedIndex].text;
This line uses the selectedIndex property of the select object "booklist" to return the integer index value of the option choice that is currently selected on the page. The options are listed on lines 86-90. The options are kept in an array in the DOM. Thus, the first option can referenced by options[0], the second one by options[1], etc. The text property of the options[i] option object returns the value of the text label given to that option (i.e., what shows up on the web page in the selection list). The value of this label is stored in the var selection.
Thus, if "Rebecca" is the selected option, then s.selectedIndex will evaluate to 3. s.options[3].text then accesses the text property of option object option[3], which in this case is "Rebecca".
As before, an array is used to find which bookList object name matches the selected option object text (Line 48). When the proper bookList object name is matched, a string is stored in var out and that string is written to the textarea called "info" in the statement assigning the value property of info to it:
form.info.value = out;
Notice that a \n character is used in the string out (Line 50). This character is called "newline" and will cause a carriage return inside a textarea.
Note that the method checkBox( ) requires the user to input the title of the book exactly as it was written into the name property of its bookInfo object. Side Note on CheckingUser input
This includes not adding any extra spaces to the end or beginning of the input. Try typing in "The Stranger " with an extra space at the end. The script will tell you that your entry doesn't match what's in the array. We can deal with extra spaces at the beginning or end of the user's input by removing them from the string before it is compared to the values in the array. See the stringTrimmer example in this tutorial for one way to do this.
Another problem is that the user must input the book title exactly the way the it is stored in the property value of each bookInfo object. Try typing in "Stranger In a Strange Land". You will get no match because "In" is not capitalized in the bookInfo name property. How can we avoid this problem? One way is to transform the two strings to be compared to all uppercase or all lowercase characters before comparing them.
To do this, use the string methods toUpperCase() or toLowerCase(), using the dot syntax, stringName.toUpperCase(). To implement this change in the above script, we would change line 24:
if (book[i].name == input)
to
if ( book[i].name.toUpperCase() == input.toUpperCase() )The methods toUpperCase() and toLowerCase() return a new string object that is in all upper case or lower case letters, respectively. The function does NOT change the value that calls the method. In otherwords the statement
book[i].name.toUpperCase()
does not change the string property "name" stored in book[i] to being all uppercase. It simply transforms that string and returns it to that place in the script. The transformed string could be captured and stored in a variable if we want to retain it:
var b = book[i].name.toUpperCase()
bhere would now contain the upper case version of book[i].name.
To actually change the value of book[i].name to upper case, we would write:
book[i].name = book[i].name.toUpperCase()
See the tutorial section on Strings for more information on this and related subjects.