1 CSC160 Chapter 9: The Document Object

Outline Document objects Properties of the document object linkColor alinkColor vlinkColor bgColor fgColor lastModified Methods of the document object Open() Close() 2

3 Document Objects The document object is an object that is created by the browser for each new HTML page (document) that is viewed. JavaScript gives you access to a number of properties and methods that can affect the document in various ways. E.g., document.write() method can write some content into a page.

Properties of the Document Object PropertiesDescription alinkColorthe color of activated links in the document (Alink attribute). bgColorthe background color of the document. fgColorthe default text color of the document (text attribute). lastModified the last modified date of the document, as reported by the web server. linkColorthe color of unvisited links in the document (link attribute). titlethe title of the document. Read/write in modern browsers. URLA string that specifies the complete URL of the document. vlinkColorthe color of visited links in the document (vlink attribute). 4

5 The linkColor Property The linkColor property holds the value of the unvisited link color for the HTML document. linkcolor <!-- document.linkColor = "green"; //--> link to dell <!— document.write("The link color is " + document.linkColor); //-->

6 The alinkColor Property The alinkColor property holds the value of the active link color (the color of a link when it is clicked) for the HTML document. Two ways to set the active link color: Using HTML, set the color in the opening BODY tag in the alink attribute. Using JavaScript, set the color through the alinkColor property of the document. Use color name string or the hexadecimal red-green-blue (RGB) value as a string. Format: “#rrggbb”. We can display the value of the alinkColor property of the current document. The RGB code will be displayed

7 The alinkColor Property: HTML Approach alinkcolor1 link to yahoo <!-- document.write("The active link color is " + document.alinkColor); //-->

8 The alinkColor Property: JavaScript Approach alinkcolor2 <!-- document.alinkColor = "red"; //--> link to weather <!-- document.write("The active link color is " + document.alinkColor); //-->

9 The vlinkColor Property The vlinkColor property holds the value of the visited link color (the color of a link after it has been visited) for the HTML document. vlinkcolor.htm <!-- document.vlinkColor = "green"; //--> link to EKU <!-- document.write("The visited link color is " + document.vlinkColor); //-->

10 The bgColor Property The bgColor property holds the value of the background color for the HTML document. Two ways to set the background color: Using HTML, set the color in the opening BODY tag in the bgcolor attribute. Using JavaScript, set the color through the bgColor property of the document. Use color name string or the hexadecimal red-green- blue (RGB) value as a string.

11 The bgColor Property (cont’d) bgcolor1.htm <!-- document.write("The background color here is " + document.bgColor); //-->

12 The bgColor Property (cont’d) bgcolor2.htm <!-- document.bgColor = "lightblue"; document.write("The background color here is " + document.bgColor); //-->

13 The bgColor Property: An Example Change background color by clicking buttons Background clolors <!-- function newbg(thecolor) { document.bgColor = thecolor; } //--> Want a mew background color, change the color by clicking a button below! &nbsp &nbsp &nbsp

14 The fgColor Property The fgColor property holds the value of the text color. Two methods to set the text color Use the text attribute in the opening BODY tag Use the fgColor property of the document object fgcolor1.htm <!-- document.write("The text color here is " + document.fgColor); //-->

15 The fgColor Property (cont’d) fgcolor2.htm <!-- document.fgColor = "orange"; document.write("The text color here is " + document.fgColor); //-->

16 The lastModified Property The lastModified property holds the value of the data and time that the current document was last modified. lastmodified.htm <!-- document.write("Last updated: " + document.lastModified); //-->

17 Methods of the Document Object The open() method is used to open a new document and create its contents entirely with document.write() or document.writeln() statements. The close() method closes an output stream previously opened with the document.open() method and forces data collected from any instances of the document.write() or document.writeln() methods to be displayed.

18 Methods of the Document Object (cont’d) openclose.htm <!-- function newpage() { var thename = document.myform.yourname.value; document.open(); document.write(" Welcome! "); document.write("Hello, " + thename + ", welcome to my page!"); document.close(); } //--> To be continued...

19 Methods of the Document Object (cont’d) Enter your name in the box below, then click the button to see a personalized page! Name: