Computer science lab

Norah1995

cs1150_lab6_fall2015.docx

Home >Computer Science homework help >Computer science lab

CS1150 Introduction to Computer Science

Lab #6 – JavaScript, 40 points

Objective:

To write JavaScript code. It is a programming language designed for use with web browsers and web sites. Typically, it is embedded in the middle of the HTML code of a web page.

Instructions:

Follow the instructions present in this document for each exercise. These instruction will guide you step by step to write JavaScript code.

When you are finished, create a zip folder as “firstname_lastname_lab6.zip”.

The zip file should contain:

· part1.html

· part2.html

· part3.html

· part4a.html

· part4b.html

· part5.html

· (optional): partOXC1.html

· (optional): partOXC2.html

· first_last_javascript_lab.doc (Simply rename this file, the one you are reading right now.)

Then, submit the zip file to Pilot.

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

Introduction:

You will need a PLAIN TEXT editor (I recommend Notepad++) for this assignment.

DO NOT USE MICROSOFT WORD. Attempting to do this assignment in Microsoft Word is a recipe for disaster.

Wikipedia article on JavaScript: http://en.wikipedia.org/wiki/JavaScript

Useful JavaScript Tutorial: http://www.w3schools.com/js/

JavaScript template code. This is the html code that you will use for exercises

Make sure to include appropriate comments to document your code.

The part that is actually JavaScript is in bold. The rest is the HTML “wrapper.”

<html>

<head>

<script language="javaScript">

// ***Enter Your Name Here

// Copy code here

</script>

</head>

<body>

</body>

</html>

Exercise 1: Using Variables For Input (4 points)

Goal: To use variables to store input from prompts.

1. Download the templateandloop.zip from Pilot. Extract the zip folder, you will find two

HTML files in it, template.html and JsLoops_Lab.html.

2. Make a copy of template.html and save it as part1.html. You will be editing part1.html

3. Replace all the code between <script language="javaScript"> and </script> with the following, save the file, and run the program.

var num1;

var num2;

var answer;

num1 = prompt("Enter a number ");

num2 = prompt("Enter a number ");

document.write("You entered " + num1 + " and " + num2);

document.write("<br>");

answer = prompt("Enter the sum of " + num1 + " and " + num2);

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.

4. 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>");

Write your theory of what the purpose is here, below this line. Make sure you have tested your hypothesis! Answer:

The occurrence document.write("<br>"); break the line.

5. Now add these lines (below the last line of code) and save and run your program again. Test at least 3 different combinations of inputs, and record what numbers you added together, and what the result was.

var sum = num1 + num2;

document.write("The sum is " + sum);

Test 1 :

num1=5

num2=5

sum=55

Test 2 :

num1=5

num2=9

sum=59

Test 3 :

num1=8

num2=4

sum=84

6. Was that actually correct for your inputs?

Was it the correct answer: No

Test 1: 10

Test 2: 14

Test 3: 12

7. How do you think the computer arrived at that answer?

Your explanation here:

In my opinion, I think because we put the wrong code or this program accustomed to shows this result when entered that code.

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

num1 = parseInt(num1);

num2 = parseInt(num2);

Is the program now displaying the actual correct answer? Why did this fix it?

Your explanation here:

Yes, the program shows the actual correct answer because the code we put there is correct.

Add your name to the comments in the JavaScript portion of the file and save the program again as part1.html. Include it in the zip file when you upload to Pilot.

Exercise 2: Using Conditionals (4 points)

1. In the program from Exercise 1, 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 == sum) {

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

}

else {

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

}

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? Specifically, why must we run this program at least twice to test it properly?

Write your answer for why we have to test this program at least twice, here: We are dealing with a program might do some mistakes, so we have to make sure it shows the right answer. The program needs to be tested all over again by saving and run.

Add your name to the comments in the JavaScript portion of the file and save the program again as part2.html. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Exercise 3: Putting It All Together (10 points)

In this exercise, you are given a program description and must make a program to match it. You will be given example pictures as well.

