Microsoft Word Project docx

Project 3: JavaScript and the DOM 
Setup
Although this project has you run code in your browser, you need to have Node.js installed on 
your system to run the code quality checker. If you haven't already installed Node.js and the npm 
package manager, follow the installation instructions on the Node.js website. 
Once you have Node.js installed, create a directory 
project3
and extract the contents of the 
pọect3.zip file into the directory. 
You can fetch the code quality tool (also known as a "linter"), 
ESLint
, by running the following 
command in the 
project3
directory: 
npm install 
This will fetch ESLint into the 
node_modules
subdirectory. You will be able to run it on all the 
JavaScript files in 
project3
directory by running the command: 
npm run lint 
The code you submit should start with 
'use strict';
in each JavaScript file and running ESLint 
using the command above should not output any errors or warnings. Any errors or warnings 
will be used to deduct style points. 
Problem 1: JavaScript Date Picker (25 points)
For this problem, you will be implementing two interactive 
DatePicker
displays
using a 
combination of HTML, CSS, and JavaScript. 
In your 
project3
directory create a file 
DatePicker.js
that implements a JavaScript class 
named 
DatePicker
that can be used as in the following example: 
var datePicker = new DatePicker("div1", function (id, fixedDate) { 
console.log("DatePicker with id", id, 
"selected date:", fixedDate.month + "/" + fixedDate.day + "/" + fixedDate.year
); 
}); 
datePicker.render(new Date("July 4, 1776")); 
The constructor takes an argument consisting of the 
id
attribute for an existing div and a date 
selection callback function. When a date is selected the callback function should be called with 

the 
id
argument and an object containing the properties 
month
, 
day
, 
year
with the number 
encoding of the date (e.g. {month: 1, day: 30, year: 2016} is the encoding of January 30, 2016). 
The object should have a 
render
method that takes one argument consisting of a 
Date
object that 
selects a particular month (the object can refer to any time within the month). When 
render
is 
invoked it replaces the contents of the date picker's div with HTML that displays a small one-
month calendar such as those you might see in a travel reservation website: 
• 
The calendar must display the days of the selected month in a grid with one line for each 
week and one column for each day of the week. 
• 
Weeks run from Sunday on the left to Saturday on the right. The calendar must contain a 
header row displaying abbreviations for the days of the week, such as "Su", "Mo", etc. 
• 
Each day of the month is displayed as a number. 
• 
Some weeks when displayed in the date picker may contain days not in the selected 
month. These days should be displayed as the number in their respective month, but in a 
dimmed fashion to indicate they are not part of the current month. 
• 
All weeks displayed should contain at least one day belonging to the current month. Most 
months will display 5 weeks, but some months may display 4 or 6 depending on the days. 
The number of rows in your calendar should not be fixed. 
• 
The calendar must display the name of the month and year at the top of the calendar. In 
addition, it must display controls such as "<" and ">" that can be clicked to change the 
calendar's display to the previous or next month. 
• 
Clicking on a valid day of the current month should invoke the callback specified on the 
constructor with the arguments described above. Clicking on days belonging to months 
other than the current month should not invoke the callback. 
Once you have created the JavaScript class, we have provided a file 
datepicker.html
(you do not 
need to modify this html file) containing two empty div elements, plus a bit of JavaScript code 
that invokes the DatePicker class to display a date picker in each of the divs. One of the date 
pickers initially displays the current month and the other displays the month of January 2009. It 
should be possible to change the month of each date picker independently using the controls on 
that date picker. 
The provided html file has no styling so please create a stylesheet with the 
filename 
datepicker.css
to apply styling to the calendars and make them look nice. The 
corresponding link tag that requires the css file has already been added for you in the html file. 
Problem 2: Simple Table Template Processing (15 points)
Create a file 
TableTemplate.js
that implements a JavaScript class named 
TableTemplate
with 
a static method 
fillIn
. 
Requirements for the 
fillIn
method: 
• 
This method takes three arguments consisting of the 
id
attribute for a 

, a 
dictionary object, and a string 
columnName
. 
• 
The method must first examine the header row of the table and and replace any text of the 
form 
{{property}}
with the corresponding 
property
of the dictionary object. It then fills 

---

element around all of the 

elements in a table, if the 
table doesn't already contain a 

. 
Once your function has processed the entire table you should examine the 
visibility
property of 
the table's style and if it is 
hidden
update it to be 
visible
. 
Once you have created the JavaScript class, open the file 
test-table.html
in your browser. This 
file represents an HTML page containing a sample template table that that will run your code and 
shows what your output should look like. Do not modify this file. 
Additional Requirements, Hints, etc.

---

tải về 128.87 Kb.

Chia sẻ với bạn bè của bạn: