The car crash that is JavaScript
A few years ago I predicted that JavaScript was finished, especially due to problems with browser incompatibility, and in the drive towards server-side processing.
How wrong was I? The code itself fossilised, but it created a model which allowed each of the elements on a page to be controlled. So while Java has always struggled to have any integration with browsers, it was its little brother - JavaScript - which has taken over as the only remaining way to properly control elements within a Web page. While Flash, too, has come and gone, JavaScript has grown up as the focus moves back to the client.
So it is the drive towards client-side processing that is now pushing JavaScript forward. For a while it looked like server-side processing would take over, and we'd end up with light weight font-end application, but it is now client side process which is winning. So we are now looking at Web applications which make very few call backs to servers, and where much of the processing is done in the browser.
So here's my little JavaScript code, which minimises call-backs and update scores on a page:
Here is the code (using MVC ASP.NET):
<script>
var scoreval = parseInt(@ViewData["random"])
var correct1 = 0, correct2 = 0, correct3 = 0, correct4 = 0, correct5 = 0, correct6 = 0;
var ans1 = "", ans2 = "", ans3 = "", ans4 = "", ans5 = "", ans6 = "";
ans1 = "@ViewBag.ans1";
ans2 = "@ViewBag.ans2";
ans3 = "@ViewBag.ans3";
ans4 = "@ViewBag.ans4";
ans5 = "@ViewBag.ans5";
ans6 = "@ViewBag.ans6";
correct1 = check('#user_answer1', '#user_answer2', '#t1', ans1);
correct2 = check('#user_answer2', '#user_answer3', '#t2', ans2);
correct3 = check('#user_answer3', '#user_answer4', '#t3', ans3);
correct4 = check('#user_answer4', '#user_answer5', '#t4', ans4);
correct5 = check('#user_answer5', '#user_answer6', '#t5', ans5);
correct6 = check('#user_answer6', '#user_answer1', '#t6', ans6);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
$('#user_answer1').focus();
$(document).on('keydown', function (e) {
var $target = $(e.target || e.srcElement);
if (e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea')) {
e.preventDefault();
}
})
function check(s1, s2, t1, ans) {
var str = $(s1).val();
var correct = 0;
if (str == ans) {
$(t1).attr("src", '/content/tick.gif');
$(s2).focus();
correct = 1;
}
else {
$(t1).attr("src", '/content/cross.gif');
correct = 0;
}
return correct;
}
$("#user_answer1").on("propertychange change keyup paste input", function () {
correct1 = check('#user_answer1', '#user_answer2', '#t1', ans1);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer2").on("propertychange change keyup paste input", function () {
correct2 = check('#user_answer2', '#user_answer3', '#t2', ans2);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer3").on("propertychange change keyup paste input", function () {
correct3 = check('#user_answer3', '#user_answer4', '#t3', ans3);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer4").on("propertychange change keyup paste input", function () {
correct4 = check('#user_answer4', '#user_answer5', '#t4', ans4);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer5").on("propertychange change keyup paste input", function () {
correct5 = check('#user_answer5', '#user_answer6', '#t5', ans5);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer6").on("propertychange change keyup paste input", function () {
correct6 = check('#user_answer6', '#user_answer1', '#t6', ans6);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
</script>
and once processed gives this:
<script>
var scoreval = parseInt(0)
var correct1 = 0, correct2 = 0, correct3 = 0, correct4 = 0, correct5 = 0, correct6 = 0;
var ans1 = "", ans2 = "", ans3 = "", ans4 = "", ans5 = "", ans6 = "";
ans1 = "aGFuZA==";
ans2 = "ZW5jcnlwdA==";
ans3 = "cGhhc2U=";
ans4 = "ZGlmZmljdWx0";
ans5 = "ZmlzaA==";
ans6 = "c29jaWFs";
correct1 = check('#user_answer1', '#user_answer2', '#t1', ans1);
correct2 = check('#user_answer2', '#user_answer3', '#t2', ans2);
correct3 = check('#user_answer3', '#user_answer4', '#t3', ans3);
correct4 = check('#user_answer4', '#user_answer5', '#t4', ans4);
correct5 = check('#user_answer5', '#user_answer6', '#t5', ans5);
correct6 = check('#user_answer6', '#user_answer1', '#t6', ans6);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
$('#user_answer1').focus();
$(document).on('keydown', function (e) {
var $target = $(e.target || e.srcElement);
if (e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea')) {
e.preventDefault();
}
})
function check(s1, s2, t1, ans) {
var str = $(s1).val();
var correct = 0;
if (str == ans) {
$(t1).attr("src", '/content/tick.gif');
$(s2).focus();
correct = 1;
}
else {
$(t1).attr("src", '/content/cross.gif');
correct = 0;
}
return correct;
}
$("#user_answer1").on("propertychange change keyup paste input", function () {
correct1 = check('#user_answer1', '#user_answer2', '#t1', ans1);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer2").on("propertychange change keyup paste input", function () {
correct2 = check('#user_answer2', '#user_answer3', '#t2', ans2);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer3").on("propertychange change keyup paste input", function () {
correct3 = check('#user_answer3', '#user_answer4', '#t3', ans3);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer4").on("propertychange change keyup paste input", function () {
correct4 = check('#user_answer4', '#user_answer5', '#t4', ans4);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer5").on("propertychange change keyup paste input", function () {
correct5 = check('#user_answer5', '#user_answer6', '#t5', ans5);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
$("#user_answer6").on("propertychange change keyup paste input", function () {
correct6 = check('#user_answer6', '#user_answer1', '#t6', ans6);
document.getElementById("score1").innerHTML = scoreval + correct1 + correct2 + correct3 + correct4 + correct5 + correct6;
});
</script>
If you want to try, click here.
Conclusion
I really dislike JavaScript ... it's old code and it has limited debugging opportunities, but it's the only show in town, as we move toward client-side processing. In the next few years we should see clients running fairly autonomously from servers, and where complete applications will be loaded into the browser.
With AngularJS we can extend HTML in new ways, and with node.js allow us to create new client side processing applications, all written, basically, with horrible old JavaScript.
C++ Golang Python Software Engineer in Embedded and server based systems
8 年Hi Bill, I agree on the fact that His is not a very nice last guzge because it is essentially hard to be productive with it for the debugging side of things, but it's not so accurate anymore these days given the progress made in this domain thanks to lozilla, Google and now Microsoft, massive push on JS engine/VM like V8, or the chrome debugger, which is a state of the art debugger to be honest. You are being a bit unspecific here. Also, Microsoft has developed and now released in open source licenses, Type Script which tackles the biggest issue with JS: loosly typeness instead of strong typeness, which combined with a very permissive syntax I.e. 3 different ways to create objects: prototype, new operator, and anonymous variables. It is a headache to force every developer to stick to a strict coding standard. This is why in my former company, IVS group in Paris, we were using , and almost imosed type script, which is a layer on top of JS, like Groovy is to Java. Trust me when you will have tried TypeScript, which ultimately is translated into JS at compile time, and you will get the benefit of a strict syntax, strong types checks enforced all the way from POD to complex types, you will get you faith back. I was used to thorough investigations and insight on a number of subjects from you. I think all you are missing here is just to start coding in Type Script every time you do web client stuffs, Microsoft asp.net MVC suposts it now, VS2015 supports it too. Just like one cannot say C is horrible and allows doing unsafe things. Microsoft has released secure C, a subset of ANSI C, which is more restrictive and also removes a lot of error prone C code caveats, and a lot more integrated static checks at preprocessing time, then safety checks in terms of memory management at compile time. Etc. The world has voted for trump and brexit but IT and software engineering is definitely going forward! JS and C included.
Cybersecurity Consultancy, Architecture, & Engineering
8 年Makes me think of video tape formats... VHS vs. Betamax... It's not always the best technology that wins.