Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 9: JavaScript II

Remember! JavaScript is case-sensitive Everything we have been doing this week and last is case-sensitive If you misspell anything… you are doomed… things will stop working… you will loose hair… and lots of it… like your instructor…

The Document Object Every HTML page has a document object associated with it The document object gives us access to the other HTML objects in our document, plus a few other things The syntax is: document.attribute document.function-name(parameters)

Read/Write Document Attributes document.title The title of the HTML document, usually the string that is displayed in the browser’s window caption or tab bar document.dir The general direction of text in the document; can be the string "ltr" or "rtl" document.body An object that represents the body of the document; it is quite complicated and we’ll discuss it later

Read Only Document Attributes document.URL A string that contains the full pathname of the currently open HTML document document.lastModified A string that contains the date for which the currently open HTML document was last modified

Document Functions document.write(str) A function that allows you append HTML code to your document while it is being loaded* document.getSelection() A function that retrieves a string of text in an HTML document that has been selected by the mouse document.getElementById(id) Retrieves the HTML object associated with the given HTML id attribute; this is one of the most important functions in the HTML DOM

HTMLElement Once we get an element using the function document.getElementById, we can do a lot of different things! Change the content (innerHTML) of the element Change the attributes of the element Change the direction of the element Change the CSS class name of the element And much more

Other HTML Element Objects document.getElementByID(id) returns whatever HTML element object the ID refers to HTMLParagraphElement = HTMLTableElement = Etc. etc. there are so many of them Just look up what attributes you can change for them in Eclipse, there are too many to memorize Try to avoid using the ‘old school’ attributes and do things the ‘new school’ way whenever possible

HTMLElement Attributes All HTML objects have the following attributes, for which you can change using the HTML DOM id className title dir innerHTML Inner HTML is the content between the start and end tags of an HTML element

How to Change CSS Styles Create an HTML element, say a P element Assign an ID to the element Assign a CSS class name to the element Get a handle to the HTML element using the document.getElementByID(ID) function Assign a new class name to handle.className

How to Change the Direction Create an HTML element, say a P element Assign an ID to the element Assign a DIR to the element Get a handle to the HTML element using the document.getElementByID(ID) function Assign a new direction to handle.dir You may use "LTR" or "RTL"

How to Change the Tooltip Create an HTML element, say an IMG element Assign an ID to the element Assign a TITLE to the element Get a handle to the HTML element using the document.getElementByID(ID) function Assign a new title to handle.title

How to Change Inner HTML Create an HTML element, say a P element with some content in it Assign an ID to the element Get a handle to the HTML element using the document.getElementByID(ID) function Assign new content using handle.innerHTML The innerHTML in this case is a string that can even contain HTML code in it!