CMPT 100 : introduction to computing tutorial #5 : javascript 2 guessing game

1. CMPT 100 : introduction to computingtutorial #5 : javascript2 guessing game By Wendy Sharpe

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 folder • Open Notepad++ • Start – All Programs – Course Specific Applications – Notepad+++

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

4. The guessing game algorithm

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.

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

7. quick refresher on variables • You MUST first declare the variable before you can use it in your code • E.g., varmyNumber • Variable names are case sensitive (myNumberandMYNumberare 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

8. javascript’s math class

9. 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);

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

11. alert()vs prompt()

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

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?

14. while() loop

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 }

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 correctlyand they haven't reached 7 guesses) • while (userNumber != number && numberGuesses < 7)

17. if-else : filling out the body of the while loop

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 )

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

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 • 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

21. if-else : ending the game

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";.

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

24. Debugging JavaScript

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

26. questions?