'; document.writeln(my_chunk); } } // --> --> Javascripting - databases explained, part one
Javascript Databases explained

Part 1

The_Seeker

by The Seeker

(20 March 1999)

Courtesy of The Dark Tower's Javascript-page
~
Well, the starting point of a very interesting lesson for beginners: databases, coded in javascript, explained. You may say, that it does does not make much sense, coding large databases in javascript. Maybe you're right. BUT : not only the language is important (though you might learn a lot studying these codes), but the principles of coding these programs is the fascinating point. The experience we gather here may be quite helpful one of these days when you have to code a database in a 'higher' program-language. So take your favourite mineral-water, your colured pens, your javascript noteblock and some sheets of paper and follow The Seeker on his journey through 'the wonderful and exciting world of javascripted databases'. :-)
 

Cutting the guts out of a database

Greetings, fellow javascripters ! 
The aim of these lessons is to understand, how a database-program can be coded
(explained for the javascript-language). Well, of course, such a javascripted
database has its limits ! You know, with javascript you have NO access to your
harddisk, so all of the database-entries have to be loaded in your browser. Could
take some time, if your database is growing. But this should not bother us too much :
our aim is to collect knowledge. And KNOWLEDGE IS POWER. What we learn from these
javascript-programs, we will use some day when we start with just another programming
language. So : let's rock !
 
Our first target is a rather simple (but interesting) database, coded by Satadip
Dutta . This program can be found at JavaGoodies.com and other places around the web.
(nssearch.html). My advice is that you should first grab the script (rename as *.htm) 
and play a little bit with the program. Get used with it and come back. 

Finished ? O.k., so let's have a closer look at our database ! 

Now we know that this is a database for www-links. With this program you can build up 
a database with your favourite links and make search in the title-field.
Let's check the code. REMEMBER : I will not criticize anything of this program,
the aim is just to understand how the program does its job. After examing some more 
of these database-programs we will try to make the best out of them all and write our 
own database-program. So come on, no time to loose ! 

The first thing I do when checking an unknown code - no matter which program-language 
it is written - is do make myself clear, which way the program flows and which global
variables I am handling with :

The Code... ....................... ...and my Remarks 
<.SCRIPT language='javascript'>     Let's go and start with the global variables :
                                    first 6 object-variables are built .. 
                                        .. with the help of the javascript object 'object'
									
the new-statement creates a new a copy (=instance) of an object

title = new Object();               - the title of the actual entry   
desc = new Object();                - the description of the actual entry 
links= new Object();                - the URL of the actual entry 
matched= new Object();              - how often  ...  the number of matching-the-search-entries  
keywords= new Object();             - container for the search-items
found= new Object();                - the number of entries with our keyword
                                  
                                    So : our database consists of a number of 'records',
                                      every 'record' has 3 entries.
                                    As we will see, the only searchable item is the title
              
var temp=0;                          and one 'normal' variable (a 'working man')

title[0]=10                         - actual number of database-entries
                                        has to be updated every time you add an entry !!
										
keywords[0]=0                       the number of keywords after parsing

found[0]=0                          the number of  matches found


                                    Here they are : our database-records 
title[1]="homepage dutta"
desc[1]="Inch of Dutta's Life"
links[1]="http://dutta.home.ml.org"
matched[1]=0

title[2]="yahoo search engine"
desc[2]=" the yahoo search engine "
links[2]=" http://www.yahoo.com"
matched[2]=0

.....
....

title[10]="free email"
desc[10]="rocketmail.com"
links[10]="http://www.rocketmail.com"
matched[10]=0




function search(){                  start of a function 
                                        goes to work after the start of a search
                                         will be our next task
....

}

<./SCRIPT>

<./HEAD>

<.BODY>

<.FORM name="searchengine">        the name of our form : searchengine

<.CENTER>Keywords: 
                                          
<.INPUT type = text name ="keywords" value=""  maxlength=40>   
                                                    the name of our input : keywords
<.INPUT type = button   name="go" Value="Go ahead and find" onClick="search()">  start a search
<./CENTER>
<./FORM>





O.k., let's resume what we have learned til now :

Our database consists of 3 REAL entries : 

title = new Object()  the title which is also the keyword to search   
desc  = new Object()  the description  
links = new Object()  the URL 

Why are these entries built with the 'Object'-object and not with the 'array'-object ?
(If you don't know about the array-object, so please be patient for the next part of 
this writing). 

The 'Object'-object is the primitive Javascript object type (the grandfather of all 
the other objects like array, document and so on). All Javascript objects are decended
from Object. That is, all Javascript objects have the methods defined for Object. 





I did not ask the programmer for the reason of using this object, but I found a possible
answer : 

In Javascript 1.0 there is not yet the 'array'-object. 
So you have to make a work-around to make use of arrays. 




Here I found another explanation :

