Learn Advanced JavaScript Programming

Table of Contents

The function getURL() accepts the index of a given match as well as the total number of matches to be placed. The match’s index corresponding to the far-right match is assigned to the variable distance. For example, if there are 25 matches, and the value of pos is 23, the value assigned to distance is 25 – 23 + 1 = 3. If the assigned value is greater than three, the data of the given match indicates that it is not one of the last three matches in the row, so the returned URL is a JavaScript alert statement (using the “javascript:” scheme, or protocol). The function is terminated if the given match is not one of the last three, so the remaining portion applies only to matches that are one of the last three in the row. In this case, the returned URL is the bare URL of the document with a search query equal to the remaining number of matches (the current number of matches minus four, because the computer always completes the user’s move to four—see explanation of algorithm).

The global statements are also a very important part of the script. At first, the query of the current page is converted from a numeric string to a number and then assigned to the variable num. If the value of num is 25, the game has just begun, and the instructions are displayed in the form of an alert box. If the value of num is 1, the game is over (the computer wins), and a corresponding message is displayed, followed by a link to restart the game by loading the current document without a query. If the value of num is less than 1, an impossible state has been encountered, meaning that the user has tried to cheat or override the script by modifying the search query and an alert box reports this finding. The game is currently under way for all other values of num, so the function placeMatches() is called to place the matches according to the given situation.

Search Utilities

You may have noticed that multiengine search utilities are beginning to rule the Web. For example, you can use one form to search Infoseek, AltaVista, and Yahoo. There are basically two ways to create such search interfaces:

via server-side CGI scripts
via client-side JavaScript scripts

Since CGI is beyond the scope of this book, we are going to discuss just the second method. JavaScript is a very flexible cross-platform language. You can perform a specific task with many completely different scripts. For example, you can put a long script in your page to enable a multiengine search interface. You can also place a form in the page to submit the query to another page, which contains the script. You can even call a function located in an external script to do the work.

You have probably been exposed to advanced HTML for quite a while, so you should know how forms submit. There are generally two submission methods:

get
post

The get method calls a specified file along with the content of the form’s fields. The ACTION attribute specifies the name of the document or script to be called when the form is submitted. Take a look at the following form:

<FORM METHOD="get" ACTION="file1.html">
<INPUT TYPE="text" SIZE=50 NAME="userid">
<INPUT TYPE="text" SIZE=30 NAME="passwd">
<INPUT TYPE="submit" VALUE="submit form">
</FORM>

This construct creates a form with three elements. The first two are simple text boxes, or fields. The latter is a submit button, which triggers the submission. That is, when the user clicks the button, the form is submitted according to the ACTION of the METHOD. Suppose the user enters “input of first box” in the first field, and “input of second box” in the second field, and then clicks the “submit form” button. The form is submitted. In this case the method is “get,” so the browser “gets” the specified file, “file1.html.” Nevertheless, the file is retrieved including a search query. The full URL retrieved by the browser in this case is <URL:file1.html?userid=input+of+first+box&passwd= input+of+second+box>. Notice that each value in the search query is separated by an ampersand. In addition, the value entered by the user in each field, or the element’s value in general, is preceded by the element’s name followed by an equal sign (=). The constructed URL is loaded, and the search query can be used if the loaded file is an HTML document with a JavaScript script. Now let’s take a look at an actual example:

<HTML>
<HEAD>
<TITLE>Multiple engine search</TITLE>
</HEAD>
<BODY>
<FORM METHOD="get" ACTION="ex19-3b.htm">
  <STRONG><FONT SIZE=+1>Search</FONT> the Web for information
   about:</STRONG>
  <BR>
  <INPUT TYPE="text" SIZE=40 MAXLENGTH=80 VALUE="" NAME="query">
  <BR>
  <STRONG>via the </STRONG>
  <SELECT NAME="engine" ALIGN="right">
<OPTION VALUE="altavista" SELECTED>AltaVista
<OPTION VALUE="excite">Excite
<OPTION VALUE="infoseek">Infoseek
<OPTION VALUE="lycos">Lycos
<OPTION VALUE="magellan">Magellan
<OPTION VALUE="yahoo">Yahoo
  </SELECT>
  <STRONG>engine. Click </STRONG>
  <INPUT TYPE="submit" VALUE="search">
</FORM>
</BODY>
</HTML>

Example 19-3a (ex19-3a.htm). The search interface can be added to any page.

Table of Contents