With the introduction of the mouse as input tool the event driven
programming won an outstanding meaning in the realization of applications.Programming input sequences and loops for the repetition of tasks in up-to-
date programs is no more accepted by the users.
Old style programming
To illustrate this I realized a HTML page this way of programming as we
would have it done in beginning of the 80's (at that time in Microsoft basic on
Apple II computers and with line numbers and goto).
// calc prime factors
var inputText, outputText;
var prime; // try this factor (only primes will match!)
var number; // product of the remaining factors
while (true) {
outputText = "";
inputText = window.prompt("Please enter a number (or 0 to exit):", "")
if ((inputText == null) || (inputText.length == 0) || (inputText == "0"))
break;
prime = 2; // start with 2
number = parseInt(inputText);
while ((number > 1) && (prime * prime <= number)) {
if (number % prime != 0) {
// try the next factor (slowly)
prime += 1;
} else {
// found a factor !
outputText = outputText + " " + prime;
number = number / prime;
} // if
} // while
if (number > 1) {
// the last factor (a prime) is here.
outputText = outputText + " " + number;
}
window.alert("The factors of " + inputText + " are:" + outputText);
} // while
http://www.mathertel.de/AjaxEngine/S01_AsyncSamples/CalcFactorsOld.htm
Do you expect that web applications are realized in such a way or that they are
present in this way the user? - I don’t! Those times are over luckily.
Old style programming using HTML
Even if one really uses HTML as the in- and output formula the situation
doesn’t really change:
The JavaScript coding behind this kind of application is almost the same. The
big difference is that instead of coding menus or loops with requests for user
input we find an event driven approach.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Prime factors calculator</title>
</head>
<body>
<h1>Prime factors calculator</h1>
<table>
<tbody>
<tr>
<th><label for="inputField">Please enter a number:</label></th>
<td><input id="inputField"> <input type="button" value="Calc"
onclick="CalcPrimeFactors()"
id="Button1" name="Button1"></td>
</tr>
<tr>
<th><label for="outputField">The factors are:</label></th>
<td><input id="outputField" size="60" disabled="disabled"></td>
</tr>
</tbody>
</table>
<h3>Hint:</h3>
<p>try 12313123123123 or 12313123123123123123 for long running calculations ! </p>
<script type="text/javascript">
// calc prime factors
function CalcPrimeFactors() {
var inputText, outputText;
var prime; // try this factor (only primes will match!)
var number; // product of the remaining factors
document.getElementById("outputField").value = "wait...";
outputText = "";
inputText = document.getElementById("inputField").value;
if ((inputText == null) || (inputText.length == 0) || (inputText == "0"))
return;
prime = 2; // start with 2
number = parseInt(inputText);
while ((number > 1) && (prime * prime <= number)) {
if (number % prime != 0) {
// try the next factor (slowly)
prime += 1;
} else {
// found a factor !
outputText = outputText + " " + prime;
number = number / prime;
} // if
} // while
if (number > 1) {
// the last factor (a prime) is here.
outputText = outputText + " " + number;
}
document.getElementById("outputField").value = outputText;
} // CalcPrimeFactors
</script>
<hr />
<p>This sample uses HTML and Javascript synchronously.</p>
<p>This page is part of the <a
href="http://ajaxaspects.blogspot.com/">http://ajaxaspects.blogspot.com/</a>
project.</p>
<hr />
</body>
</html>
http://www.mathertel.de/AjaxEngine/S01_AsyncSamples/CalcFactorsClient.htm
Tags:
JavaScript