XP Tutorial 16 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents.

Slides:



Advertisements
Similar presentations
Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.
Advertisements

HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.
Lesson 12- Unit L Programming Web Pages with JavaScript.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
COMPSCI 345 / SOFTENG 350 TUTORIAL WEEK 8 | SAM KAVANAGH.
Tutorial 16 Working with Dynamic Content and Styles.
Tutorial 10 Programming with JavaScript
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Tutorial 11 Working with Operators and Expressions
Tutorial 14 Working with Forms and Regular Expressions.
XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding Addresses from Spammers.
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,
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
XP Tutorial 14 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Forms and Regular Expressions Validating a Web Form with JavaScript.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
Week 1.  Phillip Chee   Ext.1214 
HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.
XP New Perspectives on XML Tutorial 6 1 TUTORIAL 6 XSLT Tutorial – Carey ISBN
XP 1 CREATING AN XML DOCUMENT. XP 2 INTRODUCING XML XML stands for Extensible Markup Language. A markup language specifies the structure and content of.
WORKING WITH XSLT AND XPATH
XP New Perspectives on XML, 2 nd Edition Tutorial 10 1 WORKING WITH THE DOCUMENT OBJECT MODEL TUTORIAL 10.
Tutorial 4 Creating Special Effects with CSS
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: 1.
Creating an Animated Web Page
Working with Objects Creating a Dynamic Web Page.
CITS1231 Web Technologies JavaScript and Document Object Model.
XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.
JavaScript, Fourth Edition
5.2 DOM (Document Object Model). 2 Motto: To write it, it took three months; to conceive it three minutes; to collect the data in it — all my life. —F.
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
CITA 330 Section 6 XSLT. Transforming XML Documents to XHTML Documents XSLT is an XML dialect which is declared under namespace "
XSLT Kanda Runapongsa Dept. of Computer Engineering Khon Kaen University.
XML 2nd EDITION Tutorial 1 Creating An Xml Document.
XP Tutorial 12 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions.
Tutorial 5 Working with Tables and Columns
DHTML: Working with Objects Creating a Dynamic Web Page.
XP Tutorial 6 New Perspectives on JavaScript, Comprehensive1 Working with Windows and Frames Enhancing a Web Site with Interactive Windows.
USING XML AS A DATA SOURCE. Data binding is a process by which information in a data source is stored as an object in computer memory. In this presentation,
XP 1 New Perspectives on XML Binding XML Data with Internet Explorer.
XP 1 Creating an XML Document Developing an XML Document for the Jazz Warehouse XML Tutorial.
XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial.
1 Tutorial 11 Creating an XML Document Developing a Document for a Cooking Web Site.
Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.
Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling – Inline – Scripting –
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
XP Tutorial 5 New Perspectives on JavaScript, Comprehensive1 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
XML DOM Week 11 Web site:
XP Tutorial 10New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
XP Tutorial 10 New Perspectives on JavaScript, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents.
Working with Cascading Style Sheets
Programming Web Pages with JavaScript
Using DHTML to Enhance Web Pages
Document Object Model (DOM): Objects and Collections
Working with the Event Model
Working with Dynamic Content and Styles
Document Object Model (DOM): Objects and Collections
Tutorial 3 Working with Cascading Style Sheets
Tutorial 10 Programming with JavaScript
Presentation transcript:

