Project 10: Exploring the Window Object Essentials for Design JavaScript Level One Michael Brooks

Project 10: Exploring the Window Object

Essentials for DesignJavaScript

Level OneMichael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Implement status bar properties

Use screen properties

Move and resize windows


Objectives (continued)

Control scrolling Work with frames Redirect users to

a frameset


Why Would I Do This?

The window object is the highest-level object of the browser’s object model

For every browser window we create, an instance of the window object is created

You can also: Resize windows Move windows Control the browsers status bar Manually control scrolling


Visual Summary

The screen object represents the user's computer screen

Properties of this object can be used to determine the current width and height resolution in pixels of the users computer screen


Visual Summary (continued)

In this example, the user is using a resolution of 1024 pixels width by 768 pixels height


Visual Summary (continued)

It is difficult to design a page which looks good at any resolution However, by using screen properties, we can

adapt to different resolutions or size browser windows accordingly

The resolution of the user's monitor can also be a factor when determining where to place a pop-up window


Visual Summary (continued) A single browser window can contain

multiple HTML documents

A frameset is an HTML file which divides the browser window up into sections and displays various HTML files in the sections

A frame is an HTML page, displayed with other HTML pages in a single browser window


Implement Status Bar Properties

Most browsers have a status bar which appears in the lower left corner of the browser window


Implement Status Bar Properties(continued)

The status bar is designed to add additional usability to Web pages The term, usability, describes how easy a Web

page is to use The status bar enhances usability by giving

the user clues as to how the navigation and browser works



HTML: Does not give the user the ability to change or

control aspects of the status bar JavaScript:

Allows developers to manipulate the messages shown in the status bar


Implement Status Bar Properties(continued) Using the status and

defaultStatus properties of the window object, developers can manipulate the messages shown in the status bar


Implement Status Bar Properties(continued) The defaultStatus property

The defaultStatus property is used to place text messages within the status bar



The following line of code places the message "Welcome to our site!" as the default message in the status bar

window.defaultStatus="Welcome to our Site"; As you might expect, the property can also be

