Học JavaScript qua ví dụ part 32 pps

ptg
10.1 JavaScript and the Browser Object Model 285
10.1.2 Working with the window Object
The window object is where all the action happens in a browser. It’s at the top of the Java-
Script hierarchy, and is automatically defined for each window that you open, as repre-
sented in Figure 10.12. When you start up your browser, you may stay in the current
window until you exit the browser, or you may have any number of windows open at
the same time. Within each window you browse the Internet, read e-mail, search for
cheap airline tickets, and buy a new book. Each new page you bring up is a document
within the current window. The window is often partitioned into independent display
areas, called frames, which are windows within windows. (Frames are discussed in the
section “Working with Frames” on page 303.)
The window object comes with a number of properties and methods. Because it is the
basis of all objects, the name of the window object can be excluded when applying meth-
ods to it; for example, it is not necessary to specify window.alert(“Watch out!”) or win-
dow.document.write(“OK”). You simply use alert(“Watch out!”) or document.write(“OK”).
When a user clicks a button or rolls the mouse over a link, an event occurs that often
affects the behavior of a window. Such user-initiated events are discussed in Chapter 13,
“Handling Events.”
Object’s Properties and Methods. The window object has a number of properties,
which are also objects in their own right. Table 10.4 lists those properties and how they
describe the attributes of the window.
Table 10.4 Properties of the window Object
Property What It Describes
closed True if the window is closed.
defaultStatus The default status message displayed in the status bar at the bottom
of the window.
document The document object that is currently displayed in the window.
frames An array of frame objects within the window.
history The history object containing the URLs last loaded into the
window.

length The number of frames within the window.
location The URL of the current window.
name The name of the window.
offscreenBuffering Used to draw new window content and then copy it over existing
content when complete; controls screen updates.
Continues
From the Library of WoweBook.Com
ptg
286 Chapter 10 • It’s the BOM! Browser Objects
The window object also has a number of methods that define its behavior, listed in
Table 10.5, such as how to open, close, scroll, and clear a window.
opener The window that opened the current window.
parent Indicates a window that contains another window (used with
frames).
screen Displays information about the screen, such as height, width (in
pixels).
self Refers to the current window. For all windows, the self and window
properties of a window object are synonyms for the current
window, and you can optionally use them to refer to the current
window.
status Specifies a temporary message in the status bar, resulting user
interaction.
top The topmost window containing a particular window (used with
frames).
window Identifies the current window being referenced, synonymous with
self.
Table 10.5 Methods of the window Object
Method What It Does
alert(text) Creates a triangular dialog box with a message in it.
blur() Removes focus from the window.

clearInterval(interval) Clears a previously set interval timer.
clearTimeOut(timer) Clears a previously set timeout.
close() Closes a window.
confirm() Creates a dialog box for user confirmation.
focus() Gives the focus to a window.
open(url, name, [options]) Opens a new window and returns a new window
object.
prompt(text, defaultInput) Creates a dialog prompt box to ask for user input.
Table 10.4 Properties of the window Object (continued)
Property What It Describes
From the Library of WoweBook.Com
ptg
10.1 JavaScript and the Browser Object Model 287
Opening and Closing Windows. You can open a new browser window by going to
the File menu and selecting New Window (Netscape and Internet Explorer), or you can
open a new window from a JavaScript program with the window’s open method. These
little windows are commonly called popups. When creating these windows, keep in
mind that all major Web browsers now offer popup advertising filters, and your viewer
might not even see the popup.
scroll(x, y) Scrolls to a pixel position in a window.
setInterval(expression, milliseconds) After a specified interval, evaluates an expression
(see Examples 10.10 and 10.12).
setInterval(function, milliseconds, [arguments]) After a specified interval, evaluates a function (see
Examples 10.10 and 10.12).
setTimeout(expression, milliseconds) After a timeout period has elapsed, evaluates an
expression (see Examples 10.10, 10.11, and 10.13).
setTimeout(function, milliseconds, [arguments]) After a timeout period has elapsed, evaluates a
function (see Examples 10.10, 10.11, and 10.13).
FORMAT
var window_object = window.open("url", windowname, [options]);

