11.4 Introduction to Links


Links are fundamental to the Web. They get you where you want to go, and often take you so far away that you forgot where you were when you started. In fact, Web crawlers are programs that use links to move all over the Internet. HTML hypertext links are usually created by assigning a Web address or a filename to the HTML <a href> tag, for example:

 
 <a href="URL address ">Go Home </a> 

11.4.1 JavaScript URLs

With JavaScript, you can also assign a function to the <a href> tag that will be launched when the user clicks his mouse on the link. For example,

 
 <a href="javascript: function_name(arguments);">  Do Something </a> 

or, to use an event handler with a link (see Chapter 12, "Handling Events"):

 
 <a href=javascript: onClick="return handler(arguments)" > 

11.4.2 The links Object

The links object is a property of the document object and gives you access to the hypertext links that have been loaded into a document. It corresponds to the HTML <a href> tag. As each HTML form is a JavaScript element of the forms[] array, and each image is assigned to the images[] array, so each link is assigned to the links[] array in the order in which the link appears within the document. The first link would be represented as document.links[0] . The properties for the links object are shown in Table 11.23. [5] There are no methods common to both Netscape Navigator and Internet Explorer for the links object.

[5] These properties are common to both Netscape and Internet Explorer. IE, however, supports many more than are listed here.

A links object contains a URL, similar to the window's location object, and shares the same properties. See "The location Object" on page 244. There are nine events that can be triggered by a link: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver , and onMouseOut . (For details, see Chapter 12, "Handling Events.")

Table 11.23. Properties of the links object.

Property

What It Describes

hash

Anchor part of the URL (if any)

host

The hostname:port part of the URL

hostname

The hostname (machine) part of the URL

href

The entire URL

pathname

The pathname part of the URL

port

The port part of the URL

protocol

The protocol part of the URL, including the colon following

search

The query string part of the URL

target

The HTML target attribute of the link

Example 11.37
 <html><title>Using Links </title>     </head>     <h2>Links and their Properties</h2>     <body> 1  <a href="http://search.yahoo.com/bin/search?p=javascript">  Search for JavaScript Stuff</a>     <p> 2  <a href="http://google.com" >Go to Google</a>  <p>     Click here for Yahoo <br> 3  <a href="http://www.yahoo.com">  <img src="yahoo.bmp">     </a>     <script language = "JavaScript"> 4       document.write("<br><b>This document contains "             +  document.links.length  + " links.<br></b>"); 5           for (i = 0; i< document.links.length; i++){                document.write("<u>document.links["+i+"]:</u><br>");                document.write("<b>hostname:</b> "                   +  document.links[i].hostname  +"<br>"); 6              document.write("<b>href: </b>"                   +  document.links[i].href  +"<br>"); 7              document.write("<b>pathname:</b>"                   +  document.links[i].pathname  +"<br>"); 8              document.write("<b>port:</b> "                   +  document.links[i].port  +"<br>"); 9              document.write("<b>query:</b> "                   +  document.links[i].search  +"<br>"); 10             document.write("<b>protocol:</b> "                   +  document.links[i].protocol  +"<br><br>");             }     </script>     </body>     </html> 

EXPLANATION

1 This link goes to the Yahoo! search engine and searches for the word "javascript."

2 This link goes to the Google search engine.

3 This link goes to the Yahoo! search engine.

4 The size of the links[] array is determined by the length property. It displays the number of links in the document.

5 “10 The for loop is used to iterate through the links array and display some of its properties. The output is shown in Figure 11.53.

Figure 11.53. Properties of the links object.

graphics/11fig53.jpg

Example 11.38
 <html><title>Using Links </title>     <head> 1   <map name="my_image_map"> 2   <area shape="rect" href="union4.jpg" coords="157,117,287,203">     <area shape="rect" href="union1.jpg" coords="10,12,134,96">     <area shape="rect" href="union2.jpg" coords="171,12,286,91">     <area shape="rect" href="union3.jpg" coords="5,118,132,201">     <area shape="default" href="christmas.jpg"> 3   </map>     </head>     <body>     <h2>Christmas on Union Square</h2> 4   <img src="union1.jpg"   width=300 height=240 5   usemap="#my_image_map">     <script language="JavaScript">         var lstr = "<ul>"; 6       for ( var i = 0; i <  document.links.length  ; i++ ){             lstr += "<li><a href=" +  document.links[i].href  ;             lstr += ">link[" + i + "] </a>\n";         } 7  lstr += "</ul>";  8  document.open();  9  document.write(lstr);  10  document.close();  </script>     </body>     </html> 

