JSQL: JavaScript Query Language
About JSQL
When I started my new job, I had to make the transition from YUI to jQuery. I'd seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn't familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn't, but there is a really cool CSS3 selector instead.
Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:
JSQL always returns an object with an error property that's either Boolean false or a String stating what error occurred (for example, "Unknown command UPDAT3"). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.
Here are some interactive examples:
Example 1: Checkboxes
Example 2: Form Validation
First name:
Last name:
Email:
Example 3: Removing Elements
In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:
Example 4: Selecting Elements
I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it's poorly written. And I'm admittedly lousy at writing parsing code... so there's that. I also doubt it's realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.
Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I've also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!
- [Download jsql.js] (11k)
- [Download jsql-min.js] (3,661 bytes)
This is really a good idea, and it’s nice to see something like this implemented. For now, I still see that CSS3 syntax based selections are simpler, but maybe we can find something where selecting elements by SQL queries looks better.
Well done.
[...] Updates every checkbox in the container #jsql-example-1, setting each checkbox checked. This saves you some messing around with jQuery’s each() function. Very cool! Check it out here. [...]
Hmm, as someone as uses jQuery and knows CSS very well, JSQL seems a bit verbose for oft-used scenarios like selecting a descendant group.
This example:
JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {
this.style.background = ‘#ffff00′;
});
Could be rewritten in jQuery as:
$(’#jsql-example-4 em’).css(’background’, ‘#ff0′);
No?
Thanks for the feedback! :)
@Mike: Absolutely jQuery will win any terse contests. ;) This is by no means meant to be a stand-alone library. For a whole suite of tools and XHR methods, I recommend YUI or jQuery. JSQL is just meant for some SQL-DOM fun.
This is a good idea.
brilliant plan,
still feels like jquery is less equipped than actionscript in its 1.0 stage, this jsql will clearly make a massive difference.
how would I use this to get the values of input fields in a div into an object to use with json (and leave others outside of the div out of it -without- using the id to select them)?
-living an learning, maybe my expectation to the ease of use are too high, since I am now used to ActionScript 3.0-
thanks in advance for the explanation!
keep up the good work!
I agree that jQuery and its selectors are unintuitive. But while JSQL makes sense, it seems to me that the developer community is moving away from using SQL and more to object-oriented programming.
In jQuery, you would use .val() instead of SET value=, which is more in line with this object notation. I also wonder if your syntax is vulnerable to “JSQL injection.”
@mc: I’m having a hard time understanding the question. This is more of a demo/prototype than a legitimate library. If you’re using jQuery in a real-world website, I’d recommend using that library alone :)
@quintin3265: I can’t tell if you’re kidding or not. Instead of a database, JSQL has a DOM. So injection is irrelevant …
Thanks for the comments!