This page introduces a few more ways to handle strings that I did not mention on page 6. Page 6 introduced the string method substring. Other methods for handling strings are charAt, indexOf, and split. The method charAt takes an integer value for an argument and returns the character in the specified position of the string. The method indexOf takes a string value and returns the numerical position of the character. The method split takes a string value and divides the string into different string variables. The string is divided wherever the character appears in the string. The string is divided up into an array. An array is a variable with multiple parts. Some people may describe an array differently, but this is the simplest way to look at it. An example of an array is as follows:
var employees = new Array(5);
If we used this in coding, this line simply creates a variable employees and divides it into 5 parts (as indicated between the parenthesis). Each part can be accessed using [ ] after the variable. For instance, we may say:
employees[0] = "John Smith";
employees[1] = "Jane Doe";
and so forth. This array is accessible up to 4, not 5 as indicated in its declaration. The range 0-4 includes 5 parts because 0 is the first dimension (or first part) of the array.
In context, the way the split method works is it divides a string at the character indicated in its argument (the character in the parenthesis). For example, take the statement var name = "John Smith". Suppose we say var separate = name.split(" ");. This splits the variable name wherever there is a space and stores the result in variable separate. The result is an array that looks like this:
separate[0] = "John";
separate[1] = "Smith";
This array is dimensioned as many times as the argument specified in the split method is present in the string being split. Again, keep in mind that Java Script IS case sensitive. The keywords I introduced above must be entered as shown.
Let's put this to use. Set up a new HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
Between the comment tags, enter the following lines:
/*
My variables:
selectChar: The index of a character determined by prompt
theCharacter: The actual character in the string
splitPoint: The position in the string where it is split
splitString: The resulting string after splitting
charIndex: The index of a character within the string
string: The string entered in a prompt
theResults: The message displayed in the alert at the end
*/
var selectChar = "";
var theCharacter = "";
var splitPoint = 0;
var splitString = "";
var charIndex = -1;
var string = prompt("Enter a sentence:")
var theResults = "";
When using several variables, it is a good habit to make note in the code as to what exactly the variable does. As you can see, the first 11 lines are commented to explain this. This entire block of code should be self explanatory. The only thing to be aware of is that the only two variables not used as strings are splitPoint and charIndex.
Beneath the lines you just entered, enter the following lines:
// look for a character
while (selectChar.length < 1)
{
selectChar = prompt("Enter a character position from the string entered:");
if (selectChar > string.length || selectChar < 1)
{
alert("The character position " + selectChar + " does not exist.");
continue;
}
}
Again notice that I used a comment at the top to explain what the entire block of code you just entered does. Assume line 1 is the line under the comment:
Line 1: Test the length of the string selectChar. When it is less than 1, keep looping.
This makes the user enter a number in the prompt
Line 3: Test to see if what was entered is greater than the length of the string string OR (||) if it is
less than 1 (nothing).
Line 5: Tell user that the character position does not exist when true.
Line 6: Keep looping (continue). We need to enter this because the while loop exits whenever selectChar
(the character's index) is 1 or greater, the loop ends. We do not want the loop to exit when the character's index is out of bounds
(meaning greater than the string's length).
Below the lines you just entered, type the following lines:
theCharacter = string.charAt(selectChar);
theResults += "Character at position " + selectChar + " = " + theCharacter + "\n";
Line 1: Set variable theCharacter to the character located at position selectChar in the string
string.
Line 2: Append to the variable theResults.
Below the lines you just entered, type the following lines:
// look for index of character
while (charIndex < 0)
{
selectChar = prompt("Enter a character contained in the sentence you entered:");
charIndex = string.indexOf(selectChar);
}
theResults += "The index of character " + selectChar + " = " + charIndex + "\n";
Line 2: Loop while variable charIndex is less than 0. This avoids invalid entries. The first character
holds position 0. Recall that we initialized charIndex as -1.
Line 4: Prompt user to enter a character located in the sentence they entered.
Line 5: Store the numerical location of the character entered in selectChar within the string in variable charIndex.
Line 8: Append to string theResults.
We could have error tested this process several ways, but it is not necessary. This last block we entered does not know what to do if the character we entered is not found in the string. The purpose of this is just to show you how these string functions work, so we are not going to bother with error-testing for now.
Below the lines you just entered, type the following lines:
// split the string
while (splitPoint < 1)
{
splitPoint = prompt("Where would you like to split \"" + string + "\" (enter a character)?");
splitString = string.split(splitPoint);
}
theResults += "The string split at \"" + splitPoint + "\" = \"" + splitString[0] + "\" and \"" + splitString[1] + "\"";
alert(theResults);
Line 2: Test variable splitPoint. It needs to be greater than 0. It splits at the character index. I
choose to test if it is less than 1 because we don't see much when we split at the first character.
Line 4: Prompt user to enter a character in order to specify where to split the string.
Notice on this line the backslash quote (\"). This allows us to display a quote in the prompt. Because the prompt argument must be enclosed in quotes, we need to use the backslash to indicate a visible quote in the prompt or alert. You will see how this works shortly.
Line 6: Splits the string string at the character splitPoint. splitPoint indicates the index
of a character in the string. The variable splitString is made into an array dimensioned as many times as the character entered by the
user appears in the string.
Line 9: Append to variable theResults.
Line 10: Display theResults in an alert.
I hope this exercise went smoothly for you. You may proceed to Page 10.