JavaScript Programming Techniques
- Pattern Matching
- Events and Event Handlers
- Events
- Exceptions
- Debugging
This chapter is from the book
This chapter is from the book
This chapter is from the book
In Chapter 2, "Details of the Language," you were given a quick overview of the core JavaScript language to show you differences and similarities to other computer languages. Now it is time to go to the next level by examining some of the features of the JavaScript language and programming techniques that will make your JavaScript programs more powerful and more resilient to errors and maybe even make you say, "Wow, I didn't know JavaScript could do that!"
In this chapter we will look at pattern matching and event handling and show you how to use these two pieces of JavaScript functionality to make your JavaScript programs more powerful. This chapter will also examine two programming techniques that will make your JavaScript programs less error prone. You will be introduced to the try...catch block and shown how to use it. You will also be introduced to some free JavaScript debugging programs and techniques.
Pattern Matching
Two of the most common uses of Web pages today are for gathering and distributing data. These two areas, by nature, use data manipulation to understand what the user needs and then return information tailored to the user's specifications. One of the key tools for processing data is pattern matching. Some scripting languages, such as Perl, are well suited to handle pattern matching, whereas others provide very little pattern matching capabilities. If you are familiar with Perl, you will probably recognize JavaScript pattern matching because it was based on Perl's implementation of pattern matching. The implementation of pattern matching into JavaScript greatly aids in the processing of data for the Internet.
JavaScript uses the RegExp (short for Regular Expression) object to handle pattern matching. This object holds the pattern definition, as well as provides methods for performing matching. You'll begin by learning how to define patterns and then by learning how to use the RegExp objects to test for pattern matches.
Defining the RegExp Object
The RegExp object can be created in two different ways, which are similar to defining strings. The first way is to use the RegExp constructor and the keyword new:
var lastName = new RegExp("Jones");
This notation creates a new RegExp object called lastName and assigns the pattern Jones. The same functionality could have been accomplished by using a direct assignment:
var lastName = /Jones/;
To differentiate this notation from that used to define strings, the forward slash character (/) is used to designate the beginning and end of the pattern. Notice that forward slashes were not needed in the RegExp() constructor because this could be distinguished from the String() constructor.
Defining Patterns
The syntax used to define patterns in JavaScript could be considered a scripting language in itself because it is so extensive. There are special characters for creating almost any pattern one could imagine, including characters for handling groups, repetition, position, and so on. Table 3.1 shows the special pattern matching characters available in JavaScript.
Table 3.1 Special Pattern Matching Characters
|
Character |
Description |
|---|---|
|
\w |
Matches any word character (alphanumeric). |
|
\W |
Matches any non-word character. |
|
\s |
Matches any whitespace character (tab, newline, carriage return, form feed, vertical tab). |
|
\S |
Matches any non-whitespace character. |
|
\d |
Matches any numerical digit. |
|
\D |
Matches any character that is not a number. |
|
[\b] |
Matches a backspace. |
|
. |
Matches any character except a newline. |
|
[...] |
Matches any one character within the brackets. |
|
[^...] |
Matches any one character not within the brackets. |
|
[x-y] |
Matches any character in the range of x to y. |
|
[^x-y] |
Matches any character not in the range of x to y. |
|
{x,y} |
Matches the previous item at least x times but not to exceed y times. |
|
{x,} |
Matches the previous item at least x times. |
|
{x} |
Matches the previous item exactly x times. |
|
? |
Matches the previous item once or not at all. |
|
+ |
Matches the previous item at least once. |
|
* |
Matches the previous item any number of times or not at all. |
|
| |
Matches the expression to the left or the right of the |_character. |
|
(...) |
Groups everything inside parentheses into a subpattern. |
|
\x |
Matches the same characters that resulted from the subpattern in group number x. Groups, which are designated with parentheses, are numbered from left to right. |
|
^ |
Matches the beginning of the string or beginning of a line, in multiline matches. |
|
$ |
Matches the end of the string or end of a line, in multiline matches. |
|
\b |
Matches the position between a word character and a non-word character. |
|
\B |
Matches the position that is not between a word character and a non-word character. |
These special pattern matching characters are used within the pattern to aid in defining complex patterns. Looking at Table 3.1, you might notice that characters such as the asterisk (*), plus sign (+), and backslash (\) hold special meanings that would keep them from being used as a literal. For example, what if you wanted to find all the plus signs (+) in a string? To use a literal plus sign, a backslash (\) must precede the sign. Table 3.2 shows all the characters that require a backslash character to be taken literally within a pattern.
Table 3.2 Literal Characters
|
Character |
Description |
|---|---|
|
\f |
Form feed |
|
\n |
Newline |
|
\r |
Carriage return |
|
\t |
Tab |
|
\v |
Vertical tab |
|
\/ |
Forward slash (/) |
|
\\ |
Backward slash (\) |
|
\. |
Period (.) |
|
\* |
Asterisk (*) |
|
\+ |
Plus (+) |
|
\? |
Question Mark (?) |
|
\| |
Horizontal bar (|) |
|
\( |
Left parenthesis ( |
|
\) |
Right parenthesis ) |
|
\[ |
Left bracket ([) |
|
\] |
Right bracket (]) |
|
\{ |
Left curly brace ({) |
|
\} |
Right curly brace (}) |
|
\XXX |
ASCII character represented by the octal number XXX |
|
\xHH |
ASCII character represented by the hexadecimal number HH |
|
\cX |
The control character represented by X |
There is one final piece of syntax that JavaScript provides for creating patterns. Unlike the syntax covered so far, these pieces of syntax appear outside the forward slashes that define the pattern. These attributes are shown in Table 3.3.
Table 3.3 Pattern Attributes
|
Character |
Description |
|---|---|
|
g |
Global match. Finds all possible matches. |
|
i |
Makes matching not case sensitive. |
Testing for Pattern Matches
When a pattern has been defined, it can be applied to a string by using special methods that exist in the RegExp and String objects. The pattern matching methods in the String object require RegExp objects, as shown in Table 3.4.
Table 3.4 Pattern Matching Methods in the String Object
|
Method |
Description |
|---|---|
|
match(regExpObj) |
Searches for regExpObj pattern in string and returns result. |
|
replace(reqExpObj,str) |
Replaces all occurrences of the regExpObj pattern with str. |
|
search(reqExpObj) |
Returns the position of matching regExpObj pattern within the string. |
|
split(regExpObj,max) |
The string is split everywhere there is a matching regExpObj pattern up to max splits. The substrings are returned in an array. |
The pattern matching methods in the RegExp object require String objects, as shown in Table 3.5.
Table 3.5 Pattern Matching Methods in the RegExp Object
|
Method |
Description |
|---|---|
|
exec(str) |
Searches for pattern in str and returns result |
|
test(str) |
Searches for pattern in str and returns true if match found, otherwise false is returned |
|
(str) |
Same as exec(str) method |
Listing 3.1 uses the RegExp constructor, special pattern syntax, and the String replace() method to replace digits 3 to 5 that exist in the string with nines as seen in Figure 3.1.
){kind=link}
Listing 3.1 Using Regular Expressions
<html>
<script type="text/javascript" language="JavaScript">
<!--
//Create a text string
var str = "John traded 5 oranges for 135 grapes.<br>";
//Create RegExp object
var span3to5 = new RegExp("[3-5]","g");
document.write(str);
document.write("Replace digits 3 to 5 with nines.<br>");
document.write(str.replace(span3to5,"9"));
//-->
</script>
</html>
Figure 3.1 The digits 3 to 5 are replaced with nines.