The Nightmare that is Javascript!

Why does it still exist?

Many years ago I outlined how I thought JavaScript would be dead within a few years, mainly because of its incompatibility in browsers, and that it focused on client side code. It was at the time when server-side code, such as with PHP and ASP, were starting to show promise, especially as they could process marked-up code to produce standard HTML, which could run on any browser. The server-side nature of PHP and ASP also allowed us to process marked-up code on the server, without the need to pre-load it into the browser, and thus allowing for dynamic integration of code. But the idea of going back and forward to the server is not quite fit for our new generation of Web applications which try to produce the same interaction as a native application. So to produce the fast response speeds, and to be able pre-load a whole load of functionality, it is to JavaScript that we turn to.

Along with problems of incompatibility with browsers and the client-side nature of JavaScript, I was also worried that the code could not be protected, and could be viewed by anyone who accessed the Web page. Unbelievable, though, JavaScript has survived and has actually thrived with the increasing requirement for Web-based applications. Overall it is one of the most terse languages that I have came across, and one which gives few clues to any problems that occur. It’s true strength is that it is not PHP or ASP or any other code which ties you into the server back-end, it truly stands on it own, and will work its magic on whatever system that is used. Basically it has succeeded in keeping things so simple, and it does it well. This has fossilized the language, which is no bad thing, but has meant that it is browsers which must integrate with it, and not the other way around … so well done to JavaScript!

It may seem amazing, but the way that JavaScript can update a small part of the Web page, without causing the whole page to update, is one of its main achievements, and it does this by pre-loading a whole lot of code, which is waiting to be updated by actions on the page, or from the server. In the same way the ARP within a network supports the last part of network connection, JavaScript does that last little bit of binding to the browser. ARP, too, had to fossilize, but for good purpose, and so it is to JavaScript and its HTML DOM model for objects that we turn to for a rock-solid integration with browsers.

With the move towards strict checking of code, and even forcing code to be checked for its run-time instance, it is unbelievable that we still have something so difficult as JavaScript to deal with. One error in the code, will lead to an incorrect operation with very little feedback on the problem. Over the years we have taught students now to create little pop-up messages for their debug, and to use the debugger, with break-points and code walk-throughs. With JavaScript, you still end up with statements such as:

var e = document.getElementById("comboBox1");
var comb = e.options[e.selectedIndex].text;
alert("Value is "+comb);

Example


I’ve spend so long over the past year or so struggling with JavaScript, Kendo User Interface components and MVC ASP.NET. For the MVC part, it has been amazing, as helps me to easily create Web infrastructures, but the Kendo and JavaScript side is where it becomes difficult, especially asthey are so difficult to debug. To illustrate this, and give you some help, I’ll outline an example of how you can integrate a combo box into a page.

Here is the example of what I will outline. It has eight combo boxes, which have the values of 0 and 1, and the results values will update automatically when a value is changed on a combo box:

First we can create the Kendo combo boxes with:

<table>
<tr><td>b7</td><td>b6</td><td>b5</td><td>b4</td><td>b3</td><td>b2</td><td>b1</td><td>b0</td></tr>
<tr><td>
<select id="comboBox1">
<option>0</option>
<option>1</option>
</select>
</td><td width="20px">
<select id="comboBox2">
<option>0</option>
<option>1</option>
</select>

</td>
<td>
<select id="comboBox3">
<option>0</option>
<option>1</option>
</select>
</td>

<td>
<select id="comboBox4">
<option>0</option>
<option>1</option>
</select>
</td>

<td>
<select id="comboBox5">
<option>0</option>
<option>1</option>
</select>
</td>

<td>
<select id="comboBox6">
<option>0</option>
<option>1</option>
</select>
</td>

<td>
<select id="comboBox7">
<option>0</option>
<option>1</option>
</select>
</td>

<td>
<select id="comboBox8">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>

</table>

and then add the initialization of them, and enable each one to call a JavaScript function named changeA(). This will call the function whenever there is a change of value in the combo box:

$(document).ready(function () {

            $("#comboBox1").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });

            $("#comboBox2").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });

            $("#comboBox3").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });
            $("#comboBox4").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });
            $("#comboBox5").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });
            $("#comboBox6").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });
            $("#comboBox7").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });
            $("#comboBox8").width(60).kendoComboBox({
                change: function (e) {
                    changeA();
                }
            });

        });

and then finally we add the event function to get the values from the combo boxes, and then fire the hidden button (which then posts the values to the Controller):

<script>
function changeA() {
var e = document.getElementById("comboBox1");
var comb = e.options[e.selectedIndex].text;
document.getElementById("b7").value = comb;

e = document.getElementById("comboBox2");
comb = e.options[e.selectedIndex].text;
document.getElementById("b6").value = comb;

e = document.getElementById("comboBox3");
comb = e.options[e.selectedIndex].text;
document.getElementById("b5").value = comb;

e = document.getElementById("comboBox4");
comb = e.options[e.selectedIndex].text;
document.getElementById("b4").value = comb;

e = document.getElementById("comboBox5");
comb = e.options[e.selectedIndex].text;
document.getElementById("b3").value = comb;

e = document.getElementById("comboBox6");
comb = e.options[e.selectedIndex].text;
document.getElementById("b2").value = comb;

e = document.getElementById("comboBox7");
comb = e.options[e.selectedIndex].text;
document.getElementById("b1").value = comb;

e = document.getElementById("comboBox8");
comb = e.options[e.selectedIndex].text;
document.getElementById("b0").value = comb;

var oSubmitButton = document.getElementById('submit');

oSubmitButton.click();

}

If you want to view the result it is here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s