On this page, I will introduce how to handle strings with Java Script. A string is text, nothing more. The words you are reading now can be stored in a variable, and by using string functions, we can take parts of these words. Java Script's most common string functions are length, substring, indexOf, charAt, and split. I will demonstrate strings with the following example.
Set up an HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
Set up an HTML document like so:
<html>
<head>
<title>Strings</title>
<Script Language = "JavaScript">
</script>
</head>
<body>
<form name = "frmStrings">
<p>
Enter something: <input name = "txtString" type = "text" size = "30">
<p></p>
Starting character: <input name = "txtStart" type = "text" size = "5">
Ending character: <input name = "txtEnd" type = "text" size = "5">
<p></p>
Result: <input name = "txtResult" type = "text" size = "30">
<input type = "button" value = "Find">
</p>
</form>
</body>
</html>
What is important to note here is that the HTML you entered between the tags <form name = "frmStrings"> and </form> is one form. Each element between these tags is an object which is part of the form. This form has 5 objects. 4 text boxes and 1 button. When putting forms on a web page, it is wise to enclose the form tags with a <p> and </p> tag. There are three sets of these tags in the document we created. The tags between the form elements are just there to put space between the forms on the page without having to deal with tables for now.
Between the script tags, enter the following lines:
function findString()
{
var part;
var sentence = document.frmStrings.txtString.value;
var start = document.frmStrings.txtStart.value;
var end = document.frmStrings.txtEnd.value;
part = sentence.substring(start, end);
document.frmStrings.txtResult.value = part;
}
Line 1: Declare function findString()
Line 3: Declare variable part.
This variable will store a string. It will store the part of the string in the text box txtString that the user specifies.
Line 5: Stores the value of the text box txtString in the form frmStrings in the document.
As you see, we need to go through the object hierarchy to manipulate each object. The top object is the window object, but Java Script allows us to go straight to the document instead. In order to access the text in text box txtString, we need to address the form that it is part of, which is frmStrings. So it works like this: the line simply says take the value of the text box txtString in the form frmStrings in the document and store it in variable sentence. The name of the form (frmStrings) is specified in the HTML tag that begins the form. All form elements are named with the name property.
Line 6: Stores the value of the text box txtStart in variable start.
Line 7: Stores the value of the text box txtEnd in variable end.
Line 9: Store part of the sentence in variable part.
All strings in Java Script have a method called substring. This method allows the programmer to look at part of the string. It works just as you see in the example we are using. It takes a string (in this case, the string is message) and picks a starting point in the string, then an ending point (start, end). The starting point is the numerical position from the left.
Suppose we have the string --> I like pie.
The length of this string is 11. That is, the count of the characters is 11. The string starts at the letter "I" and ends at the ".". All spaces and characters between are included in the length property on the string. It is important to note that the first character holds position 0, not 1. If you entered this string into the text box txtString and then entered some numbers into the text boxes txtStart and txtEnd, the variable part stores the specified characters by variables start and end. So for instance, if there is a 2 in text box txtStart and a 10 in text box txtEnd, the variable part stores "like pie".
Give this script a test and be sure you understand how the substring method works. Just enter some text in the text box txtString. Choose a starting character for text box txtStart and an ending character for text box txtEnd. The text box txtResult should return the part of the string you specify when you click the button.
I hope you understood this exercise. Now we can do something more interesting with strings on Page 7.