detected and used in our codedocument.write("The message in the status bar is

"+defaultStatus); By using these two statements together, we get the

result in our browser as shown HERE


Implement Status Bar Properties(continued) The status property

This property consists of a string that will be temporarily displayed in the browser's status window

After a brief period, the string in the defaultStatus property will replace this message

This is especially useful when we want to add explanatory copy to a choice the user can make



Status message can be placed on images or hyperlinks to control the message temporarily, such as when the user moves the mouse over a hyperlink This requires the return keyword to work correctly and

event handlers to first trigger, then reset the message. Example


Implement Status Bar Properties(continued) <HTML>

<HEAD><TITLE>StatusBar.html </TITLE><script language="JavaScript">// this code creates a new date objectcurrentTime=new Date();</script></HEAD><BODY><script language="JavaScript">document.write(currentTime);</script><BR><a href="products.html" onmouseover="window.status='Learn About Our

Products!';return true" onmouseout="window.status='';">

Products Page</a></BODY></HTML>


Implement Status Bar Properties(continued) Implement a Default Status Message

<html><head><title>status.html - demonstrates use of the status properties</title></head><body><a href="aboutus.html">About Us Page</a><script language="JavaScript">defaultStatus="Welcome to our site!";</script></body></html>

A default message will appear in the status bar


Implement Status Bar Properties(continued) Implement a Default Status Message

<html><head><title>status.html - demonstrates use of the status properties</title></head><body><a href="aboutus.html" onmouseover="window.status='Learn About Us';return true" onmouseout="window.status='';">About Us Page</a></script></body></html>

While your mouse is over the link, the message should change


Moving and Resizing Windows

Various methods in JavaScript allow browser windows to be resized and moved This allows new

possibilities for browser interaction


Moving and Resizing Windows(continued) Window sizes and window locations are

measured in pixels Window locations can by placed by specifying x-

coordinates and y-coordinates an x-coordinate represents the number of pixels from

the left corner of the screen a y-coordinate represents the number of pixels from the

top of the screen. For example, using pseudo-code, we can move a window in the following fashion.

moveTo(x-coordinate, y-coordinate);


Moving and Resizing Windows(continued) RESIZEBY()

This method will resize the window by a specific number of pixels

For example, the following statement will make the browser window 15 pixels wider and 10 pixels taller

self.resizeBy(15,10);

The following statement would reduce the size by the same number of pixels

self.resizeBy(-15,-10);


Moving and Resizing Windows(continued) RESIZETO()

This method allows us to change the browser window to a width and height which we specify

The entire browser window, including toolbars and buttons, will be set to the width and height we specify

The next statement changes the width to 300 and height to 350:

self.resizeTo(300,350);


Moving and Resizing Windows(continued) moveBy()

The moveBy() method will allow you to move the current browser window by a specific number of pixels

The following command will move the current browser window by 40 pixels to the right and 35 pixels down from its current position By specifying negative numbers, we can move the

browser window left and upself.moveBy(40,35);


Moving and Resizing Windows(continued) moveTo()

This method will move the browser window to a specific spot on the screen

Assuming we wanted to place the current window in the upper left corner of the screen, we could specify:

self.moveTo(0,0);


Moving and Resizing Windows(continued) Resize a Window

<html><head><title>resize.html</title></head><body><a href="#">Make Larger</a><script language="JavaScript">self.resizeTo(250,200);</script></body></html>

The browser window resize to the 250 pixels wide and 200 pixels high


Moving and Resizing Windows(continued) Resize a Window

Incrementally <html><head><title>resize.html</title></head><body><a href="#" onclick="resizeBy(15,10);">Make Larger</a><script language="JavaScript">self.resizeTo(250,200);</script></body></html>

Refresh the file in your browser by choosing View>Refresh

The browser window resizes by the 15 pixels wide and 10 pixels high


Moving and Resizing Windows(continued)

Using Screen Properties The screen object:

represents the user's computer screen contains useful properties designed to determine

information about the screen settings on the client's computer

By using advanced techniques, we can: use JavaScript to determine the size of the client's

current screen resolution load a page that looks best at that particular screen

size Example


Controlling Scrolling Web pages have the ability to expand in

order to include additional information We can control where the user is scrolled to

in the document using the scrollBy() and scrollTo() methods Both methods allow you to specify where to

scroll in terms of width (x-coordinates) and height (y-coordinates):

scrollTo(x,y); Specifically, if we wanted to go 500 pixels down

in the document, we could type:scrollTo(0,500);


Controlling Scrolling (continued)

The scrollBy() method allows us to change where the user is currently scrolled in the document by moving the current scroll position up or down by a specific number of pixels If we wanted to scroll the user up 100 pixels, we

could type:scrollBy(0,-100);

If we wanted to move them right by 100 pixels, we could type:

scrollBy(100,0);


Controlling Scrolling (continued) Controlling Scrolling through JavaScript

<p align="left"> </p><form action="" method="POST" id="myForm"><input type="Button" name="" value="Back to Top" id="myButton" onClick="self.scrollTo(0,0);"></form></body></html>

JavaScript allows to control scrolling


Working with Frames Frames allow web designers to divide up the

content area of the browser window into sections and display different Web pages within these areas

JavaScript gives us additional power over HTML frames


Working with Frames (continued) HTML Frames Explained

A frameset is an HTML file which only serves the function of dividing up the browser window into sections

The frameset file tells the browser to create frames

A frame is a portion of the browser window which can display an HTML page frame and a frame for the main content area of page


Working with Frames (continued)

The frameset file: tells the browser how much space to use for each

frame gives each frame a window name and tells the

browser which HTML file to display in each frame It's important to remember the frameset file

loads first then tells the browser which files to load in each frame



Creating a Frameset The <frameset> tag is used to split the browser

window into sections The <frame> tag is used to:

name the frame area specify which HTML page will be displayed in the are set the properties

Example


Working with Frames (continued) It is more common on modern Web pages to use

frames without borders or scrollbars Turning off the scrollbars and frame borders

gives the page a more professional look but eliminates the visual clues that tell users they are looking at several pages at once this gives designers the ability to create elaborate

interfaces from multiple frames which can be aligned to create a seamless appearance

Framesets have a powerful advantage in the ability to separate content from navigation and branding



Framesets have a powerful advantage in the ability to separate content from navigation and branding

Frames also have disadvantages related with: printing content viewing the source code in the browser



Frame attributes: refer to the properties of the <frame> tag allow us to control various aspects of the frame are specified in the <frame> tag of the frameset

file which creates the frame are also represented with matching properties in

JavaScript



SRC the SRC attribute is used to specify which HTML page

will appear within the frame the SRC tag is written within the <frame> tag in the

following form.

<frame SRC="leftNav.html"> linking a frame to an external URL is often desirable

and just requires us to specify an absolute location such as:

<frame SRC="http://www.atc.com/leftnav.html">



NAME the NAME attribute is used by JavaScript and HTML to

refer to the frame that is created<frame NAME="leftFrame" SRC="leftNav.html>

NORESIZE the NORESIZE attribute is used to keep the end user

from being able to move the border between frames and resize the amount of space allocated to each frame.

<frame NAME="leftFrame" NORESIZE SRC="leftnav.html">



SCROLLING SCROLLING turns scrollbars on or off for the frame if the SCROLLING attribute isn't used, the scrollbars

will be activated by the browser if needed the SCROLLING attribute takes a "YES" or "NO"

parameter

<frame NAME="leftFrame" NORESIZE SCROLLING="NO" SRC="leftnav.html">



MARGINHEIGHT the MARGINHEIGHT parameter specifies the top and

bottom margins of the frame in pixels<frame NAME="leftFrame" NORESIZE MARGINHEIGHT=50

SCROLLING="NO" SRC="leftNav.html">

MARGINWIDTH the MARGINWIDTH parameter specifies the left and

right margins of the frame in pixel <frame NAME="leftFrame" NORESIZE MARGINWIDTH=50

SCROLLING="NO" SRC="leftNav.html">



Creating the Frameset File It’s a common mistake to try and put the

frameset code within the <body> and </body> tags

This is not allowed by most HTML interpreters and will cause your code to not work properly

The frameset code should be placed between the </head> tag and the <body> tag

Example



Load an HTML Document Into Another Frame If we specify a target name which doesn't exist,

most browsers will open the file in a new browser window

If we don't specify a target name, the new page will appear in the same frame as the hyperlink which opened it



HTML has certain pre-defined target names for links to frames: the _blank will open a new browser window when

used in the target attribute. the _self qualifier will load the referenced page in

place of the current document; this can also be accomplished by leaving off the target attribute.

the _parent qualifier will load the window that contained the parent of the current document

Example


Redirecting Users to the Frame

Search engines often use "Spiders" or "Bots" which are simply automated programs that explore Web pages, records, any hyperlinks used, and indexes the content of the pages

You can use JavaScript's abilities to detect and control the use of frames


Redirecting Users to the Frame(continued)

Use a Frame-Redirect Script in your Site A frame redirect script has the added benefit of

keeping users from being able to easily view the source code of individual frame pages

Example

Documents

Project 10: Exploring the Window Object Essentials for Design JavaScript Level One Michael Brooks