1 / 19

CSC160

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(). Document Objects.

derica
Download Presentation

CSC160

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. CSC160 Chapter 9: The Document Object

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

  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.

  4. Properties of the Document Object

  5. The linkColor Property • The linkColor property holds the value of the unvisited link color for the HTML document. <HTML> <HEAD> <TITLE>linkcolor</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- document.linkColor = "green"; //--> </SCRIPT> <A href="http://www.dell.com">link to dell</A> <P> <SCRIPT language="JavaScript"> <!— document.write("The link color is " + document.linkColor); //--> </SCRIPT> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>alinkcolor1</TITLE> </HEAD> <BODY alink="red"> <A href="http://www.yahoo.com">link to yahoo</A> <P> <SCRIPT language="JavaScript"> <!-- document.write("The active link color is " + document.alinkColor); //--> </SCRIPT> </BODY> </HTML>

  8. The alinkColor Property: JavaScript Approach <HTML> <HEAD> <TITLE>alinkcolor2</TITLE> <SCRIPT language="JavaScript"> <!-- document.alinkColor = "red"; //--> </SCRIPT> </HEAD> <BODY> <A href="http://www.weather.com">link to weather</A> <P> <SCRIPT language="JavaScript"> <!-- document.write("The active link color is " + document.alinkColor); //--> </SCRIPT> </BODY> </HTML>

  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. <HTML> <HEAD> <TITLE>vlinkcolor.htm</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- document.vlinkColor = "green"; //--> </SCRIPT> <A href="http://www.eku.edu">link to EKU</A> <P> <SCRIPT language="JavaScript"> <!-- document.write("The visited link color is " + document.vlinkColor); //--> </SCRIPT> </BODY> </HTML>

  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) <HTML> <HEAD> <TITLE>bgcolor1.htm</TITLE> </HEAD> <BODY bgcolor="lightblue"> <SCRIPT language="JavaScript"> <!-- document.write("The background color here is " + document.bgColor); //--> </SCRIPT> </BODY> </HTML>

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

  13. The bgColor Property: An Example <HTML> <HEAD> <TITLE>Background clolors</TITLE> <SCRIPT language="JavaScript"> <!-- function newbg(thecolor) { document.bgColor = thecolor; } //--> </SCRIPT> </HEAD> <BODY bgColor=“maroon" text="black"> <B> Want a mew background color, change the color by clicking a button below! </B> <P> <FORM> <Input type="button" value="Light Blue" onClick="newbg('lightblue');"> &nbsp &nbsp <Input type="button" value="Orange" onClick="newbg('orange');“> &nbsp &nbsp <Input type="button" value="Yellow" onClick="newbg('yellow');“> &nbsp &nbsp <Input type="button" value="Beige" onClick="newbg('beige');"> </FORM> </BODY> </HTML> • Change background color by clicking buttons

  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 <HTML> <HEAD> <TITLE>fgcolor1.htm</TITLE> </HEAD> <BODY text="orange"> <SCRIPT language="JavaScript"> <!-- document.write("The text color here is " + document.fgColor); //--> </SCRIPT> </BODY> </HTML>

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

  16. The lastModified Property • The lastModified property holds the value of the data and time that the current document was last modified. <HTML> <HEAD> <TITLE>lastmodified.htm</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- document.write("Last updated: " + document.lastModified); //--> </SCRIPT> </BODY> </HTML>

  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) <HTML> <HEAD> <TITLE>openclose.htm</TITLE> <SCRIPT language="JavaScript"> <!-- function newpage() { var thename = document.myform.yourname.value; document.open(); document.write("<H1>Welcome!</H1>"); document.write("Hello, " + thename + ", welcome to my page!"); document.close(); } //--> </SCRIPT> </HEAD> To be continued...

  19. Methods of the Document Object (cont’d) <BODY> <B>Enter your name in the box below, then click the button to see a personalized page!</B> <P> <FORM name="myform"> Name: <INPUT type="text" name="yourname" size="25"> <P> <INPUT type="button" value="Click" onClick="newpage()"> </FORM> </BODY> </HTML>

More Related