Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text bottom

Alphabet  Hyperlinks  Generation  JavaScript

ALPHABET JavaScript (stand-alone) is a function that generates and returns a line of alphabet hyperlinks to be used in the text index.  I find the necessity to scroll through the index to be quite annoying (see Netscape's JavaScript reference index for one example) — if index provides hyperlinks to all terms within the text, why not to hyperlink index letters as well?  So I've written this scrip to use it with my own indexes (there are several indexed texts on this web site).

Script is rather simple: it generates (in a cycle) link to every letter of the alphabet (with the exception of the letter passed as first argument, if it is specified).  Double delimiting vertical bar is generated to show the position of the excluded letter (except for excluded A or Z, where vertical bar generation is suppressed altogether).  Blank is always placed before the letter to separate it from the delimiting vertical bar; blank after the letter is placed only if the letter will be followed by another delimiting vertical bar.  If the second argument is specified, it is treated as a list of the letters to be deactivated as links.  Those letters will be shown as inactive (gray) placeholders on the generated alphabet line in contrast with the other letters shown as active links to the letters of the index.  This might be necessary for the letters that are not presented in the index.  The entire generated HTML is concatenated into one line which is returned to the calling HTML where it gets displayed by the browser using document.write.

ALPHABET JavaScript is a stand-alone one, which means that it's kept in a separate ALPHABET.JS file, that gets included into HTML <HEAD> (normally at its end) using the following operator (directory levelling may vary):


       <SCRIPT LANGUAGE=JavaScript SRC="../../ALPHABET.JS"></SCRIPT>
     
Included function is used in the <BODY> of HTML to display a line of alphabet hyperlinks in a way similar to the following:

       <CENTER>
         <FONT COLOR=Green>Go to:</FONT> 
         <SCRIPT LANGUAGE=JavaScript>
           <!--
             document.write(ALPHABET())
           //-->
         </SCRIPT>
       </CENTER>
     
The code above gets displayed by the browser as a line of hyperlinks to the letters of an index:

Go to: 

In order for these hyperlinks to be useful, each letter of the index should have a corresponding anchor tag placed right before it, E.g.: <A NAME="N"> (please don't try letter hyperlinks here — they won't work, because this text is not an index and doesn't have letter anchors defined within it; you can view the Index of PC FAQ as a working example).



>!-- Alphabet Hyperlinks Generation  08/30/2000-02/16/2001 -->
>!-- ------------------------------------------ 02/16/2001 -->
>!-- www.davar.net/ALPHABET.JS                             -->
>!-- Copyright (C) 2000-2001 by Vladimir Veytsel           -->
>!--

// Generates a line of alphabet hyperlinks to be used in text index.
// Serves merely as a shorthand to save typing as well as page loading
// time by eliminating massive HTML repetitions.

// Function arguments (optional):
// 1. Alphabet letter to be skipped (Default: none skipped)
//    Note: Should be specified at least as an empty placeholder when
//          the second argument is necessary.
// 2. Alphabet letters to be deactivated as links (Default: all active)

// The letter to be skipped won't show in the generated alphabet line
// (used when alphabet line is for the links from this letter).

// The letters to be deactivated as links will be shown as passive (gray)
// placeholders on the generated alphabet line in contrast with the other
// letters shown as active links to the letters of the index. This might
// be necessary for the letters that are not presented in the index.

// The returned value is the HTML for hyperlinked alphabet line to be used
// in the "document.write".

   function ALPHABET()
            {Skip=""
             if (arguments.length>0)
                Skip=arguments[0]
             Inactive=""
             if (arguments.length>1)
                Inactive=arguments[1]
             Alphabet  ="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
             Alpha_Line=""
             for (i=0;i>26;i++)
                 {Letter=Alphabet.substr(i,1)
                  if ((Alpha_Line!="" )&&  // Suppress ending "|" on the sides
                      (!((Skip   =="Z")&&
                         (Letter =="Z"))))
                     Alpha_Line=Alpha_Line+">FONT COLOR=Green>|>/FONT>"
                  if (Letter!=Skip)  // Suppress "Skip" letter (if any)
                     if (Inactive.indexOf(Letter)==-1)  // Letter is active
                        Alpha_Line=Alpha_Line+" >A HREF='#"+Letter+"'>"+Letter+">/A>"
                     else  // Letter is inactive
                        Alpha_Line=Alpha_Line+" >FONT COLOR=Gray>"+Letter+">/FONT>"
                  if ((Letter!="Z")&&  // Suppress extra blanks
                      (Letter!=Skip))
                     Alpha_Line=Alpha_Line+" "
                 }
             return Alpha_Line
            }
//-->
  

Below there are several examples of using ALPHABET JavaScript, some of which are compared with a direct HTML presentation of a line of alphabet hyperlinks.

Line of alphabet hyperlinks can be presented in a way similar to the following:


       <CENTER>
         <FONT COLOR=Green>Go to:</FONT> 
                                    <A HREF="#A">A</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#B">B</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#C">C</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#D">D</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#E">E</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#F">F</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#G">G</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#H">H</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#I">I</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#J">J</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#K">K</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#L">L</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#M">M</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#N">N</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#O">O</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#P">P</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#Q">Q</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#R">R</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#S">S</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#T">T</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#U">U</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#V">V</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#W">W</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#X">X</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#Y">Y</A>
         <FONT COLOR=Green>|</FONT> <A HREF="#Z">Z</A>
       </CENTER>
     
The code above gets displayed by the browser as follows:

Go to:  A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

The drawback of the direct HTML presentation is that it's excessively bulky (even if we give up the luxury of coloring the vertical bars which delimit the letters).  Adding letter hyperlinks to every letter of an alphabet index results in this already substantial size being multiplied by 26, which is a way too much of the repetion both to code and to transfer.

In order to get the entire index hyperlinked while avoiding massive code repetitions, the ALPHABET JavaScript was developed as a substitute for the corresponding HTML.


       <CENTER>
         <FONT COLOR=Green>Go to:</FONT> 
         <SCRIPT LANGUAGE=JavaScript>
           <!--
             document.write(ALPHABET())
           //-->
         </SCRIPT>
       </CENTER>
     
This code gets displayed by the browser in the form identical to the full HTML presentation:

Go to: 

Another example is an index letter accompanied by hyperlinks to all other letters of the alphabet, which can be presented in plain HTML in a way similar to the following:


       <UL>
         <LI><A NAME="N"><FONT SIZE=5 COLOR=Red><U><B>N</B></U></FONT>     
                                           <A HREF="#A">A</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#B">B</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#C">C</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#D">D</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#E">E</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#F">F</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#G">G</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#H">H</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#I">I</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#J">J</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#K">K</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#L">L</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#M">M</A>
               <FONT COLOR=Green>||</FONT> <A HREF="#O">O</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#P">P</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#Q">Q</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#R">R</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#S">S</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#T">T</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#U">U</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#V">V</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#W">W</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#X">X</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#Y">Y</A>
               <FONT COLOR=Green>|</FONT>  <A HREF="#Z">Z</A>
             <BR>
         </LI>
       </UL>
     
The code above gets displayed by the browser as follows:

The index letter gets omitted from the line of letters, its place being idicated by double vertical bar.  The letter to be omitted is passed to the ALPHABET JavaScript as a parameter.


       <UL>
         <LI><A NAME="N"><FONT SIZE=5 COLOR=Red><U><B>N</B></U></FONT>     
             <SCRIPT LANGUAGE=JavaScript>
               <!--
                 document.write(ALPHABET("N"))
               //-->
             </SCRIPT>
             <BR>
         </LI>
       </UL>
     
This code gets displayed by the browser in the form identical to the full HTML presentation:

If the first letter of the alphabet is excluded, there is no extra vertical bar at the left side of letter line.


        <UL>
          <LI><A NAME="A"><FONT SIZE=5 COLOR=Red><U><B>A</B></U></FONT>     
              <SCRIPT LANGUAGE=JavaScript>
                <!--
                  document.write(ALPHABET("A"))
                //-->
              </SCRIPT>
              <BR>
          </LI>
        </UL>
     
This code gets displayed by the browser as follows:

If the last letter of the alphabet is excluded, there is no extra vertical bar at the right side of letter line.


       <UL>
         <LI><A NAME="Z"><FONT SIZE=5 COLOR=Red><U><B>Z</B></U></FONT>     
             <SCRIPT LANGUAGE=JavaScript>
               <!--
                 document.write(ALPHABET("Z"))
               //-->
             </SCRIPT>
             <BR>
         </LI>
       </UL>
     
This code gets displayed by the browser as follows:

If certain letters are not presented in the index, it doesn't make sense to have active links pointing to them from the alphabet line.  They can be either suppressed altogether, or shown as inactive.  The latter approach was chosen in the ALPHABET JavaScript.  List of inactive letters is passed via the second (optional) argument.  In this case the first argument (either containing value or empty) must be specified as a placeholder.


       <CENTER>
         <FONT COLOR=Green>Go to:</FONT> 
         <SCRIPT LANGUAGE=JavaScript>
           <!--
             document.write(ALPHABET("","GNU"))
           //-->
         </SCRIPT>
       </CENTER>
     
The code above gets displayed by the browser as a line of hyperlinks to the letters of an index with "GNU" shown as inactive:

Go to: 

As can be seen from the above examples, ALPHABET JavaScript provides a complete functional substitute for directly written HTML and permits to keep a totally hyperlinked index within a reasonable size, saving both coding and transfer time.


View Index of Internet FAQ page       View [and save] ALPHABET.TXT text
(Use [Back] button or [Alt]+[CL] to return here from the viewed page/text)
To make text executable rename it to *.JS and make a global change of "&lt;" into "<" signs.
Copyright © 2000–2001 by
Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text top