CMPT 100 : INTRODUCTION TO
COMPUTING
TUTORIAL
#5 : JAVASCRIPT 2
GUESSING GAME
1
By Wendy Sharpe
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 CLASS
8
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 defined
Source 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() LOOP
14
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.asp
 
19
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
21
: ENDING THE GAME
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
 
E.g., document.bgColor = color;
 
 
If you’re using a variable
E.g., document.bgColor = “red”;
 
 
with the .
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 JAVASCRIPT
24
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