1 csc160 chapter 9: the document object. outline document objects properties of the document object...
TRANSCRIPT
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
Properties Description
alinkColor the color of activated links in the document (Alink attribute).
bgColor the background color of the document.
fgColor the default text color of the document (text attribute).
lastModified the last modified date of the document, as reported by the web server.
linkColor the color of unvisited links in the document (link attribute).
title the title of the document. Read/write in modern browsers.
URL A string that specifies the complete URL of the document.
vlinkColor the 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.<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• Change background color by clicking buttons
<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');">   <Input type="button" value="Orange" onClick="newbg('orange');“>    <Input type="button" value="Yellow" onClick="newbg('yellow');“>    <Input type="button" value="Beige" onClick="newbg('beige');"></FORM></BODY></HTML>
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>