|
|
|
the HTML is the database
Tuesday, December 4 2007
Today I furthered my experiments with implementing crude database systems entirely in Javascript. Unlike my initial experiments, today I didn't first populate a Javascript variable with a long double-delimited string sucked out of a database table using conventional backend MySQL operations. Instead I just treated a long rambling (and completely formatted) HTML table as the database table. Parsed correctly using the Javascript document object model (DOM), there's no reason an HTML table can't serve the same function as a read-only Excel spreadsheet. My main reason for doing this was to provide column-header sorting links that act without refreshing the page.
Implementing such a system proved unexpectedly easy, involving less than 350 lines of Javascript with functions having such names as ClimbTreeToTagFromObj, CreateColumnArray, SortTable, NumberRows, and (my favorite) MurderAllTheChildren.
Here's an example of it in action in a table I made years ago for my father in a web document called pH of Freshly Fallen Leaves. Just click the headers to see it do its thing.
| No |
Species |
pH |
Date |
Forest Type
|
| 1 | Cercis canadensis |
4.3 | 10-30-00 |
1
| | 2 | Quercus coccinea | 4.3 | 11-1-00 | 2
| | 3 | Quercus coccinea | 4.5 | 11-19-00 | 2
| | 4 | Pinus virginiana | 4.4 | 11-14-00 | 3
| | 5 | Pinus rigida | 4.4 | 11-28-00 | 3
| | 6 | Prunus serotina | 4.5 | 11-8-00 | 3
| | 7 | Acer saccharum | 4.5 | 11-24-00 | 1
| | 8 | Acer saccharum | 4.6 | 11-22-00 | 3
| | 9 | Quercus alba | 4.6 | 11-3-00 | 2
| | 10 | Nyssa sylvatica | 4.6 | 11-2-00 | 2
| | 11 | Quercus stellata | 4.6 | 11-12-00 | 1
| | 12 | Juglans nigra | 4.6 | 11-27-00 | 4
| | 13 | Juglans nigra | 4.7 | 11-4-00 | 1
| | 14 | Carya cordiformis | 4.6 | 12-10-00 | (1)
| | 15 | Pinus pungens | 4.6 | 11-29-00 | 3
| | 16 | Acer rubrum | 4.7 | 10-26-00 | 2
| | 17 | Pinus strobus | 4.8 | 12-17-00 | 2
| | 18 | Quercus velutina | 5.0 | 10-24-00 | 2
| | 19 | Quercus velutina | 5.5 | 10-18-00 | 1
| | 20 | Carya glabra | 5.0 | 10-28-00 | 2
| | 21 | Carya ovalis | 5.0 | 10-29-00 | 5
| | 22 | Quercus rubra | 5.2 | 12-12-00 | (1)
| | 23 | Carya tomentosa | 5.2 | 10-27-00 | 1
| | 24 | Quercus muehlenbergii | 5.3 | 10-23-00 | 1
| | 25 | Quercus prinus | 5.3 | 10-25-00 | 2
| | 26 | Quercus prinus | 5.3 | 12-12-00 | (1)
| | 27 | Acer nigrum | 5.4 | 10-24-00 | p
| | 28 | Populus grandidentata | 5.5 | 11-11-00 | 2
| | 29 | Cornus florida | 5.5 | 10-31-00 | 2
| | 30 | Cornus florida | 6.0 | 11-3-00 | 1
| | 31 | Juniperus virginiana | 5.8 | 11-9-00 | 3
| | 32 | Fraxinus americana | 5.8 | 11-15-00 | 1
| | 33 | Fraxinus americana | 6.1 | 11-14-00 | 4
| | 34 | Fagus grandifolia | 5.8 | 12-10-00 | (1)
| | 35 | Fagus grandifolia | 6.4 | 12-10-00 | (1)
| | 36 | Fagus grandifolia | 6.9 | 11-25-00 | p
| | 37 | Liriodendron tulipifera | 5.8 | 12-12-00 | (1)
| | 38 | Liriodendron tulipifera | 6.1 | 11-25-00 | 1
| | 39 | Crataegus crus-galli | 6.5 | 11-16-00 | 3
| | 40 | Tilia heterophylla | 6.7 | 11-21-00 | 1
| | 41 | Tilia heterophylla | 6.7 | 12-12-00 | (1)
| | 42 | Ulmus rubra | 7.0 | 12-1-00 | 1
| | 43 | Ulmus rubra | 7.6 | 11-20-00 | 1
| | 44 | Ulmus rubra | 7.9 | 11-17-00 | 1
| | 45 | Celtis occidentalis | 8.0 | 11-5-00 | 3
| | 46 | Celtis occidentalis | 8.0 | 11-6-00 | 1
| | 47 | Celtis occidentalis | 8.0 | 11-7-00 | 1
|
Here's the javascript. To use it, give the table to sort an id such as 'idsorttable,' include <script src="ran/0712/tablesort_js.js"></script> at the top of the page, <script>NumberRows('idsorttable', 3);</script> at the bottom of the page, and then use HTML anchors around the column labels in this form <a href="ran/0712/javascript: SortTable('idsorttable', NUMBER_OF_COLUMN)">LINK_TEXT</a>.
This evening I've been listening to the dark musical stylings of Nate Eckman, one of whose songs I'd just heard on Indie Pop Rocks. I was so struck by "Suit and Tie" that I immediately bought five songs from the web. This was, I should note, the first time I'd ever paid for an MP3 (or any music file).
The thing I liked about "Suit and Tie" was the weird decision to keep down the mix of the rocking loud electric guitars that come with the chorus, which at first is less sung than rapped and later is such a thick layering of whispering voices that it resembles the kind of aural hallucinations I experience when I go too long without sleep. Eckman has a vulnerable seemingly-unpracticed voice, one that continually threatens a complete vocal trainwreck. Part of this seems to be the effect of his lofi recording technique. Is that a tape warble I hear? Do people still use tape? But there's authenticity there and occasionally even otherworldly power that can lurch between menace and brooding hopelessness. You can hear the whole range in the lovely song "All Star Kid," a song that initially caught my attention with its saturated mellotron-style faux orchestration (which is indistinguishable from the mellotron used in David Bowie's "Ground Control To Major Tom.") There's enough variation to the songs that no firm style is in evidence, but I suspect this is because Eckman has yet to mature as a musician. I'll be eagerly awaiting his future efforts.
For linking purposes this article's URL is:
http://asecular.com/blog.php?071204 feedback
previous | next |
