Post
Ask Question

Using JavaScript to Display Moon Phase

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.             }  
  32.    
  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.             }  
  46.    
  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.             }  
  60.    
  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.             }  
  75.    
  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.             }  
  101.    
  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.             }  
  117.    
  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.             }  
  137.    
  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.             }  
  180.    
  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.


Similar Articles