Lab#6

fadoo

JS_programming_lab_fall2018.doc

Home >Computer Science homework help >Lab#6

CS1150 Javascript Programming Lab (2 weeks)

40 points

Purpose of Lab:

1. To learn how to write output statements and use message boxes

2. To practice using variables

3. To gain an understanding of conditional statements

Materials needed: text editor (Notepad or Notepad ++) ; web browser, preferably Chrome

Deliverables: This lab handout with answers recorded and all html documents.

Check List: (Upload all files to Pilot together, as yourname_js_lab.zip)

___ Answers to 7 questions(note that questions are bold-faced) name file yourname_jsanswers.doc

___ part1.html

____part2.html

____part3.html

____pseudocode or flowchart for temperature conversion lab, name file pseudo.doc

____part4.html

____part5a.html

____part5b.html

____(optional) partOXC1.html

____(optional) partOXC2.html

Part 1. Write the “Hello World” program using javascript.

1. Open Notepad and type the following javascript program. Save it with the name “part1.html.”

<html>

<head>

document.write("Hello World");

alert("Hello World");

</script>

</head>

<body>

</body>

</html>

2. Close the file, then double-click the file name to run the program. Your web browser should open and the words “Hello World” should be displayed in the window and in a separate message box. You may have to click the browser’s “Information Bar” to allow the application to run.

3. With your browser window remaining open, open your text file containing the Javascript code. (Pressing the CTRL and O keys will prompt for the file to open) Configure your windows so that they are side-by-side, as shown on the next page. You may need to click “OK” on the message box before performing this step.

This configuration will allow you to modify your code and run the updated version very easily, without the need to close and re-open windows as you switch from editing the code to testing the code. You should leave your windows configured this way while completing the rest of this lab exercise.

4. Within the text editor, change the words “Hello World” to “Hello, [your name]”. Save the changes (File->Save), then click the refresh button on your browser. Did your output change?

Which line of code is writing directly to the browser window, and which line of code is using the message box?

Add your name to the comments at the top of the file, save as part1.html and upload to Pilot.

When programming, it is often a matter of preference whether you write output directly to the browser window or in pop-up boxes.

Part 2. Using variables for input

Rather than putting your name in the code, you will now add a variable so that you can enter your name once the program is running. To do this, you will need to create a variable (a storage location) to hold your name.

1. Make a copy of part1.html and save it as part2.html. You will be editing part2.html

2. Delete the “Hello” output lines in your code. Then, add the following lines in their place:

var name;

name = prompt ("Please enter your name","");

document.write("Hello " + name);

3. Save the updated file, then refresh your browser window. Run (refresh) the program several times, testing what happens if you click “OK” without first entering a name, and what happens if you click “Cancel” instead of “OK.”

4. Replace your “Hello” code with the following, save the file, and run the program.

var x;

var y;

var answer;

x = prompt("Enter a number ");

y = prompt("Enter a number ");

document.write("You entered " + x + " and " + y);

document.write("<br>");

answer = prompt("Enter the sum of " + x + " and " + y);

document.write("You entered " + answer);

document.write(“<br>”);

After you run the program, clean up any spacing issues.

Debugging: If your program does not run, you will typically not see an error message displayed to the screen. If you are using Chrome, you may display error messages by following this procedure:

· Right click in white space in browser window

· Select Inspect element

· Select console

· The error may be displayed in red on the left. If it is not, click on the program file name (on the right). The error should be in the last line of code displayed.

If you still cannot see the error. Begin commenting out line by line(from bottom up) until you reach the line with the error.

5. Explain the purpose of the following line (if you’re not sure, remove the first occurrence of this line and see what happens).

document.write(“<br>”);

6. Now add these lines(below the last line of code) and save and run your program again.

var correctAnswer = x + y;

document.write("The correct answer is " + correctAnswer);

7. What was the “correct answer” that was displayed? How do you think the computer arrived at that answer?

8. Add these two lines of code just before the code you inserted for step #5, then save and run your program.

x = parseInt(x);

y = parseInt(y);

Is it now displaying the correct answer?

Add your name to the comments at the top of the file and save the program again as part2.html and upload it to Pilot.

Part 3. Conditionals (if statements)

1. In the program from Part 2, we have a variable storing the user’s answer and a variable storing the correct answer. We now want to add code so that a message is displayed indicating whether the user’s answer is right or wrong. To do this, delete the output line giving the correct answer, and then add the following code in its place:

if (answer == correctAnswer) {

document.write("That is correct!");

}

else {

document.write("That is not correct. The correct answer is " + correctAnswer);

}

2. Save and run your program several times to verify that it is working properly. Why is it important to run your program more than once to test if it works?

Add your name to the comments at the top of the file and save the program again as part3.html and upload it to Pilot.

Part 4. Putting it all together

a. Write the pseudo-code or create a flowchart for the program described below using Word and the correct flowchart symbols. Submit it as pseudo.doc to Pilot.

b. Using your pseudo-code or flow chart, write a program that converts a temperature (entered by the user) from Celsius to Fahrenheit or from Fahrenheit to Celsius. The user will specify which conversion should be carried out. Submit it as part4.html to Pilot.

The formula for converting to Celsius from Fahrenheit is:

CelsiusTemp = (temp – 32) * 5/9;

The formula for converting to Fahrenheit from Celsius is:

FahrenheitTemp = temp * 9/5 + 32;

Conversions that you should test:

· Enter 100, choose to convert to Fahrenheit. Result: 212

· Enter 32, choose to convert to Celsius. Result: 0

