JavaScript Editor Free JavaScript Editor     JavaScript Debugger 




Main Page

Previous Page
Next Page

4.1. Data Types

As with its ancestor, the C programming language of Kernighan and Ritchie, JavaScript supports a number of data types. Although the number isn't nearly as large as C, representatives of the basic data types are all present, and methods of describing your own data types exist. In fact, with only a little delving into the "dark arts," it is quite possible that many problems can be solved on the client side using JavaScript.

4.1.1. Numeric

In JavaScript, all numbers are 64-bit double-precision floating-point numbers, whether they are floating point or integer. This means that 18,437,736,874, 454,810,624 values divided evenly between positive and negative can be represented in JavaScript. In addition, there are three "special" values, increasing the total to 18,437,736,874,454,810,627. And you thought that you were being robbed.

The first of the three "special" values is NaN, which means Not a Number or "oops," as I like to think of it. From my point of view, it means that I made some kind of boneheaded mistake and am doomed to suffer for it. The second and third values are positive and negative infinity, which are, well, infinite.

4.1.2. String

JavaScript strings are UTF-16 strings or 16-bit Unicode Transformation Formats: character encoding. What it comes down to is that each character in a string is represented in 2 bytes, which means that the potential for display of non-English characters exists. This might not seem like a big deal, but it very well could be when the boss walks into your office and asks about internationalization. Ooh, scary.

Seriously, though, quite a number of things can be done in JavaScript along the lines of string manipulation. For example, it is quite easy to make an entire line either upper case or lower case, a really nice feature when testing for a particular string value. In addition, other functions allow for the searching, extracting, and replacing of substrings. Table 4-1 outlines these features.

Table 4-1. JavaScript String Functions

Name

Type

Description

escape(string)

Method

Converts the characters that would be illegal in a URL into legal escape sequences.

string.charAt(n)

Method

Returns the character at the position n, where n is a positive integer.

string.charCodeAt(n)

Method

Returns the encoded character at the position n, where n is a positive integer.

string.concat(stringB)

Method

Returns a string consisting of both strings concatenated.

String.fromCharCode (u1,...,uN)

Static
Method

Returns a string constructed from a series of Unicode characters.

string.indexOf(stringB, n)

Method

Starting at position n or 0, if n is omitted, returns the start position of the second string in the first string. A -1 is returned when the second string isn't found within the first.

string.lastIndexOf (stringB, n)

Method

Starting at position n or the end of the string, if n is omitted, returns the start position of the second string in the first string starting at the end of the string. A -1 is returned when the second string isn't found within the first.

string.length

Property

The length of the string in characters.

string.match(regexp)

Method

Returns an array consisting of matches to the pattern in the regular expression regexp.

string.replace (regexp, text)

Method

Replaces of one or more instances that match the pattern with text.

string.search(regexp)

Method

Returns a Boolean indicating whether a match to the pattern is found in the string.

string.slice(n ,m)

Method

Returns the portion of the string starting at n and continuing to m, where both n and m are integers. In addition, if either value is negative, it indicates the position from the end of the string.

string.split(regexp)

Method

Returns an array consisting of the strings that were separated by instances of the pattern in the regular expression regexp.

string.substr(n ,m)

Method

Returns a substring starting at position n for a length of m characters. In instances where m is omitted or exceeds the length of the string, the final character is the final character of the string.

string.substring(n,m)

Method

Returns a substring starting at position n for a length of m characters. In instances where m is omitted or exceeds the length of the string, the final character is the final character of the string.

string.toLowerCase()

Method

Converts the string to lower case.

string.toString()

Method

Returns the string value.

string.toUpperCase()

Method

Converts the string to upper case.

string.valueOf()

Method

Returns the value of the string.

unescape(string)

Method

The inverse of escape; the escape sequences are converted back into the original characters.


In my opinion, one of the coolest ways to manipulate strings has got to be regular expressions, although, come to think of it, it is also probably one of the most obscure ways to manipulate strings as well. If you're unfamiliar with regular expressions, they are an object that stores a pattern for use in the searching of strings. This pattern is then applied to a string using either a regular expression method or a string method.

The theory behind regular expressions is relatively easy to grasp, but the actual practice is not. The reason for this comes down to the pattern; it needs to be specific enough to find only what you are actually looking for, yet it also needs to be general enough to be able to find sequences that aren't always easy to find. Maybe you'll be able to understand how this works a little better after looking at Table 4-2, which describes the special characters that go into constructing a pattern.

Table 4-2. Characters Used to Create Regular Expressions

Pattern

Description

\

Designates the next character as either a literal or a special character.

^

Designates the beginning of a string.

$

Designates the end of a string.

*

Specifies a match to the preceding character zero or more times.

+

Specifies a match to the preceding character one or more times.

?

Specifies a match to the preceding character zero or one time.

.

Matches any single character, excluding newline.

( )

Matches the contents of the parenthesis. Note that this is a pattern match and is remembered.

a|b

Specifies a match to either a or b.

{n}

Specifies a match to the preceding pattern exactly n times, where n is a nonzero positive integer.

{n,}

Specifies a match to the preceding pattern at least n times, where n is a nonzero positive integer.

{n,m}

Specifies a match to the preceding pattern at least n times and at most m, where n and m are nonzero positive integers.

[xyz]

Matches any single character enclosed by the brackets.

[^xyz]

Matches any single character not enclosed by the brackets.

[0-9]

Matches the range of characters enclosed by the brackets.

[^0-9]

Matches the characters not included in the range of characters enclosed by the brackets.

\b

Matches a word boundary.

\B

Matches a nonword boundary.

\d

Matches a numeric character, synonym for [0-9].

\D

Matches a non-numeric character, synonym for [^0-9].

\f

Matches a form feed.

\n

Matches a newline.

\r

Matches a carriage return.

\s

Matches any single whitespace character.

\S

Matches any single nonwhitespace character.

\t

Matches a tab.

\v

Matches a vertical tab.

\w

Matches any single word character or underscore.

\W

Matches any character that is not a word character or an underscore.

\n

When preceded by a pattern (), matches n times, where n is a positive integer. When not preceded by a pattern, matches an octal escape value.

\xn

Matches a hexadecimal escape value where n is a positive integer.


Alright, now for a quickie example. Let's say, for instance, that we want to replace all instances of either the word red or the word blue in a string with the word purple. Although this could be done programmatically, as shown in Listing 4-1, it isn't the easiest thing in the world. However, with a regular expression, also shown in Listing 4-1, it really isn't too bad.

Listing 4-1. Programmatic and Regular Expression Approaches to String Substitution

function initialize() {
  var colors = 'redorangebluegreenblueyellow';

  /*
     Call the substitute function twice, once for blue and once for
     red.
  */
  alert(substitute(substitute(colors,'blue','purple'),'red','purple'));

  /*
     Define the regular expression to search for red or blue, in
     addition set the options for global and ignore case.
     The available options are:
       g  = global (all occurrences in a string)
       i  = ignore case
       gi = global and ignore case

  */
  var re = new RegExp('red|blue','gi');

  /*
     Perform the replacement.
  */
  alert(colors.replace(re,'purple'));
}

function substitute(text,word,replacement) {
  var temp = text;

  /*
     perform string replacement using substring.
  */
  while(temp.indexOf(word) >= 0) {
    temp = temp.substr(0,temp.indexOf(word)) + replacement +
temp.substr(temp.indexOf(word)+word.length);
  }

  return(temp);
}

I would like to point out that, at the time of this writing, Microsoft Internet Explorer appears to have a bug with regular expressions. It occurs when performing regular expressions in a loop. Occasionally, even though a pattern match exists, it isn't recognized. Fortunately, there is a workaround. Within the body of the loop, use the compile method to "reset" the pattern. When this is done, pattern matches are always recognized. Yes, it is something of a kludge, but regular expressions are too useful to ignore, and we should also be kind to those less fortunate than ourselves by accommodating their broken web browsers.

4.1.3. Boolean

JavaScript Boolean data types are the standard true/false data types that we've all been exposed to umpteen times, end of story.

4.1.4. Miscellaneous

These are the two data types that don't cleanly fit into any category: null and undefined. The null data type represents nothing, and the undefined data type represents something that is not defined.

4.1.5. Arrays

Although it's not an object type, I've chosen to include arrays here because they are a useful mechanism for grouping related information. A relatively simple data structure, arrays permit the access of information based upon an integer index. In JavaScript arrays, this index begins at zero and increases by one for each element of the array.

An item of interest about arrays in JavaScript is that it isn't necessary for the individual elements of an array to all be of the same type, although it might be a good idea to ignore this capability because it presents a world of opportunities to really screw up. However, some really nice goodies built into JavaScript more than make up for the potential issues that might arise from weak typing.

First things first. Let's take a look at the three ways to define a JavaScript array: defining an empty array, defining an array with a set number of elements, and defining an array with a set number of elements with values. Each of these three ways uses the Array() constructor, as shown in the following snippets:

var one = new Array();
var two = new Array(3);
var three = new Array('red', 'green', 'blue');

Earlier I stated that there are some really nice goodies built into JavaScript arrays, but they're rather numerous, so I've chosen to list them in Table 4-3.

Table 4-3. Features of JavaScript Arrays

Method

Description

array.concat(arrayb)

Concatenates two arrays into a single array

arraylength()

Returns the length of an array, as in the number of elements

array.reverse()

Returns the array with the elements in reverse order

array.slice(start,end)

Returns a portion of an array

array.sort()

Sorts the array into ascending order

array.join()

Converts all elements to strings and concatenates them, separated by commas

array.push(item)

Adds an element to the end of an array

array.pop()

Removes and returns an element from the end of the array

array.splice(r,a...a)

Removes the element specified by the first parameter and adds subsequent elements

array.unshift(item)

Adds an element to the beginning of an array

array.shift()

Removes and returns an element from the beginning of an array


4.1.6. Object

In JavaScript, the Object type is an unordered collection of name and value pairs. Although this doesn't sound like much, it is a type of data structure that is commonly referred to as an associative array. I have a tendency to use an associative array.


Previous Page
Next Page

R7


JavaScript Editor Free JavaScript Editor     JavaScript Debugger


©