Javascript Window Manipulation

As an example here is a very basic call to a javascript function that will open a new browser window: 

function plainWindow(){
	var newWin = window.open();
}

And here is the function:

<script type="text/javascript"<
	<!--
	var newWin;
	function plainWindow() {
	newWin = window.open();
	newWin.focus();
	}
	function closeWindow() {
	if (newWin && !newWin.closed) {
	newWin.close();}
	}
	function centeredWindow(url,winname,w,h) {
	windowleft = (screen.width - w)/2;
	windowtop = (screen.height - h)/2;
	settings = '"toolbar=no,directories=no,menubar=no,scrollbars=no,
	resizable=no,status=no,width='+w+',height='+h+',
	left='+windowleft+',top='+windowtop+'"';
	closeWindow();
	newWin = window.open(url,winname,settings);
	newWin.focus();
	}
	//-->
	</script>

How it works:

  1. The javascript actually presents 3 functions, one to open a plain, basic window, one to close a window and one to open a centered window with specific settings
  2. First, declare the variable newWin that will be used for the new window object.
  3. Use the open() method of the Window object to open the new window
  4. The 'centeredWindow()' function will open a centered window. See how the screen width and height are used to position the new window
    1. We firstly declare our function and allocate a suitably descriptive name: centeredWindow()
    2. It has 4 parameters and will therefore accept 4 arguments: URL (the location of the page to be displayed); winname(a name allocated to the window that will facilitate javascript manipulation); w or the width of the window in pixels and h, the height of the window in pixels.
    3. Within the body of the function we then declare two local variables (windowleft and windowright) that are used to hold the x and y locations of the top left hand corner of the window in pixels. This is used to position the newly opened window in the center of the screen.
    4. Then we declare and initialise another local variable (settings) that is used to hold all of the settings that we require for the new window. Notice how the values that are passed to the function as 'w' and 'h' are incorporated into the string as are the coordinates for the top left hand corner.
    5. The next line calls the closeWindow() function, to close the window if it is already open
    6. A new window is then opened with these settings and focus is applied to that window (the window is brought to the front).

Here is the plainwindow function in action: Click here for a plain window

And here is a link to the function that closes the window that was just opened: Click here to close the new window.

Here is the centeredwindow function in action: Click here for a centered window

And click this link in order to close the wiindow that was just opened: Click here to close the new window.

These are basic examples of how we can manipulate browser windows and their contents using javascript.

When a new window is opened like this the window from which it was opened can be referred back to as the opener. The contents of this parent window can be changed from the opened window.

Here is a link that will open a simple page in a new window. Within that page is a link that, when clicked, will change the content of the parent window: New Window

EXERCISE

Take a close look at the source for this page. Hopefully you will have seen how the parent 'opener' window was targeted from the opened page and the content of the parent window was itself changed to our index page.

To learn more about the 'window' object and how to use javascript to control window opening etc. pay a visit to our friends at:W3Schools.com. Or alternatively take a look at Thau's excellent tutorial on this subject:Thau's Javascript Tutorials.

Javascript Objects

At the heart of the javascript language is the Document Object Model, which is the way in which javascript describes web pages. Before looking at javascript you would have opened a link in a new browser window using code like this:

<a href="link.htm" target="_blank">link text</a>

This is the HTML (or XHTML) mechanism which uses the target attribute of the anchor tag. We've just been looking at examples of window opening using javascript which gives us much more control over the appearance of our browser window, where it lies in the viewport etc. etc. This is achieved using the following javascript code:

window.open("url","name","settings");

This code statement is utilising the 'window' object. Associated with this object are a number of functions. These are referred to as 'methods'. An object in javascript can be thought of as a collection of variables (referred to as properties) and functions (referred to as methods). The 'window' object is one of these objects. In order to open a new window we are exercising the 'open()' method of the window object. This method has 3 parameters used to tell it the URL of the page to be opened and the settings of the window from which it is to be displayed.

The syntax used to gain access to either an object's properties or its methods is called dot notation or dot syntax. E.g.

  • window.opener - is a reference to the 'opener' property of the window object which is actually a reference to the parent window that spawned the current window.
  • window.open() - is a reference to the 'open()' method of the window object which is used to open a new window.
  • window.close() - is a reference to the 'close()' method of the window object which is used to close a window.

