KennethDreyer.com – Gaining Rankings On The Web Slowly Over Time

This is part 7 of my series, HTML Ebook and the last part. In this part of the series we look at the code for the search results page. When the user types a phrase in the Search Box of the banner and clicks Search, a search results HTML document should appear in the content frame, with the search results. There is JavaScript in the search results page that looks for the chapter pages in the ebook related to the phrase and display the results in the search results page.

The results on the search results page consists of pieces of information of the chapter pages that are related to the phrase typed in the Search Box. Each piece of information is made up of the title from the title tag of the page found and the description from the META description tag of the page found. This description is the description of the content of the page found. The title for each piece of information is also a hyperlink to the page found.

The file name of the result page is searchResults.htm . It was opened in the content frame by the HTML Form element of the banner when the Search Submit button was clicked. It has code, which we shall see in this part of the series. If there are any search results, this code will display them; if there is no search result, the code will display, No result found.” on the page.

You will have a link to download the complete code for the project toward the end of this last part of the series.

Note: For the code samples to work, you should change the dot just before the reserved word, innerHTML, to a full-stop.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Keywords
For simplicity we assume that the phrase the user types in the Search Box consists of key words. This means that prepositions and conjunctions typed are keywords. In you commercial project you can decide to add the code so that prepositions and conjunctions are removed before the search is done. For the purpose of this series, let us allow things to be that simple; Keywords and Searching need a whole series of articles, which I will not go into now.

Whatever is typed into the Search Box, is taken as a string. Remember that this string is assigned to the parent variable, searchVar, of the frameset. The JavaScript code in the search results page, reads this value from the frameset. It then breaks the string into words and then uses the words to search for corresponding chapter pages. The search is made only on pages that belong to chapters; it is not made on pages like the Acknowledgement and Forward pages.

The Search Algorithm
In this project, you have a very simple search algorithm. The phrase typed in by the user is broken down into individual words. If any of these words is found in a chapter page, the title and description of that page is copied to the search results page, which should already be displayed on screen. In the results page, the title is a link. For this pedagogic article, it is that simple. In your commercial project you can make the search algorithm as complex and as useful as you want. For example, you may make the search algorithm throw away the prepositions and the conjunctions typed in by the user; you will need extra code for this. As another example, you may make the title and description of the pages that have most of the keywords display first in the result page and the ones with fewer keywords display last (in a descending order); you may also take the frequency of occurrence of a keyword in a page into consideration; all that need extra code. As yet another example, instead of displaying the description of the Meta tag in the results page, you can have phrases and sentences that contain the keywords in the chapter page displayed in the results page; again this needs extra code.

If the customer is willing to pay more and if you can do the extra coding, then go ahead and do the extra code for the commercial project. As a minimum, you should remove the prepositions and conjunctions in any commercial project; I have not addressed that in this series.

Use of Ajax
The chapter pages are actually loaded by Ajax. You might not know this: if the resource called by the HTTP GET or POST method of Ajax is an HTML file, the HTML file arrives at the browser as a string, to be used by Ajax. The resource does not arrive as a web page to be displayed; it arrives as a string and is not seen by the user. As indicated in part 1 of this series, you need to understand Ajax basics in order to fully understand this series. If you do not understand the basics of Ajax, then read my series titled, Ajax Web Technology Explained, in this blog. To arrive at the series, just type the title and my name, Chrys in the Search Box of this page or in the Google Search box of this page, and click Search.

Use of JavaScript Regular Expressions
JavaScript Regular Expression techniques are actually used in the search. As indicated in part 1 of this series, you need to understand JavaScript Regular Expression basics in order to fully understand this series. If you do not understand JavaScript Regular Expression basics, then read my series titled, JavaScript String Regular Expressions, in this blog. To arrive at the series, just type the title and my name in the Search Box of this page or in the Google Search box of this page, and click Search.

The Coding

The Links href Array for the Chapters Files
There is a one-dimensional JavaScript array with the href hyperlink values, for the chapter pages (files). At the start of the search, a JavaScript function scans this array, loading the pages one by one into memory as strings. When a page is in memory as a string it is searched if it has any of the words of the phrase typed in by the user in, the Search Box. This is the JavaScript Array:

