JavaScript by Example: JavaScript Core Objects. Pt. 2 | 2

JavaScript by Example: JavaScript Core Objects. Pt. 2

 

<html><head><title>The Prototype Property</title>

<script language = "javascript">

// Customize String Functions

1 function ucLarge(){

var str=this.bold().fontcolor("white").

toUpperCase().fontsize("22");

return( str);

}

2 String.prototype.ucL=ucLarge;

</script>

</head>

<body bgcolor=black><center>

<script language="JavaScript">

3 var string="Watch Your Step!!";

4 document.write(string.ucL()+"<br>");

</script>

<img src="high_voltage.gif">

</body></html>

 
 
The ucLarge() function is defined. Its purpose is to generate and return an uppercase, bold, white font, with a point size of 22.

  1. The prototype property allows you to customize an object by adding new properties and methods. The name of the customized method is ucL, which is the name of a new method that will be used by the String object. It is assigned the name (without parentheses) of the function ucLarge(), that performs the method's actions and returns a value.

  2. A new string is created.

  3. The prototyped method, ucL(), is applied to the String object, str. It will modify the string as shown in the output in Figure 9.22

    .
String Methods

There are two types of string methods: the string formatting methods that mimic the HTML tags they are named for, and the methods used to manipulate a string such as finding a position in a string, replacing a string with another string, making a string uppercase or lowercase, and the like.


Table 9.9 lists methods that will affect the appearance of a String object by applying HTML tags to the string, for example, to change its font size, font type, and color. Using these methods is a convenient way to change the style of a string in a JavaScript program, much easier than using quoted HTML opening and closing tags.


String object (HTML) methods.

Method

Formats as HTML

String.anchor(Name)

<a name="Name">String</a>

String.big()

<big>String</big>

String.blink()

<blink>String</blink>

String.bold()

<b>String</b>

String.fixed()

<tt>String</tt>

String.fontcolor(color)

<font color="color">String</font>

e.g., <font color="blue">String</font>

String.fontsize(size)

<font size="size">String</font>

e.g., <font size="+2">String</font>

String.italics()

<i>String</i>

String.link(URL)

<a href="URL">String</a>

e.g., <a href="http://www.ellieq.com">String</a>

String.small()

<small>String</small>

String.strike()

<strike>String</strike> (puts a line through the text)

String.sub()

<sub>String</sub> (creates a subscript)

String.sup()

<sup>String</sup> (creates a superscript)

 
 

 

<html>

<head><title>String object</title>

</head>

<body bgcolor="yellow">

<font size="+1" face="arial">

<h2>Working with String Objects:</h2>

<script language="JavaScript">

1 var str1 = new String("Hello world!"); // Use a String constructor

2 var str2 = "It's a beautiful day today.";

document.write(str1) + "<br>";

3 document.write(str1.fontcolor("blue")+"<br>");

4 document.write(str1.fontsize(8).fontcolor("red").

bold()+"<br>");

5 document.write(str1.big()+ "<br>");

6 document.write("Good-bye, ".italics().bold().big() +

str2 + "<br>");

</script>

</body></html>

 
 
A String object is created with the String() constructor.

  1. A string primitive is created the literal way.

  2. The fontcolor() method is used to change the color of the string to blue. This method emulates the HTML tag, <font color="blue">.

  3. The fontsize(), fontcolor(), and bold() methods are used as properties of the string.

  4. The HTML method is concatenated to the string "Good-bye, " causing it to be displayed in italic, bold, big text. (See Figure 9.23.)
 

Properties of the String object are used to change its appearance and determine its size.

There are a number of methods (see Table 9.10) provided to manipulate a string.

Methods for string manipulation.

Method

What it Does

charAt(index)

Returns the character at a specified index position

charCodeAt(index)

Returns the Unicode encoding of the character at a specified index position

concat(string1, ..., stringn)

Concatenates string arguments to the string on which the method was invoked

fromCharCode(codes)

Creates a string from a comma-separated sequence of character codes

indexOf(substr, startpos)

Searches for first occurrence of substr starting at startpos and returns the startpos(index value) of substr

lastIndexOf(substr, startpos)

Searches for last occurrence of substr starting at startpos and returns the startpos (index value) of substr

replace(searchValue, replaceValue)

Replaces searchValue with replaceValue

search(regexp)

Searches for the regular expression and returns the index of where it was found

slice(startpos, endpos)

Returns string containing the part of the string from startpos to endpos

split(delimiter)

Splits a string into an array of words based on delimiter

substr(startpos, endpos)

Returns a subset of string starting at startpos up to, but not including, endpos

toLocaleLowerCase()

Returns a copy of the string converted to lowercase

toLocaleUpperCase()

Returns a copy of the string converted to uppercase

toLowerCase()

Converts all characters in a string to lowercase letters

toString()

Returns the same string as the source string

toUpperCase()

Converts all characters in a string to uppercase letters

valueOf

Returns the string value of the object

Created: March 27, 2003
Revised: November 19, 2003

URL: http://webreference.com/programming/java_core/2