Download Report

Notes #.9:
JavaScript Object
For INFS 3510,
Spring 2003
Chapter 18 – JavaScript/Jscript: Objects
Objective
To understand object-based programming
(concepts, terminology, style) and its
advantages
To understand commonly used JavaScript
objects
Math
String
Date
Boolean
Number
Outline
18.1
Introduction
18.2
Thinking About Objects
18.3
Math Object
18.4
String Object
18.4.1
Fundamentals of Characters and Strings
18.4.1
Methods of the String Object
18.4.3
Character Processing Methods
18.4.4
Searching Methods
18.4.5
Splitting Strings and Obtaining Substrings
18.4.6
HTML Markup Methods
18.5
Date Object
18.6
Boolean and Number Objects
18.1 Introduction
Up till now
JavaScript used to illustrate basic programming
concepts
JavaScript can also
Manipulate every element of an HTML document from
a script
In this chapter
Provide more formal treatment of objects
Overview and serve as reference for
Several of JavaScript’s built-in objects
Demonstrates their capabilities
18.2 Thinking About
Objects
JavaScript - object-based programming
language
Objects
Two categories
Animate
Inanimate
Has Attributes
Has Methods
Encapsulate data and methods
Property: Information hiding
Communicate with programs through interfaces
Most future software will be built by combining
objects e.g. ActiveX
18.2 Thinking About
Objects (II)
JavaScript uses objects to
Interact with elements (or objects) of an HTML
document
window object
• Enables script to manipulate browser window
• window.status
• window.alert
document object
• Provides access to every element of an HTML document
Encapsulate various capabilities in a script
array object
Enables script to manipulate a collection of data
18.3 Math Object
Commonly used Math object properties
Consta nt
Description
Va lue
Math.E
Euler’s constant.
Approximately 2.718.
Math.LN2
Math.LN10
Math.PI
Natural logarithm of 2.
Natural logarithm of 10.
PI - ratio of circle’s
circumference to its
diameter.
Square root of 0.5.
Square root of 2.0.
Approximately 0.693.
Approximately 2.302.
Approximately
3.141592653589793.
Math.SQRT1_2
Math.SQRT2
Approximately 0.707.
Approximately 1.414.
18.3 Math Object (II)
Math Object Methods: allow programmer to perform
many common mathematical calculations
Method
Description
abs( x )
ceil( x )
cos( x )
absolute value of x
rounds x to the next highest integer
trigonometric cosine of x
(x in radians)
floor( x )
rounds x to the next lowest integer
log( x )
natural logarithm of x (base e)
max( x, y ) larger value of x and y
min( x, y ) smaller value of x and y
pow( x, y ) x raised to power y (xy)
round( x )
rounds x to the closest integer
Exa mple
abs( -3.67 ) is 3.67
ceil( 9.2 ) is 10.0
cos( 0.0 ) is 1.0
floor( -9.8 ) is -10.0
log( 2.718282 ) is 1.0
max( 2.3, 12.7 ) is 12.7
max( -2.3, -12.7 ) is -2.3
min( 2.3, 12.7 ) is 2.3
min( -2.3, -12.7 ) is -12.7
pow( 2.0, 7.0 ) is 128.0
pow( 9.0, .5 ) is 3.0
round( 9.75 ) is 10
round( 9.25 ) is 9
18.4 String Object
String Object
JavaScript’s string and character processing
capabilities
Appropriate for developing
Text editors
Word processors
Page layout software
Computerized typesetting systems
Other kinds of text-processing software
18.4.1 Fundamentals of
Characters and Strings
Characters
Fundamental building blocks of JavaScript programs
String
Series of Characters treated as a single unit
May include
Letters
Digits
Special Characters
+, _, /, $, etc.
18.4.1 Fundamentals of
Characters and Strings
 String literals / string constant
