Database Front End: the full code | WebReference

Database Front End: the full code

Logo

Database Front End:
SPECIAL EDITION; the director's cut


The Complete Code

External JavaScript Database (records.js)

    arRecord = new Array()
    arRecord[1] = new Array()
    arRecord[1][1] = "CYNIC-001"                 // Fields, although in our
    arRecord[1][2] = "F67-94-4/17"               // example, are only strings,
    arRecord[1][3] = "Filia"                     // can be numbers, URLS, filenames, etc.
    arRecord[1][4] = "Neolithic II / 5000-3750"  // In other words, they can contain
    arRecord[1][5] = "Dark on Light"             // the data to be displayed, or they
    arRecord[1][6] = "open-shape"                // can contain pointers
                                                 // to other sources for the data.
    arRecord[2] = new Array()
    arRecord[2][1] = "CYNIC-002"
    arRecord[2][2] = "F68/78"
    arRecord[2][3] = "Philia"
    arRecord[2][4] = "Neolithic II / 5000-3750"
    arRecord[2][5] = "Dark on Light"
    arRecord[2][6] = "open-shape"
    arRecord[3] = new Array()
    arRecord[3][1] = "CYNIC-003"
    arRecord[3][2] = "KM87/1495"
    arRecord[3][3] = "Ambelikou-Aghios Georghios"
    arRecord[3][4] = "Late Chalcolithic / 2800-2300"
    arRecord[3][5] = "Red on White"
    arRecord[3][6] = "stand"
    arRecord[4] = new Array()
    arRecord[4][1] = "CYNIC-004"
    arRecord[4][2] = "C416"
    arRecord[4][3] = "Unknown"
    arRecord[4][4] = "Cypro-Classical II / 400-325"
    arRecord[4][5] = "Bichrome VII"
    arRecord[4][6] = "rhyton"
    arRecord[5] = new Array()
    arRecord[5][1] = "CYNIC-005"
    arRecord[5][2] = "1935 C38/C65/B4"
    arRecord[5][3] = "Unknown"
    arRecord[5][4] = "Cypro-Archaic I / 700-600"
    arRecord[5][5] = "Bichrome"
    arRecord[5][6] = "figurine"

The in-page HTML and SCRIPT

    <HTML>
    <HEAD>
    .
    .
    .
    <SCRIPT LANGUAGE="JavaScript" SRC="records.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
         NS4 = (document.layers) ? 1 : 0;
         IE4 = (document.all) ? 1 : 0;
        ver4 = (NS4 || IE4) ? 1 : 0;
        var curRecord = 1;
        var maxRecords = arRecord.length-1;
        var maxFields = arRecord[1].length-1;
        function upDate() {
            if (document.images) { document.images["imPic"].src="Cynic00" + curRecord + ".jpg" };
            if (!ver4) { return };
            for (i=1; i 1) ? --curRecord : maxRecords;
            upDate();
        }
    </SCRIPT>
    .
    .
    .
    </HEAD>
    <BODY ...HTML attributes....ending with... onLoad="upDate()">
    .
    .
    .
    <IMG NAME="imPic" SRC="Cynic001.jpg" WIDTH=200 HEIGHT=150 HSPACE=10 ALIGN=LEFT>
    Sampling Code Number: <SPAN ID="elField1" STYLE="position: absolute"></SPAN><BR>
          Catalog Number: <SPAN ID="elField2" STYLE="position: absolute"></SPAN><BR>
              Provenance: <SPAN ID="elField3" STYLE="position: absolute"></SPAN><BR>
              Chronology: <SPAN ID="elField4" STYLE="position: absolute"></SPAN><BR>
          Style-Typology: <SPAN ID="elField5" STYLE="position: absolute"></SPAN><BR>
                   Shape: <SPAN ID="elField6" STYLE="position: absolute"></SPAN><BR>
    <A HREF="javascript:showPrev()">
    <IMG SRC='Prev.gif' NAME='imPrevBut' ALT='Previous Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
    </A>
    <A HREF="javascript:showNext()">
    <IMG SRC='Next.gif' NAME='imNextBut' ALT='Next Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
    </A>
    .
    .
    .
    </BODY>
    </HTML>

Building on this base

Using other strengths of Dynamic HTML, we can build on this simple routine. For instance, we could incorporate the Dynamic Images routines from column3 to allow the images to be zoomed. We could make the JavaScript more elegant by creating a function to create and populate the array.

Sometime in the not-too-distant future, we will come back to look at the data strengths of Navigator's Regular Expressions and Explorer's data binding. Just like lists, the features we could add are endless.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/09/97
Revised: 09/28/97

URL: http://www.webreference.com/dhtml/column4/allCode.html