Unobtrusive Easter Calculator
5. The JavaScript
Join the Discussion
More of this Feature
Introduction Converting the JavaScript The HTML The Stylesheet How it Works
Offsite
Finally, we get to the JavaScript that does the actual calculation of when Easter will be in a selected year. The vast majority of this code is exactly the same as in the formula that we started with. All we have done is to convert the calculations into JavaScript by making the result fields for each of the calculations into local variables and assigning the calculated values to them. I have changed the variable names so as to avoid having a variable called l (since that would be extremely easy to get confused with a 1).
function easter() {
var year = document.getElementById('year').value;
var a = year % 19;
var b = Math.floor(year/100);
var c = year % 100;
var d = Math.floor(b/4);
var e = b % 4;
var f = Math.floor((b+8) / 25);
var g = Math.floor((b-f+1) / 3);
var h = (19*a + b - d - g + 15) % 30;
var i = Math.floor(c/4);
var j = c % 4;
var k = (32 + 2*e + 2*i - h - j) % 7;
var m = Math.floor((a + 11*h + 22*k) / 451);
var month = Math.floor((h + k - 7*m + 114) / 31);
var day = ((h + k - 7*m +114) % 31) + 1;
document.getElementById('month').value = easterM[month-3];
document.getElementById('day').value = day;
return false;
}
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById && document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
loaded('button',start);
function start() {document.getElementById('button').onclick=easter;}
Let's work through this code line by line to determine what we expect each of the statements to do. For the purpose of our examination of the code we will calculate when Easter day will occur in 2008. Remember that all of the divisions discard any fractions.
- a is created and set to a value of year modulo 19. When year is equal to 2008 dividing it by 19 gives 105 remainder 13 and so 13 the value assigned to a.
- b is the integer portion of the year divided by 100. For 2008 this gives us 20.
- c is year modulo 100 which gives us the 8 remainder from our prior calculation.
- d is b (20) divided by 4 which gives 5.
- e is the remainder from the previous calculation which in this instance is 0.
- f adds 8 to b to give 28 and then divides that by 25 which once we discard the remainder leaves us with 1.
- g subtracts f from b and then adds 1 and then divides the result by 3 which gives us 6.
- h multiplies 19 by a (13) giving 247 to which we then add b (20), subtract d (5), subtract g (6) and then add 15 giving 271. We then want the remainder after dividing by 30 which leaves 1.
- i is c (8) divided by 4 which gives 2.
- j is the remainder from the previous calculation which in this instance is 0.
- k starts by multiplying e (0) by 2 and then multiplies i (2) by 2 and then adds them to 32 before subtracting h (1) and j (0) giving 35. Taking the remainder after dividing by 7 gives 0.
- m starts by multiplying 11 by h (1) and 22 by k (0) and adds the results to a (13) giving 24. Dividing this by 451 gives 0.
- The month for Easter is then calculated from these values. First multiplying 7 by m (0) and subtracting that from h (1) plus k (0) and then adding 114 to give 115 which when divided by 31 gives 3. The third month is March and so we now know that Easter 2008 falls in March.
- The remainder from the prior calculation (22) has 1 added to it to tell us that Easter 2008 will be on the 23rd.
If we enter 2008 into the year field of our form, and get this JavaScript to run, we should end up with 23 March in the day and month fields.