Written as sequence of characters in single or double
quotation marks
Strings may be assigned to variables in
declarations
var color = “blue”;
Strings may be compared with
Relational operators
Equality operators
18.4.2 String Object Methods
Provides methods for
Selecting characters from a string
Combining strings (concatenation)
Obtaining substrings of a string
Searching for substrings within a string
Tokenizing a string
Converting strings to all uppercase or
lowercase
Generate HTML tags
18.4.2 String Object Methods (II)
Method
Description
concat( string ) Concatenates its argument to the end of the string that
invokes the method. This method is the same as adding two
strings with the string concatenation operator + (e.g.,
s1.concat( s2 ) is the same as s1 + s2). The original
strings are not modified.
slice( start,
Returns string containing portion of the string from index
end )
start through index end. If end index not specified, method
returns a string from start index to end of source string. A
negative end index specifies an offset from end of string
starting from a position one past the end of the last character
(so, -1 indicates the last character position in the string).
substr(
Returns a string containing length characters starting from
start, length index start in the source string. If length is not specified, a
string containing characters from start to the end of the
)
source string is returned.
toString()
Returns the same string as the source string.
valueOf()
Returns the same string as the source string.
18.4.3 Character
Processing Methods
Method
charAt( index )
Description
Returns the character at the specified index. If there is no
character at that index, charAt returns an empty string. The
first character is located at index 0.
charCodeAt( index Returns the Unicode value of the character at the specified
)
index. If there is no character at that index, charCodeAt
returns NaN.
fromCharCode(
Converts list of Unicode values into a string containing the
value1,
corresponding characters.
value2, )
toLowerCase()
Returns a string in which all uppercase letters are converted
to lowercase letters. Non-letter characters are not changed.
toUpperCase()
Returns a string in which all lowercase letters are converted
to uppercase letters. Non-letter characters are not changed.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 
4
5
6
7
8
9
10
11
12
18
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<HEAD>
<TITLE>Character Processing Methods</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var s = "ZEBRA";
var s2 = "AbCdEfG";
document.writeln( "<P>Character at index 0 in '" +
s + "' is " + s.charAt( 0 ) );
document.writeln( "<BR>Character code at index 0 in '" +
s + "' is " + s.charCodeAt( 0 ) + "</P>" );
document.writeln( "<P>'" +
String.fromCharCode( 87, 79, 82, 68 ) +
"' contains character codes 87, 79, 82 and 68</P>" )
document.writeln( "<P>'" + s2 + "' in lowercase is '" +
s2.toLowerCase() + "'" );
document.writeln( "<BR>'" + s2 + "' in uppercase is '" +
s2.toUpperCase() + "'</P>" );
</SCRIPT>
</HEAD><BODY></BODY>
</HTML>
Script Output
18.4.4 Searching Methods
Often useful to search for character or sequence
of characters in a string
Method
Description
indexOf(
substring,
index )
Searches for the first occurrence of substring starting
from position index in the string that invokes the method.
The method returns the starting index of substring in the
source string (-1 if substring is not found). If the index
argument is not provided, the method begins searching
from index 0 in the source string.
lastIndexOf(
substring,
index )
Searches for the last occurrence of substring starting from
position index and searching toward the beginning of the
string that invokes the method. The method returns the
starting index of substring in the source string (-1 if
substring is not found). If the index argument is not
provided, the method begins searching from end of the
source string.
1
2
3
4
5
6
7
8
9
10
11
12
18
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>Searching Strings with indexOf and lastIndexOf</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var letters = "abcdefghijklmnopqrstuvwxyzabcdefghijklm";
function buttonPressed()
{
searchForm.first.value =
letters.indexOf( searchForm.inputVal.value );
searchForm.last.value =
letters.lastIndexOf( searchForm.inputVal.value );
searchForm.first12.value =
letters.indexOf( searchForm.inputVal.value, 12 );
searchForm.last12.value =
letters.lastIndexOf( searchForm.inputVal.value, 12 );
}
</SCRIPT>
</HEAD>
25<BODY>
26<FORM NAME = "searchForm">
27
<H1>The string to search is:<BR>
28
abcdefghijklmnopqrstuvwxyzabcdefghijklm</H1>
29
<P>Enter substring to search for
30
<INPUT NAME = "inputVal" TYPE = "text">
31
<INPUT NAME = "search" TYPE = "button" VALUE = "Search"
32
ONCLICK = "buttonPressed()"><BR></P>
33
34
<P>First occurrence located at index
35
<INPUT NAME = "first" TYPE = "text" SIZE = "5">
36
<BR>Last occurrence located at index
37
<INPUT NAME = "last" TYPE = "text" SIZE = "5">
38
<BR>First occurrence from index 12 located at index
39
<INPUT NAME = "first12" TYPE = "text" SIZE = "5">
40
<BR>Last occurrence from index 12 located at index
41
<INPUT NAME = "last12" TYPE = "text" SIZE = "5"></P>
42</FORM>
43</BODY>
44</HTML>
Script Output 1
Script Output 2
18.4.5 Splitting Strings and
Obtaining Substrings
When you read a sentence
Break it into individual words or tokens
Process of breaking string into tokens is
tokenization
Also done by interpreters
Tokens separated by delimiters
Typically white-space characters
Other characters can be used
Results of tokenization are displayed in HTML
TEXTAREA GUI component
18.4.5 Splitting Strings and
Obtaining Substrings (II)
Method
Description
split( string )
Splits source string into an array of strings (tokens) where its
string argument specifies the delimiter (i.e., the characters
that indicate the end of each token in the source string).
substring(
start, end )
Returns a string containing the characters from index start up
to but not including index end in the source string.
1
2
3
4
5
6
7
8
9
10
11
12
18
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>String Method split and substring</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function splitButtonPressed()
{
var strings = myForm.inputVal.value.split( " " );
myForm.output.value = strings.join( "\n" );
myForm.outputSubstring.value =
myForm.inputVal.value.substring( 0, 10 );
}
</SCRIPT>
</HEAD>
20<BODY>
21<FORM NAME = "myForm">
22
<P>Enter a sentence to split into words<BR>
23
<INPUT NAME = "inputVal" TYPE = "text" SIZE = "40">
24
<INPUT NAME = "splitButton" TYPE = "button" VALUE = "Split"
25
ONCLICK = "splitButtonPressed()"></P>
26
27
<P>The sentence split into words is<BR>
28
<TEXTAREA NAME = "output" ROWS = "8" COLS = "34">
29
</TEXTAREA></P>
30
31
<P>The first 10 characters of the input string are
32
<INPUT NAME = "outputSubstring" TYPE = "text" SIZE = "15">
33
</P>
34</FORM>
35</BODY>
36</HTML>
Script Output
18.4.6 HTML Markup Methods
Method
anchor( name )
Description
Wraps source string in anchor element <A></A> with
name as anchor name.
big()
Wraps source string in a <BIG></BIG> element.
blink()
Wraps source string in a <BLINK></BLINK> element.
bold()
Wraps source string in a <B></B> element.
fixed()
Wraps source string in a <TT></TT> element.
fontcolor( color ) Wraps source string in a <FONT></FONT> element with
color as the font color.
fontsize( size )
Wraps source string in a <FONT></FONT> element with
size as HTML font size.
italics()
Wraps source string in an <I></I> element.
link( url )
Wraps source string in an <A></A> with url as the
hyperlink location.
small()
Wraps source string in a <SMALL></SMALL> element.
strike()
Wraps source string in a <STRIKE></STRIKE> element.
sub()
Wraps source string in a <SUB></SUB> element.
sup()
Wraps source string in a <SUP></SUP> element.
1
2
3
4
5
6
7
8
9
10
11
12
18
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>HTML Markup Methods of the String Object</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var anchorText = "This is an anchor",
bigText = "This is big text",
blinkText = "This is blinking text",
boldText = "This is bold text",
fixedText = "This is monospaced text",
fontColorText = "This is red text",
fontSizeText = "This is size 7 text",
italicText = "This is italic text",
linkText = "Click here to go to anchorText",
smallText = "This is small text",
strikeText = "This is strike out text",
subText = "subscript",
supText = "superscript";
23
document.writeln( anchorText.anchor( "top" ) );
24
document.writeln( "<BR>" + bigText.big() );
25
document.writeln( "<BR>" + blinkText.blink() );
26
document.writeln( "<BR>" + boldText.bold() );
27
document.writeln( "<BR>" + fixedText.fixed() );
28
document.writeln(
29
"<BR>" + fontColorText.fontcolor( "red" ) );
30
document.writeln( "<BR>" + fontSizeText.fontsize( 7 ) );
31
document.writeln( "<BR>" + italicText.italics() );
32
document.writeln( "<BR>" + smallText.small() );
33
document.writeln( "<BR>" + strikeText.strike() );
34
document.writeln(
35
"<BR>This is text with a " + subText.sub() );
36
document.writeln(
37
"<BR>This is text with a " + supText.sup() );
38
document.writeln( "<BR>" + linkText.link( "#top" ) );
39 </SCRIPT>
40
41 </HEAD><BODY></BODY>
42 </HTML>
Script Output
18.5 Date Object
JavaScript’s Date object
Provides methods for date and time manipulation
Date and time processing can be performed based
on
Local time zone
Universal Coordinated Time (UTC) /
Greenwich Mean Time (GMT)
Most methods in Date object have local time zone and
UTC versions
When using Date object
Initialize Date object with current date and time
var current = new Date();
Allocates memory for object, calls Date object
constructor
Constructor – initializer method for an object
18.5 Date Object (II)
New Date object creation
new Date( year, month, date, hours,
minutes, seconds, milliseconds );
Hours, minutes, seconds and milliseconds are optional
If argument to the right is specified, all arguments to
the left must also be specified
Month represented internally as integers from 0-11
Therefore, March is indicated by 2, November by 10, etc.
Write out years in 4-digit form (i.e. ‘2000’, not ’00’)
Avoid potential Y2K problems
18.5 Date Object (III)
 Two other methods can be called without
creating new Date object
 Both methods return number of milliseconds between
midnight, January 1, 1970 and date specified by
argument
1. Date.parse( argument );
 Argument
 Short dates
• MM-DD-YY, MM-DD-YYYY, MM/DD/YY, MM/DD/YYYY
 Long dates
•
•
•
Month (at least first two letters), date and year
Time in either 12 or 24 hour clocks
Text and days of the week are ignored
18.5 Date Object (IV)
2. Date.UTC( argument );
 Argument - same for as date construct
( Y, M, D, H, M, S, M )
 Either method can be converted to a Date
object
var theDate = new Date(
numberOfMilliseconds );
 numberOfMilliseconds equals the result of
Date.UTC or Date.Parse
 For listing of Date object methods, see
Figure 18.8
1
2
3
4
5
6
7
8
9
10
11
12
18
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>Date and Time Methods</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var current = new Date();
document.writeln(
"<H1>String representations and valueOf</H1>" );
document.writeln( "toString: " + current.toString() +
"<BR>toLocaleString: " + current.toLocaleString() +
"<BR>toUTCString: " + current.toUTCString() +
"<BR>valueOf: " + current.valueOf() );
document.writeln(
"<H1>Get methods for local time zone</H1>" );
document.writeln( "getDate: " + current.getDate() +
"<BR>getDay: " + current.getDay() +
"<BR>getMonth: " + current.getMonth() +
"<BR>getFullYear: " + current.getFullYear() +
"<BR>getTime: " + current.getTime() +
"<BR>getHours: " + current.getHours() +
"<BR>getMinutes: " + current.getMinutes() +
"<BR>getSeconds: " + current.getSeconds() +
"<BR>getMilliseconds: " + current.getMilliseconds() +
"<BR>getTimezoneOffset: " +
current.getTimezoneOffset() );
32
33
34
document.writeln(
"<H1>Specifying arguments for a new Date</H1>" );
var anotherDate = new Date( 1999, 2, 18, 1, 5, 0, 0 );
35
document.writeln( "Date: " + anotherDate );
36
37
38
document.writeln(
"<H1>Set methods for local time zone</H1>" );
39
anotherDate.setDate( 31 );
40
anotherDate.setMonth( 11 );
41
anotherDate.setFullYear( 1999 );
42
anotherDate.setHours( 23 );
43
anotherDate.setMinutes( 59 );
44
anotherDate.setSeconds( 59 );
45
document.writeln( "Modified date: " + anotherDate );
46 </SCRIPT>
47
48 </HEAD><BODY></BODY>
49 </HTML>
Script Output
18.6 Boolean and Number
Objects
Boolean and Number objects
Provided as object wrappers for
Boolean true/false values
Numbers
Wrappers define methods and properties useful in
manipulating boolean values and numbers
Number object
JavaScript automatically creates Number objects to
store numeric values
Programmers can create a Number object with
var n = new Number( numericValue );
For other Number object methods, see figure 18.11
18.6 Boolean and Number
Objects (II)
Boolean object
When boolean value required in a program,
automatically created by JavaScript to store the value
using Boolean object
Programmers can create Boolean objects explicitly
var b = new Boolean( booleanValue );
If booleanvalue equals false, 0, null,
Number.NaN or empty string (“ ”)
Boolean object contains false
Otherwise
Boolean Object contains true
18.6 Boolean and Number
Objects (III)
Methods of the Boolean Object
Method
Description
toString()
Returns the string “true” if the value of
the Boolean object is true; otherwise,
returns the string “false.”
valueOf()
Returns the value true if the Boolean
object is true; otherwise, returns false.