also offers an excellent reference section, which provides compact
and complete information on LOTS of JavaScript stuff. This lesson
will guide you through this reference material, giving you
lots of exercises along the way to practice with!
Click on the link above; then click on Learn JavaScript under the heading
Browser Scripting in the left-hand margin. You'll see the
JavaScript References in the left-hand margin.
Study the six examples in this section! Besides reviewing some
of the ways of working with strings, this section introduces you to
some ways of "searching" strings for particular characters.
Be able to give both an EXPLANATION and an EXAMPLE for each of the
properties/methods for strings listed below. The explanations are given
in the tutorial, and repeated here, often with some additional information. Also provided here
are examples. Make sure that you TEST
and understand each of these examples. You could use these examples,
or ones that you make up yourself!
For example, if I ask you to give an explanation and example of the "length"
property for a string, you would say:
"length" returns the number of characters in a string.
And, you might give the following EXAMPLE:
str= "Carol";
document.write("The string \'",str,"\' has ",str.length," characters.");
Be sure to give meaningful examples!
I could also ask you questions in a different direction; I could give you
the explanation, and ask for the method that does the job. For example,
if I ask "What method returns two concatenated strings?" you should answer
"concat". Remember that JavaScript is case-sensitive, so study the
capitalization carefully! There are some typos in the tutorial, which
are noted below.
Typeset each of these examples, and make sure that you understand them!
length: returns the number of characters in a string
<script language="JavaScript">
str= "Carol";
document.write("The string \'",str,"\' has ",str.length," characters.");
</script>
Now, replace the "document.write" line with each of the following: big(): returns the string, formatted to big:
document.write("Here's a big string! ",str.big() );
blink(): returns the string, blinking (in Netscape Navigator only)
document.write("Here's a blinking string! ",str.blink() );
bold(): returns the string bold
document.write("Here's a bold string! ",str.bold() );
charAt(n): gets the nth character from a string
document.write("For the word ",str,", the character at position 3 is ",str.charAt(3) );
concat(value1,value2,...): returns a new string that results from
concatenating (adding on) each of the arguments
str = "Carol";
str1=" and ";
str2="Julia";
document.write(str.concat(str1,str2) );
fontcolor(desired_color): returns the string in the specified color. There is
a typo in the online tutorial; it is "fontcolor", NOT "fontColor".
document.write("Here's a word in red: ",str.fontcolor(red) );
fontsize(integer_between_1_and_7): returns the string in the specified size. There
is a typo in the tutorial; it is "fontsize", NOT "fontSize".
document.write(str," in size 5 is ",str.fontsize(5) );
indexOf(substring): searches the string for the specified substring; returns
the position of the first occurrence of the substring, or returns a -1 if
the substring is not found.
str="Carol";
pos1 = str.indexOf("ro");
pos2 = str.indexOf("q");
document.write("The characters 'ro' begin at position ",pos1," in the word 'Carol' .<BR>");
document.write("There is no 'q', so indexOf returned a ",pos2);
italics(): returns the string in italics
document.write("A word in italics! ",str.italics() );
lastIndexOf(substring): similar to 'indexOf()', except it
searches the string from right to left, instead of from left to right. It
still returns the position of the first occurrence of the substring, or -1 if
the substring is not found. If there is only a single occurrence of
the substring, then both 'indexOf()' and 'lastIndexOf()' will yield IDENTICAL results,
but 'lastIndexOf()' is more efficient if the substring you're looking for
is near the end!
str="Carol J.V. Fisher teaches the HTML class.";
pos1 = str.indexOf(".");
pos2 = str.lastIndexOf(".");
document.write("indexOf first found a period at position ",pos1,"<BR>");
document.write("lastIndexOf first found a period at position ",pos2);
match(regular expression): This is an incredibly powerful search tool, if you
know about regular expressions!
A regular expression is an object that describes a pattern of
characters; regular expressions go between a pair of forward slashes, like this:
/regular expression goes here/
There is an elaborate language for describing regular expressions, and
I'll only tell you a few things here, to get you started:
A 'g' after the last slash means to find ALL matches (it's a GLOBAL search)
any letter matches itself; so /r/g means to match all letters 'r'
\w matches any word character, (any alphanumeric character,
a-z, A-Z, 0-9, together with the underscore character)
A '+' means one or more occurrences; so /\w+/ means
one or more word characters
\b matches a word boundary; that is, a position between
a word character and a non-word character
str="Carol J.V. Fisher";
retr = str.match(/r/g);
ret_one_word = str.match(/\w+\b/);
ret_all_words = str.match(/\w+\b/g);
document.write("Looking for all letters 'r': ",retr,"<BR>");
document.write("Looking for first word: ",ret_one_word,"<BR>");
document.write("Looking for all words: ",ret_all_words,"<BR>");
Write a function that accepts two inputs: a string, and a number between 0
and the length of the string. It then prints out "The character at position blah
is blah." For example, if the inputs are "Carol" and "1", then it would print
"The character at position 1 is a." If the user inputs an incorrrect number
(for example, the only allowable positions for "Carol" are 0 through 4) then
it should say "This is not an allowable position for this word. Please try
again."
Write a function that accepts three words as inputs, and then prints them
out in a RANDOM ORDER! Each order should be equally likely! (Hint: You can
do this by brute force. There are only six possible orders; randomly
choose a number between 1 and 6; use SWITCH!)
Write a function that accepts two inputs: a string, and two colors. It then
prints all characters in EVEN positions in the first color, and all
characters in ODD positions in the second color!