pagesArr = new Array();
pagesArr[0] = “Chapter1.htm”;
pagesArr[1] = “Chapter1/Chapter1-Section1.htm”;
pagesArr[2] = “Chapter1/Chapter1-Section2.htm”;
pagesArr[3] = “Chapter1/Chapter1-Section3.htm”;
pagesArr[4] = “Chapter2.htm”;
pagesArr[5] = “Chapter2/Chapter2-Section1.htm”;
pagesArr[6] = “Chapter2/Chapter2-Section2.htm”;
pagesArr[7] = “Chapter2/Chapter2-Section3.htm”;
pagesArr[8] = “Chapter3.htm”;
pagesArr[9] = “Chapter3/Chapter3-Section1.htm”;
pagesArr[10] = “Chapter3/Chapter3-Section2.htm”;
pagesArr[11] = “Chapter3/Chapter3-Section3.htm”;

This array is in the JavaScript of the HTML HEAD element of the results page. For this project the rest of the JavaScript is in the BODY element of the results page. Each time the results page I loaded, the JavaScript in its BODY element is executed.

The Array of Ajax Objects
In order to download anything using Ajax, you need an object. The above array shows 12 pages that have to be downloaded as strings. This means you need 12 Ajax objects. There is an Ajax function, which is called the number of times the above array is long. In this project the above array has a length of 12. Your own project may have some other length. So in this project, the Ajax function creates 12 Ajax objects. These 12 objects created become elements of a new array. This new array is declared as follows:

var ajaxObjArr = new Array(); //an array of Ajax objects

So the name of the first Ajax object is ajaxObjArr[0], the name of the second is ajaxObjArr[1], name of third is ajaxObjArr[2], and so on.

The Ajax Function
This is the Ajax function:

function ajaxFn(j)
{
try
{
// Firefox, Opera 8.0+, Safari
ajaxObjArr[j] = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
ajaxObjArr[j] = new XDomainRequest();
}
catch (e)
{
try
{
ajaxObjArr[j] = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxObjArr[j] = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
}
}
}
}

ajaxObjArr[j].onreadystatechange=function()
{
if (ajaxObjArr[j].readyState == 4)
{

//all the searching in each file string is done here for each of
//the Ajax objects corresponding to the chapter pages.

}
}

ajaxObjArr[j].open(“POST”, pagesArr[j], true);
ajaxObjArr[j].setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
ajaxObjArr[j].send(null);
}

The number of times the function is called is equal to the number of files to be searched, which is equal to the length of the pagesArr array. The function is called with the number in the sequence sent as argument. The parameter for this in the function is j and it is also used to identify an Ajax object in the function. When an Ajax object is created it is made an element of the ajaxObjArr array.

All the searching in each file string is done when the readyState of the property of a particular Ajax object (ajaxObjArr[j]) is 4. The Searching code portion has not been shown in the above code.

The HTTP POST method was used. In the open method of the Ajax object, a particular file, pagesArr[j] is requested for the particular object, ajaxObjArr[j]. No query string is sent, so the argument of the Ajax object sent method is null. The last but one statement in the Ajax function is always used with the Ajax HTTP POST method.

The above Ajax function is called the number of times by the following for-loop:

for (i=0;i<pagesArr.length;++i)
{
ajaxFn(i)
}

As you can see from the for-loop, the number of times the Ajax function is called is equal to the length of the pagesArr array.

The Ajax readyState Block
As mentioned above, all the searching in each file string is done when the readyState of the property of a particular object (ajaxObjArr[j]) is 4. When this happens the block code for this event is executed. This block has 4 code segments. This is the first segment:

//assign the responseText to the variable, subject
subject = ajaxObjArr[j].responseText;

In this segment, the response text of the Ajax object is assigned to a new variable, subject. The variable, subject now holds the downloaded file as a string. When the Ajax object downloads the file, it comes as a string and is held by the responseText property of the Ajax object. The above statement makes a copy of this string to the variable, subject.

The second code segment is:

