Electric Type

Multimedia

About Us

News

Help

Advanced JavaScript Tutorial
Lesson 2

by Thau!

Page 2 — Fancy String Handling

Why do you have to learn about fancy string handling before getting into the joyous world of cookies? Well, it turns out that cookies are strings. To store visitor information, you have to first build a special cookie string. And then to read the information when the visitor returns, you have to decode the cookie string. To create and interpret these strings, you have to know your way around JavaScript's string library.

var normal_monkey = "I am a Good!<br>";

document.writeln("Normal monkey " + normal_monkey);

var bold_monkey = normal_monkey.bold();

document.writeln("Bold monkey " + bold_monkey);

The statement:

var bold_monkey = normal_monkey.bold();
Is the same as the statement:
var bold_monkey = "<b>" + normal_monkey + "</b>";
The first version just looks neater. One of the many methods of the string object is bold, and it's sort of silly. Less silly are the methods indexOf, charAt, substring, and split, which actually get inside strings and see what they're made of. Let's look at indexOf first.

indexOf

The indexOf finds the location of a set of characters inside a string and tells you where the substring starts. If the string doesn't contain the substring, indexOf returns "-1." Here are some examples:

var the_word = "monkey";
Let's start with the word "monkey."

var location_of_m = the_word.indexOf("m");
The location_of_m will be "0," because that's the starting position of a string.

var location_of_o = the_word.indexOf("o");
The location_of_o will be "1."

var location_of_key = the_word.indexOf("key");
location_of_key is "3" because the substring "key" starts with "k," which is position three in the word "monkey."

var location_of_y = the_word.indexOf("y");
The location_of_y is "5."

var cheeky = the_word.indexOf("q");
The cheeky is "-1" because there's no letter "q" in the word "monkey."

A more realistic use of indexOf is:

var the_email = prompt("What's your email address?", "");

var the_at_is_at = the_email.indexOf("@");

if (the_at_is_at == -1)

{

	alert("You loser, email addresses must 
	have @ signs in them.");

}
This little scrap of code asks users for their email address, and then checks to see if it's a valid address. If the address doesn't contain an @ sign, it can't be valid. Enter indexOf, which checks for "@" in the string.

charAt

The charAt finds out what letter is at a certain position inside a string. Here it is in action:

var the_word = "monkey";

var the_first_letter = the_word.charAt(0);

var the_second_letter = the_word.charAt(1);

var the_last_letter = the_word.charAt(the_word.length-1);

After this, the_first_letter is "m,"

the_second_letter is "o," and

the_last_letter is "y."

Note that you can find out how many letters are in a word using the length property of the string. In this case, the_word is "monkey," so the_word.length is "6." Don't forget that the first character of a string is at position "0" (as in charAt(0)), so the last letter will be in position length-1, which is why the last line features the_word.length-1.

Before going over substring and split, let's do an exercise with charAt and indexOf.

String Exercise 1

Your task is to write a script that will determine whether the last letter of a word is a vowel or a consonant. You can do it in a clever way, using both indexOf and charAt. Of course you could do it in a much less clever way without indexOf, but remember: the clever monkey gets the golden banana.

Here's an example of it working. When you've finished the exercise, or nearly died trying, learn how it's done or double-check your work against my solution. Or, if you're so pleased with your solution that you don't want to sully your mind with mine, feel free to carry on with the string-a-thon.

next page»


Tutorials  

User Blogs  

Teaching Tools  

Authoring  

Design  

Programming help  

Advanced Flash  

Javascript  

Glossary  

PHP Coding  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.