Case: Star Dust Stories Data Files needed for this Case Problem: sd_map_txt

Subject:Computer SciencePrice:3.87 Bought7

Share With

Case: Star Dust Stories Data Files needed for this Case Problem: sd_map_txt.html, sd_mapper_txt.js, 2 CSS files, 28 PNG files Dr. Andrew Weiss of Thomas & Lee College maintains an astronomy page called Star Dusk Stories. One of the tools of the amateur stargazer is a planisphere, which is a handheld device composed of two flat disks: one disk shows a map of the constellations, and the other disk contains a window corresponding to the part of the sky that is visible at a given time and date. When a user rotates the second disk to the current date and time, the constellations that appear in the window correspond to the constellations currently visible in the nighttime sky. Dr. Weiss has asked for your help in writing a JavaScript program to display a planisphere showing the constellations visible at the current date and time. He has created 24 different sky chart image files, named sd_sky0.png through sd_sky23.png, that represent 24 different rotations of the nighttime sky. He has also created an image containing a transparent window through which a user can view a selected sky chart. A preview of the completed web page is shown in Figure below.

Steps:

1. Use your editor to open the sd_map_txt.html and sd_mapper_txt.js files from the html09 ? case1 folder. Enter your name and the date in the comment section of each file, and save them as sd_map.html and sd_mapper.js respectively.

2. Go to the sd_map.html file in your editor. Directly above the closing </head> tag, insert a script element that links the page to the sd_mapper.js file. Defer the loading of the script file until after the rest of the web page is loaded by the browser.

3. Study the contents of the file and then save your changes.

4. Go to the sd_mapper.js file in your editor. At the top of the file, insert a statement to apply your JavaScript code with strict usage.

5. Declare a variable named thisTime containing a Date object for February 3, 2018 at 3:15:28 a.m.

6. Use the toLocaleString() method to save the text of the thisTime variable in the timeStr variable.

7. Change the inner HTML code of the page element with the ID timestamp to the value of the timeStr variable.

8. Next, you will determine which sky map to show in the web page. First, create a variable named thisHour, using the getHours() method to extract the hour value from the thisTime variable.

9. Create a variable named thisMonth using the getMonth() method to extract the month number from the thisTime variable.

10. The number of the map to use with the given hour and month is calculated with the formula

    (2×month + hour) % 24

    where month is the value of the thisMonth variable and hour is the value of the thisHour variable. Store the value of this formula in the mapNum variable.

11. You will use JavaScript to write the HTML code for the inline element showing the sky image to use in the web page. Create a variable named imgStr that stores the following text string

    where Map is the value of the mapNum variable. (Hint: Use the + operator to combine text strings together and be sure to include the single quote character within the text strings.)

12. For the page element with the ID planisphere, use the insertAdjancentHTML() to insert the value of the imgStr variable directly after the element’s opening tag.

13. Add descriptive comments to the file, documenting your work.

14. Save your changes to the file and then open sd_map.html in your browser. Verify that your planisphere map and date and time resemble that shown in Figure 9-41.

15. Return to the sd_mapper.js file in your editor. Modify the command that creates the thisTime variable so that it uses the current date and time, whatever that may be.

16. Reload sd_map.html in your browser and verify that it shows the current date and time along with the star map for the sky at that moment.