JavaScript in 10 Simple Steps or Less 2007 phần 9 doc

Changing Page Fonts with a Bookmarklet S ometimes Web pages use hard-to-read fonts. At other times they specify fonts that are missing on your system and your system defaults to a poor alternative. For these cases, this task shows how to use a bookmarklet to set the default font style to your preferred font. This task relies on the fact that the document body is represented in the document.body object. This object has a style property containing an object reflecting the style attributes for the body of the document. The fontFamily property of this object can be used to specify a new font by name. For instance, to set the default body font of a document to Times, you would use the following: document.body.style.fontFamily = “Times”; You can also specify a list of fonts just like in a style sheet. The browser will use the first font on the list that it has available: document.body.style.fontFamily = “Garamond, Times, SERIF”; Several generic fonts names are available, including: SERIF (which indicates the default serif font in the browser), SANS-SERIF (which indicates the default sans serif font in the browser), and MONOSPACE (which indicates the default fixed- width font in the browser). The following steps show how to build a bookmarklet to set the default font to Arial: 1. Open the text editor you normally use for writing JavaScript. 2. Assign Arial to the document.body.style.fontFamily property: document.body.style.fontFamily = ‘Arial’; 3. Enclose the last command in a void statement; otherwise, the browser will try to display the font name after assigning it to the document. body.style.fontFamily property, and this will cause a page con- taining just the name of the font to replace the current page: void(document.body.style.fontFamily = ‘Arial’); 4. Remove blank spaces from the script, and add the javascript: protocol to the start of the script, so that the result is a one-line URL with all extraneous spaces removed: javascript:void(document.body.style.fontFamily=’Arial’); note • This task changes the default font style for the body of the document. If the HTML code for a page has explicit styles used for specific elements of the page that use another font, these styles will override the font style specified in the bookmarklet and the bookmarklet will have no effect on those fonts. 496 Part 10 Task 239 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 496 5. Create a bookmark or favorite using this code as the URL. To test the bookmarklet, open a Web page in your browser, as illustrated in Figure 239-1. Select the new bookmark or favorite you created, and the default font changes to Arial, as illustrated in Figure 239-2. Figure 239-1: A Web page. Figure 239-2: Changing the default body font of a Web page. Bookmarklets 497 Task 239 tip • To make developing book- marklets easy, it is best to start by editing the code in your regular code editor and then copy and paste the bookmarklet into your favorites or bookmarks list at the end. cross-reference • Step 174 specifically dis- cusses how to set text for a page element (and the body tag is just one of the elements of a page). 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 497 Highlighting Page Links with a Bookmarklet S ometimes Web page authors fail to ensure that the links in the page are evident to the user. This task shows how to create a bookmarklet to highlight all links in a page so that they are readily visible to the user. This bookmarklet relies on the fact that all tags are represented in the document.all array in Internet Explorer. In the document.all array, each object represents a tag. Each object has a property called tagName that can be used to test for A tags that represent links. Each object also has a style property containing an object representing all style attributes of the link. The backgroundColor property of this style object is used to specify a background color for the link. For instance, the following exam- ple sets the background color for the first tag in a document to yellow: document.all[0].style.backgroundColor = ‘yellow’; The following steps show how to build a bookmarklet to highlight all links in cyan: 1. Open the text editor you normally use for writing JavaScript. 2. Use a for loop to loop though the document.all array: for (i = 0; i < document.all.length; i ++) { 3. Inside the loop, test if the given tag is an A tag using an if statement: if (document.all[i].tagName == ‘A’) { 4. If the tag is an A tag, then assign cyan as the background color: document.all[i].style.backgroundColor = ‘cyan’; 5. Enclose the last command in a void statement; otherwise, the browser will try to display the ‘cyan’ string after assigning it to the backgroundColor property, and this will cause an empty page with the text “cyan” to replace the current page: void(document.all[i].style.backgroundColor = ‘cyan’); 6. Close the if statement and for loop so that the final script looks like this: for (i = 0; i < document.all.length; i ++) { if (document.all[i].tagName == ‘A’) { void(document.all[i].style.backgroundColor = Æ ‘cyan’); } } 7. Remove the line separations and blank spaces from the script, and add the javascript: protocol to the start of the script, so that the result is a one-line URL with all extraneous spaces removed: note • The document.all array is not available in Netscape, so it will not work on that browser. 498 Part 10 Task 240 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 498 javascript:for(i=0;i<document.all.length;i++){ifÆ (document.all[i].tagName==’A’){void(document.all[i].Æ style.backgroundColor=’cyan’);}} 8. Create a bookmark or favorite using this code as the URL. To test the bookmarklet, open a Web page in your browser, as illustrated in Figure 240-1. Select the new bookmark or favorite you created, and the links are highlighted, as illustrated in Figure 240-2. Figure 240-1: A Web page. Figure 240-2: A Web page with links highlighted. Bookmarklets 499 Task 240 tip • To make developing book- marklets easy, it is best to start by editing the code in your regular code editor and then copy and paste the bookmarklet into your favorites or bookmarks list at the end. 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 499 Checking the Current Date and Time with a Bookmarklet J avaScript’s Date object provides an easy way to display the current date and time to the user. This can be used to create a bookmarklet to display the date and time in a dialog box. The toLocaleString method of the Date object will output the Date object’s current date and time in a format appropriate to the user’s locale when using Internet Explorer. These locales differ in the formatting. For instance, in the United States, you typically see the following: Wednesday, 23 July, 2003 22:38:15 At the same time, in the United Kingdom you should see the following: 23 July 2003 22:40:44 Locales also specify the language of the month and day names, as in the Czech Republic, which is illustrated in Figure 241-1, and Japan, which is illustrated in Figure 241-2. Figure 241-1: Displaying the date in the Czech Republic’s locale. Figure 241-2: Displaying the date in Japan’s locale. 500 Part 10 Task 241 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 500 By contast, in newer versions of Netscape, the date is always output in a standard default fashion based on the language of the browser and ignoring the operating system’s specified locale settings. The following steps create a bookmarklet for outputting the current date in a dialog box in the current locale (in Internet Explorer): 1. Open the text editor you normally use for writing JavaScript. 2. Create a new Date object and assign it to the variable today: today = new Date(); 3. Use the window.alert method to display the date and time format- ted for the user’s locale; the final script will look like this: today = new Date(); window.alert(today.toLocaleString()); 4. Remove blank spaces from the script, and add the javascript: protocol to the start of the script, so that the result is a one-line URL with all extraneous spaces removed; notice that the space between new and Date is not extraneous and cannot be removed: javascript:today=new Date();window.alertÆ (today.toLocaleString()); 5. Create a bookmark or favorite using this code as the URL. To test the bookmarklet, select the new bookmark or favorite you created, and the date and time is displayed in a dialog box, as illustrated in Figure 241-3. Figure 241-3: Displaying the date and time in a dialog box. Bookmarklets 501 Task 241 tips • In Windows 2000, you set the locale for Windows in the Control Panel’s Regional Option tool. • To make developing book- marklets easy, it is best to start by editing the code in your regular code editor and then copy and paste the bookmarklet into your favorites or bookmarks list at the end. cross-reference • Task 47 illustrates how to use the Date object to output the current date. 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 501 Checking Your IP Address with a Bookmarklet T his task shows how to use Netscape and Java to create a bookmarklet to display the user’s computer’s IP address in a dialog box. Doing so relies on the fact that through JavaScript in Netscape you can access the Java environment available in the browser. This Java environment provides the java.net. InetAddress.getLocalHost().getHostAddress() method to access the IP address. java.net is the class that contains numerous objects, and associated methods and properties, for working with networks and their hosts. This class is a stan- dard part of typical Java installations and should be available on any modern Netscape browser with Java support installed. The getLocalHost method returns a host object containing information about the local, as well as methods for accessing that information. The getHostAddress of the host object returns the IP address of the host. This method should only be called if the user has Java enabled. This can be tested by referring to the navigator.javaEnabled method, which returns true if Java is, in fact, enabled. The result is the following steps to create the bookmarklet: 1. Open the text editor you normally use for writing JavaScript. 2. Use an if statement to test if Java is enabled: if (navigator.javaEnabled()) { 3. If Java is enabled, display the current IP address in a dialog box by using the window.alert method: window.alert(java.net.InetAddress.getLocalHost().Æ getHostAddress()); 4. Close the if statement so that the final script looks like this: if (navigator.javaEnabled()) { window.alert(java.net.InetAddress.getLocalHost().Æ getHostAddress()); } note • This bookmarklet only works in Netscape and cannot be used in Internet Explorer. 502 Part 10 Task 242 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 502 5. Remove line separations and blank spaces from the script, and add the javascript: protocol to the start of the script, so that the result is a one-line URL with all extraneous spaces removed: javascript:if(navigator.javaEnabled()){window.alertÆ (java.net.InetAddress.getLocalHost().getHostAddress());} 6. Create a bookmark using this code as the URL. To test the book- marklet, select the new bookmark or favorite you created, and the computer’s IP address is displayed in a dialog box, as illustrated in Figure 242-1. If you attempt to run the bookmarklet in Internet Explorer, you get an error, as illustrated in Figure 242-2. Figure 242-1: Displaying the IP address in a dialog box. Figure 242-2: In Internet Explorer, the bookmarklet causes an error. Bookmarklets 503 Task 242 tip • To make developing book- marklets easy, it is best to start by editing the code in your regular code editor and then copy and paste the bookmarklet into your favorites or bookmarks list at the end. 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 503 Searching Yahoo! with a Bookmarklet in Internet Explorer A common task performed by users is to search a popular search engine such as Yahoo! for a word or phrase they find in a Web page. The usually approach is to select the word or phrase, copy it, open Yahoo!, and then paste the word or phrase into the search box. Using JavaScript in Internet Explorer, you can build a bookmarklet so that the user can simply select the word or phrase and then select the bookmarklet to automatically trigger the appropriate search on Yahoo!. This bookmarklet relies on the following: • Internet Explorer provides the document.selection object to reflect the text currently selected in a Web page. • The createRange method of the document.selection object returns a pointer to the selected range that has a text property containing the selected text. • Yahoo! expects a search query in the URL in the form http:// search.yahoo.com/bin/search?p=search query here . The following steps show how to create this bookmarklet: 1. Open the text editor you normally use for writing JavaScript. 2. Save the currently selected text in the variable searchQuery: searchQuery = document.selection.createRange().text; 3. Use the escape function to convert the selected text to URL- encoded format and save the result back into searchQuery: searchQuery = escape(searchQuery); 4. Set location.href to the Yahoo! search URL, and append the value of searchQuery to the end of the URL; the final script will look like this: searchQuery = document.selection.createRange().text; searchQuery = escape(searchQuery); location.href = ‘http://search.yahoo.com/bin/search?p=’ Æ + searchQuery; 5. Remove the line separations and blank spaces from the script, and add the javascript: protocol to the start of the script, so that the result is a one-line URL with all extraneous spaces removed: javascript:searchQuery=document.selection.createRange().Æ text;searchQuery=escape(searchQuery);location.href=Æ ’http://search.yahoo.com/bin/search?p=’+searchQuery; notes • The document. selection object is only available in Internet Explorer. This task will not work in Netscape Navigator. • The location.href property reflects the URL of the current page. When a new URL is assigned to it, the new URL will be dis- played by the browser. 504 Part 10 Task 243 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 504 6. Create a favorite using this code as the URL. To test the book- marklet, open a Web page in your browser and select some text, as illustrated in Figure 243-1. Select the new favorite you created, and your browser is redirected to Yahoo!, where search results are dis- played as illustrated in Figure 243-2. Figure 243-1: A Web page with text selected. Figure 243-2: Yahoo! search results. Bookmarklets 505 Task 243 tip • To make developing book- marklets easy, it is best to start by editing the code in your regular code editor and then copy and paste the bookmarklet into your favorites or bookmarks list at the end. 11 542419 Ch10.qxd 11/19/03 10:22 AM Page 505 [...]... Placement in Newer Browsers Task 250: Creating Layers with the div Tag Task 251: Controlling Layer Placement in HTML Task 252: Controlling Layer Size in HTML Task 253: Controlling Layer Visibility in HTML Task 254: Controlling Layer Ordering in HTML Task 255: Changing Layer Placement and Size in JavaScript Task 256: Changing Layer Visibility in JavaScript Task 257: Changing Layer Ordering in JavaScript. .. from JavaScript using the document.write Figure 245-1: Displaying browser information in Internet Explorer 6 method The method takes a single string argument In this case, you are building a string by concatenating two strings 512 Task 246 notes • • • Notice that Internet Explorer purports to be version 4.0 This actually reflects the version of the browser represented in the code name That is, Internet... a string indicating the browser that is being used For instance, this string might be “Microsoft Internet Explorer” or “Netscape” • navigator.appCodeName: This property returns the browser name that the browser claims to be For instance, in Internet Explorer 6, this will actually be “Mozilla,” as it also will be in Netscape 7 • navigator.userAgent: This property returns the entire user agent string... JavaScript Task 258: Fading Objects Task 2 59: Creating a Page Transition in Internet Explorer Task 260: Installing the X Cross-Browser Compatibility Library Task 261: Showing and Hiding Elements with X Task 262: Controlling Stacking Order with X Task 263: Changing Text Color with X Task 264: Setting a Background Color with X Task 265: Setting a Background Image with X Task 266: Repositioning an Element with... following: 4.0 (compatible; MSIE 6.0; Windows NT 5.0; NET CLR 1.0.3705) In Netscape 7, this returns the following: 5.0 (Windows; en-US) These version strings provide you with information about the platform involved and the version The following task shows how to display the browser version and user agent string in the browser window: 1 Create a new document in your preferred editor 2 In the body of the document,... Issues 513 document.write(“Browser Version: “ + Æ navigator.appVersion + “”); document.write(“User Agent: “ + navigator.userAgent Æ + “”); Listing 246-1: Displaying a browser’s user agent string Figure 246-1: Displaying browser information in Internet Explorer 6 Figure 246-2: Displaying browser information in Mozilla 1.2.1 Task 246 514 Task... the file in a browser and you should see three overlapping layers, as shown in Figure 254-1 cross-references • • Figure 254-1: With the z-index attribute, layers can stack in any order regardless of the order of appearance in the HTML file You can control layer stacking order in JavaScript This is outlined in Task 257 The use of the position attribute for absolute positioning is discussed in Task 251... allocated a certain amount of space on the page, it can be placed precisely on the page, and all aspects of its appearance can then be manipulated in JavaScript Layers are created with the div tag, which is introduced in Task 1 69 Part 11 Controlling Layer Ordering in HTML U sing cascading style sheets, you can control the relative stacking order of layers The stacking order of layers determines which layers... Internet Explorer 4 Then you could test if the user is using that browser in your code with the following: if (ie4) { Code to execute if the user is using Internet Explorer 4 } You can create these variables by assigning boolean expressions to them; these conditions were outlined in Task 247: • NS4/IE4+: (document.all || document.layers) • NS4+: (!document.all) • IE4+: (document.all) • NS4 only: (document.layers... Listing 248-1 var ie4 = (document.all && !document.getElementById); var ie5 = (document.all && document.getElementById && Æ !document.fireEvent); var ie55 = (document.all && document.fireEvent && Æ !document.createComment); var ie6 = (document.all && document.createComment); var ns4 = (document.layers && !document.getElementById); var ns6 = document.getElementById && !document.all); . in JavaScript Task 256: Changing Layer Visibility in JavaScript Task 257: Changing Layer Ordering in JavaScript Task 258: Fading Objects Task 2 59: Creating a Page Transition in Internet Explorer Task. color for the link. For instance, the following exam- ple sets the background color for the first tag in a document to yellow: document.all[0].style.backgroundColor = ‘yellow’; The following steps. ignoring the operating system’s specified locale settings. The following steps create a bookmarklet for outputting the current date in a dialog box in the current locale (in Internet Explorer): 1.