Here is PART I (DO THIS IN LAB ON MARCH 9):
- (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 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:
- <input type="button" ... >
- <input type="text" ... >
The sample contains two new types of input tags:
- <input type="checkbox" ... >
- <input type="radio" ... >
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.
- (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!
- (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.
- (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!
- The homework is due via EMAIL by 6AM on FRIDAY MARCH 17.
- Send it to: sklar@sci.brooklyn.cuny.edu
- Email me all three files: ...3a.html,
...3b.html and ...3c.html
(where you replace ... with your last name).