Javascript is the key to developing the web sites that bark, roll over, and (sometimes) play dead.

Cooncat, my new storefront, uses Javascript extensively to make it do what it's supposed to, that is, deliver articles and product descriptions in a nice and (soon to be) searchable format.

This journal describes some of the trials I've endured to make a Javascript database to meet my needs. If you are a mid-level Javascripter (which I define as one who knows the basics but is too cheap to buy a good development program), you may pick up some ideas by looking through it.

The main sources I use are the excellent website irt.org and the newsgroup livesoftware.javascript.examples on news.livesoftware.com. Your comments on these topics are appreciated -- jimc@tough.com

6/1/98

Marco Hernandez wrote in livesoftware.javascript.examples: 

  Does anybody knows how create a database file using javascripts,
  including : create, modify, update and delete records.

My answer:

I'm in the middle of writing a similar Javascript database application, loosely using MS Access 2.0 as a model. What follows is not a real answer for you, but it will give you a taste of what's involved.

I define a global variable in the top frame of my site as DB, and add properties to that. In this manner, I can access the database object from anywhere. The structure of the object is like this: 

DB
|- recordset    (holds current record of table[s] being accessed)
|  |- field     (holds single value and other properties of current record's field)
|- tabledef    (holds definition of database table [not to be confused with an HTML table])
   |- field    (holds properties which define a field, such as a default value)
   |  |- values    (an "array" which holds the values of all the records for a particular field)
   |- index    (based on single or multiple fields, defineds sorted pointers to records)
      |- values    (sorted pointers to records for single or multiple fields)

The DB object has a method OpenRecordset that makes a new Recordset property that copies values from the Tabledef fields to a simple fields array for the first record. The Recordset then has a Move method to change the current record pointer and load the corresponding record. This allows you access to any specific record in the database.

Indexes are maintained so a the Recordset can seek records which meet a certain criteria, and return the records in a sorted manner. Editing and adding records are done one-at-a-time, by changing the values in the Recordset fields. When you then issue an update command, this copies the changed values to the appropriate Tabledef fields and updates the indexes.

I use a seperate window called "Datasheet" allows me to edit and add records. This is the point that I am at in the database's development. I then will make another window similar to "Datasheet" that will generate Javascript similar to ufxLoad() below, from which I will save the generated script as a .js file for use as a table definition to be uploaded to my site.

Please be aware that this saving step is MANUAL, and can only be done by you (or someone with FTP access to your site's directory). This limitation of Javascript means that you cannot use a similar database for saving information that your users supply. You would need to use CGI, Livewire, or a similar solution to do that. But I want the database so I can add records that will build and maintain my site, provide an intelligent search tool. If you think this is an involved way to go about it, IT IS. Depending on your needs, there are simpler solutions.

Here's an excerpt from the beginning of the script: 

var uvnDB = null
var uvbDBWarnings = true
var uvbDBDebug = true
function ufxDatasheet() {
       window.open("datasheet.html", "windowDatasheet",

"toolbar=no,location=no,directories=no,resizable=yes,width=400,height=300");

}

 function ufxLoad() {
       DB = new DBEngine("DB"); // define database
       // load database
       DB.TableAppend("Sites");
       with(DB.Tabledefs.Sites) {
               FieldAppend("ID", "counter", "Internal ID", 5, "ID", 0);
               FieldAppend("Link", "string", "URL to link", 40, "Link", ".");
               FieldAppend("Label", "string", "Text to display", 40, "Label");
               FieldAppend("Selected", "boolean", "Selected by default", 1, "Selected");
               Load(0, "./amazon/about_our_books.html", "About Our Books");
               Load(1, "./macrame/macrame_books.html", "Macrame Books");
               Load(2, "./macrame/macrame_pillows.html", "Macrame Pillows", true);
       }
       if(User="JimC") document.write('Display Datasheet');
}
function DBEngine(Name) { // definition for entire database
       this.Name=Name;
       this.Tabledefs=new SubscriptedObject();
       this.Recordsets=new SubscriptedObject();
       this.OpenRecordset=DBEngineOpenRecordset;
       this.TableAppend=DBEngineTableAppend;
}

I'll publish updates to this database when I get it finished on Jim's Shed; comments from all you Javascripters are extremely welcome.

Back to Jim's Shed

1