XP Tutorial 16 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 2 Objectives Learn how to create dynamic content under the Internet Explorer DOM Understand the methods and properties of nodes and the node tree Learn to create element and text nodes Understand how to attach nodes to a Web page document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 3 Objectives Apply node properties and styles to create dynamic content Work with the properties and methods of attribute nodes Work with element attributes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 4 Objectives Hide and redisplay Web page objects Understand how to create recursive functions to navigate a node tree Learn to work with the properties and methods of style sheet objects

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 5 Introducing Dynamic Content

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 6 Introducing Dynamic Content

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 7 Introducing Dynamic Content Inserting HTML Content into an Element –Generating a table of contents involves working with dynamic content, which is content determined by the operation of a script running within the browser –One property that can be used to write content in an element is the innerHTML property object.innerHTML = content

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 8 Introducing Dynamic Content Inserting HTML Content into an Element

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 9 Introducing Dynamic Content Dynamic Content in Internet Explorer –The innerHTML property is not part of the official specifications for the W3C document object model –However, since it has proven valuable and easy to use, it is supported by all browsers –If you want to change both the content and the HTML element itself, you use the outerHTML property object.outerHTML = content;

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 10 Introducing Dynamic Content Dynamic Content in Internet Explorer –To change the text of a page object, use the property object.innerText="content" –To change the text of a page object, including the object itself, use object.outerText="content"

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 11 Introducing Dynamic Content Dynamic Content in Internet Explorer –To insert HTML content at a specific location relative to a page object, use the property object.insertAdjacentHTML="position, content" –Where position is “BeforeBegin”, “AfterBegin”, “BeforeEnd”, or “AfterEnd”

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 12 Working with Nodes Dynamic content in the specifications for the W3C document object model works differently than in the Internet Explorer DOM In the W3C DOM, objects are organized into nodes, with each node representing an object within the Web page and Web browser

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 13 Working with Nodes The Node Tree –Nodes are arranged into a hierarchal structure called a node tree, which indicates the relationship between each of the nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 14 Working with Nodes The Node Tree –The parent of all nodes within a document is the root node

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 15 Working with Nodes Node types, names, and values

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 16 Working with Nodes Node types, names, and values

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 17 Working with Nodes Creating and Attaching Nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 18 Working with Nodes Creating and Attaching Nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 19 Working with Nodes Creating and Attaching Nodes –Unattached nodes and node trees are known as document fragments and exist only in a browser’s memory

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 20 Creating a List of Heading Elements Looping Through the Child Node Collection

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 21 Creating a List of Heading Elements Matching the Heading Elements

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 22 Creating a List of Heading Elements Creating the List Item Elements

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 23 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 24 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 25 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 26 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 27 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 28 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 29 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 30 Creating a Nested List

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 31 Working with Attributes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 32 Working with Attributes Attribute Nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 33 Working with Attributes Attribute Nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 34 Working with Attributes Attributes as Object Properties –The document object model also supports a shorthand way of applying attributes as properties of an element elem.att –to test whether the listItem node has an id attribute, you can use the following expression listItem.id != ""

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 35 Working with Attributes Setting the Section Heading Ids

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 36 Working with Attributes Inserting Links

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 37 Working with Attributes Inserting Links

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 38 Expanding and Collapsing a Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 39 Expanding and Collapsing a Document Creating a plus/minus Box

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 40 Expanding and Collapsing a Document Creating a plus/minus Box

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 41 Expanding and Collapsing a Document Adding Event Handlers to the plus/minus Boxes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 42 Expanding and Collapsing a Document Hiding and Display Objects

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 43 Expanding and Collapsing a Document Hiding and Display Objects

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 44 Expanding and Collapsing a Document Expanding and Collapsing the Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 45 Expanding and Collapsing a Document Expanding and Collapsing the Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 46 Expanding and Collapsing a Document Expanding and Collapsing the Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 47 Expanding and Collapsing a Document Expanding and Collapsing the Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 48 Expanding and Collapsing a Document Expanding and Collapsing the Document

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 49 Expanding and Collapsing a Document Testing the Dynamic TOC

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 50 Traversing the Node Tree using Recursion Recursion is a programming technique in which a function calls itself repeatedly until a stopping condition is met

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 51 Traversing the Node Tree using Recursion

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 52 Traversing the Node Tree using Recursion

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 53 Working with Style Sheets

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 54 Working with Style Sheets Working with the link element

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 55 Working with Style Sheets The Style Sheet Collection

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 56 Working with Style Sheets Working with Style Sheet Rules

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 57 Tips for Working with Dynamic Content and Styles Use the innerHTML property as a quick and easy way of modifying the contents of element nodes. Do not use other Internet Explorer properties, since they are not well supported by other browsers. Use familial references rather than counter variables in for loops to increase the speed and flexibility of your program code When writing scripts that modify node elements, be sure to test the active node is an element node by using the nodeType property

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 58 Tips for Working with Dynamic Content and Styles Be aware that browsers will treat white space found in HTML files differently. The Internet Explorer browser does not treat occurrences of white space as text nodes, while in the W3C DOM and in many browsers, white space is treated as a text node Use attribute properties as a quick and easy way to work with the attributes of element nodes

XP Tutorial 16New Perspectives on HTML, XHTML, and DHTML, Comprehensive 59 Tips for Working with Dynamic Content and Styles Use recursive functions to navigate an entire node tree, ensuring that each node is included in the path Use the getElementsByTagName() method as a quick and easy way of generating object collections for elements in your document that share a common element name