Home arrow JavaScript arrow Page 8 - Controlling Browser Properties with JavaScript

Down to the Document - JavaScript

Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.

TABLE OF CONTENTS:
  1. Controlling Browser Properties with JavaScript
  2. Starting at the Top
  3. Moving Windows
  4. Bar Tales
  5. Navigating the Family Tree
  6. Location is Everything
  7. History Lesson
  8. Down to the Document
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 120
February 02, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Under the top-level Window object, comes the Document object. This object represents the head and body of the HTML page loaded in the browser, including all its images, forms and links. Like the Window object, this one too comes with its own methods and properties.

One of the Document object's commonly-used properties is the write() method, which can be used to write text to the Web page at run-time. Take a look at the following example, which demonstrates how this works:


<html>
<head>
<script language="JavaScript">
function writeToDoc
()
{
 
// retrieve value of user input
 var text = document.forms[0].elements[0].value;
 
// open document and write to it
 document.open();
 document.write("<html><head><body>This is what you said: <br /><i>" + text
+ "</i></body></head></html>");
 
 // close and display
 document.close();
}
</script>
</head>
<body>
 
<form>
Say something 
<input type="text" size="20">
<input type="button" onClick="writeToDoc()" value="Write!">
</form>
 
</
body>
</html>

Here, when the user enters some data into the form input box and clicks the "Write!" button, the writeToDoc() function is invoked. This function first reads the data entered by the user into a variable, then begins writing to the document. This writing process consists of first opening a stream to the document with document.open(), then writing to it with document.write() and then closing the stream with document.close(). The data written to the document is displayed only after document.close() is called.

As the example above illustrates, these methods make it possible to dynamically alter the contents of a page with JavaScript. Using DOM access methods, you can even focus the document.write() method on specific elements of the pages, writing - for example - directly inside a <div> or altering form contents on the fly, in response to user input or external events.

All the other elements of the page - forms, links, images - are organized under the Document object as arrays. Using the Document object as base, therefore, it's easy to access any of these elements and manipulate them (I've done this in some of the previous examples, to access form values). Take a look at this next example, which uses these object arrays to return some statistics about the number of links, images and forms within the document:


<html>
<head>
</head>
<body>
 
<!-- 
add some elements to the page -->
<form>
<input type="text" size="20">
<input type="button" value="Click me">
</form>
 
<
a name="link1" href="link1.htm">
<image name="image1" src="image1.jpg" 
width
=20 height=20></a>
 
<
a name="link2" href="link2.htm">
<image name="image2" src="image2.jpg" 
width
=20 height=20></a>
 
<
a name="link3" href="link3.htm">
<image name="image3" src="image3.jpg" 
width
=20 height=20></a>
 
<
image name="image4" src="image4.jpg" 
width
=20 height=20>
 
<
form>
<input type="text" size="20">
<input type="button" value="Click me">
</form>
 
<
script language="JavaScript">
// count the elements of each type and print
document.write("<br/>Links = " 
+ document.links.length + "<br/> Images = "
+ document.images.length + "<br /> Forms = " 
+ document.forms.length)
</script>
 
</body>
</html>

Since the images, forms and links within a document are structured as arrays under the Document object, it's easy to calculate the total number of items of each type - simply obtain the size of the corresponding array.

Of course, there's a lot more you can do with the Document object. Sadly, however, most of it involves manipulating the contents of the HTML document, not of the browser displaying it, and therefore doesn't fall under the ambit of this tutorial. If you're interested, though, you will find the following links most instructive:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_document.asp

http://www.mozilla.org/docs/dom/domref/

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/guide/navobj.html

http://www.wdvl.com/Authoring/JavaScript/Tutorial/

http://hotwired.lycos.com/webmonkey/javascript/tutorials/tutorial1.html

http://www.pageresource.com/jscript/

And that's about all I have time for at the moment. See you soon!

Note: Examples are illustrative only, and are not meant for a production environment. Examples have been tested on Microsoft Internet Explorer 5.x only. Melonfire provides no warranties or support for the source code described in this article.



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: