Describing the Document

The document object that provides access to all HTML elements of

document, when an HTML document is loaded in a browser, then it becomes a
document object, The document object stores the elements of n HTML document,
such as HTML, HEAD and BODY as objects the document object is a child object
of the window object, which refers the a browser. You can access the document
object either using the window .The document property are using the document
object directly, as shown in the following syntax:
Exploring Document Object Collections
In programming, a collection is defined as an array of related objects.
This array of objects provides a convenient way to refer to a related group of
objects as a single object. The document object also provides some elements as
collection of projects. Below table shows the list of collections elements that are
provided by the document object:
Collection Description Syntax
anchors Refer to an array that returns all the [Link][]
anchor objects of an HTML document.
The order of the anchor objects stored
in the array depends on the order in
which then appear in the source code.
forms Refers to an array that returns all the [Link][]
form objects of an HTML document.
images Refers to an array the returns all the [Link][]
image objects of an HTML document.
links Refers to an array the returns all the [Link][]
links objects of a document

Exploring Document Object Properties

The property is accessed by using the following notation:
[Link]
In the preceding notation, object name in the name of the object and
property name is the name of its property; both all type case-sensitivity, you can
assign a value of the property as [Link]=”100”,where tableobj is the
name of the object and width is the property of the object. Below table shows the
1
properties of the document object available is java script:
Properties Description
cookie Returns a report that contains all the visible and
unexpired cookies associated with the document.
domain Returns the domain name of the server from which the
document has originated.
lastModified Returns the date on which the document was last
modified
documentMode Returns the mode used by the browser to process the
document.
readyState Returns the loading status of the document.
referrer Returns the url of all the documents referred to in an
HTML document
title Return the name of the HTML document defined between
the starting nad ending tages of the TITLE element
URL Return the full url of the HTML document.

EXPLORING DOCUMENT OBJECT METHODS

The document object also provides various methods to access HTML
elements. The general syntax used to call a method is as follows:
[Link](arguments)
In the preceding syntax, any arguments required for the methods are
passed between the parentheses, similar to a normal function call. An example of
a document object method is [Link](),which close the current HTML
document. Below table shows some methods of the document object:
Collection Description Syntax
open Open an HTML [Link](mimetype,replace)
documents to display
the output
close Closes an HTML [Link]()
document
write Writes HTML [Link](exp1,exp2,..)
expressions are
javaScript code into an
HTML document
writeIn Writes a new line [Link](exp1,exp2,...)
character after each
HTML expression are
javaScript code
getElementById Returns the reference [Link](id)
2
 of first element of an
HTML document with
the specified id
getElementByName Returns the reference [Link](name)
of an element with the
specified name.
getElementByTagName Returns all elements [Link](tag
with the specified tag name)
name.

EXPLORING COOKIES
A cookie is a small file. containing information, which a server embeds
on a user computer. Ecah the same computer requests for a webpage from a
server, the server refer to the created cookie for diplaying the requested
webpage. The size of a cookie depends on a browser, put it in generally should
not exceed 1k. A cookie is generally used to store the user name and password
information on a computer so that you need not to enter this information each
time you visit a website.
A cookie has several attributes, which contain vital information about
the cookie, such as its name, the domain name to which it belongs, and the
address of the valid path within a domain. Some commonly used attributes of a
cookie that we can use with JavaScript are as follows:
The name attribute
Represents a variable name and the corresponding value to be stored in
a cookie
The expire attributes
Specifies the the time when a cookie is [Link] is expressed as a unix
timestamp
The domain attributes
Represent a domain name to which a cookie is set. For example, if the
value for the valid domain attribute is [Link], a client sends the cookie
information to the web browser every time the client visits the [Link]
website.
3
The path attributes
Identifies sites among various paths in the same domain. Setting
attribute to the server root(/) allows the entire domain to access the information
stores in a cookie.
The secure attributes
Restricts a browser from sending cookie information over unsecured
connections. It allows the cookie to be sent over any type of hyper text transfer
protocol connections. The default value of the security flag attribute is [Link]
the value to 1 follows the cookie to be sent over a secure HTTP connections.
Creating and storing cookies
JavaScript enables you to create your own cookies that store the user's
information. For example, you can create a cookie to store the name of a website
visitor. When the visitor first opens a Web page,he or she has to enter his or her
name. This name will be stored in a cookie. The next time the visitor arrives at
the same page, he or she will get welcome message. For example

