JavaScript. Without it, your average web developer is limited to the static boundaries of boring HTML layouts. No roll-overs, pop up menus, drag and drop, client side validation. Quite literally, it's not a pretty site. (Pun intended).

But if you do use JavaScript on your website, you open up another can of worms. JavaScript behaves differently across browsers. It behaves differently on different platforms. It behaves different depending on the specific version of browser you use. It behaves differently depending on the regional settings of your browser. It can be disabled altogether in many browsers. It behaves differently on client PC's with a different version of the JavaScript interpreter installed to that of the original author. And even if it works as originally intended, it's slow, it's not compiled.

You're damned if you do, and you're damned if you don't, because unfortunately, there is no real alternative for getting Dynamic HTML effects other than JavaScript.

So what are other options are there? Well, there are technology platforms options that diverge completely away from pure HTML that are certainly capable of achieving dynamic UI effects (and much more), such as Macromedia Flash, Java Applets and ActiveX but none of these techniques are really a viable solution for most developers. They're probably overkill if all you need is a simple rollover effect. These technologies don't interact with the HTML elements on your page very well and also require very specific, costly expertise that many web developers either don't have or can't effectively support.

Microsoft's ATLAS project utilises extensive amounts of JavaScript, but interestingly uses a declarative XML syntax to encapsulate JavaScript effects such as Drag and Drop. So although you're using JavaScript, you don't actually need to know that you're using JavaScript. This has other implications on debugging etc, but could be a terrific option once Visual Studio integration arrives in a few years time.

Another option (which is more a fiscal solution than a technical one), is to actually avoid writing any JavaScript inhouse yourself. Simply buying pre-packaged widgets and reusable controls that contain all the (presumably) fully tested and cross browser JavaScript effects already written for you is a good cheap solution, although it certainly doesn't resolve all of the issues with JavaScript listed above.

Code Generation Tools like CrunchyCode go one step further, generating complete applications with all the various interactions (JavaScript included) written for you.

CrunchyCode provides a freely available, "SQL for JavaScript" extension to help developers minimize the amount of hand written JavaScript code in their applications, whilst maintaining the ability to perform dynamic HTML effects.

Just as the RDBMS world long ago moved away from ISAM/cursor based manipulation of data, so too can developers now use set based SQL operations on standard HTML tables. SQL for JavaScript is essentially a parser/translator which allows you to write familiar SQL syntax to insert,update and delete from a HTML table (and other elements), rather than manually iterating through the rows and cells one at a time.

To utilise SQL for JavaScript you simply need to add a reference to the SQLScript.js file in your webpage.

Below is a simple example of how SQL for JavaScript works. Suppose you want to dynamically add a single row containing three cells into a standard HTML table.

A standard JavaScript approach is shown on the left. On the right, is the SET based SQL for JavaScript approach.

Of course, you've technically still written one line of JavaScript. However by abstracting away the complexities and syntax of the language itself, you've actually managed to sidestep a number of significant problems and gained several advantages:

1) You're using SQL. Everyone knows SQL. (This statement is somewhat tongue in cheek, but it's quite nearly true).

2) You're using set based syntax, just as you would if you were updating a database table. You no longer have to add a row one at a time.

3) You've avoided writing any browser specific code yourself. Of course, the SQL for JavaScript API probably doesn't behave 100% predictably across all browsers, but that code is encapsulated in a single central place. Fix a cross-browser or cross-browser version bug once inside the sqlscript.js file and it's fixed forever.

4) You've massively reduced the number of lines of code required. For the trivial example above, eight lines of JavaScript were reduced to one. But for a larger insert, say a copy operation from table to table, the difference is even more apparent.

Here are a few more examples of SQL for JavaScript syntax:

 

Samples: To insert a new row , with three columns into the table with an ID of "destinationtable" : sql ("insert destinationtable values('Hello','blabla','12345')");   To copy all the rows from sourcetable to destinationtable: sql ("insert destinationtable select * from sourcetable ")   To update all the rows in a table: sql ("update destinationtable set row.cells[1].innerText = '123' ")   To conditionally update all the rows in the table: sql ("update destinationtable set row.cells[0].innerText = 'MyTestUpdate' where row.cells[2].innerText='123' or row.cells[2].innerText='rrqewr'")

 

The latest copy of sqlscript.js can be installed from the trial and licenced version of CrunchyCode.

Feel free to use and distribute the sqlscript.js file, provided you acknowledge us as the source, both by leaving our name within the file itself and also in any links you choose to provide for directly downloading the file.

Of course, DHTML effects aren't only related to HTML tables. The SQL for JavaScript library is constantly being revised to support other elements. Stay tuned for more code samples.