Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner JavaScript help(functions)

    I'm working on a homework assignment that asks me recreate the calender from [URL="http://www.refdesk.com"]. I need to put the scripts on a separate js file in order to this. This is a homework assignment so I'm not looking for the answers, I'm just looking for some tips that might help me out. Here is what I have so far.

    JavaScript-

    Code:
    function initialize()
    {
        buildCal();
        updateCalender();
    }
    
    var themonths = ['January','February','March','April','May','June',
    'July','August','September','October','November','December'];
    
    var todaydate = new Date();
    var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
    var curyear = todaydate.getFullYear(); //get current year
    
    function buildCal(month, year, cM, cH, cDW, cD, border)
    {
    var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var dim = [31,0,31,30,31,30,31,31,30,31,30,31];
    
    var firstDaySelectedMonth = new Date(year, month - 1, 1); //DD replaced line to fix date bug when current day is 31st
    firstDaySelectedMonth.od=firstDaySelectedMonth.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
    
    var todaydate = new Date(); //DD added
    var scanfortoday = (year == todaydate.getFullYear() && month == todaydate.getMonth() + 1) ? todaydate.getDate() : 0; //DD added
    
    dim[1] = (((firstDaySelectedMonth.getFullYear() % 100 != 0) && (firstDaySelectedMonth.getFullYear() %4 == 0)) || (firstDaySelectedMonth.getFullYear() % 400 == 0)) ? 29 : 28;
    var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
    t += '<td colspan="7" align="center" class="' + cH + '">' + mn[month - 1] + ' - ' + year + '</td></tr><tr align="center">';
    for (s = 0; s < 7; s++)
    {
        t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s,1) + '</td>';
        t += '</tr><tr align="center">';
    }
    HTML-
    Code:
          <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="refdesk.css">
            <script src="refdesk.js"></script>
        </head>
    
        <body onload="initialize()">
        <!-- CALENDAR START -->
            <form>
                <div id="choicespace">
                    <p>(This will be replaced with JavaScript-generated HTML)</p>
                    <select onchange="updatecalendar(this.options)">
                    <script>
                    updatecalendar(theselection);
                    </script>
                    <option value="1" selected="yes">Current Month</option><option value="0">January 2013</option><option value="1">February 2013</option><option value="2">March 2013</option><option value="3">April 2013</option><option value="4">May 2013</option><option value="5">June 2013</option><option value="6">July 2013</option><option value="7">August 2013</option><option value="8">September 2013</option><option value="9">October 2013</option><option value="10">November 2013</option><option value="11">December 2013</option>
                    </select>
                </div>
                <div id="calendarspace">
                    <p>(This will be replaced with JavaScript-generated HTML)</p>
                </div>
            </form>
        </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    What are your questions? Please be specific.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Here's a hint for you: Don't use an array to get the number of days in a given month. Just complicates getting February correct.

    Instead do this:
    Code:
    var daysInMonth = ( new Date( theYear, theMonth+1, 0 ) ).getDate();
    So say you are looking for the number of days in February, 2016.

    You would use
    Code:
    var daysInMonth = ( new Date( 2016, 1+1, 0 ) ).getDate();
    Remember: Month numbers in JS are 0 to 11, so 1 is February.

    Essentialy, what you are doing is asking for DAY ZERO of March, 2016, instead. Since day numbers *DO* go from 1 to 31 in a month, day zero is the last day of the prior month.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by Old Pedant View Post
    Essentialy, what you are doing is asking for DAY ZERO of March, 2016, instead. Since day numbers *DO* go from 1 to 31 in a month, day zero is the last day of the prior month.
    Pretty slick! I had no idea you could do that. Thanks, Pedant.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestions. How do I use these functions on the HTML page? I'm having trouble using them correctly.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    A *GOOD* and modern pattern:
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="refdesk.css">
        </head>
        <body>
        <div>
            <form id="calendarForm">
                <select name="theYear">
                    <option>2000</option>
                    <option>2001</option>
                        ...
                    <option>2020</opton>
                </select>
                <select name="theMonth">
                    <option>Jan</option>
                       ...
                    <option>Dec</option>
                </select>
            </form>
            <div id="calendar"><!-- js will put the calendar here --></div>
        </div>
    
    <script type="text/javascript">
    (
      function( ) /* master anonymous function */
      {
          var form = document.getElementById("calendarForm");
          form.theYear = changeDate;
          form.theMonth = changeDate;
    
          function changeDate( )
          {
              var year = Number( form.theYear.options[form.theYear.selectedIndex].text );
              var month = form.theMonth.selectedIndex; // Jan==0, Feb==1, etc!!
              var firstDay = new Date( year, month, 1 );
              var lastDay = new Date( year, month+1, 0 );
              ... now build a calendar from firstDay to lastDay ...
          } // end of changeDate function
    
      } // end of master anonymous function
    
    )(); // self invoke anonymous function
    </script>
    </body>
    </html>
    If you are required to put the JS code in an external file, just put the code shown there in the external file but still call it from the location shown.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •