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

Part 2

The_Seeker

by The Seeker

(03 May 1999)


Courtesy of The Dark Tower's Javascript-page
Here is part two of the database-section. Another interesting database with a completely different programming-approach. Read and learn !



Cutting the guts out of another database

Greetings, fellow javascripters ! You already know : 
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 next and second target is a database, coded by Kristy Welsh. This program can be
found at Webreference.com and other places around the web (gr_serch.html).
As usual : 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 another database for www-links. With this program you can
build up a database with your favourite links and some description about. This time
you can search in all fields. 
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 ! 

Business as usual : 
The first thing when checking an unknown code - no matter in which program-language 
it is written - should be to understand which way the program flows and which global
variables we are handling with : 


The Code... ....................... ...and my Remarks
<.SCRIPT language="javascript">

var key = "";

var linksize=0                             number of entries


datesArray = new makeArray(linksize);      Array 1 : the date
									
the new-statement creates a new a copy (=instance) of an object.
This time (look at database 1) the object is user-defined ! 

                                           calls this function: 	

function makeArray(n) {                  the first array comes to life
   this.length = n;                           
   for (var k = 1; k <= n; k++)           hmmm.. with n ==0 you will never run this loop !
      {
       this[k] = "";
      }
   return this;
}
			
namesArray = new makeArray(linksize);      Array 2 : the title
                                           same call as above
										   
urlsArray = new makeArray(linksize);       Array 3 : the url
                                           same call as above
										   
descArray = new makeArray(linksize);       Array 4 : the description 
                                           same call as above

var arraycount=0                          the actual size of the arrays

arraycount += 1                           clever ! automatic count-up [look at database 1 !]


                                          the arrays are here :
										   
datesArray[arraycount] = "(Aug.2.96)"
urlsArray[arraycount] = "../javascript/how2java.htm"
namesArray[arraycount] = "User Defined Functions, Methods and Objects"
descArray[arraycount] = "Shows you the way .... [cut]"


arraycount += 1 
datesArray[arraycount] = "(Oct.1.96)"
urlsArray[arraycount] = "resource.htm"
namesArray[arraycount] = "The Greatest Collection ...[cut]"
descArray[arraycount] = "Includes links to ... [cut]"

..........
..........

linksize = arraycount;                      the final number of entries 




Time for a break before we gonna examine the search-functions. 
Let's resume what we have learned til now :

Every 'record' of our database consists of 4 entries : 

datesArray   some date, don't know what for 
namesArray   the title
urlsArray    the URL 
descArray    some description

This time the array is built in just another way : 

datesArray = new makeArray(linksize); function makeArray(n) { this.length = n; for (var k = 1; k <= n; k++) { this[k] = ""; } return this; }
Just another way to built arrays with javascript v.1.0 ! It's a common way to built arrays, though in this special case you could leave out the for-loop. The purpose of this loop is to avoid some 'undefined-state'. Because in our case the arrays are filled immediatelly after they are initialized, the loop is not necessary. Once again the array is built in a javascript-v.1.0-way. O.k., this is old code, we won't use this array-construction anymore, but there is still some code waiting to be examined. What are we waiting for ?
What happens next ?

The Code... ....................... ...and my Remarks
linksize = arraycount;                            the number of entries 


jsi = new makeLinks(linksize);                    another array, another function
                                        


function makeLinks(size) {
  this.length = size;      
  for (var r=1; r<= size; r++)                       
     {
      this[r] = new makeEntry();                 calling for another function
									
the this-keyword refers to the current object and is shorthand for using the formal
name of the object
	  
      this[r].Date = datesArray[r];              very interesting 
      this[r].Name = namesArray[r];
      this[r].URL  = urlsArray[r];
      this[r].Desc = descArray[r];
    }
  return this;
}


function makeEntry (){
   this.Date = "";
   this.Name="";
   this.URL = "";
   this.Desc = "";
   this.Category = "";                       who's that ?? - never used !
   return this;
}

.....

searchLinks(jsi, prompt("(Warning! dont ..[cut]"));  calling for function searchLinks


function searchLinks(links, keyword){
    document.write("Search results for keyword:" +keyword);
    document.write("<.table border>");
    for (var q=1; q<=links.length; q++)
        {
          if (links[q].URL.indexOf(keyword) != -1)
            {
              showLink(links,q);
              continue;
The continue-statement tells JavaScript to skip any instructions that
may follow in a for, for...in, or while loop, and proceed with the next iteration.
            }
			
          if (links[q].Desc.indexOf(keyword) != -1)
            {
              showLink(links,q);
              continue;
            }
			
          if (links[q].Date.indexOf(keyword) != -1)
            {
              showLink(links,q);
              continue;
            }

          if (links[q].Name.indexOf(keyword) != -1)
            {
              showLink(links,q);
              continue;
            }
        }
  ...
}					

document.write("This searches all areas (Date, Name, URL, and Description) for matches ");
document.write("and returns a list of hits.  The keyword is case sensitive. ");
document.write("Click search again for another search.");
document.write("<.form><.input type=button onClick='history.go(0)' value='Search Again'><./form>");


<./SCRIPT>
<./HEAD>


never used : 

function showAll(linkobj) {
   for (var s=1; s<= linkobj.length; s++)
      {  
        showLink(linkobj,s);
      }
}



Here we got some very interesting code ! Look : 

jsi = new makeLinks(linksize);                 
                                        
calls the function named 'linksize'. And what is happening here : 


function makeLinks(size) {
  this.length = size;      
  for (var r=1; r<= size; r++)                       
     {
      this[r] = new makeEntry();                 calling for another function


function makeEntry (){
   this.Date = "";
   this.Name="";
   this.URL = "";
   this.Desc = "";
   this.Category = "";                       who's that ?? - never used !
   return this;
}

	  function makeEntry creates an object (with the name 'jsi'). This object even
	  has an additional and never used field with the name 'Category'. 
	  The 4 (5) fields are : jsi[r].Date, jsi[r].Name, jsi[r].URL and jsi[r].Desc.
	  (with 'r' just a synonym for the actual number. As soon as these fields are
	  created, they get filled with our arrays !
	  
  this[r].Date = datesArray[r]; 
  this[r].Name = namesArray[r];
  this[r].URL = urlsArray[r];
  this[r].Desc = descArray[r];
	  
	  Hmm, and why is this object-array not used from the beginning ? And why now ?
	  For what reason ? - Sorry, I don't know !   
	  
 To repeat this once again : 
 
 Now we have 4 arrays AND an object array with all the fields and the 
 entries of these 4 original arrays ! 


O.k, the rest is obvious, isn't it ? - Function 'searchLinks' should need no explanation,
does it ?
Once again : should you have troubles in understanding some code, so make use of
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 function makeArray(n){
this.length = n;
for (var k = 1; k <= n; k++)
  {this[k] = ""}
return this;
}
+ an array-object !!
date
title
URL
description
yes no no all fields


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

(c) The Seeker 1999. All rights reversed 


Page started by The Seeker
Page created: 3rd May 1999


Logo