Thông tin tài liệu
Using the Window Object T he window object provides access to properties and methods that can be used to obtain information about open windows, as well as to manipulate these windows and even open new windows. This object offers properties that allow you to access frames in a window, access the window’s name, manipulate text in the status bar, and check the open or closed state of the window. The methods allow the user to display a variety of dialog boxes, as well as to open new windows and close open windows. Among the features of the window object are the following: • Creating alert dialog boxes • Creating confirmation dialog boxes • Creating dialog boxes that prompt the user to enter information • Opening pages in new windows • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of functions The window object can be referred to in several ways: • Using the keyword window or self to refer to the current window where the JavaScript code is executing. For instance, window.alert and self.alert refer to the same method. • Using the object name for another open window. For instance, if a window is associated with an object named myWindow, myWindow.alert would refer to the alert method in that window. The following steps illustrate how to access the window object by changing the text displayed in the current window’s status bar: 1. In the body of the document, create a script block with opening and closing script tags: <script language=”JavaScript”> </script> 2. In the script block, access the window.status property: <script language=”JavaScript”> window.status </script> 3. Assign new text to display to the window.status property in the same way as assigning a text string to a variable, so that the final doc- ument looks like Listing 114-1. note • The window.status property reflects the current text in the status bar at the bottom of the current win- dow. By assigning a new text string to this property, you can override the default text displayed in the status bar with your own text. 236 Part 5 Task 114 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 236 <body> <script language=”JavaScript”> window.status = “A new status message”; </script> </body> Listing 114-1: Displaying text in the status bar. 4. Save the file. 5. Open the page in a browser. A blank HTML page appears with “A new status message” displayed in the status bar, as illustrated in Figure 114-1. Figure 114-1: Displaying custom text in the status bar. Manipulating Browser Windows 237 Task 114 cross-reference • The various types of dialog boxes are discussed in Tasks 25, 26, and 117. 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 237 Popping Up an Alert Dialog Box T he window object provides the alert method, which allows you to display a simple dialog box containing a text message followed by a single button the user can use to acknowledge the message and close the dialog box. Figure 115-1 illustrates an alert dialog box in Microsoft Internet Explorer; Figure 115-2 shows the same dialog box in Netscape. Figure 115-1: An alert dialog box in Internet Explorer. Figure 115-2: An alert dialog box in Netscape. Creating alert dialog boxes is one of many features of the window object, which can also be used to create confirmation and prompting dialog boxes, as well as other capabilities. These include the following: • Opening pages in new windows • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of functions The following steps show how to display two alert dialog boxes in succession: 1. In the body of a new HTML document, create a script block with opening and closing script tags: <script language=”JavaScript”> </script> 2. Use the window.alert method to display the first dialog box: window.alert(“This is a dialog box”); 3. Use the window.alert method to display the second dialog box, so that the final script looks like this: <script language=”JavaScript”> window.alert(“This is a dialog box”); notes • The window.alert method takes one argu- ment: a text string contain- ing the text to display in the dialog box. You can pass this in as a literal string or as any expression that eval- uates to a string. • When the alert dialog box displays, interaction with the browser window is blocked until the user closes the dialog box by clicking the button in the dialog box. 238 Part 5 Task 115 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 238 window.alert(“This is another dialog box”); </script> 4. Save the file. 5. Open the file in a Web browser. The first dialog box, shown in Figure 115-3, appears. Once the user closes the first dialog box, the second, shown in Figure 115-4, is displayed. Figure 115-3: The first dialog box. Figure 115-4: The second dialog box. Manipulating Browser Windows 239 Task 115 cross-reference • The scheduling of auto- matic execution of a func- tion is discussed in Tasks 38, 39, and 40. 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 239 Popping Up Confirmation Dialog Boxes I n addition to the alert method discussed in Task 115, the window object also provides the confirm method, which allows you to display a dialog box con- taining a text message followed by two buttons the user can use to acknowledge the message or reject it and close the dialog box. Typically these buttons are labeled OK and Cancel. Figure 116-1 illustrates a confirmation dialog box in Microsoft Internet Explorer; Figure 116-2 shows the same dialog box in Netscape. Figure 116-1: A confirmation dialog box in Internet Explorer. Figure 116-2: A confirmation dialog box in Netscape. The following steps show how to display a confirmation dialog box, and then based on the user’s choice, display the choice in the body of the page: 1. In the body of a new HTML document, create a script block with opening and closing script tags: <script language=”JavaScript”> </script> 2. Use the window.confirm method to display the first dialog box; the value returned by the dialog box is stored in the variable userChoice: var userChoice = window.confirm(“Click OK or Cancel”); 3. Use an if statement to test the user’s response to the dialog box by checking the userChoice variable: if (userChoice) { 4. If the user has selected the OK button, display an appropriate mes- sage using the document.write method: document.write(“You chose OK”); notes • The window.confirm method returns a value: true if the user clicks on OK or false if the user clicks on Cancel. This makes it easy to test the user’s response to the dia- log box. • if statements require an expression that evaluates to true or false. Here, userChoice is a variable that will be either true or false, since that is the value returned by the con- firm method. This means the expression can simply be the variable name itself. 240 Part 5 Task 116 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 240 5. If the user has selected the Cancel button, display an appropriate message. The final page should look like this: <body> <script language=”JavaScript”> var userChoice = window.confirm(“Click OK or Æ Cancel”); if (userChoice) { document.write(“You chose OK”); } else { document.write(“You chose Cancel”); } </script> </body> 6. Save the file and open it in a browser. The browser displays a confir- mation dialog box like Figure 116-3. Based on the user’s selection in the dialog box, the browser window will contain an appropriate mes- sage, as in Figure 116-4, where the user selected the OK button. Figure 116-3: The confirmation dialog box. Figure 116-4: The user selected OK. Manipulating Browser Windows 241 Task 116 cross-reference • The window object is introduced in Task 114. 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 241 Popping Up JavaScript Prompts I n addition to the alert method discussed in Task 115 and the confirm method discussed in Task 116, the window object also provides the prompt method, which allows you to display a dialog box containing a text message fol- lowed by a text field, where the user can provide some input before closing the dialog box. Figure 117-1 illustrates a prompt dialog box in Microsoft Internet Explorer; Figure 117-2 shows the same dialog box in Netscape. Figure 117-1: A prompt dialog box in Internet Explorer. Figure 117-2: A prompt dialog box in Netscape. The window.prompt method takes two arguments: The first is the text message to display, and the second is the default text to display in the text field. If you want the text field to be empty, simply use an empty string. For instance, the fol- lowing example of the window.prompt method displays the dialog box illustrated in Figure 117-1: window.prompt(“Enter a value from 1 to 10”,””); The following steps show how to use a prompt dialog box to ask the user to enter his or her name and then display the name in the body of the HTML page: 1. In the body of a new HTML document, create a script block with opening and closing script tags: <script language=”JavaScript”> </script> 2. Use the window.prompt method to display the dialog box; the value returned by the dialog box is stored in the variable userName: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”); 3. Display the user’s name using the document.write method, so that the final page looks like the following: notes • The window.prompt method returns the value entered by the user in the text field in the dialog box. By storing the result returned by the method in a variable, you can use the value later in the page. • The document.write method expects a single string as an argument. In this example, two strings are concatenated (or com- bined) into a single string using the + operator. 242 Part 5 Task 117 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 242 <body> <script language=”JavaScript”> var userName = window.prompt(“Please Enter Your Æ Name”,”Enter Your Name Here”); document.write(“Your Name is “ + userName); </script> </body> 4. Save the file. 5. Open the file in a browser. A prompt dialog box appears, as shown in Figure 117-3. After the user enters his or her name, it is displayed in the browser window, as in Figure 117-4. Figure 117-3: Prompting the user to enter his or her name. Figure 117-4: Displaying the user’s name. Manipulating Browser Windows 243 Task 117 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 243 Creating New Browser Windows T he window object provides the open method, which can be used to open a new browser window and display a URL in that window. In its most basic form, the open method works as follows: window.open(url,window name); Here, the URL is a text string of a relative or absolute URL to display in the window. The window name is a name for the window that can be used later in the target attribute of the a tag to direct a link to that window. Opening new windows is one of many features of the window object, which can also be used for several other purposes: • Displaying a variety of dialog boxes • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of functions The following steps illustrate how to open a window with JavaScript. The main document will open in the current browser window, and the new window will open and display another URL: 1. In the header of a new HTML document, create a script block: <head> <script language=”JavaScript”> </script> </head> 2. In the script block, use the window.open method to display the URL of your choice in a new window, and name the window myNewWindow: <head> <script language=”JavaScript”> window.open(“http://www.bahai.org/”,”myNewWindow”); </script> </head> 3. In the body of the document, enter any HTML or text you want to be displayed in the initial window, so that the final page looks like Listing 118-1. note • The window.open method can actually take two arguments or three arguments. For basic use, two arguments suffice. Advanced use such as con- trolling the size of a window when it opens relies on a third argument. This task illustrates basic use of the method. 244 Part 5 Task 118 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 244 <head> <script language=”JavaScript”> window.open(“http://www.bahai.org/”,”myNewWindow”); </script> </head> <body> The site has opened in a new window. </body> Listing 118-1: Opening a new window. 4. Save the file. 5. Open the file in a browser. The page displays, and then a new window opens to display the URL specified in the window.open method, as illustrated in Figure 118-1. Figure 118-1: Opening a new window. Manipulating Browser Windows 245 Task 118 tip • Remember, you can’t con- trol the size of the new win- dow using the technique from this task. Typically, the new window will be the same size as the initial win- dow opened in your browser. 06 542419 Ch05.qxd 11/19/03 10:33 AM Page 245 [...]... specified in the window.open method in Step 2 8 Open the first file in the browser The second new window automatically opens The first window contains a link to close the new window, as in Figure 128-1 The second window contains a link to close the original window, as in Figure 128-2 Figure 128-1: The original window Figure 128-2: The new window 9 Click on the link in the first window, and the new window... that prompt the user to enter information • Opening pages in new windows • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of functions The window object can be referred to in several ways: • Using the keyword window or self to refer to the current window where the JavaScript code is executing For instance, window.alert and self.alert... Figure 1 25- 1 Manipulating Browser Windows 259 Task 1 25 Figure 1 25- 1: Displaying a JavaScript- based link 8 Click on the link The window updates to display the second page, as illustrated in Figure 1 25- 2 Figure 1 25- 2: Directing the user to a new page using JavaScript cross-reference • The document object is introduced and discussed in Task 44 260 Task 126 Part 5 Controlling Window Scrolling from JavaScript. .. Form Field in New Window 9 Save the file and open it in a browser The first window containing the link is displayed and the second window containing the form automatically opens 10 Enter some text in the form in the new window, and then click on the link in the new window An alert dialog box is displayed, containing the text you entered in the text field cross-reference • As mentioned in. .. onClick=”newWindow.close();”>Close the new Æ window 4 Save the file and close it 5 In a second new file, create a link in the body for closing the original window: Close the original window Manipulating Browser Windows 6 In the onClick event handler for the link, call the close method of the window.opener object: Close the Æ original window... Click on the link in the new window, and the original window closes 2 65 Task 128 266 Task 129 Part 5 Updating One Window’s Contents from Another A s mentioned in Task 128, when the window.open method is used to open a new window from JavaScript, a relationship exists between the original window and the new window so that it is possible to refer to both windows from within JavaScript For instance, it... file in a browser The new window automatically opens, and the text specified in the JavaScript code is displayed in the new window, as illustrated in Figure 129-1 Figure 129-1: The new window’s content comes from JavaScript in the original window 129 268 Task 130 Part 5 Accessing a Form in Another Browser Window W notes • • Accessing the window object for a new window is made possible because the window.open... window At the same time, in the new window the window.opener property references the window object of the original window where window.open was called To illustrate this, the following example opens a new window from the first page and then provides links so that you can close the new window from the original window or close the original window from the new window: 1 In a script block in the header of a... link in the original window, which displays the content of a field in the form in a dialog box: 1 In the body of a new HTML document, create a form and name the form myForm with the name attribute of the form tag: 2 In the form, create a text field and name the field myField: 3 Save the file and close it 4 In. .. Opening a full-screen window 127 264 Task 128 Part 5 Handling the Parent-Child Relationship of Windows W hen the window.open method is used to open a new window from JavaScript, a relationship exists between the original window and the new window so that it is possible to refer to both windows from within JavaScript note • The principle in this task is straightforward First, consider the original window . enter information • Opening pages in new windows • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of functions The window. capabilities. These include the following: • Opening pages in new windows • Determining window sizes • Controlling scrolling of the document displayed in the window • Scheduling the execution of. later in the page. • The document.write method expects a single string as an argument. In this example, two strings are concatenated (or com- bined) into a single string using the + operator. 242
Ngày đăng: 12/08/2014, 19:21
Xem thêm: JavaScript in 10 Simple Steps or Less 2007 phần 5 pps, JavaScript in 10 Simple Steps or Less 2007 phần 5 pps
