Introduction

I wrote an article to calculate and display the Moon's phase using C#. Now, this article shows how to calculate and display the Moon's phase using JavaScript; the code for calculating the Moon's age in days (approximately).
moonage.gif
The code
  1. <!-- Moon phase by: Mostafa Kaisoun ([email protected]) -->
  2. <html>
  3. <head>
  4. <title >Moon age</title>
  5. <script type="text/javascript">
  6. var n=31;
  7. var feb;
  8. var leap;
  9. months = ["January","February","March","April","May","June",
  10. "July","August","September","October","November","December"];
  11. function Start()
  12. {
  13. FillYearCombo();
  14. FillMonthCombo();
  15. FillDayCombo();
  16. <!-- Display moon today -->
  17. getAge(MyForm);
  18. }
  19. <!-- Fill first combo with years from 2000 to 2020 -->
  20. function FillYearCombo()
  21. {
  22. for (var i=2000;i<2021;i++)
  23. {
  24. var optYear = new Option(i,i);
  25. document.getElementById("cmbYears").add(optYear, undefined);
  26. }
  27. <!-- Set current year to combo -->
  28. var curDate = new Date();
  29. var y = curDate.getFullYear();
  30. MyForm.YearCombo.value=y;
  31. }
  33. <!-- Fill second combo with months array -->
  34. function FillMonthCombo()
  35. {
  36. for (var i=0;i<months.length;i++)
  37. {
  38. var optMonth = new Option(months[i],i+1);
  39. document.getElementById("cmbMonths").add(optMonth, undefined);
  40. }
  41. <!-- Set current month to combo
  42. var curDate = new Date();
  43. var m = curDate.getMonth();
  44. MyForm.MonthCombo.value=m+1;
  45. }
  47. <!-- Fill third combo with days of selected month -->
  48. function FillDayCombo()
  49. {
  50. for (var i=1;i<n+1;i++)
  51. {
  52. var optDay = new Option(i,i);
  53. document.getElementById("cmbDays").add(optDay, undefined);
  54. }
  55. <!-- Set current day to combo -->
  56. var curDate = new Date();
  57. var d = curDate.getDate();
  58. MyForm.DayCombo.value=d;
  59. }
  61. <!-- Test selected year if it is leap or not -->
  62. function TestLeap()
  63. {
  64. var y=parseInt(MyForm.YearCombo.value);
  65. if ((y%4)==0)
  66. {
  67. if ((y%100)==0 && (y%400)!=0)
  68. leap=false;
  69. else
  70. leap=true;
  71. }
  72. else
  73. leap=false;
  74. }
  76. <!-- Get days of selected month then fill third combo again -->
  77. function GetDays(MonthCombo)
  78. {
  79. var m=parseInt(MyForm.MonthCombo.value);
  80. switch(m)
  81. {
  82. case 2:
  83. TestLeap();
  84. if (leap)
  85. feb=29;
  86. else
  87. feb=28;
  88. n=feb;
  89. break;
  90. case 4:
  91. case 6:
  92. case 9:
  93. case 11:
  94. n=30;
  95. break;
  96. default:n=31;
  97. }
  98. document.forms["MyForm"].elements["DayCombo"].options.length=0;
  99. FillDayCombo();
  100. }
  102. <!-- Get days of February month when select year then fill third combo again -->
  103. function FebruaryDays(YearCombo)
  104. {
  105. TestLeap();
  106. if (leap)
  107. feb=29;
  108. else
  109. feb=28;
  110. if(MyForm.MonthCombo.value==2)
  111. {
  112. n=feb;
  113. document.forms["MyForm"].elements["DayCombo"].options.length=0;
  114. FillDayCombo();
  115. }
  116. }
  118. <!-- Calculate moon age -->
  119. function moonage(d, m, y)
  120. {
  121. var j;
  122. var ip, ag;
  123. j = juliandate(d, m, y);
  124. ip = (j + 4.867) / 29.53059;
  125. ip = ip - Math.floor(ip);
  126. if(ip < 0.5)
  127. {
  128. ag = ip * 29.53059 + 29.53059 / 2;
  129. }
  130. else
  131. {
  132. ag = ip * 29.53059 - 29.53059 / 2;
  133. }
  134. ag = Math.floor(ag) + 1;
  135. return ag;
  136. }
  138. <!-- Calculate Julian date -->
  139. function juliandate ( d, m, y )
  140. {
  141. var d, m, y;
  142. var mm, yy;
  143. var k1, k2, k3;
  144. var j;
  145. yy = y - Math.floor((12 - m) / 10);
  146. mm = m + 9;
  147. if (mm >= 12)
  148. {
  149. mm = mm - 12;
  150. }
  151. k1 = Math.floor(365.25 * (yy + 4712));
  152. k2 = Math.floor(30.6001 * mm + 0.5);
  153. k3 = Math.floor(Math.floor((yy / 100) + 49) * 0.75) - 38;
  154. j = k1 + k2 + d + 59;
  155. if (j > 2299160)
  156. {
  157. j = j - k3;
  158. }
  159. return j ;
  160. }
  161. <!-- Display moon age -->
  162. function getAge(form)
  163. {
  164. var imgName;
  165. var d=parseInt(MyForm.DayCombo.value);
  166. var m=parseInt(MyForm.MonthCombo.value);
  167. var y=parseInt(MyForm.YearCombo.value);
  168. var ag=moonage(d, m, y);
  169. if(ag==1)
  170. {
  171. form.age.value=ag.toString()+" day";
  172. }
  173. else
  174. {
  175. form.age.value=ag.toString()+" days";
  176. }
  177. var imgName="images/phase"+ag.toString()+".bmp";
  178. ShowMoonPhase(imgName);
  179. }
  181. <!-- Display moon phase -->
  182. function ShowMoonPhase(imgFile)
  183. {
  184. document["MoonImage"].src=imgFile;
  185. }
  186. </script>
  187. </head>
  188. <body onload="Start();">
  189. <form name="MyForm" method="post">
  190. <h2><p align=center> Moon phase </h2>
  191. <p align=center> by: Mostafa Kaisoun ([email protected])
  192. <p align=center>
  193. Select year:
  194. <select id="cmbYears" name="YearCombo" onchange="FebruaryDays(this);">
  195. </select>
  196. Select month:
  197. <select id="cmbMonths" name="MonthCombo" onchange="GetDays(this);">
  198. </select>
  199. Select day:
  200. <select id="cmbDays" name="DayCombo";>
  201. </select>
  202. <p align=center> Click button to get moon phase:
  203. <input name="moon" value="Moon phase" type=button onClick="getAge(MyForm)";>
  204. <p align=center> <b>Moon age:</b>
  205. <input name="age" readonly size=10>
  206. <p align=center> <b>Moon phase:</b>
  207. <img id="PhaseImage" name="MoonImage" src="images/phase0.bmp";>
  208. </form>
  209. </body>
  210. </html>

Summary

I hope this article is useful. If you have any idea, please tell me.