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 . 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. window<br /> 3 <a href=" ;JavaScript: newWindow()">Winter Scene</a></h3> </body> </html> EXPLANATION 1 The JavaScript function newWindow is defined. 2. /> 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