Mini-Lab 1: Getting Started with JavaScript


Introduction

In this mini-lab you will modify JavaScript functions to experiment with strings, numbers, variables, the + operator, and calling functions.

If your code isn't working as expected, try opening up Firefox's error console to check for (potentially) helpful error messages. If you get stuck, don't hesitate to ask the instructor or a teaching assistant for help.


Experimenting with Numbers and Strings:

  1. Copy the Getting Started with JavaScript web page to your COMP 105 workspace. You can do this in either of two ways:
  2. View the page source. Scroll down to the bottom third of the page, find where the BODY tag begins, and make sure you understand the HTML code there.
  3. Find the INPUT tag that creates a button. What function will get called when the user clicks on the button? Find that function up in the HEAD section, near the top of the page. (What you just found in the HEAD is called the function definition, whereas the reference to the function in the BODY is called a function call.)
  4. There are many statements in the function definition; all but one are "commented out" (enclosed in comments so they won't run). Based on your reading of the one statement that is not commented out, what do you think the program will do if you click on the "Run Experiment" button? Click on it to see if you were right.
  5. Uncomment the second alert statement in the function by removing the // symbols at the beginning of the line. (There will still be a comment to the right of the statement, at the end of the line.) What do you think the function will do now? Save the file and preview or reload the page, then click on the "Run Experiment" button to test your understanding. Update the comment at the end of the line to show what the output was.
  6. Now comment out both of the first two statements.
  7. In the first two statements, you displayed a string and a number. The next five statements will let you experiment with what the + operator does inside and outside strings, and when given two numbers, two strings, or a number and a string.

    For each of these statements, indicate what you think the output will be in the comment at the end of the line. Then uncomment the statements, either one-by-one or all at once, save and re-preview/reload the file, and click "Run Experiment", comparing the actual output values with the values you expected. For each value that is different from what you expected, look at it again and see if you can see why the output was the way it was. If not, ask a neighbor, instructor, or TA to explain it to you. Update the end-of-line comments if necessary, to reflect the actual output.


Experimenting with Variables:

Generate a Personalized Greeting:

  1. Find the "Generate Greeting" button in the BODY and its associated function definition in the HEAD. Read the function carefully to understand what it does. Note that while the alert function is a "Do Something" method (it does something for us), the prompt function is a "Return Something" method (it returns a value to us). That value is being stored in a variable, and is then being used in the next call to alert.
  2. Modify the function associated with the "Generate Greeting" button to provide a personalized greeting. Ask for a name, then use the name in an appropriate greeting. For example, if the user enters Mary , she should see an alert window that contains a message such as Hello Mary, I am glad to see you!.
    Tip: Don't forget that the "+" symbol can be used to combine two or more strings.
  3. Make sure your function has appropriate comments.

Mad Libs:

  1. Find the "Generate a Mad Lib" button in the BODY and its associated function definition in the HEAD. (A Mad Lib is a fun word game, in which you construct a nonsensical short story -- or in our case, just a sentence or two -- by filling in random words in certain spots. See the Wikipedia article for more information.)
  2. Modify the mad Lib function to construct a simple Mad Libs story. You should prompt for three words: one noun, one verb, and one adjective. Each word should be stored in an appropriately named variable. Then use an alert box to display a short story constructed using the words the user entered. A sample session might look like the following:
    [prompt] Please enter a noun.       [user enters] monkey
    [prompt] Please enter a verb.       [user enters] jump
    [prompt] Please enter an adjective. [user enters] happy
    
    [alert]  When I was walking to work today I saw a monkey!  It was
             very happy and it made me want to jump.
    OR
    [alert]  It's your turn to jump over the happy monkey.
    
    Be creative! If you wish, you may prompt for additional words and create a more involved story.
  3. Make sure your function has appropriate comments.

Publish to your web site:

  1. Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.
  2. Edit the main COMP 105 web page you created in the first lab and add a link to your new mini-lab page. Since this is just the first of many links you will be adding, you may want to create a heading and a list; for example,

    COMP 105 Assignments

    • Link to Mini-Lab 1
    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.
  3. Upload both your modified COMP 105 web page and your page for this Mini-Lab to the people.kzoo.edu server (remember that its host name for uploading is peopleftp.kzoo.edu). Test that the link to the Mini-Lab works on the server by clicking on it from your home page.