EXPLANATION

  1. This is the start of an image map.

  2. This is an image map [a] that creates rectangular "hotspots" on the default Christmas image displayed on the page. By pressing one of the hotspots, a link to a Christmas image is activated and displayed in the browser. (All of the scenes were taken at Union Square in San Francisco just before dusk.)

    [a] The image map was created by Macromedia's Dreamweaver.

  3. The HTML image map tag ends here.

  4. This is the default image that appears on the screen.

  5. A string called lstr is created by iterating through the links[] array.

  6. For each HTML hyperlink created in the document, there is a corresponding element in the JavaScript links[] array. The string lstr will contain HTML links for each of the images created in the image map part of the document. This string will be created and dynamically displayed in a new document.

  7. The last HTML tag, to end the bullet list, is closed, and concatenated to the lstr string.

  8. The document's open() method opens a new HTML document.

  9. The string lstr is displayed in the new document. It contains the bulleted list of links.

  10. The document that was opened, is closed. The output is shown in Figure 11.54.

    Figure 11.54. By pressing in any corner of the image or by clicking on a link, a new image will be displayed.

    graphics/11fig54.jpg

11.4.3 The anchor Object

An anchor is a place in an HTML document that can be reached with a link. Anchors allow you to access specific parts of a Web page. JavaScript 1.1 introduced the anchor object, which represents an HTML <a> element. The anchors object is a property of the document object and gives you access to the links that have been loaded into a document. As each HTML hypertext link is a JavaScript element of the links[] array, and each image is assigned to the images[] array, so each anchor is assigned to the links[] array in the order in which the anchor appears within the document. The first anchor would be represented as document.anchors[0] . The only standard property defined for the anchor object is the name property. Any other properties found with this object are browser specific and not supported by the W3C DOM standard. There are no methods common to both Netscape Navigator and Internet Explorer for the anchor object.

11.4.4 The embeds Object

The embeds object (Navigator 3.0), like the forms and image objects, creates an array representing each embedded object in a page, such as a movie, spreadsheet, or audio clip, in the order the object is found in the page. The first embedded object is assigned to embeds[0] , the second to embeds[1] , and so on. You can also index the embeds[] array by string; just use the name of the embedded object in quotes.

In the following example, when the page is loaded, the embedded sound clip will automatically start playing, and will be stopped if the user presses the link, "Stop that noise!". The assumption is that you are using Netscape Navigator with the LiveAudio plug-in installed. Not all audio plug-ins support .wav files. It is more likely that you have a newer version of Netscape or are using IE or Opera, in which case you are probably using RealPlayer by RealNetworks or Microsoft's Windows Media Player. The example is just a demonstration of how the embeds object is used in JavaScript.

Example 11.39
 <html><head>     <script language="JavaScript"> 1  function playme(){  2           if (document.embeds){ 3              if(  navigator.appName == "Netscape"  )                //document.embeds[0].play(); 4  document.classical.play();  }             else{ 5              document.embeds[0].run();             }         } 6  function stopSound(){  document.classical.stop();         }     </script>     </head> 7       <body onLoad="playme();" bgcolor="green" link="white">  <center>  <font face="arial" size=+1 color="white">     <h2>Beethoven's 5th Symphony Playing...</h2> 8  <embed src="Beeth5th.wav"  name="classical"         hidden=true   <!-- hide Live Audio's control panel -->         loop=false         volume=100  autostart=true>  9  <a href="javascript:stopSound()">Stop that noise!</a>  <br>     <img src="noteserver.jpg" border="2" width=500 height=200>     </body></html> 

EXPLANATION

  1. The JavaScript function called playme() is defined. It will be used to start the music file.

  2. If there is an embeds[] array in the document, enter the if block.

  3. If the browser is Netscape Navigator, start the music with LiveAudio's play() method. Communicator doesn't come with LiveAudio; you may user RealPlayer instead. The methods will differ for play() and stop() .

  4. The play() method starts the music.

  5. On other browsers, the run() method will start the music. You may try DoRun() and DoStop() for Real Player.

  6. A function called stopSound() is defined.

  7. Once the document has finished loading, the function playme() will be invoked.

  8. The source attribute of the <embed> tag is assigned the name of the audio clip, Beeth5th.wav , which will be started automatically.

  9. When the user clicks on this link, the stopSound() function is invoked.

Figure 11.55. Plays the embedded .wav file until it is finished or the user presses the link.

graphics/11fig55.jpg

Figure 11.56. The stop() method isn't supported in IE. The music plays until the clip finishes.

graphics/11fig56.jpg



JavaScript by Example
JavaScript by Example (2nd Edition)
ISBN: 0137054890
EAN: 2147483647
Year: 2003
Pages: 150
Authors: Ellie Quigley

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net