[thelist] JavaScript Trauma

kev,

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: From: kev.skindrill <kev.skindrill@bigfoot.com>
:
: I just can't seem to get my head round 'substring'
: and 'indexOf()'. Below is a sample of an assignment
: from the book.
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

i think teresa already did an excellent job of explaining indexOf() and
substring(), but let me see if i can expand on it some more for you.


 - = indexOf() = -

in very simple terms, indexOf() is used to find the number of characters
from the left of a string, or it's index, within another string.  if the
string that's searched for does not exist, then it returns an index of -1.
if the string contains more than one occurrence of the string that's
searched for then the index of the string will refer to the first
occurrence.  the string we search for can be as long or short as we like.
if you the string you search for is more than a single character, then the
index will pertain to the location of the first letter in the string that's
search for.

here's an example of using it to find the index of a single character.

var dollar_amount = '$4.95';

let's find the index of the decimal point.

var decimal_index = dollar_amount.indexOf('.');

the variable decimal_index will now equal 2, since javascript starts
counting from 0.


now, here's an example of using it to find the index of a longer string.

var my_big_string = 'Workers of the Web, Evolt!';

now, suppose we wanted to the index of the word Evolt.  we would do it like
this:

var evolt_index = my_big_string.indexOf('Evolt');

the value of evolt_index would be 20 or the equivalent of the location of E.


now, here's an example of using it to find the index of a single character
where that character occurs more than once within the string to search.

var the_url = 'http://www.evolt.org/index.cfm?menu=8&cid=472&catid=17';

let's suppose we want to find the index of a slash (/).

var the_slash = the_url.indexOf('/');

the value of the_slash would be 5, or the first occurrence of the string
searched for.


the nice thing about the indexOf() method is that you can not only tell it
what string to search for, you can also tell it where to start within the
string.  if you don't specify a value, like all the examples above, then it
starts at the default of 0, or the left side of the string.  so, suppose you
wanted the index of the first slash in the variable the_url after the
double-slash.  you would tell the indexOf() method to start after 8.

var the_slash = the_url.indexOf('/',8);

now the value of the_slash will be 20, since it has been instructed to count
from the 8th character.


fortunately, you don't have to hardcode the second argument to the indexOf()
method.  you could use an additional indexOf() method within the main
indexOf() method to find the index to start searching from.

var the_slogan = 'web design & web development';

now, let's find the index of the second occurrence of the word "web".  we do
this by setting the second argument to the indexOf() function to the value
of the index of the ampersand.

var the_second_web = the_slogan.indexOf('web',the_slogan.indexOf('&'));

the value for the second argument will be 11, so the indexOf() method will
start looking for the index of the string "web" from the 11th position and
on.  therefore, the value of the_second_web will be 13, or the index of the
w in web.


 - = charAt() = -

i know you didn't ask about this, but the charAt() method is the exact
opposite of the indexOf() method.  the charAt() method takes a single
argument, an integer, and finds the character at that index in a given
string.  here's a simple example of how that would work.

var the_name = 'evolt.org';

now, let's find the character at the 5th position (this will actually be 4
because javascript counts from 0).

var the_5th_element = the_name.charAt(4);

the value of the_5th_element will be the letter t, or the 5 character in
starting from 0.


 - = substring() = -

the substring() method is used to retrieve a string from another, larger
string.  the substring() method takes two arguments.  the first argument is
an integer indicating the index where you want to begin.  the second
argument, logically, is an integer indicating the index immediately
following the index where you want to end.  here's an example using
hardcoded integer values.

var my_big_string = 'Workers of the Web, Evolt!';
var my_little_string = my_big_string.substring(0,18);

the value of my_little_string would be Workers of the Web.  at first that
may be alittle confusing because the character at the 18th position
(counting from 0) is the comma.  that's because the substring() method takes
the second argument to mean "up to, but not including".


 - = length = -

one final thing you'll wanna know about to efficiently work with strings is
the length method.  it doesn't take any arguments at all.  it simply returns
an integer indicating the length of the string.

var my_big_string = 'Workers of the Web, Evolt!';
var my_big_string_length = my_big_string.length;

the value of my_big_string_length would be 26, the exact number of
characters (including spaces) contained in the string.  it is useful to note
that the length does not count from 0 like most things in javascript.  this
is particularly handy when using the substring() method because you can
simply use the length method as the second argument and you can be assured
that the substring will contain everything clear to the end of the string
due to the way substring() treats the second argument, as discussed above.


- = summary = -

taking all of these different javascript methods for working with strings,
here's how they can be used together to come up with something useful.
let's say we had a url that we wanted to break up into useful parts.  here's
an example that combines the substring(), indexOf(), and length methods to
do this.

var the_url = 'http://www.evolt.org/index.cfm?menu=8&cid=472&catid=17';

var the_domain =
the_url.substring(the_url.indexOf('www'),the_url.indexOf('/',the_url.indexOf
('www')));
var the_file =
the_url.substring(the_url.indexOf('/',the_url.indexOf(the_domain)) +
1,the_url.indexOf('?'));
var the_query = the_url.substring(the_url.indexOf('?') + 1,the_url.length);

the value the_domain would be www.evolt.org.  the value of the_file would be
index.cfm.  the value of the_query would be menu=8&cid=472&catid=17.

if you wanted to, you could also break the_query up into it's separate
name/value pairs.  in fact, this is a very common use of these methods.


good luck,

.jeff

name://jeff.howden
game://web.development
http://www.evolt.org/
mailto:jeff@members.evolt.org