EXERCISE 12.1: Cut-and-paste the string.html text into a new HTML document and load this page to verify that it behaves as described.Add an additional button labeled "Click for LowerCase". When this button is clicked, the contents of the text box should be made lower-case (using the toLowerCase string function).
<HTML> <!-- string.html 8/21/2000 --> <!-------------------------------------------------------> <HEAD> <TITLE> String Fun </TITLE> <SCRIPT LANGUAGE="JavaScript"> function getLength(theStr) // Assumes: theStr is a string value. // Returns: the length of the string. { var length; length = theStr.length; return length; } function toAllCaps(theStr) // Assumes: theStr is a string value. // Returns: the string in all uppercase. { var allCaps; allCaps = theStr.toUpperCase(); return allCaps; } function toAllLower(theStr) // Assumes: theStr is a string value. // Returns: the string in all lowercase. { var allLower; allCaps = theStr.toLowerCase(); return allLower; } </SCRIPT> </HEAD> <BODY> <CENTER> <H2>String Fun</H2> <FORM NAME="StringForm"> Enter a string: <INPUT TYPE="text" NAME="str" SIZE=20 ONCHANGE="document.StringForm.strLength.value = getLength(document.StringForm.str.value);"> has length <INPUT TYPE="text" NAME="strLength" SIZE=3 VALUE=0 ONFOCUS="blur();"> <BR><BR> <INPUT TYPE="button" VALUE="Click for UpperCase" ONCLICK="document.StringForm.str.value = toAllCaps(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for LowerCase" ONCLICK="document.StringForm.str.value = toAllLower(document.StringForm.str.value);"> </FORM> </CENTER> </BODY> </HTML>
EXERCISE 12.3: Define a function named reverse that takes a string as input and returns a copy of that string in reverse order. For example, the function call reverse("abcd") should return the string "dcba". Add this function definition to the HEAD of your string.html page and add an additional button in the BODY that enables the user to reverse the contents of the text box.
<HTML> <!-- string.html 8/21/2000 --> <!-------------------------------------------------------> <HEAD> <TITLE> String Fun </TITLE> <SCRIPT LANGUAGE="JavaScript"> function getLength(theStr) // Assumes: theStr is a string value. // Returns: the length of the string. { var length; length = theStr.length; return length; } function toAllCaps(theStr) // Assumes: theStr is a string value. // Returns: the string in all uppercase. { var allCaps; allCaps = theStr.toUpperCase(); return allCaps; } function toAllLower(theStr) // Assumes: theStr is a string value. // Returns: the string in all lowercase. { var allLower; allCaps = theStr.toLowerCase(); return allLower; } function reverse(strng) // Assumes: strng is a string // Returns: a copy of strng in reverse order { var i, rev; rev = ""; for(i = 0; i < strng.length; i = i + 1) { rev = strng.charAt(i) + rev; } return rev; } </SCRIPT> </HEAD> <BODY> <CENTER> <H2>String Fun</H2> <FORM NAME="StringForm"> Enter a string: <INPUT TYPE="text" NAME="str" SIZE=20 ONCHANGE="document.StringForm.strLength.value = getLength(document.StringForm.str.value);"> has length <INPUT TYPE="text" NAME="strLength" SIZE=3 VALUE=0 ONFOCUS="blur();"> <BR><BR> <INPUT TYPE="button" VALUE="Click for UpperCase" ONCLICK="document.StringForm.str.value = toAllCaps(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for LowerCase" ONCLICK="document.StringForm.str.value = toAllLower(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Reverse" ONCLICK="document.StringForm.str.value = reverse(document.StringForm.str.value);"> </FORM> </CENTER> </BODY> </HTML>
EXERCISE 12.5: Assuming word = "smarmy", try to predict the values returned by each of the following calls to substring:word.substring(0, 5) word.substring(4, 5) word.substring(1, word.length) word.substring(0, word.length-1)
word.substring(0, 5) ==> "smarm" word.substring(4, 5) ==> "m" word.substring(1, word.length) ==> "marmy" word.substring(0, word.length-1) ==> "smarm"
EXERCISE 12.7: Define a function named rotateRight that takes a string as input and returns a copy of that string with the characters rotated one position to the right. That is, the first character is shifted from index 0 to index 1, the second character is shifted from index 1 to index 2, and so on, with the last character shifted back around to index 0. For example, the function call rotateRight("abcde") should return the string "eabcd". Add this function definition to the HEAD of your string.html page and add an additional button in the BODY that enables the user to rotate the contents of the text box to the right.Hint: to rotate a string to the right, you must first break it into two pieces, the substring starting at the beginning and continuing up to the last character and the last character in the string. If you then concatenate them in reverse order, with the character first and substring second, the result is the desired string. For example,
rotateRight("abcde") = "e" + "abcd" = "eabcd"
<HTML> <!-- string.html 8/21/2000 --> <!-------------------------------------------------------> <HEAD> <TITLE> String Fun </TITLE> <SCRIPT LANGUAGE="JavaScript"> function getLength(theStr) // Assumes: theStr is a string value. // Returns: the length of the string. { var length; length = theStr.length; return length; } function toAllCaps(theStr) // Assumes: theStr is a string value. // Returns: the string in all uppercase. { var allCaps; allCaps = theStr.toUpperCase(); return allCaps; } function toAllLower(theStr) // Assumes: theStr is a string value. // Returns: the string in all lowercase. { var allLower; allLower = theStr.toLowerCase(); return allLower; } function reverse(strng) // Assumes: strng is a string // Returns: a copy of strng in reverse order { var i, rev; rev = ""; for(i = 0; i < strng.length; i = i + 1) { rev = strng.charAt(i) + rev; } return rev; } function rotateRight(strng) // Assumes: strng is a non-empty string // Returns: a copy of strng with each char shifted to the left { return strng.charAt(strng.length-1) + strng.substring(0, strng.length-1); } </SCRIPT> </HEAD> <BODY> <CENTER> <H2>String Fun</H2> <FORM NAME="StringForm"> Enter a string: <INPUT TYPE="text" NAME="str" SIZE=20 ONCHANGE="document.StringForm.strLength.value = getLength(document.StringForm.str.value);"> has length <INPUT TYPE="text" NAME="strLength" SIZE=3 VALUE=0 ONFOCUS="blur();"> <BR><BR> <INPUT TYPE="button" VALUE="Click for UpperCase" ONCLICK="document.StringForm.str.value = toAllCaps(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for LowerCase" ONCLICK="document.StringForm.str.value = toAllLower(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Reverse" ONCLICK="document.StringForm.str.value = reverse(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Rotate Right" ONCLICK="document.StringForm.str.value = rotateRight(document.StringForm.str.value);"> </FORM> </CENTER> </BODY> </HTML>
EXERCISE 12.9: Cut-and-paste this function definition into the HEAD of your string.html page and add an additional button in the BODY that enables the user to strip non-letters from the contents of the text box. Verify that this function behaves as desired. Note: since stripping non-letters from the word in the text box can change its length, you should be sure to update the contents of the strLength box as well when the button is clicked.
<HTML> <!-- string.html 8/21/2000 --> <!-------------------------------------------------------> <HEAD> <TITLE> String Fun </TITLE> <SCRIPT LANGUAGE="JavaScript"> function getLength(theStr) // Assumes: theStr is a string value. // Returns: the length of the string. { var length; length = theStr.length; return length; } function toAllCaps(theStr) // Assumes: theStr is a string value. // Returns: the string in all uppercase. { var allCaps; allCaps = theStr.toUpperCase(); return allCaps; } function toAllLower(theStr) // Assumes: theStr is a string value. // Returns: the string in all lowercase. { var allLower; allLower = theStr.toLowerCase(); return allLower; } function reverse(strng) // Assumes: strng is a string // Returns: a copy of strng in reverse order { var i, rev; rev = ""; for(i = 0; i < strng.length; i = i + 1) { rev = strng.charAt(i) + rev; } return rev; } function rotateRight(strng) // Assumes: strng is a non-empty string // Returns: a copy of strng with each char shifted to the left { return strng.charAt(strng.length-1) + strng.substring(0, strng.length-1); } function stripNonLetters(strng) // Assumes: strng is a string // Returns: a copy of strng with all non-letters removed { var alphabet, newStr, i; alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; strng = strng.toUpperCase(); newStr = ""; for (i = 0; i < strng.length; i++) { if (alphabet.indexOf(strng.charAt(i)) != -1) { newStr = newStr + strng.charAt(i); } } return newStr; } </SCRIPT> </HEAD> <BODY> <CENTER> <H2>String Fun</H2> <FORM NAME="StringForm"> Enter a string: <INPUT TYPE="text" NAME="str" SIZE=20 ONCHANGE="document.StringForm.strLength.value = getLength(document.StringForm.str.value);"> has length <INPUT TYPE="text" NAME="strLength" SIZE=3 VALUE=0 ONFOCUS="blur();"> <BR><BR> <INPUT TYPE="button" VALUE="Click for UpperCase" ONCLICK="document.StringForm.str.value = toAllCaps(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for LowerCase" ONCLICK="document.StringForm.str.value = toAllLower(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Reverse" ONCLICK="document.StringForm.str.value = reverse(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Rotate Right" ONCLICK="document.StringForm.str.value = rotateRight(document.StringForm.str.value);"> <BR><BR> <INPUT TYPE="button" VALUE="Click for Strip" ONCLICK="document.StringForm.str.value = stripNonLetters(document.StringForm.str.value); document.StringForm.strLength.value = (document.StringForm.str.value).length;"> </FORM> </CENTER> </BODY> </HTML>
EXERCISE 12.11: Using your improved version of the isPalindrome function, design and implement a new Web page named pal.html for testing whether a word or phrase is a palindrome. Your page should be case-insensitive, and should ignore any non-letters when testing the text. (Hint: make use of the toUpperCase and stripNonLetters function from earlier exercises.) Thus, the following words and phrases would all be considered palindromes:Bob Madam, I'm Adam. Able was I ere I saw Elba. Golf? No sir -- prefer prison flog! (A palindromic baseball poem.) A lob; a rap as bat stabs; a parabola! Doc, note: I dissent. A fast never prevents a fatness. I diet on cod. Loofahs in a violin! In a a gap in my hymn! I, Paganini - lo, I vanish - a fool! A man; a plan; a canal: Panama! (Contributed by Theordore Roosevelt.) A man, a plan, a canoe, pasta, heros, rajahs, coloratura, maps, snipe, percale, macaroni, a gag, a banana bag, a tan, a tag, a banana bag again (or a camel), a crepe, pins, Spam, a rut, a Rolo, cash, a jar, sore hats, a peon, a canal: Panama!
<HTML> <!-- pal.html 8/21/2000 --> <!----------------------------------------------------> <HEAD> <TITLE> Palindrome Checker </TITLE> <SCRIPT LANGUAGE="JavaScript"> function stripNonLetters(strng) // Assumes: strng is a string // Returns: a copy of strng with all non-letters removed { var alphabet, newStr, i; alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; strng = strng.toUpperCase(); newStr = ""; for (i = 0; i < strng.length; i++) { if (alphabet.indexOf(strng.charAt(i)) != -1) { newStr = newStr + strng.charAt(i); } } return newStr; } function isPalindrome(word) // Assumes: word is a string // Returns: true if word is a palindrome, else false { var i; word = stripNonLetters(word); for (i = 0; i < Math.floor(word.length/2); i++) { if (word.charAt(i) != word.charAt(word.length-1-i)) { return false; } } return true; } </SCRIPT> </HEAD> <BODY> <CENTER> <H2>Palindrome Checker</H2> <FORM NAME="PalForm"> Enter a word or phrase: <INPUT TYPE="text" NAME="phrase" SIZE=40 ONCHANGE="if (isPalindrome(document.PalForm.phrase.value)) { document.PalForm.pal.value = ' IS '; } else { document.PalForm.pal.value = 'IS NOT'; }"> <INPUT TYPE="text" NAME="pal" SIZE=6 ONFOCUS="blur();"> a palindrome </FORM> </CENTER> </BODY> </HTML>