Working with document object collection
document object acts as a collection of objects
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Image Collection</TITLE>
</HEAD>
<BODY>
<H1> Counting the IMG Elements </H1>
<IMG src="flower1.jpg" alt="flower1" width="120" height="100"></BR>
<IMG src="flower2.jpg" alt="flower2" width="120" height="100"></BR>
<IMG src="flower3.jpg" alt="flower3" width="120" height="100"></BR>
<P>This document contains <B>
<SCRIPT type="text/JavaScript">
document.write (document.images.length+" ")
</SCRIPT></B>
IMG elements.</P>
</BODY>
</HTML>
document object acts as a collection of objects
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Image Collection</TITLE>
</HEAD>
<BODY>
<H1> Counting the IMG Elements </H1>
<IMG src="flower1.jpg" alt="flower1" width="120" height="100"></BR>
<IMG src="flower2.jpg" alt="flower2" width="120" height="100"></BR>
<IMG src="flower3.jpg" alt="flower3" width="120" height="100"></BR>
<P>This document contains <B>
<SCRIPT type="text/JavaScript">
document.write (document.images.length+" ")
</SCRIPT></B>
IMG elements.</P>
</BODY>
</HTML>
working with document object properties
the title property returns the title text enclosed in the title element of the html document. and
url property returns the full url of the html document.
<!DOCTYPE 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">
document.write(document.URL);
</SCRIPT><BR/>
Loading status:
<SCRIPT type="text/javascript">
document.write(document.readyState);
</SCRIPT><BR/>
The title of the document is:
<SCRIPT type="text/javascript">
document.write(document.title);
</SCRIPT><BR/>
</BODY>
</HTML>
document object methods
<!DOCTYPE HTML>
<HEAD>
<TITLE>Document object methods</TITLE>
<SCRIPT type="text/javascript">
function getElement()
{
newwin=window.open("")
newwin.document.open()
var abc=document.getElementsByName("nm")
newwin.document.write("Your name length is : "+abc.length)
newwin.document.close()
}
</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>
Using the document object with forms
forms[] property to select the reference of all the forms objects of an html document
you can access the individual forms by using the index number of the forms or by using their names
<!DOCTYPE HTML>
<HEAD>
<TITLE>online shopping</TITLE>
<SCRIPT language="JavaScript">
<!--
function order()
{
var order="Dear "
order = order + document.forms[0].Name.value
order = order + ", You have ordered an item with size "
if (document.forms[0].size.options[0].selected){
order = order + "small"
}
if (document.forms[0].size.options[1].selected){
order = order + "medium"
}
if (document.forms[0].size.options[2].selected){
order = order + "large"
}
order = order + " and it will be delivered in a "
if (document.forms[0].packaging[0].checked){
order = order + "cardboard box"
}
if (document.forms[0].packaging[1].checked){
order = order + "styrofoam-insulated container"
}
order = order + " to the following address: "
order = order + document.forms[0].address. value
alert(order)
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Online Shopping</H1>
<FORM action="mailto:shopping@online.net" 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 selected>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>
Creating Cookies
cookies are small files containing system related information.
<!DOCTYPE HTML>
<HEAD>
<SCRIPT type="text/javascript">
function getCookie(cname)
{
if (document.cookie.length>0)
{
cstart=document.cookie.indexOf(cname + "=");
if (cstart!=-1)
{
cstart=cstart + cname.length+1;
cend=document.cookie.indexOf(";",cstart);
if (cend==-1) cend=document.cookie.length;
return unescape(document.cookie.substring(cstart,cend));
}
}
return "";
}
function setCookie(cname,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=cname+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
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 the button to create the cookie: </P>
<INPUT type="button" onclick="checkCookie()" value="Create Cookie">
</BODY>
</HTML>
Deleting Cookies
reset the value of a cookie or delete the existing cookies
<!DOCTYPE HTML>
<HEAD>
<TITLE>Resetting Cookie</TITLE>
<SCRIPT type="text/javascript">
function getCookie(cname)
{
if (document.cookie.length>0)
{
cstart=document.cookie.indexOf(cname + "=");
if (cstart!=-1)
{
cstart=cstart + cname.length+1;
cend=document.cookie.indexOf(";",cstart);
if (cend==-1) cend=document.cookie.length;
return unescape(document.cookie.substring(cstart,cend));
}
}
return "";
}
function setCookie(cname,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=cname+ "=" +escape(value)+((expiredays==null) ? "" :
";expires="+exdate.toUTCString());
}
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);
}
}
}
function eraseCookie()
{
setCookie('mycookie',"",-1);
alert('The cookie has been successfully erased.');
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Creating and Reading Cookies</H1>
<P>Click on the button to create the cookie: </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>
No comments:
Post a Comment