cis3.2 homework #3

sklar/spring-2006

  • The homework is due via EMAIL by 6AM on FRIDAY MARCH 17. Send it to: sklar@sci.brooklyn.cuny.edu

  • This homework is worth 5 points in total. The distribution of points is indicated below.

  • The homework involves writing several files that contain Javascript.

  • You will create the files using a text editor, e.g., Notepad, like in hw2.

  • Refer to the examples in the Javascript lecture notes posted on syllabus portion of the class web.

  • Here is PART I (DO THIS IN LAB ON MARCH 9):
    1. (0.5 points) First, create a simple page, naming the file with your last name followed by 3a.html. For example, my file will be called sklar3a.html. This will be very similar to the js1.html example in the lecture notes from March 6. Inside the file, make sure that you:
      • set the title of the web page (the title is what is displayed in the heading bar of the browser, not in the body);
      • from the body of the web page, display a message (e.g., "hello from the body") where the text color is something other than the default (usually black); and
      • from the head of the web page, create a script language=javascript section and from there, display a message (e.g., "hello from javascript") where the text is bold and larger than the default.

    2. (2 points) Create a second file, naming the file with your last name followed by 3b.html extension. For example, mine is: sklar3b.html.
      HINT: To make it easy to get started, feel free to copy the contents of your first file (e.g., sklar3a.html) into the second file (e.g., sklar3b.html) and then modify it, as described below.
      Inside the second file, do the following:
      • In the body section of the file, create a form (look at examples js4.html and js6.html from the lecture notes on March 6). The form should contain:
        • an input type="text" field and a prompt asking the user to enter their name in the text box; and
        • an input type="button" field for the user to click on.
        When the user clicks on the button, it should call a javascript function (which you'll write in the next step) called greet(). So, your button will have a modifier that contains: onclick="greet()".
      • In the head section of the file, create a Javascript function named greet(). The function should call the Javascript method alert to pop open a window and display the text hello (person's name) where "persons' name" is whatever the user entered in the text box that you created above. The function will get called when the user clicks on the button that you created above.

    HERE IS PART II: (DO THIS IN LAB ON MARCH 16 -- AFTER THE MARCH 13 LECTURE!!!)

    Go to: http://www.sci.brooklyn.cuny.edu/~sklar/cis3.2/hw/sample3.html which contains two new types of form inputs. So far, we have used the following input tags:

    The sample contains two new types of input tags: The code for the sample page is provided in a handout. For this second part of the assignment, you will copy pieces of this sample code and create checkboxes and radio boxes of your own.

    1. (0.5 points) Create a third file, naming the file with your last name followed by 3c.html extension. For example, mine is: sklar3c.html.
      HINT: To make it easy to get started, feel free to copy the contents of your second file (e.g., sklar3b.html) into the third file (e.g., sklar3c.html) and then modify it, as described below.
      Inside the third file, do the following:
      • Add an <input type="radio" ... > to the form. You must have at least 2 options for the user to check.
      • Add an <input type="checkbox" ... > to the form. You must have at least 3 options for the user to check.
      HINT: remember to look at the example from the handout -- copy the form tags from there and modify the names of the options!

    2. (1.0 point) Create your own Javascript function called processRadio() which will be invoked when the user clicks on a radio button. HINT: remember to look at the example from the handout -- copy the form tags from there and modify the processRadio() function to work with your options.

    3. (1.0 point) Create your own Javascript function called processBox() which will be invoked when the user clicks on a checkbox. HINT: remember to look at the example from the handout -- copy the form tags from there and modify the processBox() function to work with your options.

    SUBMIT YOUR HOMEWORK FILES!