JavaScript: Strings

 

String Methods

A string is a group of characters. You would use a string variable to store someone's name, for example. You can define a string variable like this:

name = "George W. Bush"

There are various methods (also known as functions) in JavaScript that apply to strings. The 'toUpperCase()' method converts a string to uppercase letters. So if 'name' holds 'George W. Bush' then this line

newName = name.toUpperCase()

makes 'newName' hold 'GEORGE W. BUSH'.

There is an analogous 'toLowerCase()' method.

You can add together or 'concatenate' two or more strings using the '+' operator. The line

name = "George W." + " " + "Bush"

makes 'name' hold 'George W. Bush'.

The 'charAt()' method returns the place (starting with 0) that a letter occupies within a string. The line

var place = name.charAt(3);

makes 'place' hold 'r' because 'r' is character #3 (if you start at 0) in 'George W. Bush'.

Finally, the 'indexOf()' method tells you whether or not a smaller string is contained in a larger string. If the smaller string is contained in the larger string 'indexOf()' tells you where it begins. The script

var i = name.indexOf("Bush")

makes 'i' equal to '10' because 'Bush' begins in the 10th position in 'name'.

The line

var i = name.indexOf("Al Gore")

makes 'i' equal to '-1' because 'Al Gore' does not occur in string 'name' ('George W. Bush'). So if the smaller string does not occur in the larger string 'indexOf()' returns '-1'.

 

Other Resources

Try these links on strings:


Page Link
Strings (Website Abstraction) wsabstract.com/javatutors/string.shtml

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Write a script that tells the user whether or not a given person is in the Web Programming class. Provide a text box for a person's first name and one for the person's last name. Provide an empty text box that will store the answer to the question. Provide a button which, when clicked, calls a function.

The function should concatenate the person's first name and last names, putting a space between the two names. To work with the first name in a function, for example, you use the variable

document.forms[0].firstname.value

if you named the text box 'firstname'.

Then convert the full name to uppercase.

Then use the 'indexOf()' method to find out if the name is in the Web Programming class. Here 'classList' is a variable that stores the complete list of names. To add all the students in the class to 'classList' you could do this:

var classList = "FIRSTNAME1 LASTNAME1 FIRSTNAME2 LASTNAME2 FIRSTNAME3 LASTNAME3"
classList += "FIRSTNAME4 LASTNAME4 FIRSTNAME5 LASTNAME5 FIRSTNAME6 LASTNAME6"
Etc...

You can copy (and then modify) the lines above into the <HEAD> section, inside <SCRIPT> tags.

Finally, use an IF statement [based on output from 'indexOf()'] to let the user know whether or not the person is in the class. If output from 'indexOf()' is '-1' the person is not in the class. If output from 'indexOf()' is anything else, the person is in the class.

To modify the text box (here it is named 'answer') in the <BODY> section when the person is found in 'classList' you could write something like:

document.forms[0].answer.value = fullname + " IS in Web Programming."