· Enter 212, choose to convert to Celsius. Result: 100

· Enter 75, choose to convert to Celsius. Result: 23.888888888889 (# of decimals may vary)

· Enter -40, choose either F or C. Result: -40 (-40 is the same in both scales)

Sample program runs (output) are shown on the following pages. You may choose to write your results in a message box rather than directly on the document.

Program run 1:

Program run 2:

Part 4 (code may vary)

Add your name to the comments at the top of the file and save as part4.html and upload to Pilot.

Note:

Part 5. Loops, Modifying counter-controlled loops

Download the JSLoopsLab.html file from the Pilot Dropbox.

1. Every loop must have at least one loop variable, and each loop variable must have these three steps associated with it: an initialization step, a loop test, and an update step. In this case, the loop variable is counter. Identify the specific lines of code that perform each of the three steps on this variable (use the line numbers that appear to the left of the code).

Initialization step is accomplished?

Loop test is accomplished?

Update step is accomplished?

2. What do you think would happen if the update step were not there? Check your answer by commenting out the update step and running the program. (Note: To “comment out” a line, just precede the line with //

3. Modify the loop test so that it is run ten times rather than 5. Write your new loop test here:

4. Change your initialization step so that counter = 1 to start with. Now, modify your loop test so that it is still run ten times. Write your new loop test here:

5. A for loop can be used in place of a while loop. The syntax for the for loop is:

for (initialization step; loop test; update step)

{

//loop body

}

Modify this program so that it uses a for loop rather than a while loop. Run it to be sure you get the expected result.

Add your name to the comments at the top of the file, save as part5a.html and upload to Pilot

6. Write a loop that counts backward starting with the number 10 down to the number 1. Display each number to the screen.

Add your name to the comments at the top of the file, save as part5b.html and upload to Pilot.

Part OXC1. Rock Paper Scissors (Optional Extra Credit)

In this section, you will write a JavaScript program to simulate a modified (simple) version of Rock-Paper-Scissors game. Here’s how the simplified Rock-Paper-Scissors game work. In this version of the game, there will be two players playing Rock-Paper-Scissors game for one time (single round with both players throw shapes at each other only once). Each player will get a turn to throw a shape (Rock, Paper or Scissors). Winner of the game is decided based on the shape throw by each player using the following criteria.

a. If the first player throws a Rock and the second player throws a Scissor, the first player wins. In other words, Rock defeats Scissors.

b. If the first player throws a Scissor and the second player throws a Paper, the first player wins. In other words, Scissors defeats Paper.

c. If the first player throws a Paper and the second player throws a Rock, the first player wins. In other words, Paper defeats Rock.

d. If both players throw the same shape, the game is tied.

Now create a copy of the “hello world” file from Part 1, remove the two lines of JavaScript code there and rename the copied file to partOXC1.html. In this exercise, you will edit partOXC1.html.

1. First, write JavaScript code to create a welcome screen that greets users with the following message. “Welcome to Simplified Rock-Paper-Scissors Game”.

2. Now write code to read inputs from the two users. Since we cannot read shapes as inputs, use the following letters to represent each shape. So in your program, you will read any one of the following letters and treat them as shapes.

- Use ‘R’ to represent the shape Rock

- Use ‘P’ to represent the shape Paper

- Use ‘S’ to represent the shape Scissors

3. Now implement the game logic described above (from steps a to d) to decide the winner of the Rock-Paper-Scissors game based on the inputs you read from the two users. (Hint: Use nested if-else statements to implement game logic)

4. Please print the two inputs you read and the winner of the game into the Web page.

5. Check whether your program works correctly using the following inputs:

- User 1 enters ‘R’, User 2 enters ‘S’. Result: User 1 wins

- User 1 enters ‘S’, User 2 enters ‘P’. Result: User 1 wins

- User 1 enters ‘P’, User 2 enters ‘R’. Result: User 1 wins

- User 1 enters ‘S’, User 2 enters ‘S’. Result: Draw

- User 1 enters ‘R’, User 2 enters ‘P’. Result: User 2 wins

- User 1 enters ‘S’, User 2 enters ‘R’. Result: User 2 wins

- User 1 enters ‘P’, User 2 enters ‘S’. Result: User 2 wins

Sample program runs are shown in the images below. Your program should produce similar outputs to the figures shown below.

Add your name to the comments at the top of the file, save as partOXC1.html and upload to Pilot.

Part OXC2. Rock Paper Scissors Tournament (Optional Extra Credit)

In this section, you will extend the Simple Rock-Paper-Scissors game program you wrote in Part 4 - Section B. Create a copy of partOXC1.html file and rename the copied file to partOXC2.html. In this exercise, you will edit partOXC2.html.

1. Now, the two players who play Rock-Paper-Scissors game compete in a tournament. In this tournament, the two players play against each other five times. Whoever wins most number of games wins the tournament. If both players win same number of games, the tournament ends up in a tie.

2. Change the welcome message of your Rock-Paper-Scissors game to “Welcome to Simplified Rock-Paper-Scissors Tournament”. You should show this screen only once to the user.

3. Modify your Simple Rock-Paper-Scissors game to run five times using a loop. At the end of the each run, you will write to the screen who won that round. Once the users compete for five times, you will decide who wins the tournament based on the number of wins by each user. Your program should produce outputs similar to the figures shown below. (Screenshots for the changes you should do in Part 5 - Section C are displayed).

Add your name to the comments at the top of the file, save as partOXC2.html and upload to Pilot.