//get the title content
titleIndex = subject.search(/<title>.+<\/title>/i);
titleIndex+= 7;
title = “”;
while (subject.charAt(titleIndex) != “<”)
{
title+= subject.charAt(titleIndex);
++titleIndex;
}

The aim of this second segment is to obtain the title content (actual title text) of the title tag, which is now part of the whole page string, assigned to the variable, subject. The first line of the segment uses regular expressions technique to get the title tag sub string. The JavaScript search method above, returns the zero based index of the title tag sub string. This index is assigned to the new variable, titleIndex. If you look at the regular expression “/<title>.+<\/title>/i” above, you will notice that the content of the title begins at the zero base index of 7 and ends just before ‘<’ of the closing title tag.

The second statement in the segment increases the variable, titleIndex by 7. This new value will be used to obtain the content of the title tag. When the content of the title tag is gotten, it is held by the new variable, title, of the statement that follows in the segment. The while-loop in the segment, uses the new titleIndex value for the title content left delimiter and the ‘<’ character as the right delimiter to obtain the title content, character by character (without the <title> and </title> tags). Inside the loop, titleIndex is incremented to obtain the content character by character into the variable, title.

Here is the third segment of our Ajax readyState block:

//get the page description value
descriptionIndex = subject.search(/<meta name=\”Description\” content=\”.+\”>/i);
descriptionIndex+= 34;
description = “”;
while (subject.charAt(descriptionIndex) != “\”")
{
description+= subject.charAt(descriptionIndex);
++descriptionIndex;
}

The aim of this segment is to obtain the actual typed description from the META description tag, which is now part of the whole page string, assigned to the variable, subject. An example of the META description tag is:

<meta name=”Description” content=”Summary of Chapter 1 page goes here.”>

In this example, the content is “Summary of Chapter 1 page goes here.” The process of obtaining the description is similar to that of obtaining the title content. From the META tag above we see that the left delimiter is indicated by an index, increased by 34 (‘<meta name=”Description” content=”‘ – has 34 characters) and the right delimiter is ‘”‘.

For the above two segments, actual title or content typed in the file should not have a newline character, otherwise the particular regular expression technique would not work.

The last segment for the block is:

//check if any keyword is in the file (subject)
//first collect the keywords into an array
keywordArr = parent.searchVar.split(/\ +|,|\?|\./);
//form regular expression
regexStr = keywordArr[0];
for (k=1; k<keywordArr.length;++k)
{
regexStr = “|” + keywordArr[k];
}
//form the regular expression
re = new RegExp(regexStr, “i”);
//if keyword is found on a page, display the page title and description
titleDescriptionStr = “”;
if (subject.search(re) != -1)
{
titleDescriptionStr = “<a href=’” + pagesArr[k] + “‘ >” + title + “</a><br ” + description +”<br <br “;
document.getElementById(‘B0′)⋅innerHTML+= titleDescriptionStr;
}
//if no keyword was found in any page, indicate so
if ((titleDescriptionStr == “”)&&(j == (pagesArr.length – 1)))
{
document.getElementById(‘B0′)⋅innerHTML = “No result found.”;
}

Remember that in our simple search algorithm, the phrase typed by the user is broken down into its words; these words are the keywords. Each file string is searched if it has any of the keywords. Once any of the keywords is seen, the search in the string ends. Also remember that the phrase is now in the variable, searchVar in the frameset. To access this variable, from the content frame you have to precede it with, “parent”.

The first statement in this segment splits the phrase into individual words using regular expressions technique. The right operand of the statement returns an array of the words. This array is assigned to the new variable, keywordArr.

The keywords from the keywordArr array are used to form a regular expression. This regular expression will be used to search for any of the keywords in the file string of the variable, subject. The word “any” here means that the keywords in the regular expression will be joined by the regular expressions OR which is | . So the regular expression of keywords to search the file string, will be something like,

/keywordA|keywordC|keywordD/i

The regular expression also has to be case insensitive, because the user can type the right spelling but in a case that is not found in the file.

The next three statements (the for-loop is one statement) create the regular expression and the regular expression object, re.

The rest of the code checks in any of the keywords is found in the file string. If any is found, it displays the title and the description of the file in the BODY element of the searchResults.htm page, which is now in the content frame. Remember, all the code described in this part of the series is in the searchResults.htm page now in the content frame. The Form element in the banner frame simply opens this file in the content frame, then code in this file does all the search and display in its BODY element.

Before displaying the title, the title is made into a link to the file found that has any of the keywords. Let us now look at the rest of the code in the segment. You have the new variable, titleDescriptionStr, which is declared and an empty string assigned to it. This variable would hold the title as a hyperlink and the description of the page found.

The next statement is a large if-statement. The condition of this if-statement checks if the regular expression-any of the keywords- is found in the file string held by the variable, subject. There are two statements in the if-block. The if-block is executed when a keyword is found. The right operand of the first statement uses the title value from the variable, title to form a hyperlink to the page found, in string form, concatenating it with the value of the variable, description. This right operand actually forms a set of HTML tags, but in string form. It assigns the string to the variable, titleDescriptionStr. The next statement displays the value of the variable, titleDescriptionStr in the BODY element of the current searchResults.htm page. The ID of the BODY element is, ‘B0′.

The last statement in the segment is a one-line block if-statement. The block displays, “No result found.” if none of the keywords is found in the file strings. If a keyword is found, the previous if-statement would see it and assign the display result to the variable, titleDescriptionStr. This last if-statement checks if the variable, titleDescriptionStr is empty and if all the chapter files have been searched. If all the chapter files have been searched, the if condition (j == (pagesArr.length – 1)) would return true, meaning the pagesArr array having the href values for all the files has just been completely scanned. And so the last if-condition is,

((titleDescriptionStr == “”)&&(j == (pagesArr.length – 1)))

If the complete condition returns true, then no keyword was found in any of the files (strings) and the block to display “No result found.” Is executed.

Code executed repeatedly
The readyState block and the entire Ajax function, ajaxFn(j), is repeated the number of times equal to the length of the pagesArr array, which has the hyperlink href values of each of the files that is to be searched. The iteration (repetition) number in the sequence is the value of the j parameter. The following code, typed somewhere above, causes the repetition:

for (i=0;i<pagesArr.length;++i)
{
ajaxFn(i)
}

Let me end the explanation of the coding, here.

Ebook
An ebook is a series of related pages created with a computer language. I have just finished explaining how you can create an ebook using HTML and its associated CSS and JavaScript languages. We carried out a project to create a simple pedagogic ebook, which we have finished. The ebook created is contained in a directory called the head directory. If you copy this directory and all its content into any computer hard disk, you will be able to use the pedagogic ebook. The frameset is contained in the file mainPage.htm in the head directory.

I gave the name, head-directory to the head directory. To use the ebook when you have the head-directory and its sub directories in your computer, all you have to do is to open the directory, head-directory and double-click the file, mainPage.htm. This frameset file will open in your browser. You can then go to any page by clicking a hyperlink or using the search feature.

Download
I used the zip program 7-zip to zip the directory, head-directory and its sub directories into a zip file called, HTML-Ebook.zip. The complete code of the project is in the head-directory and its sub directories. This zip file is an ebook. It can be copied into any computer that has a browser, and unzipped in any directory of the computer. It unzips into the directory, head-directory, which has files and sub directories. Just open the directory, head-directory, double-click the file, mainPage.htm, and you can use the ebook.

The HTML-Ebook.zip file can be downloaded, free, from,

http://www.cool-mathematics.com/downloads/HTML-Ebook.zip

Download the file and unzip it into any directory of your computer, using the 7-zip program. You can get the 7-zip program, free, from http://www.7-zip.org/ .

There you are; HTML ebook.

Conclusion
The focus of HTML Ebook is on an HTML frameset. You open the frameset in a browser. Any page of the ebook is displayed in the content frame. There is one directory (head) with sub directories. That directory has the frameset HTML document. The value of any link href value is either a file name or begins with an immediate sub directory name of the head directory. You use JavaScript to make things happen within the book.

Question by icedan: what is algorithmic search and how does it work?

Best answer:

Answer by Answ3r3r
It is a search based in an algorithm as opposed to just a random search. Most of those algorithm include a first step of sorting.

Add your own answer in the comments!