function setCookie(c_name,value,exdays)
{
var datadate=new Date();
[Link]([Link]()+exdays);
var v_value=escape(value)+((exdays==null)? "" : ";
expires="+[Link]());
[Link]=v_name + "=" + v_value;
}

In this we have converted the number of days in a valid [Link],we

have stored the name, value and expiry date of a cookie in the document. cookie
object.
Cookies expire when a user exits a web browser. After the user closes
the browser, each domain contains several cookies in Random Access Memory
4
(RAM).The solution to this problem is to save the cookies on the user's hard drive
in the Universal Time Coordinate (UTC)format after the user exits the
browser. The syntax to set the UTC format is as follows.

Mon,21 Dec 2017 [Link] UTC

JavaScript supports the toUTCString() method,which allows you to
convert the date in a simpler format in which the day is given along with the
date,as shown in below code.
var date=new Date("January,21,2015");
var cookiedate=[Link]();
You can set the expiration date of a cookie by adding the expires
attribute to the date, as shown in the below code.

cookiename=anything; expires=date
cookiename=anything; expires=sat,1 Dec 2016 [Link] UTC
Reading cookies
JavaScript also allows you to read the information from a cookie. For
example:
function getCookie(v-name)
{
var i,x,y,cookies_arr=[Link](;);
for(i=0;i<cookie_arr.length;i++)
{
x=cookie_arr[i].substr(0,cookies_arr[i].indexof("="));
y=cookie_arr[i].substr(cookies_arr[i].indexof("=")+1);
x=[Link](/^\s+|\s+$/g,"");
if(x==v_name)
{
return unescape(y);
}
5
}
}

In the preceding code the getCookie() method creates an array,

cookies_arr, to retrieve cookie names and values. Then, this method checks the
existence of a specified cookie, and returns the cookie value.
Working with document object collection
Let's create a Web Page, named [Link] to display the number of
image objects in a web browser.
<HTML>
<HEAD>
<TITLE>Image Collection</TITLE>
</HEAD>
<BODY>
<H1> Counting the Img Elements</H1>
<IMG src ="C:\Users\dell 1\Pictures\Screenshots" width="140"
height="140"></BR>
<IMG src ="C:\Users\dell 1\Pictures\Screenshots" width="140"
height="140"></BR>
<P> This document conatains<B>
<SCRIPT type="text/JavaScript"> [Link]([Link]+" ")
</SCRIPT></B> IMG elements.</P>
</BODY>
</HTML>
The total number of image objects in the document is obtained by using the
following code:
[Link]([Link]+" ")
output:

6
 Displaying the number of image elements in an HTML document
Working with document object properties
The document object provides various properties that are related to an
HTML document like the TITLE property or the URL
property.
Let's create a Web Page named [Link] to
understand the use of document object properties.
<HTML>
<HEAD>
<TITLE>DOCUMENT OBJECT PROPERTIES</TITLE>
</HEAD>
<BODY>
<H1>Using the properties of the document object</H1>
Following is the URL associated with this document:
<SCRIPT type="text/JavaScript"> [Link]([Link]);
7
</SCRIPT><BR/>
Loading Status:
<SCRIPT type="text/JavaScript"> [Link]([Link]);
</SCRIPT><BR/>
The title of the document is:
<SCRIPT type="text/JavaScript"> [Link]([Link]);
</SCRIPT><BR/>
</BODY>
</HTML>
In the above code the title, url and readystate properties are used. The
URL property shows the URL of opened HTML
document. The readyState property shows the loading status of the
document,and the TITLE property shows the title of the document.

Displaying the url associated with an HTML document

Working with document object methods
Let's create a Web Page named [Link] to
understand the use of document object methods.
<HTML>
<HEAD>
<TITLE>DOCUMENT OBJECT METHODS</TITLE>
<SCRIPT type="text/JavaScript">

8
function getElement()
{
newwin=[Link]("")
[Link]()
var abc=[Link]("nm")
[Link]("your name length is: "+[Link])
[Link]()
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Using the methods of the document object</H1>
<B>Enter first name:</B><input name="nm" "type="text" size="15"><BR/>
<B>Enter second name:</B><input name="nm" "type="text"
size="15"><BR/>
<B>Enter third name:</B><input name="nm" "type="text" size="15"><BR/>
<INPUT type="button" onclick="getElement()" value="Name length">
</BODY>
</HTML>
In the above code the [Link]() method is used to open a
[Link] [Link]() method opens a document stream. The
getElementsByName() method is used to close the document stream.

9
 Displaying text boxes for accepting the name from the user
When you click the name length button after entering names in the
provided fields, a new window opens, displaying the number of names.

Displaying the number of names

Using the document object with forms
The document object provides the forms[] property to select the
reference of all form objects of an HTML document. You can access individual
forms by using the index number of the forms or by using their names. Let's
create a web page, named [Link] to display an online
shopping order by using form elements.

10
<HTML>
<HEAD>
<TITLE>Online Shopping</TITLE>
<SCRIPT type="text/JavaScript">
<!--
function order()
{
var order="Dear"
order = order+ [Link][0].[Link]
order = order+ " ,you have ordered an item with size"
if([Link][0].[Link][0].selected)
{
order = order + "small"
}
if([Link][0].[Link][1].selected)
{
order = order+ "medium"
}
if([Link][0].[Link][2].selected)
{
order = order+ "large"
}
order = order+ "and it will be delivered in a"
if([Link][0].packaging[0].checked)
{
order = order+ "cardboard box"
}
if([Link][0].packaging[1].checked)
{
order = order+ "styrofoam-insulated container"
11
}
order = order+ "to the following address:"
order = order+ [Link][0].[Link]
alert(order)
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Online Shopping</H1>
<FORM action="[Link] method="post" onSubmit="order()"
enctype="text/plain">
NAME:
<INPUT name = "NAME" size=20><BR>
Address:
<INPUT name = "Address" size=20><P>
Item size:<BR>
Size:
<SELECT name="size">
<OPTION>Small
<OPTION>Medium
<OPTION>Large
</SELECT><BR>
packaging:<BR/>
<INPUT type=radio name="packaging">Cardboard box<BR>
<INPUT type=radio name="packaging">Styrofoam-insulated container<P>
<INPUT type=submit value="order">
</FORM>
</BODY>
</HTML>
12
In the above code we have created six form elements: two text boxes ,one
combo box, two radio buttons and one button. Next, we have created the order()
function, which displays a message box that shows the current shopping order,
including the items purchased by a customer.

You can see that when you click the order button after filling the
provided fields, you get a JavaScript alert box that displays the delivery details of
an item. On clicking the OK button of the alert box a new mail message window
appears containing the order details as we have entered.

13
 Displaying an order item through form elements

Creating cookies

As discussed cookies are small files containing system related

information. Let’s create a Web page, named [Link] to learn how to create
cookies.
Below code shows the code for the [Link] file:ng the Code for the
[Link] File

<!DOCTYPE HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function getCookie(cname)
{
if([Link]>0)
{
cstart=[Link](cname + "=");
if(cstart!=-1)
{
cstart=cstart+[Link]+1;
14
 cend=[Link](";",cstart);
return
unescape([Link](cstart,cend));
}
}
return "";
}
function setCookie(cname,value,expiredays)
{
var exdate=new Date();
[Link]([Link]()+expiredays);
[Link]=cname+ "="
+escape(value)+((expiredays==null) ?
"" : " ;expires="+[Link]());
}
function checkCookie()
{
mycookie=getCookie('mycookie');
if(mycookie!=null && mycookie!="")
{
alert('Welcome again '+mycookie+'! \n The cookies has
already been created.');
}
else
{
mycookie=prompt('please enter your name:',"");
if(mycookie!=null && mycookie!="")
{
setCookie('mycookie',mycookie,30);
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Creating and Reading cookies</H1>
<P>Click on button to create the cookie: </P>
<INPUT type="button" onclick="checkCookie()" value="Create Cookie">
</BODY>
</HTML>

We have used the [Link] statement in the setCookie()

method to cookie. The output is shown below create for a web page. Next, we
have used the getCookie() method to retrieve the value of the existingcookie. The
15
output is shown below create for a web page. Next, we have used the getCookie()
method to retrieve the value of the existing cookie.

Showing the output of the [Link] file

In above figure you can see the Create Cookie button. On clicking this
button, an insert box opens in which you need to enter the value that you want to
save in the cookie. The insert box is shown in below:

Showing the insert box

16
Deleting cookies
You can also reset the value of a cookie or delete the existing cookies
using JavaScript. Let’s create a web page named [Link] to learn how to
reset or delete the cookies. below code is for the [Link] file below code
is Showing the Code for the [Link] File.
<!doctype html>
<head>
<title>Resetting cookie</title>
<script type="text/javascript">
function getCookie(cname)
{
if([Link]>0)
{
cstart=[Link](cname +
"=");
if(cstart!=-1)
{
cstart=cstart + [Link]+1;

cend=[Link](";",cstart)
if(cend==-1)
cend=[Link];
return

unescape([Link](cstring,cend));
}
}
return "";
}
17
 function setCookie(cname,value,expiredays)
{
var exdate=new Date();
[Link]([Link]()+expiredays);
[Link]=cname+ "="
+escape(value)+((expiredays==null) ?
"" : ":expires=+[Link]();
}
function checkCookie()
{
mycookie=getCookie('mycookie');
if(mycookie!=null && mycookie!="")
{
alert('welcome again ');
}
else
{
mycookie=prompt('please enter ur
name:',"");
if (mycookie!=null && mycookie!="")
{

setCookie('mycookie',mycookie,30);
}
}
}
function eraseCookie()
{
setCookie('mycookie',"",-1);
alert(' sucessfully erased');
18
 }

</script>
</head>
<body>
<h1>reading and creating cookies</h1>
<p>click on button to create: </p>
<input type="button" onclick="checkCookie()" value="Create cookie">
<p>click on the delete cookie button to delete the cookie: </p>
<input type="button" onclick="eraseCookie()" value="delete cookie">
</body>
</HTML>
In addition, we have created a function, named eraseCookie(), which sets the
expiry date of the existing cookie to -1. Next, we have used the Delete cookie
button to call the eraseCookies() function. This function opens an alert box,
displaying a message, The cookie has been successfully deleted. The output is
shown below:

showing the output of the [Link] file

When you click the Create Cookie button an input box appears asking

19
you to enter your name, Now, enter your name in the text box of the input box
and click the OK button to create the cookie. After creating the cookie when you
click the Create Cookie button, it displays a message that a cookie has already
been created, as shown below:

showing an input box

Now, if you want to delete the cookie you can do so by clicking the
Delete Cookie button, as shown below:

Showing the message of deleting the cookie

Now you can recreate the cookie with different value by clicking the
Create Cookie button.

20