CMPT 100 : introduction to computing PowerPoint Presentation, PPT - DocSlides

CMPT 100 : introduction to computingtutorial #5 : javascript 2 guessing game

By Wendy Sharpe

1

before we get started . . .

If you have not been to the first tutorial introduction JavaScript then you must catch up on your own timeLog onto the lab computer (in Windows)Create a folder for this tutorial on H:// driveLog onto Moodle and open tutorial 5 notesClick on guessinggame.html link and save to your newly created folderOpen Notepad++Start – All Programs – Course Specific Applications – Notepad+++

2

tutorial 5 overview

The Guessing Game AlgorithmOverview of JavaScript’s Math classAlert() function vs Prompt() functionWhile loop general structure and conditionif-else : filling out the body of the while loopif-else : ending the gameDebugging JavaScript

3

The guessing game algorithm

4

setting up the algorithm for the game

computer picks a numberwhile user hasn't guessed correctly and they haven't reached 7 guesses get a guess from the userif number is too high, say soif number is too low, say soincrement number of guesses by 1if they've guessed correctly, display congratulationselse display game over messageTIP: 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 numberwhile user hasn't guessed correctly and they haven't reached 7 guesses get a guess from the userif number is too high, say soif number is too low, say soincrement number of guesses by 1if they've guessed correctly, display congratulationselse display game over messageSet up 3 variables in your script for the guessing gamefollow 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 codeE.g., var myNumberVariable names are case sensitive (myNumber and MYNumber are two different variables)Variable names must begin with a letter or the underscore characterFor 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 emptyGenerates a random number like 0.8963775077184463you can prove to yourself that it works by putting it into your codeBUT this isn’t an integer! So we need to round it offMath.round()Used for rounding off numbers, using it, any supplied argument is rounded off to the nearest integerE.g., Math.round(25.9) //returns 26 Takes one argumentOne 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: 11If you get an error like this, check:SpellingProper capitalizationSemi-colons

10

alert() vs prompt()

11

Alert() function

Display the instructions for the game using the alert() functionalert(“my text for the alert goes in here"); For more reading on the alert() function: http://www.mediacollege.com/internet/javascript/basic/alert.htmlGo 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 promptUse = to assign the value of the prompt to the variable that you are prompting the user forE.g., animal = prompt("Enter a kind of animal","duck");Go ahead and use the prompt() function to ask the user to enter a numberdon’t forget the default valuedon’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 structureIf 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 executewhile(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 executingI.e., refer back to your algorithmRefine 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!”);}ORif( 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 bracketsNo 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 notesif you’re really struggling to understand while loops, check out: http://www.w3schools.com/js/js_loop_while.aspbody of the while loop from our algorithm:get a guess from the userif number is too high, say soif number is too low, say soincrement number of guesses by 1NOTE: 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 wonusing document.write( ), confirm the correct answer and tell them how to restart the gamechange 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 overusing document.write( ), give them the correct answer and tell them how to restart the gamechange 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 variableE.g., document.bgColor = “red”; If you’re just using a colourNeeds to be the last line in your block of code with document.write() commandsotherwise the document.write will write over the document.bgColor commandE.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 errorsDid you spell variables correctly?Is your code in order? Are you trying to use variables before they have a value associated with themAmerican English spelling of words like colorAre all semi-colons where they need to be?Use syntax highlighting to find errorsDid you concatenate your strings properly?+ in the right placesProper use of double quotation marksUsing the error console in Firefox to find problems with your scriptTools – Error ConsoleTip: clear the error console, then force refreshErrors option will give you information about what line of code has the problem

25

questions?

26