JavaScript: Objects and Object Models

1
JavaScriptObjects and Object Models

• October 25, 2005
• Slides modified fromInternet World Wide Web
  How to Program. 2004 (3rd) edition. By Deitel,
  Deitel, and Goldberg. Published by Prentice Hall.
  ISBN 0-13-145091-3

2
Chapter 12 - JavaScript Objects
Outline 12.1 Introduction 12.2 Thinking About
Objects 12.3 Math Object 12.4 String
Object 12.4.1 Fundamentals of Characters and
Strings 12.4.2 Methods of the String
Object 12.4.3 Character-Processing
Methods 12.4.4 Searching Methods 12.4.5
Splitting Strings and Obtaining
Substrings 12.4.6 XHTML Markup Methods 12.5
Date Object 12.6 Boolean and Number
Objects 12.7 document Object 12.8 window
Object 12.9 Using Cookies 12.10 Final
JavaScript Example 12.11 Web Resources
3
12.1  Introduction

• Use JavaScript to manipulate every element of
  XHTML document from a script
• Reference for several of JavaScripts built-in
  objects
• Demonstrates the capabilities

4
12.2  Thinking About Objects

• Objects
• Attributes
• Behaviors
• Encapsulate date and methods
• Property of information hiding
• Details hidden within the objects themselves

5
Key Objects in JavaScript

• Key objects
• http//www.w3schools.com/jsref/default.asp
• Exhaustive list
• http//www.devguru.com/Technologies/ecmascript/qui
  ckref/js_objects.html
• String
• Date
• Math
• Number and Boolean

6
12.4  String Object

• JavaScripts string and character-processing
  capabilities
• Appropriate for processing names, addresses,
  credit card information, etc.
• 12.4.1 Fundamentals of Characters and Strings
• Characters
• Fundamental building blocks of JavaScript
  programs
• String
• Series of characters treated as a single unit

7
12.4.2 Methods of the String Object
Fig. 12.3 String object methods.
8
12.4.2 Methods of the String Object
Fig. 12.3 String object methods.
9
12.4.2 Methods of the String Object
10
12.4.3 Character Processing Methods

• charAt
• Returns the character at specific position
• charCodeAt
• Returns Unicode value of the character at
  specific position
• fromCharCode
• Returns string created from series of Unicode
  values
• toLowerCase
• Returns lowercase version of string
• toUpperCase
• Returns uppercase version of string

11
12.4.4 Searching Methods

• indexOf and lastIndexOf
• Search for a specified substring in a string

12
12.4.5 Splitting Strings and Obtaining Substrings

• Tokenization
• The process of breaking a string into tokens
• Tokens
• Individual words
• Separated by delimiters
• String.split()
• String.substr(start, length) and
  String.substring(indexA, indexB)

13
12.4.6 XHTML Markup Methods

• Anchor
• lta name topgt Anchor lt/agt
• Blink
• ltblinkgt blinking text lt/blinkgt
• Fixed
• ltttgt monospaced text lt/ttgt
• Strike
• ltstrikegt strike out text lt/strikegt
• Subscript
• ltsubgt subscript lt/subgt
• Superscript
• ltsupgt superscript lt/supgt

14
12.5  Date Object

• Provides methods for date and time manipulations

15
12.5  Date Object
16
12.5  Date Object
17
12.5  Date Object
18
12.3  Math Object

• Allow the programmer to perform many common
  mathematical calculations

19
12.3  Math Object
Fig. 12.1 Math object methods.
20
12.3  Math Object
21
12.3  Math Object
22
12.6  Boolean and Number Objects

• Object wrappers for boolean true/false values and
  numbers

23
12.6  Boolean and Number Objects
24
12.6  Boolean and Number Objects
25
12.7  document Object

• Manipulate document that is currently visible in
  the browser window

26
12.7  document Object
27
12.8  window Object

• Provides methods for manipulating browser window

28
window.html1 of 7
29
window.html2 of 7
30
window.html3 of 7
31
window.html4 of 7
32
window.html5 of 7
33
window.html6 of 7
34
window.html7 of 7
35
(No Transcript)
36
(No Transcript)
37
12.8  window Object
38
12.9  Using Cookies

• Cookie
• Data stored on users computer to maintain
  information about client during and between
  browser sessions
• Can be accessed through cookie property
• Set expiration date through expires property
• Use escape function to convert non-alphanumeric
  characters to hexadecimal escape sequences
• unescape function converts hexadecimal escape
  sequences back to English characters
• http//www.yourhtmlsource.com/javascript/cookies.h
  tml

39
cookie.html1 of 4
40
cookie.html2 of 4
41
cookie.html3 of 4
42
cookie.html4 of 4
43
Chapter 13 - Dynamic HTML Object Model and
Collections
Outline 13.1 Introduction 13.2 Object
Referencing 13.3 Collections all and children
13.4 Dynamic Styles 13.5 Dynamic
Positioning 13.6 Using the frames Collection
13.7 navigator Object 13.8 Summary of the
DHTML Object Model
44
Objectives

• In this lesson, you will learn
• To use the Dynamic HTML Object Model and
  scripting to create dynamic Web pages.
• To understand the Dynamic HTML object hierarchy.
• To use the all and children collections to
  enumerate all of the XHTML elements of a Web
  page.
• To use dynamic styles and dynamic positioning.
• To use the frames collection to access objects in
  a separate frame on your Web page.
• To use the navigator object to determine which
  browser is being used to access your page.

45
13.1 Introduction

• Dynamic HTML Object Model
• Allows Web authors to control the presentation of
  their pages
• Gives them access to all the elements on their
  pages
• Web page
• Elements, forms, frames, tables
• Represented in an object hierarchy
• Scripting
• Retrieve and modify properties and attributes
• Referring to text
• http//www.irt.org/script/1370.htm

46
13.8  Summary of the DHTML Object Model
Fig. 13.10 DHTML Object Model.
47
13.2  Object Referencing

• The simplest way to reference an element is by
  using the elements id attribute.
• The element is represented as an object
• XHTML attributes become properties that can be
  manipulated by scripting

48
(No Transcript)
49
13.3  Collections all and children

• Collections
• Arrays of related objects on a page
• all
• all the XHTML elements in a document
• children
• Specific element contains that elements child
  elements

50
Outline
all.html(1 of 2)
51
Outline
52
13.4  Dynamic Styles

• Elements style can be changed dynamically
• Dynamic HTML Object Model also allows you to
  change the class attribute

53
Outline
dynamicstyle.html(1 of 2)
54
Outline
dynamicstyle2.html(1 of 2)
55
13.5  Dynamic Positioning

• XHTML elements can be positioned with scripting
• Declare an elements CSS position property to be
  either absolute or relative
• Move the element by manipulating any of the top,
  left, right or bottom CSS properties

56
Outline
57
13.6  Using the frames Collection

• Referencing elements and objects in different
  frames by using the frames collection

58
Outline
59
(No Transcript)
60
13.7  navigator Object

• Netscape, Mozilla, Microsofts Internet Explorer
• Others as well
• Contains information about the Web browser
• Allows Web authors to determine what browser the
  user is using

61
Outline
navigator.html(1 of 2)
62
13.8  Summary of the DHTML Object Model
Fig. 13.10 DHTML Object Model.
63
13.8  Summary of the DHTML Object Model
64
13.8  Summary of the DHTML Object Model
65
13.8  Summary of the DHTML Object Model
66
Helpful references

• http//www.devguru.com/Technologies/ecmascript/qui
  ckref/js_objects.html
• http//www.w3schools.com/js/js_obj_htmldom.asp