Permalink
Browse files

documentation

  • Loading branch information...
1 parent 4e30c5e commit 96ed31fe17663d385749aaa5394977e3093879e8 Nick Kallen committed Apr 8, 2008
Showing with 119 additions and 0 deletions.
  1. +54 −0 README
  2. +65 −0 example.html
View
54 README
@@ -0,0 +1,54 @@
+Today I was thinking aloud about [Tree Regular Expressions](http://research.microsoft.com/Users/luca/Slides/2003-11-13%20Transitions%20in%20Programming%20Models%20\(Lisbon\).pdf) and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got **inner joins** working.
+
+Let's start with a few tables:
+
+ <table class="users">
+ <tr>
+ <td class="id">1</td>
+ <td class="first_name">amy</td>
+ <td class="last_name">bobamy</td>
+ </tr>
+ ...
+ </table>
+ <table class="photos">
+ <tr>
+ <td class="id">1</td>
+ <td class="user_id">1</td>
+ <td class="url">http://www.example.com/foo.png</td>
+ </tr>
+ </table>
+
+Now we can express some queries:
+
+ $('.users')
+ .where('.id:eq(1)')
+ .select('*')
+
+This is equivalent to `SELECT * FROM users WHERE id = 1`
+
+ $('.users')
+ .where('.id:eq(1)')
+ .select('.id, .name')
+
+This is equivalent to `SELECT id, name FROM users WHERE id = 1`. Here is something slightly more complicated:
+
+ $('.users')
+ .where('.name:contains(a)')
+ .and('.name:contains(c)')
+ .select('*')
+
+But here is **the crowning glory**, the inner join:
+
+ $('.users')
+ .join('.photos')
+ .where('.photos.user_id:eq(.users.id)')
+ .and('.users.id:eq(1)')
+ .select('.photos.url')
+
+This is equivalent to:
+
+ SELECT photos.url FROM users, photos
+ WHERE photos.user_id = users.id
+ AND users.id = 1
+
+[Download the fun](http://github.com/nkallen/jquery-database/tree/master) at Github.
View
@@ -0,0 +1,65 @@
+<html>
+ <head>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
+ <script type="text/javascript" src="jquery.db.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ console.debug(
+ $('.users')
+ .where('.id:eq(1)')
+ .select('.name')
+ );
+ console.debug(
+ $('.users')
+ .where('.name:contains(a)')
+ .and('.name:contains(c)')
+ .select('*')
+ );
+ console.debug(
+ $('.users')
+ .join('.photos')
+ .where('.photos.user_id:eq(.users.id)')
+ .and('.users.id:eq(1)')
+ .select('.photos.url')
+ );
+ });
+ </script>
+ </head>
+ <body>
+ <table class="users">
+ <tbody>
+ <tr>
+ <td class="id">1</td>
+ <td class="name">amy</td>
+ </tr>
+ <tr>
+ <td class="id">2</td>
+ <td class="name">bob</td>
+ </tr>
+ <tr>
+ <td class="id">3</td>
+ <td class="name">carl</td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="photos">
+ <tbody>
+ <tr>
+ <td class="id">1</td>
+ <td class="user_id">1</td>
+ <td class="url">http://www.example.com/foo.png</td>
+ </tr>
+ <tr>
+ <td class="id">2</td>
+ <td class="user_id">2</td>
+ <td class="url">http://www.example.com/bar.png</td>
+ </tr>
+ <tr>
+ <td class="id">3</td>
+ <td class="user_id">3</td>
+ <td class="url">http://www.example.com/baz.png</td>
+ </tr>
+ </tbody>
+ </table>
+ </body>
+</html>

0 comments on commit 96ed31f

Please sign in to comment.