Học JavaScript qua ví dụ part 31 ppt

ptg 271 chapter 10 It’s the BOM! Browser Objects 10.1 JavaScript and the Browser Object Model JavaScript programs are associated with a browser window and the document displayed in the window. The window is a browser object and the document is an HTML object. In the browser object model, sometimes called BOM, the window is at the top of the tree, and below it are objects: window, navigator, frames[], document, history, location, and screen. See Figure 10.1. If you are writing a JavaScript program that needs to manipulate the window, then you would use the window object and properties and methods associated with it. For example, the status property of the window object is used when you want to display text in the status bar, and the window’s alert method allows you to send a message to a dialog box. The document object model refers to the HTML document and all the elements and attributes associated with it. Because your Web page is so closely linked to HTML (or XML), JavaScript uses the DOM to access the HTML elements and attributes within a page. The document is the root of this model. Each HTML element is assigned to an object: There are Figure 10.1 The hierarchy of the browser object model. Current Window self, window, parent, top Window objects navigator Navigator object frames[] Array of Window objects document Document object history History object location Location object screen Screen object From the Library of WoweBook.Com ptg 272 Chapter 10 • It’s the BOM! Browser Objects image objects, form objects, link objects, and so on (see Figure 10.2). (See Chapter 11, “Working with Forms and Input Devices,” for more on document objects and the DOM.) By combining the browser and document object models, JavaScript allows you to manipulate all of the elements in a page as objects, from the window down the hierarchy, as shown in Figure 10.3. Figure 10.2 The hierarchy of the document object model. Figure 10.3 The browser and document object models combined (only a partial diagram). links[] array of Link objects anchors[] array of Anchor objects forms[] array of Form objects images[] array of Image objects applets[] array of applet objects embeds[] array of embedded objects document Document object elements[] elements[] links[] Array of Link objects anchors[] Array of Anchor objects forms[] Array of Form objects images[] Array of Image objects Current Window self, window, parent, top Window objects navigator Navigator object frames[] Array of Window objects document Document object history History object location Location object screen Screen object Button Checkbox Password elements[] From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 273 10.1.1 Working with the navigator Object The navigator object contains properties and methods that describe the browser. Netscape Navigator and Internet Explorer support the navigator object, but some browsers do not. The navigator object can be used for platform-specific checking to determine the version of the browser being used, whether Java is enabled, what plug-ins are available, and so on. Table 10.1 lists the properties that describe the navigator object. Table 10.1 Properties of the navigator Object Property What It Describes appCodeName Code name for the browser. appName Name of the browser. appVersion Version of the browser. mimeTypes An array of MIME types supported by the browser. platform The operating system where the browser resides. userAgent HTTP user-agent header sent from the browser to the server. EXAMPLE 10.1 <html> <head><title>Navigator Object</title></head> <body> <big> <script type="text/javascript"> 1 for(var property in navigator){ 2 str="navigator"+"."+ property; 3 document.write(property+ "  <em>"+ str+"</em><br />"); } </script> </big> </body> </html> EXPLANATION 1 The special for loop assigns, in turn, each property of the navigator object to the variable called property. 2 A string is created by concatenating “navigator” with a dot and the property value. 3 Each property and its value of the navigator object is displayed in the browser window. See Figures 10.4 through 10.7. From the Library of WoweBook.Com ptg 274 Chapter 10 • It’s the BOM! Browser Objects Figure 10.4 In Firefox the browser window displaying the properties of the navigator object: Output from Example 10.1. (Note that the appName property of Firefox is “Netscape.”) Figure 10.5 In Opera, the browser window displaying the properties of the navigator object: Output from Example 10.1. From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 275 Figure 10.6 In Internet Explorer, the browser window displaying the properties of the navigator object: Output from Example 10.1. Figure 10.7 In Safari, the browser window displaying the properties of the navigator object: Output from Example 10.1. From the Library of WoweBook.Com ptg 276 Chapter 10 • It’s the BOM! Browser Objects What Is Your Browser’s Name? Version Number? Browsers support different features, properties, and methods; for example, Internet Explorer might display a page in a slightly different form than Firefox, one version of Mozilla might support a feature not supported by an older version, a version of Internet Explorer might not support a feature supported by Opera, and so on. If you take into consideration all the other browsers and their unique features, it can be tricky to please all of the browsers all of the time or even some of the browsers all of the time. Browser detection allows you to check for specific browser names, versions, whether cookies are enabled, what types of plugins are loaded, and so on. The navigator object contains a number of properties that allow you to detect information about the user’s browser so you can customize your Web page in a way that is transparent to the user. What Is a Browser Sniffer? A browser sniffer is a program that makes browser detection easy. Many Web sites provide free browser sniffers that determine the types of different browsers. Go to http://www.quirksmode.org/js/detect.html, where you will find a EXAMPLE 10.2 <html> <head><title>The Navigator Object</title></head> <body> <h2>About The Browser</h2> <big> <script type="text/javascript"> 1 var BrowserName= navigator.appName; 2 var BrowserVersion = navigator.appVersion; 3 var BrowserAgent= navigator.userAgent; var platform=navigator.platform; document.write("<b>The Browser's name is:</b> " + BrowserName + "<br />"); document.write("<b>The Browser version is:</b> " + BrowserVersion + "<br />"); document.write("<b>The Browser's \"user agent\" is:</b> " + BrowserAgent + "<br />"); document.write("<b>The Browser's platform is:</b> " + platform + "<br />"); </script> </big> </body> </html> EXPLANATION 1 The navigator object’s appName property is the browser’s name. 2 The navigator object’s appVersion property is the version of the browser. 3 The userAgent property refers to the HTTP user-agent header sent from the browser to server. From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 277 complete JavaScript program ready to copy and paste into your editor. Save it as a .js file and then include it in your JavaScript code as shown in Example 10.3. The script creates a literal JavaScript object called BrowserDetect and defines a number of methods to detect your browser’s name, version, and operating system. The code is fully explained by the author. At this point in your JavaScript experience, you should be able to read the script and understand the explanations provided. To display the results, the following function was added to the list of methods provided by the original script: printResults: function display(){ document.write("<b>This browser is "+BrowserDetect.browser); document.write( " version "+ BrowserDetect.version + ".<br />"); document.write("The Operating System is "+ BrowserDetect.OS + "</b>.<br />"); } Figure 10.8 Browser properties (Example 10.2). EXAMPLE 10.3 1 <script type="text/javascript" src="browser_sniffer_real.js"> </script> <script type="text/javascript"> 2 BrowserDetect.init(); 3 BrowserDetect.printResults(); </script> EXPLANATION 1 The source file is a .js file, downloaded from http://www.quirksmode.org/js/detect.html. 2 The init() method for the BrowserDetect object sets the properties: browser, version and OS for the browser you are using to view the output. Continues From the Library of WoweBook.Com ptg 278 Chapter 10 • It’s the BOM! Browser Objects Detecting Plug-Ins. Plug-ins are special software programs that can be downloaded to add the ability to listen to audio, watch videos and movie clips, display animation, and create special image viewing files. Some examples of plug-ins are Macromedia 3 The printResults() method, shown here, was added to this script, to show the value of the properties set for the BrowserDetect object; that is, the name of the browser, its version number, and the operating system. Output examples are shown in Figures 10.9, 10.10 and 10.11. Figure 10.9 The output from Example 10.3 shown in Firefox. Figure 10.10 The output from Example 10.3 shown in Opera. Figure 10.11 The output from Example 10.3 shown in Internet Explorer. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 279 Shockwave or Flash player, Adobe Acrobat Reader, and RealNetworks RealPlayer. Plug- ins can be platform dependent and their MIME types can vary as well. If you are using Firefox, go to the Tools menu and select Addons to get more information about the plugins supported on your client. If using Internet Explorer, you will find the plugins[] array is empty. You can manage add-ons by going to the Internet Explorer Tools menu and clicking Manage Add-ons. The plugins[] array of the navigator object (starting with Navigator 3) contains a complete list of installed plug-ins and can be numerically indexed to see all plug-ins installed for this browser. Each element of the plugins[] array represents a plugin object. The properties of the plugin object are shown in Table 10.2. When you use the HTML <embed> tag in a document, you are creating a plugin object. Each instance of the <embed> tag creates another object (see <embed> and <object> tags for embedding objects on page 281, Example 10.5). Table 10.2 Properties of the plugin Object Property What It Describes description A description of the plug-in. filename The disk file name of the plug-in. length The number of elements in the plugins[] array. name The name of the plug-in. EXAMPLE 10.4 <script type="text/javascript"> // No plug-ins for Windows IE. Firefox uses this program. 1 var num_of_plugins = navigator.plugins.length; 2 for (var i=0; i < num_of_plugins; i++) { var number=i+1; document.write("<font color=red>Plug-in No." + 3 number + "- </font>"+navigator.plugins[i].name+" <br />[Location: " + navigator.plugins[i].filename + "]<p>"); } 4 alert("\nYou have " + number + " plug-ins installed!") </script> EXPLANATION 1 The length property specifies the number of elements in the plugins[] array. If using Internet Explorer for Windows, then you will need to use the HTML <object> tag and identify a class ID. 2 The plugins[] array consists of a list of plug-ins that have been installed in this browser. The for loop is used to go through the array, one by one, listing each plug-in. Continues From the Library of WoweBook.Com ptg 280 Chapter 10 • It’s the BOM! Browser Objects What Is ActiveX? Instead of plug-ins, Microsoft has something called ActiveX controls. 1 ActiveX controls are used as a means to embed objects or components into a Web 3 The plug-in is listed by name. The file name of the plug-in is displayed. 4 The alert lets you know how many plug-ins are installed (see Figure 10.12). Figure 10.12 A list of plug-ins for Firefox. 1. FF ActiveX Host can run ActiveX controls in Mozilla Firefox for Windows. Mozilla ActiveX Control was last updated in late 2005, and runs in Firefox 1.5. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com [...]... type supports, such as rpm, wav, pdf, and so on Partial output is shown in Figure 10.15 Figure 10.15 MIME types: Output from Example 10.6 (partial list) From the Library of WoweBook.Com 10.1 JavaScript and the Browser Object Model 10.1.2 285 Working with the window Object The window object is where all the action happens in a browser It’s at the top of the JavaScript hierarchy, and is automatically defined... such as audio, video, and image files All browsers have a list of MIME types JavaScript 1.1 implemented the mimeType object 2 Available with NN3+ and IE5+ on the Mac, but not on Windows Internet Explorer From the Library of WoweBook.Com 10.1 JavaScript and the Browser Object Model 283 (see Table 10.3) These objects are predefined JavaScript objects that allow you to access the mimeTypes[] array, a property... The name of the MIME type; e.g., image/jpeg EXAMPLE 1 2 3 4 5 10.6 Mime Detection Mime Types Firefox for ( var i=0;i < navigator.mimeTypes.length; i++){ if(navigator.mimeTypes[i].enabledPlugin != null){ document.write (""+ navigator.mimeTypes[i].type+""); document.write(" . WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 277 complete JavaScript program ready to copy and paste into your editor. Save it as a .js file and then include it in your JavaScript code. .wav, .pdf, and so on. Partial output is shown in Figure 10.15. Figure 10.15 MIME types: Output from Example 10.6 (partial list). From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser. 10.2). EXAMPLE 10.3 1 <script type="text /javascript& quot; src="browser_sniffer_real.js"> </script> <script type="text /javascript& quot;> 2 BrowserDetect.init();