Javascript: a search engine


Now let's see a simple search engine. You can build a search engine for your web pages!

Please, type a keyword (this is a sample, so you have to type 'javascript'):

And this is the HTML page:

<html><head><title> JavaScript search engine</title>
<SCRIPT language="JavaScript">

<!-- // Please, feel free to copy, paste and use this script...
// This script was written by Wowarea: <http://www.wowarea.com>
// Begin the script!

// variables

var items_found=0;
var rowsdb=2; // rows number (DATABASE)
var colsdb=3; // columns number (DATABASE)
var rowsres=100; // rows number (RESULT)
var colsres=2; // cols number (RESULT)
var numkeys=1; // max keys to search for

// make an Array object initialized by blanks
// (this array is your DATABASE)

celldb=new Array(rowsdb)
for (i=0; i<=rowsdb; i++){celldb[i]=new Array(colsdb)
for (j=0;j<=colsdb; j++) {celldb[i][j]=" "}

}

// make an Array object initialized by blanks
// (this array will contain items matched; i.e.: RESULT)

cellres=new Array(rowsres);
for (i=0; i<=rowsres; i++){cellres[i]=new Array(colsres);
for (j=0;j<=colsres; j++) {cellres[i][j]=" "}
}

//-------------------
D A T A B A S E (begin)
---------------------


celldb[0][0]="javascript";
celldb[0][1]="Javascript course";
celldb[0][2]="Javasc.htm";

celldb[1][0]="any keyword";
celldb[1][1]="title of page";
celldb[1][2]="url of page";


//-------------------
D A T A B A S E (end)
-----------------------

// display result

function display_result(items_found) {
mywindow=window.open("","help","toolbar=0,location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=1,copyhistory=0,width=500,height=255,screenX=200,screenY=100");
mywindow.document.write("<HTML><HEAD>");
mywindow.document.write("<TITLE>Help</TITLE>");
mywindow.document.write('</HEAD><BODY BGCOLOR=000000 TEXT=54FF9F link="#F0F0F0">');
mywindow.document.write("<center>Items found: " + items_found + "</center><br><hr>");
items_found--;
for (i=0;i<=rowsres;i++){
mywindow.document.write('Title: ' + '<a href=' + '"' + cellres[i][1] +'"' + '>'+
cellres[i][0] + "</a><br>");
if (i==items_found){i=rowsres;i++};
};
mywindow.document.write("<hr><center><FORM><INPUT TYPE='button' VALUE='Close' onClick='window.close()'></FORM>");
mywindow.document.write("</CENTER>");
mywindow.document.write("</BODY></HTML>");
}
//search the DATABASE array

function search_db(key1)
{key1=key1.toLowerCase();
var items_found=0;
for (i=0;i<rowsdb;i++)
{if (celldb[i][0]==key1)
{cellres[items_found][0]=celldb[i][1];
cellres[items_found][1]=celldb[i][2];
items_found++;}
}
if (items_found==0)
{alert("Sorry, no item matched your search...")}
else
{display_result(items_found)};
}

// End -->
</SCRIPT>
</head>
<body>Please search something:
<form>
<input type="text" name="text1" value"" size=30>
<input type="button" value="Search"onClick=" search_db(text1.value)" >
</form>
</body>
</html>

How does it works?

Well:

// is a comment.

Var means variable: var items_found=0; for example, defines a variable named 'items_found', and assign to it the value: '0'.

celldb=new Array(rowsdb)
for (i=0; i<=rowsdb; i++){celldb[i]=new Array(colsdb)
for (j=0;j<=colsdb; j++) {celldb[i][j]=" "}

By means of the above statements, you are defining an Array object. In fact, there is a new Array object named celldb, which is rowsdb long (in this sample '2' is the rowsdb's value). Each row of this array contains another array object: celldb[i] = new Array(colsdb). In other words this is a 2 dimensions array. Bye means of the for loop you define the array and initialize it by blanks. However, if you don't understand that, you could write the same thing so:

celldb=new Array(2)
celldb[0]=new Array(3)
celldb[1]=new Array(3)

So you define the array. Now you have to initialize it, so:

celldb[0][0]=" ";
celldb[0][1]=" ";
celldb[0][2]=" ";
celldb[1][0]=" ";
celldb[1][1]=" ";
celldb[1][2]=" ";

In fact you are defining an Array named celldb which is 2 chars long: "12". Then you say that the first array's element (celldb[0]) is an Array 3 chars long, in fact: celldb[0]= new Array(3). Finally you say that the second array's element (celldb[1]) is an Array 3 chars long: celldb[1]= new Array(3).

The last statements are helpful to initialize the 2 dimensions Array. Notice that the first Array's element is: element[0] and it isn't element[1] (which is the second element).

key1=key1.toLowerCase()

toLowerCase() is a function for strings: it transform any string's character into the same character, but if there is an uppercase charcacters, it becomes a lowercase character. So, in the above statement, you are saying: transform any character of 'key1' string into a lowercase character, then put it into the 'key' variable. Notice that you haven't to define a variable: every time you use a variable, it is automatically defined.

cellres[items_found][0]=celldb[i][1];

By means of the above statement, you save the url of page into another array. Then you will read that array and will show every elements into a window.

Well, I have not explained all the script, because I think it's easier doing that understanding...So, try it and change something here and there...Good luck!


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea