1 JavaScript: Objects and Object Models October 25, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN

2 Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object 12.4 String Object Fundamentals of Characters and Strings Methods of the String Object Character-Processing Methods Searching Methods Splitting Strings and Obtaining Substrings 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 Final JavaScript Example Web Resources

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

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 – Exhaustive list – String Date Math Number and Boolean

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

Methods of the String Object Fig String object methods.

Methods of the String Object Fig String object methods.

Methods of the String Object

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

Searching Methods indexOf and lastIndexOf –Search for a specified substring in a string

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)

XHTML Markup Methods Anchor – Anchor Blink – blinking text Fixed – monospaced text Strike – strike out text Subscript – subscript Superscript – superscript

Date Object Provides methods for date and time manipulations

Date Object

Date Object

Date Object

Math Object Allow the programmer to perform many common mathematical calculations

Math Object Fig Math object methods.

Math Object

Math Object

Boolean and Number Objects Object wrappers for boolean true / false values and numbers

Boolean and Number Objects

Boolean and Number Objects

document Object Manipulate document that is currently visible in the browser window

document Object

window Object Provides methods for manipulating browser window

28 window.html 1 of 7

29 window.html 2 of 7

30 window.html 3 of 7

31 window.html 4 of 7

32 window.html 5 of 7

33 window.html 6 of 7

34 window.html 7 of 7

35

36

window Object

Using Cookies Cookie –Data stored on user’s 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 –

39 cookie.html 1 of 4

40 cookie.html 2 of 4

41 cookie.html 3 of 4

42 cookie.html 4 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.

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 –

Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig DHTML Object Model.

Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object –XHTML attributes become properties that can be manipulated by scripting

48

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 element’s child elements

50 Outline all.html (1 of 2)

51 Outline

Dynamic Styles Element’s style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

53 Outline dynami cstyle. html (1 of 2)

54 Outline dynami cstyle2.html (1 of 2)

Dynamic Positioning XHTML elements can be positioned with scripting –Declare an element’s 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

Using the frames Collection Referencing elements and objects in different frames by using the frames collection

58 Outline

59

navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer –Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using

61 Outline navigat or.html (1 of 2)

Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig DHTML Object Model.

Summary of the DHTML Object Model

Summary of the DHTML Object Model

Summary of the DHTML Object Model

66 Helpful references