EXAMPLE
var winObj= window.open("http://localhost/windows/winter.jpg",
"winter","width=1150,height=350,resizable=yes,scrollbars=yes,
location=yes");
EXAMPLE 10.7
<html>
<head><title>Opening a New Window</title>
<script type="text/javascript">
1 function newWindow(){
2 var winObj=open("winter.jpg", "winter");
}
</script>
</head>
<body bgColor="lightblue">
<h2>Winter Scene from the Old Country</h2>
Continues
Table 10.5 Methods of the window Object (continued)
Method What It Does
From the Library of WoweBook.Com
ptg
288 Chapter 10 • It’s the BOM! Browser Objects
<h3>Click here to see through my winter window<br />
3 <a href="JavaScript:newWindow()">Winter Scene</a></h3>
</body>
</html>
EXPLANATION
1 The JavaScript function newWindow is defined.
2 The open method is called and returns a window object that is assigned to the vari-
able, winObj. The first argument to the open method is the URL of the new win-
dow; in this case the document is an image file called winter.jpg located in the cur-

rent directory. The name to be associated with this window is winter.
3 When the user clicks on the line Winter Scene, the JavaScript user-defined func-
tion, newWindow, is called (see Figure 10.16). This function is responsible for
opening the new window. Instead of a URL, the HTML <a href> tag is assigned
name of a JavaScript function. The JavaScript: label allows the function to be
called when the user clicks the link. Without the JavaScript: label, the browser will
try to find a URL address called newWindow() and fail.
Figure 10.16 A new popup window showing a winter scene is opened.
EXAMPLE 10.7 (CONTINUED)
From the Library of WoweBook.Com
ptg
10.1 JavaScript and the Browser Object Model 289
The window object’s open() method has a number of options listed in Table 10.6 that
allow you to further customize the new window.
Table 10.6 The open() Method and Its Options
Option Values Gives the Window
directories Yes/no or 1/0 Directory buttons
height Integer value Height in pixels
location Yes/no or 1/0 A location box
menubar Yes/no or 1/0 A menu bar
resizable Yes/no or 1/0 The ability to be resized
scrollbars Yes/no or 1/0 Scrollbars along the side
status Yes/no or 1/0 A status bar
toolbar Yes/no or 1/0 A toolbar
width Integer value Width in pixels
EXAMPLE 10.8
<html>
<head><title>Opening a New Window with Parameters
and Closing It</title>
<script type="text/javascript">

1 function newWindow(){
2 winObj=window.open("http://localhost/windows/winter.jpg",
"winter","width=1150,height=350,resizable=yes,
scrollbars=yes,location=yes");
3 winObj.focus();
4 //winObj.blur();
}
5 function closeWindow(){
6 winObj.close();
}
</script>
</head>
<body bgColor="lightblue">
<h2>Winter Scene from the Old Country</h2>
<h3>Click the link to see my winter window<br />
7 <a href="JavaScript:newWindow()">Winter Scene</a>
<p>When you are ready to close the window, click here<br />
8 <a href="JavaScript:closeWindow()">Close the window</a></h3>
</body>
</html>
From the Library of WoweBook.Com
ptg
290 Chapter 10 • It’s the BOM! Browser Objects
EXPLANATION
1 The function newWindow() is defined.
2 The open() method is passed the URL of the JPEG image file that will be displayed
in the new window called winter. The width and height of the new window are
1150 and 350 pixels, respectively. The window is resizable and has scrollbars. A
location box appears in the top of the new window. The name of the window ob-
ject created by the open method is winObj. It is important that you do not use any

spaces or linebreaks between the commas in the list of parameters.
3 The focus() method brings the new window into focus: It appears in front of the
parent window or any other windows.
4 The blur() method (commented out) would push the window behind any other
windows that are open.
5 The user-defined function, closeWindow(), is defined.
6 The reference to the window object, winObj, will call the close() method to close
the new window that was opened.
7 The newWindow function is called when the user clicks the link Winter Scene. The
label, JavaScript:, prevents the link from trying to activate a URL, and instead goes to
the JavaScript program and calls the function closeWindow(). See Figure 10.17.
8 When the user clicks this link, the new window will be closed. The original or
parent window will remain in the browser. If the name of the new window object
is not provided, the close() method will try to close the parent window.
Figure 10.17 Opening a new resizable window with a scrollbar and size dimensions in
pixels: Output from Example 10.8.
From the Library of WoweBook.Com
ptg
10.1 JavaScript and the Browser Object Model 291
Moving and Resizing a Window. JavaScript provides several methods with which
to resize and move a window object. The window can be moved or resized absolutely, or
relative to its current position or size. The numbers, given as arguments, are the pixel
coordinates, and are listed in Table 10.7.
Table 10.7 Move and Resize Methods
Method Example What It Does
moveBy() moveBy(20,20) Moves the window relatively by 20 pixels.
moveTo() moveTo(0,0) Moves to the top, left corner of the screen.
resizeBy() resizeBy(15,10) Resizes the window relatively by 15 × 10 pixels.
resizeTo() resizeTo(450,350) Resizes the window absolutely to 450 × 350
pixels.

EXAMPLE 10.9
<html>
<head><title>Move a New Window</title>
<script type="text/javascript">
function directions(){
1 winObj=window.open("myplace.html","myplace",
"width=200,height=300,resizable=no");
2 winObj.moveTo(0, 0); // Move window to top left corner
3 winObj.focus();
4 parent.window.moveTo(215, 0); // Move the parent window
5 parent.window.resizeTo(400,400); // Resize browser window
}
function closeWindow(){
winObj.close();
}
</script>
</head>
<body bgColor="lightblue">
<h2>We've moved!</h2>
For directions to our new place,
<br />
click the button
6 <form >
<input type="button"
value="Simple Directions"
7 onClick="directions();">
<p>When you are ready to close the window, click here</p>
</form>
<a href="JavaScript:closeWindow()">Close the window</a>
</body>

</html>
From the Library of WoweBook.Com
ptg
292 Chapter 10 • It’s the BOM! Browser Objects
10.1.3 Creating Timed Events
Timer Methods. The window object provides two methods that act like an alarm
clock so that you can time when you want certain things to happen in your program:
EXPLANATION
1 A new window object is created. If the resizable option is turned off, the user will
not be able to maximize the window. A maximized window cannot be moved with
the moveTo() method.
2 The moveTo() method determines the position where the window will be moved.
The arguments 0,0 represent the x,y coordinates (column,row) in pixels.
3 The new window will be put into focus, meaning it will be at the top of the win-
dow hierarchy, in front of all the other windows.
4 The parent window is the original window we started in. It is moved to coordi-
nates 215 × 0 pixels.
5 The parent (original) window is resized to 400 × 400 pixels.
6 This is the start of a simple HTML form. It creates a simple input device called a
button on the screen.
7 This is the onClick event handler. When the user presses the button, the event is
triggered and a function called directions(), will be called. The new window is
moved to the top left corner and put into focus. See Figure 10.18.
Figure 10.18 After moving, focusing, and resizing both the new window and the
parent window: Output from Example 10.9.
From the Library of WoweBook.Com