1. CMPT 100 : INTRODUCTION TO COMPUTING TUTORIAL #5 : JAVASCRIPT 2 GUESSING GAME By Wendy Sharpe 1

2. 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 folderguessinggame.html Open Notepad++ Start – All Programs – Course Specific Applications – Notepad+++ 2

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

4. T HE GUESSING GAME ALGORITHM 4

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

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

7. 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 http://www.w3schools.com/js/js_variables.asp 7

8. JAVASCRIPT ’ S MATH CLASS 8

9. M ATH 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

10. HELP! E RROR CONSOLE MESSAGES Error: math is not defined Source File: file:///H:/CMPT100Tutorial5/guessinggame.htmlL ine: 11 If you get an error like this, check: Spelling Proper capitalization Semi-colons 10

11. ALERT () VS PROMPT () 11

12. A LERT () 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/basi c/alert.html http://www.mediacollege.com/internet/javascript/basi c/alert.html Go ahead and set up the first alert for the game 12

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

14. WHILE () LOOP 14

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

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

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

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

19. 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 http://www.w3schools.com/js/js_if_else.asp 19

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

21. IF - ELSE : ENDING THE GAME 21

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

23. 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(" Game over, too many guesses! "); document.write("The number was "+number); document.bgColor="red"; 23

24. D EBUGGING J AVA S CRIPT 24

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

26. QUESTIONS ? 26