Upload
elsa-rule
View
213
Download
0
Embed Size (px)
Citation preview
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