CMPT 100 : INTRODUCTION TO COMPUTING

TUTORIAL #5 : JAVASCRIPT 2 GUESSING GAME

By Wendy Sharpe1

BEFORE WE GET STARTED . . .

If you have not been to the first tutorial introduction JavaScript then you must catch up on your own time

Log onto the lab computer (in Windows) Create a folder for this tutorial on H:// drive Log onto Moodle and open tutorial 5 notes

Click on guessinggame.html link and save to your newly created folder

Open Notepad++ Start – All Programs – Course Specific

Applications – Notepad+++2

TUTORIAL 5 OVERVIEW

The Guessing Game Algorithm Overview of JavaScript’s Math class Alert() function vs Prompt() function While loop general structure and condition if-else : filling out the body of the while loop if-else : ending the game Debugging JavaScript

3

THE GUESSING GAME ALGORITHM

4

SETTING UP THE ALGORITHM FOR THE GAME computer picks a number while user hasn't guessed correctly and they

haven't reached 7 guesses get a guess from the user if number is too high, say so if number is too low, say so increment number of guesses by 1

if they've guessed correctly, display congratulations

else display game over message

TIP: typing the algorithm into your assignment as comments will ensure you get the 2 full marks for properly commenting your code.

5

PICKING VARIABLES FROM THE CODE computer picks a number while user hasn't guessed correctly and they

haven't reached 7 guesses get a guess from the user if number is too high, say so if number is too low, say so increment number of guesses by 1

if they've guessed correctly, display congratulations

else display game over message

Set up 3 variables in your script for the guessing game follow good naming conventions – see tutorial 4

notes

6

QUICK REFRESHER ON VARIABLES

You MUST first declare the variable before you can use it in your code E.g., var myNumber Variable names are case sensitive (myNumber

and MYNumber are two different variables) Variable names must begin with a letter or the

underscore character

For more information and additional help understanding variables: http://www.w3schools.com/js/js_variables.asp

7

JAVASCRIPT’S MATH CLASS8

MATH CLASS

Math.random() Doesn’t take any arguments, brackets are empty Generates a random number like

0.8963775077184463 you can prove to yourself that it works by putting it into

your code BUT this isn’t an integer! So we need to round it off

Math.round() Used for rounding off numbers, using it, any supplied

argument is rounded off to the nearest integer E.g.,

Math.round(25.9) //returns 26 Takes one argument

One is an integer argument, E.g., 1, 3, 10, 1000 etc. Integers should show up as red in highlighted syntax on

Notepad++ var number = Math.round(Math.random()*100);

9

HELP! ERROR CONSOLE MESSAGES

Error: math is not definedSource File: file:///H:/CMPT100Tutorial5/guessinggame.htmlLine: 11 If you get an error like this, check:

Spelling Proper capitalization Semi-colons

10

ALERT() VS PROMPT()11

ALERT() FUNCTION

Display the instructions for the game using the alert() function alert(“my text for the alert goes in here"); For more reading on the alert() function: http

://www.mediacollege.com/internet/javascript/basic/alert.html

Go ahead and set up the first alert for the game

12

REMEMBER THE PROMPT() FUNCTION FROM LAST WEEK’S TUTORIAL? General structure:

prompt(“this is your physical prompt text”, “default”);

Good programming practice is to always leave a default value in your prompt

Use = to assign the value of the prompt to the variable that you are prompting the user for E.g., animal = prompt("Enter a kind of animal","duck");

Go ahead and use the prompt() function to ask the user to enter a number don’t forget the default value don’t forget the put the value into one of your

three variables! we don’t have strings this time, so what will our

default value look like?

13

WHILE() LOOP14

WHILE LOOP STRUCTURE General structure

If you put a semi-colon at the end of the while loop the computer will assume that the loop is finished and the body of the while loop won’t execute

while(some condition);{

// my code goes here}vs.while(some condition){

// my code goes here}

15

HOW DO YOU FIGURE OUT WHAT CONDITION TO USE FOR YOUR LOOP?

you need to figure out what conditions need to be true in order for the loop to keep executing I.e., refer back to your algorithm

Refine your algorithm into code for the outside part of the loop: while user hasn't guessed correctly and they

haven't reached 7 guesses while (user hasn't guessed correctly and they

haven't reached 7 guesses) while (user hasn't guessed correctly AND they

haven't reached 7 guesses) while (userNumber != number &&

numberGuesses < 7)

16

IF-ELSE : FILLING OUT THE BODY OF THE WHILE LOOP

17

IF General structure of the if-statement:

if( true ){

document.write(“hello, world!”);}

OR

if( true )document.write(“hello, world!”);

The second case only works when there will be one single line of code after the if( true )

18

ELSE General structure of the else:

Still use brackets No need to use round parentheses for the else if(true){

document.write(“hello, world!”); }else{

// unlike the if, the else doesn’t get a condition in parentheses. document.write(“goodbye, world!”);

} for more help in understanding if-else, visit:

http://www.w3schools.com/js/js_if_else.asp19

USING OUR ALGORITHM TO FILL IN THE BODY OF THE WHILE LOOP Go ahead and fill in the while loop using the

algorithm from the tutorial notes if you’re really struggling to understand while

loops, check out: http://www.w3schools.com/js/js_loop_while.asp

body of the while loop from our algorithm: get a guess from the user if number is too high, say so if number is too low, say so increment number of guesses by 1 NOTE: we already asked the user to enter a

value, and we incremented our numberGuesses counter. What does this mean for the order of the code? Should we ask for another guess before or after we

check the first guess

20

IF-ELSE : ENDING THE GAME

21

FILL IN THE END-GAME WITH IF-ELSE STRUCTURE

if they've guessed the number correctly, they've won the game using document.write( ), tell them they've won using document.write( ), confirm the correct

answer and tell them how to restart the game change the background color of the page to

yellow, using document.bgColor="yellow" else the game is over because they have no

guesses left. using document.write( ), tell them the game is

over using document.write( ), give them the correct

answer and tell them how to restart the game change the background color of the page to red,

using document.bgColor="red";.

22

USING BGCOLOR Use with the .

E.g., document.bgColor = color; If you’re using a variable

E.g., document.bgColor = “red”; If you’re just using a colour

Needs to be the last line in your block of code with document.write() commands otherwise the document.write will write over the

document.bgColor command

E.g, document.write("<h1>Game over, too many guesses!

</h1>");document.write("The number was "+number); document.bgColor="red";

23

DEBUGGING JAVASCRIPT24

SCRIPT NOT WORKING? Common places to look for errors

Did you spell variables correctly? Is your code in order? Are you trying to use

variables before they have a value associated with them

American English spelling of words like color Are all semi-colons where they need to be? Use syntax highlighting to find errors Did you concatenate your strings properly?

+ in the right places Proper use of double quotation marks

Using the error console in Firefox to find problems with your script Tools – Error Console

Tip: clear the error console, then force refresh Errors option will give you information about

what line of code has the problem

25

QUESTIONS?26