Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

Published byAlaina Sullivan Modified over 8 years ago

Similar presentations

Presentation on theme: " 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing."— Presentation transcript:

1  2004 Prentice Hall, Inc. All rights reserved. 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

2  2004 Prentice Hall, Inc. All rights reserved. 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.

3  2004 Prentice Hall, Inc. All rights reserved. 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

4  2004 Prentice Hall, Inc. All rights reserved. 13.2 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

5  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (1 of 2)

6  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (2 of 2)

7  2004 Prentice Hall, Inc. All rights reserved. 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 element’s child elements

8  2004 Prentice Hall, Inc. All rights reserved. Outline all.html (1 of 2)

9  2004 Prentice Hall, Inc. All rights reserved. Outline all.html (2 of 2)

10  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (1 of 3)

11  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (2 of 3)

12  2004 Prentice Hall, Inc. All rights reserved. Outline children.html (3 of 3)

13  2004 Prentice Hall, Inc. All rights reserved.

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

15  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle.html (1 of 2)

16  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle.html (2 of 2)

17  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle2.html (1 of 2)

18  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicstyle2.html (2 of 2)

19  2004 Prentice Hall, Inc. All rights reserved.

20 13.5 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

21  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (1 of 3)

22  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (2 of 3)

23  2004 Prentice Hall, Inc. All rights reserved. Outline dynamicposition.html (3 of 3)

24  2004 Prentice Hall, Inc. All rights reserved.

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

26  2004 Prentice Hall, Inc. All rights reserved. Outline index.html (1 of 1)

27  2004 Prentice Hall, Inc. All rights reserved. Outline top.html (1 of 2)

28  2004 Prentice Hall, Inc. All rights reserved. Outline top.html (2 of 2)

29  2004 Prentice Hall, Inc. All rights reserved.

30 13.7 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

31  2004 Prentice Hall, Inc. All rights reserved. Outline navigator.html (1 of 2)

32  2004 Prentice Hall, Inc. All rights reserved. Outline navigator.html (2 of 2)

33  2004 Prentice Hall, Inc. All rights reserved. 13.8 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. 13.10DHTML Object Model.

34  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model

35  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model

36  2004 Prentice Hall, Inc. All rights reserved. 13.8 Summary of the DHTML Object Model

Download ppt " 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing."

Similar presentations

1 Introduction to Web Application Implement JavaScript in HTML.

1 Introduction to Web Application Implement JavaScript in HTML.
Session 10 Dynamic HTML: Cascading Style Sheets™ (CSS), Object Model and Collections Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.

Session 10 Dynamic HTML: Cascading Style Sheets™ (CSS), Object Model and Collections Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 24 - VBScript Outline 24.1 Introduction 24.2 Operators 24.3 Data Types and Control Structures.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 24 - VBScript Outline 24.1 Introduction 24.2 Operators 24.3 Data Types and Control Structures.
Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.

Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.

Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
© De Montfort University, 2004 1 Javascript control of players Howell Istance.

© De Montfort University, Javascript control of players Howell Istance.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
 2008 Pearson Education, Inc. All rights reserved. 1 12 Document Object Model (DOM): Objects and Collections.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
1 By: Nathan Mittler For CSCI 344 Spring 1998. 2 INTRODUCTION DHTML builds on to the capabilities of HTML Currently supported by Microsoft Internet Explorer.

1 By: Nathan Mittler For CSCI 344 Spring INTRODUCTION DHTML builds on to the capabilities of HTML Currently supported by Microsoft Internet Explorer.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.

JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
JavaScript, Third Edition

JavaScript, Third Edition
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.

Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic DHTML.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic DHTML.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,

Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
DHTML - Introduction Introduction to DHTML, the DOM, JS review.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

Similar presentations

Ads by Google