Master Dynamic HTML (DHTML) Techniques for Web Development

1. 3 .NET Resources • Build a Web Site NOW! • – free on Books 24/7 • Mike McMahon’s e-mail address • mike@mikerosoft.org • ASP 101 – a developer web site • http://www.asp101.com/

2. JavaScript DHTML techniques and basic window programming • Materials for this lecture are handouts from Beginning JavaScript by Wilton • Examples are from Beginning JavaScript and from JavaScript for the Worldwide Web, 4th edition • Please continue to use either .NET 2.0 IDE or Visual Web Developer for exercises and labs.

3. Dynamic HTML (DHTML) • A universally applicable idiom in any web development environment • DHTML can and should be used in conjunction with .NET • Good preparation for AJAX techniques

4. Dynamic HTML (DHTML) • Basic principles – browser-script interaction • A cautionary note on browser dependencies dependencies and a ray of hope (DOM) • Dynamic styles and style attributes • Absolute positioning • The IE style object • Rewriting document pages in real time • The DOM function getElementById()

5. Browser/Script Interaction (JVS4 3.2) • DHTML is possible because of tight coupling between the browser and scripts • Scripts have access to most of the document and can change it. Changes are immediately re-interpreted and redisplayed, i.e. it is as if the changed document were a new document loaded overtop the old document. • JavaScript is both program and data in the DHTML environment – previously only possible in AI languages such as LISP • The script can examine its own code, change it, and then have it reexecuted!

6. Browser Specificity • DHTML (until the advent of the DOM) referenced a BOM • A BOM by definition is specific to a given browser and much DHTML is browser specific • In this class we will study primarily the IE BOM – the w3c has incorporated many IE attributes into the DOM • One very significant difference between IE and NN is the event model. IE is easier to work with and will probably dominate the field.

7. Style Attributes (BJS 12.relativepos.htm) • Much DHTML depends on the ability to dynamically alter style attributes – text color, font type and size, and especially absolute position • Review: Style attributes can be set • Inside individual tags • Inside a <style> container in the document head • In an external style sheet (.css) imported into the document • Styles can be set for tags or by class • If you are not familiar with styles and CSS review. You should have a reference in your library

8. Changing Style (BJS 12.rollover_IE.htm) • Most tags can be identified with an ID • <P ID=“myPara”> • Under IE, most tags in a document have a ‘style object’ to describe them • The style of a tag can be accessed by reference to the ID and the style object attributes • myPara.style.color = “red”

9. Positioning Elements(BJS 12.movingTags_IE.htm) • A much used style attribute is the position of an HTML element, identified by: • Left • Top • The position can be specified in either pixels or percent • Can be specified as either absolute (to the browser upper left corner) or relative (to whatever container it is in. (BJS 12.relativepos.htm)

10. Changing page content • In addition to changing style attributes of existing content, content (HTML and script) can be added to or deleted from a page under program control. • HTML elements that have a start and end tag can have contents - identified to JavaScript as • innerText(BJS 12.innertext_IE) • and inner and outerHTML (BJS 12.innerouterHTML_IE) • Note: tags can be specified as block-level or inline • Any type of tag can be inserted inside a block-level tag (DIV, SPAN) • Only inline tags can be inserted inside inline tags (see discussion BJS pp. 459).

11. Mini Spec (BJS 12.DHTMLmini1) • Create a document that has a single DIV called myDIV containing a single paragraph called myPara consisting of three text sentences on different lines. • The page also has a button which when clicked activates a subroutine which • Reads the contents of the paragraph • Deletes the original contents of the paragraph • Rewrites the contents of the DIV as a table with each sentence from the original paragraph in a different cell

12. Core DHTML Concepts (1 of 2) • Every HTML tag in the IE5.5+ BOM is an object with multiple attributes • The attributes that can be dynamically changed by JavaScript code. • The syntax (usually ;-) for accessing the attribute is: TAG-ID ATTRIBUTE_NAME • Example: myPara.innerText =“No way!”

13. Core DHTML Concepts (2 of 2) • Every HTML tag in the IE5.5+ BOM is associated with a STYLE object • The STYLE object has attributes that can be dynamically changed by JavaScript code. • The syntax (usually ;-) for accessing any attribute is: TAG-ID STYLE ATTRIBUTE_NAME Example: myPAra.style.color=“Red”

14. Core DHTML Concepts (3 of 2) • DHTML depends on each tag having a unique ID attribute • The tag attribute NAME works sometimes but ID always works.

15. The IE6 BOM • Though frequently confused, the BOM is NOT the same as the Document Object Model (DOM). See the note at the bottom of BJS p.155. • I have a lecture from IS 360 on the DOM on the 460 web site for this week. • The only DOM function we will look at is the universally useful: objPtr = getElementByID(‘element’) Gosselin.baseballTeamRosters.html

16. The Window Object BJS ch5_exampl2.htm; MEH 13.18fixed; JSV4 5.1,2 • The window is a global (always in scope) object and we’ve used it before without specifying: • window.alert(“stuff”) • is the same as • alert(“stuff”)

17. Window manipulation • New windows can be opened two ways: • Explicitly with the open() method of the window object – which is actually a constructor • Implicitly, through tags that support the TARGET attribute and will open a new window in response to a new or unknown TARGET name • The reserved word NEW used as a TARGET in a link is intended to open a new window for the link URL (BJS 7.online_books)

18. Scripting between windows • Functions and variables in one window can be accessed by script in another window in with syntax identical to inter-frame references and calls (BJS 7.openerWindow) • Many window parameters can be acessed from script in another window (BJS 7.openerWindow) • Completely free between-window programming is limited to windows from the same domain (the same server)

19. Miscellaneous Window Topics • The BOM defines the list of window attributes that are programmatically accessible (see BJS. P. 264). • Completely blank windows can be opened and written to using the familiar document.write() method with the window name specified: • winName.document.write (“Hello World!”) (see BJS. P. 263).

20. A program that writes itself • This program • Has no content other than an onload() function that writes the HTML for the program that actually runs! • The possibilities are endless! Imagine getting some information from the user and then going to a remote server to get the customized content to display. This is exactly what AJAX does. • JVS4 3.9_460_2

21. Miscellaneous Sub-objects • History • tracks the pages the browser has visited - an array that enables the forward and back arrows on the browser: history.go(up or back) • Location • stores information on the current page: • location.href • location.hostname • location.port • location.protocol

22. Sub-objects (2) • Navigator (BJS ch5_exampl6.htm) • allows your program to know much about the browser its running on - to enable cross browser code • Screen (BJS ch5_exampl2.htm) • stores information on the screen: • screen.height • screen.width • screen.colorDepth

23. The Document Object • Contains useful attributes - fg and bg colors • Contains frequently accessed arrays: • Forms • Images (BJS 5.5) • links • The elements of the arrays are objects themselves.In the case of the forms array, each object (a form) contains still other objects (the elements on the form in an array)