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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Can't find difference between code

    I could not get my Javascript homework to work properly. I had to display a calendar with all 12 months (4 per row, 3 per column). Most of the code was provided; I just had to add a couple of functions to "build" the calendar and then link to the .js in the html code provided. I found someone else that had posted his solution, and his calendar displays properly. My calendar is 1 column with 12 rows. Using copy and paste, I determined that my error is in one of the 2 functions we had to add to the .js code. Here is his:
    Code:
    /*
       New Perspectives on JavaScript, 2nd Edition
       Tutorial 3
       Review Assignment
    
       Author: Rocco Cusumano
       Date:   February 10, 2014
    
       Function List:
       yearly(calendarDay)
          Creates the yearly calendar, highlighting the date 
          specified in the calendarDay parameter.
    
       writeMonthCell(calendarDay, currentTime)
          Writes the yearly table cell containing a monthly
          calendar.
    
       writeMonth(calendarDay, currentTime)
          Creates the calendar table for the month specified in the
          calendarDay parameter. The currentTime parameter stores the
          time value of the current date.
    
       writeMonthTitle(calendarDay)
          Writes the month name in the monthly table
    
       writeDayNames()
          Writes the weekday title rows in the calendar table
    
       daysInMonth(calendarDay)
          Returns the number of days in the month from calendarDay
    
       writeMonthDays(calendarDay, currentTime)
          Writes the daily rows in the monthly table, highlighting
          the date specified in the currentTime parameter.
    
       writeDay(weekDay, dayCount, calendarDay, currentTime)
          Write the opening and close table row tags and the table
          cell tag for an individual day in the calendar.
    
    */
    
    function yearly(calDate) 
    
    {
    	
    	
    	
    	if (calDate == null) calendarDay=new Date()
    	else calendarDay = new Date(calDate);
    	
    	var currentTime= calendarDay.getTime();
    	var thisYear= calendarDay.getFullYear();
    	document.write("<table id='yearly_table'><tr>");
    	document.write("<th id='yearly_title' colspan='4'>"); 
    	document.write(thisYear);
    	document.write("</th>");
    	document.write("</tr>");
    	
    	var monthNum = -1;
    	for (var i=1; i<=3; i++) 
    	{
    		document.write("<tr>")
    		
    		for (var j=1; j<=4; j++)
    		 {
    			monthNum++;
    			calendarDay.setDate(1);
    			calendarDay.setMonth(monthNum);
    			writeMonthCell(calendarDay, currentTime);	
    		 }
    	
    	}document.write("</tr>");
    	
    	
    	document.write("</table>")
    	
    	
    	
    }
    
    
    
    function writeMonthCell(calendarDay, currentTime) 
    {
    	document.write("<td class='yearly_months'>");
    	writeMonth(calendarDay, currentTime);
    	document.write("</td>");
    	
    }
    
    
    
    
    
    
    
    
    
    
    function writeMonth(calendarDay, currentTime) {
       document.write("<table class='monthly_table'>");
       writeMonthTitle(calendarDay);
       writeDayNames()
       writeMonthDays(calendarDay, currentTime);
       document.write("</table>");
    }
    
    function writeMonthTitle(calendarDay) {
       var monthName = new Array("January", "February", "March", "April", "May", 
       "June", "July", "August", "September", "October", "November", "December");
    
       var thisMonth=calendarDay.getMonth();
    
       document.write("<tr>");
       document.write("<th class='monthly_title' colspan='7'>");
       document.write(monthName[thisMonth]);
       document.write("</th>");
       document.write("</tr>");
    }
    
    function writeDayNames() {
       var dayName = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");  
       document.write("<tr>");
       for (var i=0;i<dayName.length;i++) {
          document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
       }
       document.write("</tr>");
    }
    
    function daysInMonth(calendarDay) {
       var thisYear = calendarDay.getFullYear();
       var thisMonth = calendarDay.getMonth();
       var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
       if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
             dayCount[1] = 29;
       }
       return dayCount[thisMonth];
    }
    
    function writeMonthDays(calendarDay, currentTime) {
    
       var weekDay = calendarDay.getDay();
    
       document.write("<tr>");
       for (var i=0; i < weekDay; i++) {
          document.write("<td></td>");
       }
    
       var totalDays = daysInMonth(calendarDay);
       for (var dayCount=1; dayCount<=totalDays; dayCount++) {
    
          calendarDay.setDate(dayCount);
          weekDay = calendarDay.getDay();
          writeDay(weekDay, dayCount, calendarDay, currentTime);
       }
       
       document.write("</tr>");
    }
    
    function writeDay(weekDay, dayCount, calendarDay, currentTime) {
       if (weekDay == 0) document.write("<tr>");
       if (calendarDay.getTime() == currentTime) {
          document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
       } else {
          document.write("<td class='monthly_dates'>"+dayCount+"</td>");
       }
       if (weekDay == 6) document.write("</tr>");
    }
    and here is mine:
    Code:
    /*
       New Perspectives on JavaScript, 2nd Edition
       Tutorial 3
       Review Assignment
    
       Author: Rocco Cusumano
       Date:   February 10, 2014
    
       Function List:
       yearly(calendarDay)
          Creates the yearly calendar, highlighting the date 
          specified in the calendarDay parameter.
    
       writeMonthCell(calendarDay, currentTime)
          Writes the yearly table cell containing a monthly
          calendar.
    
       writeMonth(calendarDay, currentTime)
          Creates the calendar table for the month specified in the
          calendarDay parameter. The currentTime parameter stores the
          time value of the current date.
    
       writeMonthTitle(calendarDay)
          Writes the month name in the monthly table
    
       writeDayNames()
          Writes the weekday title rows in the calendar table
    
       daysInMonth(calendarDay)
          Returns the number of days in the month from calendarDay
    
       writeMonthDays(calendarDay, currentTime)
          Writes the daily rows in the monthly table, highlighting
          the date specified in the currentTime parameter.
    
       writeDay(weekDay, dayCount, calendarDay, currentTime)
          Write the opening and close table row tags and the table
          cell tag for an individual day in the calendar.
    
    */
    
    function yearly(calDate) {
    	if (calDate == null) calendarDay = new Date()
    	else calendarDay = new Date(calDate);
    
    	var currentTime=calendarDay.getTime();
    	var thisYear=calendarDay.getFullYear();
    	document.write("<table*id='yearly_table'><tr>");
    	document.write("<th*id='yearly_title'*colspan='4'>");
    	document.write(thisYear);
    	document.write("</th>");
    	document.write("</tr>");
    	var monthNum=-1;
    	for (var i=1; i<4; i++) {
    		document.write("<tr>");
    			for (var j=1; j<5; j++) {
    			monthNum++;
    			calendarDay.setDate(1);
    			calendarDay.setMonth(monthNum);
    			writeMonthCell(calendarDay, currentTime);
    			}
    			document.write("</tr>");
    	}
    	document.write("</table>");
    }
    
    function writeMonthCell(calendarDay, currentTime) {
    	document.write("<td*class='yearly_months'>");
    	writeMonth(calendarDay, currentTime);
    	document.write("</td>");
    }
    
    function writeMonth(calendarDay, currentTime) {
       document.write("<table class='monthly_table'>");
       writeMonthTitle(calendarDay);
       writeDayNames()
       writeMonthDays(calendarDay, currentTime);
       document.write("</table>");
    }
    
    function writeMonthTitle(calendarDay) {
       var monthName = new Array("January", "February", "March", "April", "May", 
       "June", "July", "August", "September", "October", "November", "December");
    
       var thisMonth=calendarDay.getMonth();
    
       document.write("<tr>");
       document.write("<th class='monthly_title' colspan='7'>");
       document.write(monthName[thisMonth]);
       document.write("</th>");
       document.write("</tr>");
    }
    
    function writeDayNames() {
       var dayName = new Array("S","M","T","W","T","F","S");  
       document.write("<tr>");
       for (var i=0;i<dayName.length;i++) {
          document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
       }
       document.write("</tr>");
    }
    
    function daysInMonth(calendarDay) {
       var thisYear = calendarDay.getFullYear();
       var thisMonth = calendarDay.getMonth();
       var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
       if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
             dayCount[1] = 29;
       }
       return dayCount[thisMonth];
    }
    
    function writeMonthDays(calendarDay, currentTime) {
    
       var weekDay = calendarDay.getDay();
    
       document.write("<tr>");
       for (var i=0; i < weekDay; i++) {
          document.write("<td></td>");
       }
    
       var totalDays = daysInMonth(calendarDay);
       for (var dayCount=1; dayCount<=totalDays; dayCount++) {
    
          calendarDay.setDate(dayCount);
          weekDay = calendarDay.getDay();
          writeDay(weekDay, dayCount, calendarDay, currentTime);
       }
       
       document.write("</tr>");
    }
    
    function writeDay(weekDay, dayCount, calendarDay, currentTime) {
       if (weekDay == 0) document.write("<tr>");
       if (calendarDay.getTime() == currentTime) {
          document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
       } else {
          document.write("<td class='monthly_dates'>"+dayCount+"</td>");
       }
       if (weekDay == 6) document.write("</tr>");
    }
    The only 2 functions we had to add were the yearly function and the writeMonthCell function. Other than some spacing, I cannot find the difference in our code. I have read that a lot of the code from this book is incredibly wrong, but it is what we have to use. I know it is silly to have to learn incorrect methods, but I need a good grade in this class. I have already turned in the assignment for partial credit, but I would like to know what I did wrong. I am going to attach the full file, so you can see what it looks like in a browser. Thanks in advance!
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,076
    Thanks
    23
    Thanked 592 Times in 591 Posts
    The two lines in red have an asterisk instead of a space. Change that and Bob's your uncle.

    Code:
    function yearly(calDate) {
    	if (calDate == null) calendarDay = new Date()
    	else calendarDay = new Date(calDate);
    
    	var currentTime=calendarDay.getTime();
    	var thisYear=calendarDay.getFullYear();
    	document.write("<table*id='yearly_table'><tr>"); 
    	document.write("<th*id='yearly_title'*colspan='4'>");
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    RC102782 (02-11-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for pointing that out. I don't know where those came from, but they are not in my original text file. The calender is still displaying with the months stacked on top of one another instead of 4 months side-by-side. I can't figure it out.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    On a side note, I would edit my original post to fix that, but I am not allowed to edit my posts. If an admin could unlock that for me, I would appreciate it.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,076
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Sorry I missed one more.
    Code:
    function writeMonthCell(calendarDay, currentTime) {
    	document.write("<td*class='yearly_months'>");
    	writeMonth(calendarDay, currentTime);
    	document.write("</td>");
    }
    With those four removed I called the first function by adding this line:
    Code:
    ....
    			writeMonthCell(calendarDay, currentTime);
    			}
    			document.write("</tr>");
    	}
    	document.write("</table>");
    }
    yearly("Jan 01 2014"); // This starts the ball rolling
    function writeMonthCell(calendarDay, currentTime) {
    	document.write("<td class='yearly_months'>");
    ......
    P.S. You might want to give Sublime a look see http://www.sublimetext.com/
    seems to be the new free editor.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    RC102782 (02-11-2014)

  • #6
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I downloaded Sublime, and will give it a try. Thank you for the tip.

    I checked my code again, and those * are not there. I have spaces in mine. Even with your added line (yearly("Jan 01 2014"); -It actually messed up the spacing even more), my calendar is still displaying incorrectly. It is driving me crazy! For clarification, I am attaching the pic of my calendar display (WrongCal), and how it is supposed to display (CorrectCal). What is going on with this?

    Also, I have posted heavily on other forums (mainly car forums), but this forum surprised me. I can't believe how quickly people answered my questions, and in such a nice, helpful manner. I sincerely want to thank everyone for being so cool!
    Attached Thumbnails Attached Thumbnails Can't find difference between code-wrongcal.jpg   Can't find difference between code-correctcal.jpg  

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,076
    Thanks
    23
    Thanked 592 Times in 591 Posts
    @RC102782, post your code again below. What you posted above does have asterisks and does work correctly once they are turned into spaces, SO I believe you posted the wrong code.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ok, that is weird. I checked the code again. Copied and pasted it in the "Post Reply" window, and clicked preview. Even the code that was there from the textbook (that I didn't type-it was a data file supplied to me by the book publisher) had * between the th/tr tags and the class or id. I deleted the "space" where the * was showing in the "Post Reply" window, pressed the space bar, and it worked. I also had a problem where Notepad++ wouldn't highlight "var" sometimes (unless I deleted it and retyped it), and it would cause an error in Firefox and IE. I am thinking I have a buggy install of Notepad++. Some people suggested I try Sublime, so I will see what happens. I am not crazy, and even my wife tried to find the difference between the codes. Those asterisks were not there. Thank you for the help!


  •  

    Posting Permissions

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