Need some help with a JavaScript project

I've been taking an online JavaScript class at my college for about 10 weeks now. We've covered 5 chapters of a textbook so far, and while I was doing pretty good at understanding how to do things, now I just feel like it's a foreign language. Things just stopped making sense about two weeks ago, and now I'm tearing my hair out in confusion and frustration. The teacher is of minimal availability and help, and nobody in the class uses the message board we have available. I almost feel like dropping the class because it's so frustrating, but I really want to learn how to do this stuff.

I'm terrible at functions, and this week's project is heavily reliant on a bunch of functions. I'm not looking for just the answer to the project...I'd really like it if somebody could just walk me through it so I can learn it and be able to do it on my own eventually. A tutor, so to speak. But really, any help anyone can give me would be much appreciated.

Okay, so here's the project details:

Create a page with a form for the user to enter a credit card expiration date. On the form there are 3 drop-down select elements for month, date, and year; and a button for submitting the form. The month element has the 12 month in English as options; the date element has 31 days; and the year element has 8 years beginning from the current year. Upon loading, all three select-box should be empty. When the user clicks the button, a thorough validation of the date should take place. A clearly worded alert will display if any of the box is empty, the selected date is prior to today’s date, or the date selected is not valid (such as February 29 on a non-leap year, or April 31, etc.)

My teacher gives the following functions for use in coding the program, but I haven't a clue what to do with them. Functions confuse me to no end...

Here are the functions used to load the 3 select boxes:

 

   1. loading the year box.  Whenever the page loads, it will always show a number of years starting from the current year.  This is achieved by the following function:

   function loadYears()
   {

//get the current year
       today= new Date()
       y=today.getFullYear()

//add the years to the year select box starting from the current year     
       for(i=y; i<=y+10; i++)
       document.forms['f1'].y.options[i-y+1] = new Option(i,i);
}

 

   2. The month select box is static since we always have the same months in a year.

 

   3. Since the number of days in a month varies by the month, the day select box is not loaded until a month is selected; this is done using an event handler in the select element onchange=”calcDays()”

 

Here is function calcDays():

 

function calcDays()
      {

//if the year box has no year selected, send focus to year box
                   if (document.forms['f1'].y.selectedIndex==0)
                   {
                        document.forms['f1'].y.focus()
                        return 0
                   }

//if the month box has no month selected, send focus to month box
                   if (document.forms['f1'].m.selectedIndex==0)
                   {
                        document.forms['f1'].m.focus()
                        return 0
                   }

//get the selected year and month values and then

//call function days to find out the correct days for the month
                   var y = document.forms['f1'].y.value
                   var m = document.forms['f1'].m.selectedIndex
                   var d = days(y, m)

//load the days into the day select box
                   showDays(d)
      }

 

   4. Here is how function days works:

 

function days(y, m)
      {
                   switch (m)
                   {
                              case 1:
                              case 3:
                              case 5:
                              case 7:
                              case 8:
                              case 10:
                              case 12: return 31; break;
                              case 4:
                              case 6:
                              case 9:
                              case 11: return 30; break;
                              case 2: return leapYear(y); break;
                   }
      }

For certain months, there are always 31 days or 30 days, regardless of which year it is.  For February, it is either 28 days or 29 days depending on if it is a leap year.

 

   5. Here is how leap year is determined:

 

function leapYear(y)
      {
                   if ((y % 4 == 0) && !((y % 100 == 0) && !(y % 400 == 0)))
                   {
                        return 29
                   }
                   
                   return 28
      }

The if condition for leap year is based on the definition of a leap year which can be found in most dictionaries.

 

   6. Here is the function that loads the calculated number of days into the day select box:

 

function showDays(d)
      {

//first, remove all options from the select box by setting its length to 0
                   document.forms['f1'].d.options.length = 0;

//add the first option as the word ‘day’
                   document.forms['f1'].d.options[0]= new Option("Day","Day");
      //add number of days d to the day select box.

//variable d is passed in as parameter         
                    for(i=1; i<=d; i++)
                    document.forms['f1'].d.options[i]= new Option(i,i);
      }