1 / 19

JavaScript Lecture 4 (Gosselin4 Ch. 10 & 11) DOM and Advanced DHTML

JavaScript Lecture 4 (Gosselin4 Ch. 10 & 11) DOM and Advanced DHTML. DOM = Document Object Model Duplicates much of the functionality of the BOM Why - The BOM is browser specific The DOM is an industry standard just for HTML pages

andren
Download Presentation

JavaScript Lecture 4 (Gosselin4 Ch. 10 & 11) DOM and Advanced DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Lecture 4 (Gosselin4 Ch. 10 & 11)DOM and Advanced DHTML • DOM = Document Object Model • Duplicates much of the functionality of the BOM • Why - • The BOM is browser specific • The DOM is an industry standard just for HTML pages • and is also a more “rational” design based on a “tree” structure for the document IS 360 JS Lecture 4: DOM and Advanced DHTML

  2. A simple Tree Structure Example <HTML> <HEAD> <TITLE> Simple DOM Demo </TITLE> </HEAD> <BODY ID="bodyNode"> <P ID = "p1Node">This is paragraph 1. </P> This is the document body <P ID = "p2Node"> </P> <P ID = "p3Node"></P> </BODY> </HTML> IS 360 JS Lecture 4: DOM and Advanced DHTML

  3. Navigating the tree • The root of the tree is the <BODY> tag which has the ID “bodynode” • To get down to the first node, use the function node method firstchild: • var x=bodynode.firstchild • Then x would be the object for the first tag in the document, p1Node IS 360 JS Lecture 4: DOM and Advanced DHTML

  4. More DOM Tree Navigation • To go to the next lower level use ‘childnode’ again: • This time y = the DOM node containing the text that is inside the <p></p> tags. • If paragraph p1Node had other tags inside it with tags inside them, we could continue to “descend the tree” using the childnode method. y = p1Node.childnode IS 360 JS Lecture 4: DOM and Advanced DHTML

  5. More DOM Tree Navigation (2) • The other paragraphs within the document are at the same level as p1Node (not inside it) and can be reached by using the nextSibling method • Z = p1Node.nextSibling • Z = p2Node, the next paragraph encountered reading down the code of the document. • Both nextSibling and childNode return NULL when the tree ‘branch’ has been completely traversed IS 360 JS Lecture 4: DOM and Advanced DHTML

  6. So What? • Well, now that you have a way of parsing (pulling apart) any HTML document into tag and content nodes (using DOM navigation) you can use other node methods to change content or any attribute at any time. • Remember innerHTML and outerHTML from an earlier lab (part of the BOM)? • Now you can use equivalent DOM methods to rewrite any part of an HTML page dynamically in response to user input IS 360 JS Lecture 4: DOM and Advanced DHTML

  7. DOM-based DHTML example • Introducing a DOM method for retrieving any named node (paragraph, DIV, etc.) • getElementById(id) • Ex: myNode = getElementById(“heading1”) • Once retreived, any aspect of the node can be changed: • myNode.nodeValue = “someText” • myNode.style.fontFamily = “Arial” • Code example: BJS rollover.htm (p. 566) IS 360 JS Lecture 4: DOM and Advanced DHTML

  8. DOM document properties IS 360 JS Lecture 4: DOM and Advanced DHTML

  9. A very few DOM methods IS 360 JS Lecture 4: DOM and Advanced DHTML

  10. A useful Frame writing technique • NavObjectFrames.html: Gosselin4 pp. 488-489 • Utilizes the • DOM frames array • document.open() and document.close methods • The document.navigator object IS 360 JS Lecture 4: DOM and Advanced DHTML

  11. Basic DOM based Animation • unicycle.html: Gosselin4 pp. 495-496 • unicycleCache1.html: Gosselin4 pp. 499-500 • Utilizes: • Arrays of gif’s • setInterval() • clearInterval() • An image caching technique (unicycle.Cache1) IS 360 JS Lecture 4: DOM and Advanced DHTML

  12. Dynamic CSS • JavaScript can dynamically change virtually any CSS parameter. • CSS parameters include • Visible (or not) • Height and width (size) • Position • Z-index (layering) – works with transparency • Simple example: dynamicFont.html (Gosselin3, proverbs.htmlGosselin4, p. 528-529) IS 360 JS Lecture 4: DOM and Advanced DHTML

  13. Dynamic change of other display parameters (dynamic emphasis) • Gosselin4 AviationHome.html (pp. 530-531) (Gosselin3 newInstrument.html) • Utilizes: • this – as a parameter • dynamically changed style attributes • Absolute positioning (for animation) IS 360 JS Lecture 4: DOM and Advanced DHTML

  14. Animation via dynamic positioning • Instrument.html, butterfly.html • Gosselin4 p. 539-540 IS 360 JS Lecture 4: DOM and Advanced DHTML

  15. DHTML Menus (1) • Expandable menus • Use class styles (internal style sheets) that are dynamically changed by rollovers • BaseballTeamRoster.html • Modify program to present lists (. . .Wlists.html), tables, etc. IS 360 JS Lecture 4: DOM and Advanced DHTML

  16. DHTML Menus (2) • Dynamic change of visibility property for a table cell • One cell is always visible – the top level menu • A nested table is visible only when the cursor rolls over the visible cell • hardwareMenuTop.html and hardwareMenuSide.html • Modify for still another level (3 levels deep) • hardwareMenuSide2lev.html IS 360 JS Lecture 4: DOM and Advanced DHTML

  17. DHTML Menus (3) • Dynamic change of postion for an html element • Gosslein HardwareMenuSliding.html, pp. 552-554 • Utilizes: • getElementById() • Uses position to both hide and animate the display of a menu table, i.e. a table of links IS 360 JS Lecture 4: DOM and Advanced DHTML

  18. Operation of ‘sliding’ determined by table structure Row1, Cell 2 Row1, Cell1 Row2, Cell1 Row3, Cell1 Row4, Cell1 The first row is the only one with two cells. The 2nd cell has a rowspan of 4. To hide the links column, the position of the whole table is moved to the left to -134 pixels, that is, moved outside the window so it does not display. To display, the whole table is moved the same amount to the right. IS 360 JS Lecture 4: DOM and Advanced DHTML

  19. DHTML Menus (4) • Different technique: the dynamic content change of DOM nodes • As text is rolled over, the content of an absolutely positioned <DIV> is changed from “” (nothing) to a table of links (based on HTML-CR: 10-18z IS 360 JS Lecture 4: DOM and Advanced DHTML

More Related