Here is an example of the window object in use: Click for a new window

And if you click the next link you should see the content of the newly opened window change:Click here to change the window content

In this simple example the web page tester2.htm is initially opened, using the 'window.open()' method, in a new browser window named 'mynewwindow', without passing the method any imformation regarding the features of the browser window. When the second link is clicked the content of this named window is changed to be 'tester3.htm'. As you can see, if you don't provide any information regarding the web browser features then all of them will be available.

Exercise

Pay a visit to this excellent page: Thau on Windows Features and complete the tutorial.

The Javascript Document Object Model (DOM)

Javascript is an object based programming language. This simply means that is built and centered around 'objects'. An object is simply a 'thing'. In javascript objects include: the browser window (the window object), the html document within that window (the document object) or a form within that html page. Objects can be nested inside one another. For example a form may be part of a document which is itself inside a window. This form (and the elements that make up this form) may be referenced using the dot syntax. E.g.

window.document.myform

This code references a form named 'myform' using dot syntax.

The javascript document object model describes a hierarchy of objects. See the DOM diagram: Thau's DOM diagram. At the root of this hierarchy is the current window (the window object). This has 7 properties, one of which is 'document'. The document object is the page currently presented from the window. You will see that the document object has a bunch of properties itself including links[], images[] and forms[]. Each is describes as an array (more on these soon) of objects of that type.

Object Properties

Object properties can be thought of as characteristics or attributes of that object. A javascript property has a similar relationshipt to the object it belongs to as an HTML attribute has to the tag that contains it. One big difference is that javascript properties can be objects themselves. E.g. A form or an image may be considered as properties of the document object that contains them. But they are also objects in their own right. Basically a property is also an object if that property has its own properties and methods.

Object Methods

Methods are actions or functions that can be applied directly to objects. They are the actions that a particular object has at its disposal. Methods are signified with parentheses immediately following their name. E.g. alert(); open(); close(); confirm(). These parentheses sometimes enclose parameters used by the method to complete its task.

Remember: Parentheses distinguish a method from a property or an object.

EXERCISE

If you are finding all of this technical geek-speek jargon a little off-putting don't worry. Pay a visit to this site where you can look at some pictures: Webdeveloper Javascript Object Tutorial.

Built in Objects

The javascript language comes with a whole range of built in objects that you can call upon as required. These include the window object, date object, form object, array object etc. Each having a set of properties and methods. The 'window' object is just one of these javascript objects. We will be looking at many of these in practical applications in forthcoming weeks.

EXERCISE

Pay a visit to w3schools and look at some of their javascript object examples:

  1. Take a general look at objects in javascript with the W3Schools javascript object intro.
  2. Then take a look at the DOM window object:W3Schools on the DOM window object.
  3. And don't forget to look at the math object:W3schools on the math object.

Arrays in Javascript

Javascript, like many other programming languages, has the ability to use a data structure called an array. An array is a collection of data or variables, where each piece of data is stored in an indexed location in the array. Each location in the array is assigned an index number starting from '0'. Elements of an array can actually be of any data type because javascript is an untyped programming language. Arrays are very important in javascript because a number of the DOM components are implemented as arrays. Take another look at the properties of the document object in the DOM diagram seen earlier. You will hopefully have noticed the following properties of the document object:

  • forms[]: Array of form objects.
  • links[]: Array of link objects.
  • images[]:Array of image objects.

And there are others. The square brackets indicate an array.

You can make your own arrays to store data using the javascript 'array()' object. For now we will focus upon the built-in DOM arrays.

The forms[] Array

If you again flip back to the simple DOM diagram and take a look at the forms[] object you will see that it has one property which is an array: elements[]. The elements[] array is a reference to all of the fields in a particular form and enables you (the programmer) to interact with these elements.

It is good practice to allocate unique descriptive names/id's to your form elements as this makes addressing them much simpler and easier to read and understand.

EXERCISE

Open this page in which I have duplicated one of my simple forms: Double form. Complete each form with differing data and then try the links at the bottom.

Examine the code for the page and determine how each element in each of the forms was specifically targeted and interrogated to derive the value entered.