The second assignment consisted of the two exercises from Lab 1. That second assignment is due this Wednesday, February 4. You can put your completed work in the cs271 directory inside your www directory, and add a link (or links) to your home page for cs271. I will take it as a matter of honor that you will not look at the source code for other people's work before the due date.
The third assignment is another pair of JavaScript exercises. Both exercises involve using the Date class that is built into JavaScript. We have already looked at this object in class, and any other information that you need to do this assignment should be covered in class on Monday, February 2. This third assignment is due on Monday, February 9, and you should have your solutions added to your cs271 web directory and linked to your cs271 home page by that date. (Alternatively, you might want to put your solution to Exercise 1 directly on the home page.)
For your first exercise, you should make a web page that displays a "countdown timer" that displays the number of days, hours, minutes, and seconds to some particular date in the future (presumably within the next year; otherwise, you should display years as well). You can use any date you like, such as the start of Spring break, graduation day, or your 21-st birthday. You can display the time as a simple string such as "Time to Spring break: 39 days, 4 hours, 27 minutes, and 23 seconds", or you can make the display fancier if you want.
You should write a function that sets the display to the correct value at the time the function is called. Any HTML element whose content you want to change should have an id attribute, so that you can change the content by assigning the new content to document.getElementById(theID).innerHTML. If the value of specialDay is the Date object representing the time to which you are counting down, you can get the number of milliseconds until that time with
var millis = specialDay - (new Date());
JavaScript does a fancy Date-to-number conversion to make this work. From this value, you can compute the number of seconds, minutes, hours, and days. (Note: "/" in JavaScript always does real number division; to get the integer quotient of a over b, you can use Math.floor(a/b). You can still get the remainder with a % b.)
Once you have your update function, you need to make sure that that function is called once per second. You can do this using the setInterval function:
setInterval( func, millis );
This starts a repeating timer that will call the function func every millis milliseconds. The setInterval function is the foundation of JavaScript animations, and we will be seeing more of it later.
For your second exercise, you should write a JavaScript function that writes to the document the HTML code for a one-month calendar. One of the days of the month should be hilited. The function should have one parameter of type Date. The month and year of that Date determines which calendar is displayed, and the date of the Date determines which day of the month is hilited. You can include a <style> section in the HTML file to specify the styles for the cells of the table. The calendar should look more or less like mine, shown below. We will discuss in class some ideas for writing this function.
In the body of your page, you should include a one-line script that calls your function to display a calendar for the current day. (That is, pass "new Date()" as the parameter when you call the function.)Here is what my calendar looked like when run with a date of December 25, 2009:
| Dec, 2009 | ||||||
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | ||
And below this paragraph is the HTML code that produces this calendar. Your function will have to write this sort of code to the document. Note that the entity " " represents a "non-breaking space." It is used here in empty cells of the calendar since without it, the cell might not have a border. Note the use of "<th>" and "<td>". These are mostly equivalent. ("TH" stands for "table heading" and "TD" for table data, but they both just stand for items in the table.) I use them here to apply different styles to different parts of the table. And note that "colspan=7" in the first row of the table makes that cell extend across 7 table columns. If you look at the <td> for the 25-th, you'll note that it has class='today'. This is used to apply the pink background to that cell of the table.
<table cellspacing=0 cellpadding=2 border=2> <tr><th colspan=7>Dec, 2009</th></tr> <tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr> <tr><td> </td><td> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td> <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td class='today'>25</td><td>26</td> <tr><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td> </td><td> </td> </table>