Mini-Lab: JavaScript Objects (Updating Mad Libs)

Introduction

In this mini-lab you will improve your page from the previous Mad Libs assignment by displaying its output right on the page, rather than producing alert messages. You will also include a last modified date on the 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:
   • Add formatting tags, as appropriate, so that your Mad Lib stories are readable and don't just run into each other.
   • Make sure your HTML source file is readable also, and includes all appropriate comments.
   • Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.
   • You may prompt for more words and create more interesting (or just sillier) stories if you like.
2. Publish:
   • Upload your modified web page to the comp105.cs.kzoo.edu server and test that it works there. If you worked in a team, each member of your group should do this, so each of you has a link to the modified page.
   • Test that the modifications show up on the server by clicking on the link from your home page there. (Make sure that your browser is looking at the page on comp105.cs.kzoo.edu, not your local version.)