1. ISP 523: Fundamentals of Information Technology Instructor: Stephen Lackey November 2, 2005

2. Today’s lecture Today’s backstory: DOM –HTML tree structure –Recap of CSS (Chapter 17) –Document Object Model Chapters 29 - DHTML Chapters 28 – Javascript Lab and homework – create a form for your site

3. HTML tree structure HTML elements “nest” to arbitrary levels of detail containers that can hold text or other elements The HTML “root” contains two “nodes” (branches) – These comprise the two basic structural elements of an HTML document Head: meta information about document Body: the (usually) readable content of document

4. Recap of CSS (Chapter 17) CSS uses the Document Object Model (the HTML tree structure) to style the document (see 9/21 lecture) Dependent on “well formed” documents to indicate hierarchy within document “tree” Contains DOM-Aware selectors (p. 321) A>B, A+B, etc Contains DOM-aware properties (p. 323) :before :first :first-child

5. The Document Object Model In-memory tree structure drawn of an HTML document Creates access to nested structures by external process (CSS, Javascript, etc) CSS: class id or inheritance Javascript: object reference (document.getelementbyID(“test”) A specification about structure and behavior designed specifically for HTML, XML, SVG

6. Dynamic HTML DHTML = HTML + DOM + CSS + Javascript In short, it’s changing the document within the browser, instead of going back to the server to make changes. You can change: appearance, structure of document (within limits) You can’t get new data from the server (well, you can with AJAX).

7. Javascript Usually activated by events –Analogous to a:hover in CSS When used: –Typical: onclick, onload, mouseover, etc –Form submits

8. Javascript as a language What it is: a lightweight scripting language designed primarily to make web pages interactive What it is not: Java –Invented by Netscape, renamed as a marketing ploy –Object-based, but not a full OO language Nowadays called ECMAScript –European Computer Manufacturers Association scripting language

9. Where Javascript is defined Script element in HEAD of document Inline: some HTML form elements have events that can be called within element (onclick=“myfunction(this)”) Can be accessed as a pseudo-URL – some text

10. Where Javascript is used Often used with forms for validation, or other calculations Check a form to make sure necessary information is entered on a form before submitting it Sometimes used to submit forms in place of a “submit” button Used for animation, image rollovers, dynamic menus, etc Used to change structure of document

11. Preview for next week: Chapters 30 – XML Your final project: formal spec to follow

12. Lab / homework Create a form as a separate HTML page. Minimum requirements: –Use a table for layout (2 columns) –Two or more checkboxes –A Option/select control –Two or more radio buttons be sure each group of buttons has the same name between the options. –A textarea control –Two or more text input buttons –A submit button

13. Next Week Readings DOM / Ajax handouts (reference) Chapter 30 - XML RDF / RSS handouts