PROGRAM DESCRIPTION:

The program should…

· Convert a distance

· entered by the user

· from Miles to Kilometers,

· OR from Kilometers to Miles.

· The user will specify which conversion should be carried out.

Requirements: Asks the user for a distance and which conversion to do, and converts the distance correctly, the details are up to you. You may choose to follow the example pictures, or do your own thing.

1. Create, in pseudocode or flowchart, the sequence of steps the program should follow.

(4 points) Insert your pseudocode or flowchart description of the program here:

2. Using your pseudocode or flowchart “program” as a guide, write a JavaScript program for the program described below.

(6 points) Save the program as part3.html, and include it in the zip file when you submit to Pilot, and back it up to your USB drive!

Mathematical Formulas:

The formula for converting to Kilometers from Miles is:

Kilometers = Miles * 1.6;

The formula for converting to Miles from Kilometers is:

Miles = Kilometers / 1.6;

AFTER YOU HAVE WRITTEN THE PROGRAM, YOU SHOULD TEST IT:

Conversions that you should test:

· Enter 100, choose to convert from Miles to Kilometers. Result: 160

· Enter 160, choose to convert from Kilometers to Miles. Result: 100

· Distance between Fairborn and Chicago is 304 miles. How many Kilometers is it? Result: 486.4

· Half marathon is of 21.1 Kilometers. How many miles is it? Result: 13.125

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.

EXAMPLES OF HOW THE PROGRAM SHOULD LOOK WHEN IT RUNS:

Example Program run 1:

Example Program run 2:

Part 4 (code may vary)

Add your name to the comments in the JavaScript portion of the file and save the program again as part3.html. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Exercise 4: Loops, Modifying Counter-Controlled Loops (10 points)

Part 4a (5 points)

Use the JSLoopsLab.html file from the templateandloop.zip folder.

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? Answer here:

Loop test is accomplished? Answer here:

Update step is accomplished? Answer here:

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: Again, to “comment out” a line of JavaScript code, just precede the line with double slashes //)

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

New loop goes here, below this line:

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:

New loop test goes here, below this line:

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 in the JavaScript portion of the file, save as part4a.html. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Part 4b (5 points)

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

Add your name to the comments in the JavaScript portion of the file, save as part4b.html. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Exercise 5: Categorizing numbers (12 points)

In this exercise, we will categorize numbers (0-100) into 4 quarters viz. Quarter 1, Quarter 2, Quarter 3 and Quarter 4. The categories are as given below:

Quarter 1 – 0 to 25

Quarter 2 – 26 to 50

Quarter 3 – 51 to 75

Quarter 4 – 76 to 100

PROGRAM DESCRIPTION:

Requirements:

You should loop through 0-100 and after each iteration the loop variable should go up by 10. So the loop should start from 0 and go till 100 and the loop variable should be increased by 10 every time. Based on the value of loop variable, you will display its category. For example if value of loop variable is 10 then your program should display “10 belongs to Quarter 1”. If the value of loop counter is 50 then your program should display “50 belongs to Quarter 2”. (HINT: Nested if-else statements inside a loop)

1. Create, in pseudocode or flowchart, the sequence of steps the program should follow.

(4 points) Insert your pseudocode or flowchart description of the program here:

2. Using your pseudocode or flowchart “program” as a guide, write a JavaScript program for the program described below.

(8 points) Save the program as part5.html, and include it in the zip file when you submit to Pilot, and back it up to your USB drive!

Your output should be somewhat like this:

Part OXC1. Rock Paper Scissors (5 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. Write down the pseudo-code or show flow-chart for this.

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

3. 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

4. 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)

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

6. 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. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Part OXC2. Rock Paper Scissors Tournament (5 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. Include it in the zip file when you upload to Pilot, and back it up to your USB drive!

Rubric (40 pts possible):

Exercise		Points
1	Question	4
2	Question	4
3	Question	10
4	Part a	5
	Part b	5
5	Question	12
Extra credit	OXC1	5
Extra credit	OXC2	5
Total		40

Page 15 of 18