The purpose of this exercise is further exploration of computer programming in JavaScript. In particular, we will examine the use of variables, expressions, and conditionals. We will also study the use of HTML forms and random number generators.
As usual, you will be asked to record information on a separate
sheet of paper, to be handed in at the end of the lab.
Step 1: Use your browser to view the file Expressions.html at http://www.mcs.drexel.edu/~jpopyack/IntroCS/HW/HW8/Expressions.html . This worksheet is designed to generate random arithmetic expressions for the user to evaluate. Answers can be checked for correctness. Because of the difficulty of calculating floating-point divisions accurately, the arithmetic expressions generated contain only "+", "-", and "*" operators.
Step 2: Examine the content of the page. There is a button labeled "Generate New Problem" and a text area beneath it which says "Evaluate this expression:" The text area should be empty - the text area is an output region, which means that values output by the JavaScript program are displayed in it.
Step 3: Click the "Generate New Problem" button.
Observe the text displayed in the output region. Record this text on your lab sheet.
What do you think the value of the expression is? Record your guess on your lab sheet.
Now enter your guess in the text box labeled "Enter your answer here:" and click the "Check Answer" button. The result is displayed in the text area labeled "Outcome:". Record the result on your lab sheet.
Step 4: If your guess was incorrect, figure out what you did wrong and record an explanation before you proceed further.
Step 5:Continue generating new problems, guessing and checking the answers, and recording your results (i.e, Steps 3-4) until you have done at least 5 problems and gotten at least 3 in a row correct.
The Expressions.html worksheet was created using an HTML form, surrounded by <FORM> ... </FORM> tags.
Step 1: Save a copy of the source code on your own machine so that you can modify it. (As usual, do this by choosing "View Source", then copying and pasting into a blank document on your text editor.)
Step 2: Find the <FORM> area of the Expressions.html page. Inside this area are four <INPUT> definitions and two <TEXTAREA> definitions. The <TEXTAREA> definitions are for displaying output. The <INPUT> definitions are for accepting user input, either from the keyboard or by a mouse click.
Step 3: The general form for an input item is
<INPUT TYPE=type NAME=name VALUE=value ... >
There are two input items with TYPE="button". What are the values of their NAME and VALUE fields? Record your answers on your lab sheet.
What do you think will happen if you change the VALUE field of one of these button items? Record your answer on your lab sheet, then make the change, reload the file in your browser, and describe the outcome on your lab sheet.
Step 4: There is one input item with TYPE="number". What are the values of its NAME, VALUE and SIZE fields? Record your answers on your lab sheet.
What do you think will happen if you change the SIZE field to 50? Record your answer on your lab sheet, then make the change, reload the file in your browser, and describe the outcome on your lab sheet.
There is another input item with TYPE="hidden". Notice this item does not cause anything to appear on the screen - it really is hidden. Its value has been established in the GenerateProblem function. Although this value is never made visible, it is available for use. It is used to hold the correct value of the expression so that the guess you enter can be compared to it.
Step 5: There are two <TEXTAREA> items. What are the values of their NAME fields? Record your answers on your lab sheet.
Step 6: What do you think will happen if you change the values of the ROWS and COLS fields in one of these items? Record your answer, make the change, reload the file, and describe the outcome on your lab sheet.
Step 7: Examine the input button with NAME="Check". Notice the entry that says onclick="CheckAnswer(this.form)". This means that when the button is clicked, a function called CheckAnswer is executed. The argument this.form tells CheckAnswer that it will be applied to the current form.
The other input button also contains an onclick entry. What function is called when that button is clicked? Record your answer on your lab sheet.
Step 8: Find the definition of function CheckAnswer in the <HEAD> section. This function compares the value entered by the user with the (hidden) value of the correct answer and displays a message in the outcome area.
The value of the correct answer is referred to as form.answer.value in this function. This means that the current form has a property called answer and answer itself has a property called value. The property called answer is actually the one defined with the "hidden input" statement
<INPUT TYPE="hidden" NAME="answer">.
How do you think the value of n (defined with the <INPUT TYPE="number" NAME="n" SIZE=15> statement) is referred to in this function? Record your answer on your lab sheet.
Step 9: The if statement checks whether the value the user typed (n) equals the correct value (answer). How do you think you can modify the if statement so that instead of printing "CORRECT" it prints "RIGHT!" or "Nice going, champ!" or some other encouraging message when the answer is correct? Record your answer, make the change, reload the file, and describe the outcome on your lab sheet.
NOTES: In this section, we have examined a typical <FORM> with buttons, input and output elements ,and a user-defined function (CheckAnswer) which serves as an event to be executed when a button is clicked. Defining a suitable function is probably the most complex aspect of JavaScript we will cover in this course. The other user-defined function in this sheet (GenerateProblem) is more involved than CheckAnswer.
Step 1: Use your browser to view the file random.html at http://www.mcs.drexel.edu/~jpopyack/IntroCS/HW/HW8/random.html . This worksheet is designed to generate several random items - a random number, a random digit, the roll of two simulated dice, and the flip of a simulated coin. Save a copy of the source code on your own machine so that you can modify it.
Step 2: JavaScript's Math object has a method called random() which will return a different random value in the range (0,1) each time it is called. For instance, the statement
may produce the output
when the page is loaded. When re-loaded, it may produce the output
Random numbers are useful for simulating random processes.
Suppose you wish to simulate a random coin flip with a fair coin (that is, roughly half the time, the word "Heads" should be produced, with "Tails" produced otherwise.) This is done in the random.html worksheet by generating a random value in the interval (0,1) and checking whether it falls in the lower half interval (0,0.5) or upper half interval (0.5,1).
Reload the worksheet 20 times, and record the occurrences of Heads or Tails at the bottom of the sheet as it is reloaded each time. How many total occurrences of Heads and Tails did you get?
Step 3: Examine the source code for the file random.html. Locate the 'random coin flip' code that generates "Heads" or "Tails". Record this code on your lab sheet.
Step 4: How do you think you can simulate the flip of an unfair coin, that generates "Heads" 3/4 of the time and "Tails" only 1/4 of the time? Record your answer, make the change, reload the file another 20 times, and record the occurrences of Heads or Tails again.
How did your results differ from the previous ones?
Homework:
The next assignment will be posted shortly.
Reading:
p.66-71 Expressions, Comments, if...else, var, function,
return
p. 83 Comparisons
Chapter 8, p.124-134 Input Forms