Object is a generic object constructor, and is borrowed from Java. However, JavaScript's Object is a much simplified 
version of the Java Object class.  In Java, Object is used as a superclass, but in JavaScript, Object is used as a 
simplified means of creating new objects without providing an object constructor function.  In JavaScript, an object 
constructor function is called with the new statement, and the function defines any properties or methods of the 
object.  In the following simplified example, the calling statement instantiates a new object named myObject.  
The makeObject function creates the object, defining one property ("name") to it.

myObject = new makeObject ("my object");
 
function makeObject(name) {
        this.name = name;
        return (this);
}


The Object constructor saves you the trouble of making a constructor function, and is handy when you don't need 
or want to define methods and properties of the object when it is created, or when you want to define just one two 
properties.  These following two lines replicate the example above:

myObject = new Object();
myObject.name = "my object";

You might use the Object constructor as a quick means to create an object.




So I think, the coder of this progie just used it for compatibility-reasons. To be 
honest, I would not use this old code anymore. Nowadays Javascript 1.3 is already in 
use, all of the browsers are supporting Javascript 1.2 (or could it be, that the 
actual Opera is still hanging on version 1.1 ? - Don't know at the moment). Nevertheless, 
I don't give a damn about any old javascript-1.0-browsers. With such arguments there
would not be any program for Windows 95 (wouldn't that be nice ;) ?)
O.k.,, this is old code, we won't use this array-construction anymore, but there is 
still some code in the function 'search' waiting to be examined.
What are we waiting for ? 


What happens after you have put in your keyword(s) and started the search :

The Code... ....................... ...and my Remarks 

function search()                      the one and only function here
{                                        starting with the declaration of some variables
                                         first : 
                                         the keyword(s), transformed to lowercase
var skeyword=document.searchengine.keywords.value.toLowerCase();

var check=1;
var pos=0;
var i=0;
var j=0;
var  itemp=0;
var config='';

while (true)                          LOOP ONE : while
                                      REMEMBER : always TRUE, to leave this loop : 'break'

{                                     in this loop all the entered search-items are collected
                                        and stored in the 'keywords'-array
 if (skeyword.indexOf("+") == -1 )    
    {
     keywords[check]=skeyword;
     break;                 The break-statement tells JavaScript to exit a "controlled structure"
	                                  and resume execution at a point after the structure.
    }
                                        problems in understanding this loop ??
                                           use The Seeker's debug-utility !!    
 pos=skeyword.indexOf("+");

 if (skeyword !="+")     
    {
     keywords[check]=skeyword.substring(0,pos); check++;
    }
 else
    {
     check--;
     break;
    }
	
 skeyword=skeyword.substring(pos+1, skeyword.length);  

 if (skeyword.length ==0)
    {
     check--;
     break;
    }
}                                      END OF WHILE-Loop


 keywords[0]=check;                     number of keywords


for ( i=1; i<=keywords[0];i++)          LOOP TWO : FOR
    {
     for (j=1;j<=title[0];j++)          what happens : 
         {                                 if a title is the same as one of the keywords 
		  if (title[j].toLowerCase().indexOf(keywords[i]) > -1 ) 
             {matched[j]++;}                then the according match-field is incremented
         }                                  so : match(field) == 0 means : no success 
    }                                   END OF FOR-Loop

	
for (i=1;i<=title[0];i++)               LOOP THREE : FOR
    {                                    what happens :  
     if (matched[i] > 0 )                if a match for a certain entry was found (matched(i) > 0) 
        {                                then
         found[0]++;                    the number of found items is incremented (stored in found[0]
         found[found[0]]=i;               and  the index of the found entry is stored in found[i]
        }        
}                                       END OF FOR-Loop


for (i=1;i<=found[0]-1;i++)             LOOP FOUR : FOR
    {                                       the found entries are sorted
     for(j=i+1;j<=found[0];j++) 
        {                                   with a rather simple sort-method
         if (matched[found[i]]< matched[found[j]] )
            {
             temp= found[j];                 the sort is done according the matching-number
			                                   of every found entry
             found[j]=found[i];
             found[i]=temp;
            }
       }                  
}                                       END OF FOR-Loop

.....
.....
following the output                   
no need to explain :)
.....
}



O.k, now everything is clear, in't it ? - Should you have troubles in understanding the loops 
or what's going on in the program, so why don't you test my little debugging-tool, written
in javascript and - IMO - a little bit better than the usual 'alert-method'. But feel 
free to do what you like. 

Let's put it together :
Database creation content case-sensitive multiple-search sort search field
Number 1 ... = new Object() title
desc
links
matched
found		 no yes yes title
Number 2 --- --- --- --- --- ---


Next time : another database with another concept.
See you !

(c) The Seeker 1999. All rights reversed 

Page started by The Seeker
Page created: 10th April 1999
Logo