JavaScript: Objects

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 1
 Internet & World Wide Web
How to Program, 5/e

©1992-2012 by Pearson Education, Inc. All Rights Reserved.

©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 3
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 4
} This chapter presents a more formal
treatment of objects.
} We use HTML5’s new web storage
capabilities to create a web application that
stores a user’s favorite Twitter searches on
the computer for easy access at a later time.
} We also provide a brief introduction to JSON,
a means for creating JavaScript objects—
typically for transferring data over the
Internet between client-side and server-side
programs.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 5
} Math object methods enable you to
conveniently perform many common
mathematical calculations.
} An object’s methods are called by writing the
name of the object followed by a dot operator
(.) and the name of the method
} In parentheses following the method name is
are arguments to the method

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 6
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 7
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 8
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 9
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 10
} Characters are the building blocks of JavaScript
programs
} Every program is composed of a sequence of
characters grouped together meaningfully that is
interpreted by the computer as a series of
instructions used to accomplish a task
} A string is a series of characters treated as a single
unit
} A string may include letters, digits and various
special characters, such as +, -, *, /, and $
} JavaScript supports Unicode, which represents a
large portion of the world’s languages
} String literals or string constants are written as a
sequence of characters in double or single
quotation marks

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 11
} Combining strings is called concatenation

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 12
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 13
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 14
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 15
} String method charAt
§ Returns the character at a specific position
§ Indices for the characters in a string start at 0 (the first
character) and go up to (but do not include) the string’s
length
§ If the index is outside the bounds of the string, the method
returns an empty string
} String method charCodeAt
§ Returns the Unicode value of the character at a specific
position
§ If the index is outside the bounds of the string, the method
returns NaN.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 16
} String method fromCharCode
§ Returns a string created from a series of Unicode
values
} String method toLowerCase
§ Returns the lowercase version of a string
} String method toUpperCase
§ Returns the uppercase version of a string

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 17
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 18
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 19
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 20
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 21
} String method indexOf
§ Determines the location of the first occurrence of its argument in
the string used to call the method
§ If the substring is found, the index at which the first occurrence of
the substring begins is returned; otherwise, -1 is returned
§ Receives an optional second argument specifying the index from
which to begin the search
} String method lastIndexOf
§ Determines the location of the last occurrence of its argument in
the string used to call the method
§ If the substring is found, the index at which the last occurrence of
the substring begins is returned; otherwise, -1 is returned
§ Receives an optional second argument specifying the index from
which to begin the search

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 22
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 23
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 24
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 25
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 26
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 27
} Breaking a string into tokens is called tokenization
} Tokens are separated from one another by delimiters,
typically white-space characters such as blank, tab, newline
and carriage return
§ Other characters may also be used as delimiters to separate tokens
} String method split
§ Breaks a string into its component tokens
§ Argument is the delimiter string
§ Returns an array of strings containing the tokens
} String method substring
§ Returns the substring from the starting index (its first argument) up to but not
including the ending index (its second argument)
§ If the ending index is greater than the length of the string, the substring returned
includes the characters from the starting index to the end of the original string

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 28
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 29
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 30
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 31
} delimiter string
§ the string that determines the end of each token in the original string.
} The method returns the substring from the starting index (0
in this example) up to but not including the ending index (10
in this example).
} If the ending index is greater than the length of the string,
the substring returned includes the characters from the
starting index to the end of the original string.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 32
} Date object provides methods for date and time
manipulations
§ Based either on the computer’s local time zone or on World Time
Standard’s Coordinated Universal Time (abbreviated UTC)
} Most methods have a local time zone and a UTC
version
} Empty parentheses after an object name indicate a
call to the object’s constructor with no arguments
§ A constructor is an initializer method for an object
§ Called automatically when an object is allocated with new
§ The Date constructor with no arguments initializes the Date object with
the local computer’s current date and time
§ A new Date object can be initialized by passing the number of
milliseconds since midnight, January 1, 1970, to the Date constructor
§ Can also create a new Date object by supplying arguments to the Date
constructor for year, month, date, hours, minutes, seconds and
milliseconds.
– Hours, minutes, seconds and milliseconds arguments are all optional
– If any one of these arguments is not specified, a zero is supplied in its place
– If an argument is specified, all arguments to its left must be specified

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 33
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 34
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 35
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 36
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 37
} Date method parse
§ Receives as its argument a string representing a date and
time and returns the number of milliseconds between
midnight, January 1, 1970, and the specified date and time
} Date method UTC
§ Returns the number of milliseconds between midnight,
January 1, 1970, and the date and time specified as its
arguments
§ Arguments include the required year, month and date, and
the optional hours, minutes, seconds and milliseconds
§ If an argument is not specified, a 0 is supplied in its place
§ For hours, minutes and seconds, if the argument to the
right of any of these arguments is specified, that argument
must also be specified

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 38
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 39
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 40
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 41
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 42
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 43
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 44
} The Boolean and Number objects are object wrappers
for boolean true/false values and numbers,
respectively
} When a boolean value is required in a JavaScript
program, JavaScript automatically creates a Boolean
object to store the value
} JavaScript programmers can create Boolean objects
explicitly
var b = new Boolean( booleanValue );
booleanValue specifies whether the Boolean object
should contain true or false.
§ If booleanValue is false, 0, null, Number.NaN or the
empty string (""), or if no argument is supplied, the new
Boolean object contains false
§ Otherwise, the new Boolean object contains true

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 45
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 46
} JavaScript automatically creates Number
objects to store numeric values in a script
} You can create a Number object with the
statement
var n = new Number( numericValue );
numericValue is the number to store in the
object
} Although you can explicitly create Number
objects, normally they are created when
needed by the JavaScript interpreter

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 47
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 48
} document object
§ Provided by the browser and allows JavaScript code
to manipulate the current document in the browser

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 49
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 50
} Before HTML5, websites could store only small amounts of
text-based information on a user’s computer using cookies.
} A cookie is a key/value pair in which each key has a
corresponding value.
} The key and value are both strings.
} Cookies are stored by the browser on the user’s computer to
maintain client-specific information during and between
browser sessions.
} A website might use a cookie to record user preferences or
other information that it can retrieve during the client’s
subsequent visits.
} When a user visits a website, the browser locates any cookies
written by that website and sends them to the server.
} Cookies may be accessed only by the web server and scripts
of the website from which the cookies originated

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 51
Problems with Cookies
}They’re extremely limited in size.
}Cookies cannot store entire documents.
}If the user browses the same site from multiple tabs, all of the
site’s cookies are shared by the pages in each tab.
§ This could be problematic in web applications that allow the user to
purchase items.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 52
Introducing localStorage and sessionStorage
}As of HTML5, there are two new mechanisms for storing key/
value pairs that help eliminate some of the problems with
cookies.
§ Web applications can use the window object’s
localStorage property to store up to several megabytes of
key/value-pair string data on the user’s computer and can
access that data across browsing sessions and browser
tabs.
§ Web applications that need access to data for only a
browsing session and that must keep that data separate
among multiple tabs can use the window object’s
sessionStorage property. There’s a separate
sessionStorage object for every browsing session,
including separate tabs that are accessing the same
website.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 53
Favorite Twitter Searches App Using localStorage and
sessionStorage
}This app allows users to save their favorite (possibly lengthy)
Twitter search strings with easy-to-remember, user-chosen,
short tag names. Users can then conveniently follow the tweets
on their favorite topics by visiting this web page and clicking
the link for a saved search.
}The user’s favorite searches are saved using localStorage,
so they’re immediately available each time the user browses the
app’s web page.
}The app uses sessionStorage to determine whether the user
has visited the page previously during the current browsing
session. If not, the app displays a welcome message.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 54
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 55
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 56
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 57
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 58
Favorite Twitter Searches HTML5 Document
} The Favorite Twitter Searches application
contains three files
§ FavoriteTwitterSearches.html
§ styles.css
§ FavoriteTwitterSearches.js
} The HTML5 document provides a form that
allows the user to enter new searches.
Previously tagged searches are displayed in
the div named searches.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 59
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 60
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 61
CSS for Favorite Twitter Searches
} styles.css contains the CSS styles for this app.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 62
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 63
Script for Favorite Twitter Searches
}FavoriteTwitterSearches.js presents the JavaScript for the
app.
}When the HTML5 document loads, function start is called to
register event handlers and call function loadSearches.
}The sessionStorage object is used to determine whether the
user has already visited the page during this browsing session.
}The getItem method receives a name of a key as an argument.
§ If the key exists, the method returns the corresponding string value;
otherwise, it returns null.
}If
this is the user’s first visit to the page during this browsing
session, the setItem method is used to set the key
"herePreviously" to the string "true", then the app displays a
welcome message.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 64
} The localStorage object’s length represents the number of
key/value pairs stored.
} Method key receives an index as an argument and returns the
corresponding key.
} For simplicity, we use the onclick attributes of the dynamically
generated Edit and Delete buttons to set the buttons’ event
handlers—this is an older mechanism for registering event
handlers.
} To register these with the elements’ addEventListener
method, we’d have to dynamically locate the buttons in the page
after we’ve created them, then register the event handlers, which
would require significant additional code.
} Separately, notice that each event handler is receiving the button
input element’s id as an argument—this enables the event
handler to use the id value when handling the event.
} [Note: The localStorage and sessionStorage properties and
methods we discuss throughout this section apply to both
objects.]

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 65
} Function clearAllSearches is called when the user clicks the
Clear All Saved Searches button.
} The clear method of the localStorage object removes all key/
value pairs from the object.
} loadSearches is called to refresh the list of saved searches in
the web page.
} Function saveSearch is called when the user clicks Save to save
a search.
} The setItem method stores a key/value pair in the
localStorage object.
§ If the key already exits, setItem replaces the corresponding value;
§ otherwise, it creates a new key/value pair.
} loadSearches is called to refresh the list of saved searches in
the web page.
} removeItem method is called to remove a key/value pair from
the localStorage object.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 66
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 67
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 68
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 69
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 70
} JSON (JavaScript Object Notation)
§ A simple way to represent JavaScript objects as strings
§ introduced as an alternative to XML as a data-exchange technique
} JSON has gained acclaim due to its simple format, making
objects easy to read, create and parse.
} Each JSON object is represented as a list of property names
and values contained in curly braces, in the following format:
{ propertyName1 : value1, propertyName2 : value2 }
} Arrays are represented in JSON with square brackets in the
following format:
[ value0, value1, value2 ]
} Each value can be a string, a number, a JSON object, true,
false or null.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 71
} To appreciate the simplicity of JSON data, examine this
representation of an array of address-book entries that we’ll
use in Chapter 16:
[ { first: 'Cheryl', last: 'Black' },
{ first: 'James', last: 'Blue' },
{ first: 'Mike', last: 'Brown' },
{ first: 'Meg', last: 'Gold' } ]
} JSON provides a straightforward way to manipulate objects in
JavaScript, and many other programming languages now
support this format.
} In addition to simplifying object creation, JSON allows
programs to easily extract data and efficiently transmit it
across the Internet.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 72