CMPT 100 : introduction to computing

CMPT 100 : introduction to computing CMPT 100 : introduction to computing - Start

Added : 2016-04-30 Views :42K

Download Presentation

CMPT 100 : introduction to computing




Download Presentation - The PPT/PDF document "CMPT 100 : introduction to computing" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.



Presentations text content in CMPT 100 : introduction to computing

Slide1

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

By Wendy Sharpe

1

Slide2

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

Slide3

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

Slide4

The guessing game algorithm

4

Slide5

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

Slide6

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

Slide7

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

Slide8

javascript’s math class

8

Slide9

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

Slide10

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

Slide11

alert() vs prompt()

11

Slide12

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

Slide13

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

Slide14

while() loop

14

Slide15

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

Slide16

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

Slide17

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

17

Slide18

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

Slide19

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

Slide20

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

Slide21

if-else : ending the game

21

Slide22

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

Slide23

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

Slide24

Debugging JavaScript

24

Slide25

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

Slide26

questions?

26


About DocSlides
DocSlides allows users to easily upload and share presentations, PDF documents, and images.Share your documents with the world , watch,share and upload any time you want. How can you benefit from using DocSlides? DocSlides consists documents from individuals and organizations on topics ranging from technology and business to travel, health, and education. Find and search for what interests you, and learn from people and more. You can also download DocSlides to read or reference later.
Youtube