The Babylonian method is described in Wikipedia here:
Babylonian method.
The following image shows how each step of a revised value for the square root is calculated.
We calculate the square root of S by using an inital guess and then revise that step by adding that guess with S divided by the guess and dividing by 2. The revised value is then used again as the new guess value. We stop iterating when the margin of error is below a given treshold. In the calculus, x is the step guess value and e is the error.
We start the calculation sample by adding in Bootstrap CSS and jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
</head>
<body>
<br />
<div class="container">
<h2>Find square root in JS with long division algorithm</h2>
<hr />
<!-- html code here -->
<h3>Estimate Square Root</h3> Enter Number:
<input id="num" value="700" size="2" type="text" />
<br />
<input id="submitButton" value="Calculate" type="submit" />
<br />
<br />
<div id="details"></div>
</div>
<script type="text/javascript">
"use strict";
var x = 25;
var guess = 9;
var marginOfError = 0.1;
var error = 0;
var counter = 0;
var htmlout = "";
$(document).ready(function() {
// function code goes here
function getGuess(g) {
console.log(g);
var newguess = (g + x / g) / 2;
return newguess;
}
$('#submitButton').click(function() {
// JavaScript code here
console.clear();
counter = 0;
x = parseFloat($('#num').val());
guess = Math.floor(Math.random() * x + 1);
error = Math.abs(guess * guess - x);
while (error >= marginOfError) {
guess = getGuess(guess)
error = Math.abs(guess * guess - x);
//console.log(guess);
counter += 1;
}
console.log('Count is ' + counter)
htmlout = "Square Root is " + guess.toFixed(2) + ". It took " + counter + " guesses";
$('#details').html(htmlout);
});
});
</script>
</body>
</html>
Let us clean up the code using classes in Ecmascript 6 (ES6) and use Traceur to support the ES6 syntax.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
</head>
<body>
<br />
<div class="container">
<h2>Find square root in JS with long division algorithm</h2>
<hr />
<!-- html code here -->
<h3>Estimate Square Root</h3> Enter Number:
<input id="num" value="700" size="2" type="text" />
<br />
<input id="submitButton" value="Calculate" type="submit" />
<br />
<br />
<div id="details"></div>
</div>
<script type="text/javascript">
"use strict";
class BabylonianSquareRootSolver {
constructor(x_0, S, marginOfError = 0.1){
this.S = S;
this.x_0 = x_0;
this.marginOfError = marginOfError;
}
getRevisedSquareRoot (x_n, S){
var revisedValue = (x_n + (S/x_n)) / 2;
return revisedValue;
}
calculateSqrt(){
var counter = 0;
var error = 0;
var guess = this.x_0;
error = Math.abs(this.x_0 * this.x_0 - S);
while (error >= marginOfError) {
guess = this.getRevisedSquareRoot(guess, this.S)
error = Math.abs(guess * guess - this.S);
console.log(guess);
counter += 1;
if (counter > 10)
break;
}
var result = {
S : this.S,
error : error,
iterations : counter,
root : guess
};
return result;
}
}
var S = 1;
var guess = Math.floor(Math.random()*S);
var marginOfError = 0.1;
var error = 0;
var counter = 0;
var htmlout = "";
$(document).ready(function() {
// function code goes here
$('#submitButton').click(function() {
// JavaScript code here
console.clear();
counter = 0;
S = parseFloat($('#num').val());
guess = Math.floor(Math.random()*S);
var bab = new BabylonianSquareRootSolver(guess, S);
console.log(bab);
var res = bab.calculateSqrt();
htmlout = "Square Root is approximated to " + res.root.toFixed(2) + ". It took " + res.iterations
+ " iterations. The error for this approximation is: " + res.error.toFixed(4);
$('#details').html(htmlout);
console.log(bab.calculateSqrt());
});
});
</script>
</body>
</html>
You can test out the code yourself with the following Plunk:
Babylonian method - Plunk Here is an image of the GUI:
To allow accuracy for calculating large numbers square roots, adjust the iteration break from 10 to 100 for exmple. Look for the line:
ReplyDeleteif (counter > 10)
break;
Adjust the condition to:
counter > 100