Mini-Lab: JavaScript Objects


Introduction

In this mini-lab you will improve your Mad Libs and Calculator pages by displaying their output right on the page, rather than producing alert messages. You will also include a last modified date on each page.


Using the innerHTML property for Mad Libs output:

  1. Modify your Getting Started with JavaScript / Mad Libs web page to create a second horizontal rule (<hr>) at the bottom of your page (but before the </body tag).
  2. Put tags for an empty division (<div>) between the two horizontal rules. You will be putting your Mad Libs output in this division, so you need to give it a meaningful id attribute.
  3. Modify your Mad Libs function to write your output into your new (previously empty) division. Test your modification.
  4. What happens if you click the Generate a Mad Lib button several times in a row? Do you see several Mad Lib stories, or does each one replace the one that was there before? If they are replacing each other, modify your code so that you can see all of them. (What happens, though, if you reload the page?)

Adding a Last Modification Date to the Mad Libs web page:

  1. Put tags for an empty paragraph (<p>) or division (<div>) element after the last horizontal rule on your page (but still before the </body tag). You will be putting a last modification date here, so you need to give it a meaningful id attribute.
  2. Create a function in the script section at the top (HEAD) of your page that will print a statement to your new HTML element such as:

    This page was last updated on 12/13/2015 13:46:32.

    Your function should be preceded by a comment giving its purpose. For example, you might start out with:
        // Print last modification date.
        function setLastModDate()
        {
    
        }
        
    You can get the last modification date for a web page from its document object: document.lastModified. Print it to your new HTML element in the same way that you printed your Mad Libs output to an HTML div element above.
  3. Reload your page. Does your web page now include a last modification date?

    Note: Having a function definition is not enough, just as having the assembly instructions for a chair or a recipe for biscuits are not enough when you want to sit down and eat a snack. Someone has to execute the instructions: assemble the chair or cook the biscuits. In the same way, having a function definition is not enough; the program must call the function in order for it to be executed.

    In your previous examples, your functions have been called when the user clicked on a button, as the call was part of the button's onclick attribute. This new function, however, should always be called, without depending on a user action. To achieve this, add a script tag like the following at the bottom of your page (just before the </body tag):

        <script> setLastModDate(); </script>
        
    (The function call should match whatever name you gave your function in the previous step.)

Polish & Publish your first program:

  1. Polish:
  2. Publish: Upload your modified web page to the people.kzoo.edu server and test that it works there. (Remember that the host name for uploading is peopleftp.kzoo.edu.) If you worked in a team, each member of your group should do this, so each of you has a link to the new mini-lab page. Test that the link to the Mini-Lab works on the server by clicking on it from your home page.

Updating the Calculator program:

  1. As you did for your Mad Libs program above, modify your Calculator to write the output to the web page instead of to alert messages. Create an empty paragraph (<p>) or division (<div>) element between two horizontal rules at the bottom of the page, and write the Calculator results to that new element.

    In this case, repeatedly clicking the Calculator button should cause the previous results to disappear and be replaced by new results. (This is different from the Mad Libs case, where new Mad Libs stories should be appended to existing ones.)

  2. Add a last modification date to the end of the Calculator web page, just as you did for the Mad Libs page.

Polish & Publish your Calculator program:

  1. Polish:
  2. Publish: Upload your modified web page to the people.kzoo.edu server and test that it works there. (Remember that the host name for uploading is peopleftp.kzoo.edu.) If you worked in a team, each member of your group should do this, so each of you has a link to the new mini-lab page. Test that the link to the Mini-Lab works on the server by clicking on it from your home page.