1 00:00:00,480 --> 00:00:03,420 Roll die and you'll get a number from one to six. 2 00:00:03,420 --> 00:00:05,070 Which number you get is up to chance. 3 00:00:05,070 --> 00:00:08,000 The outcome is random and could be different each time you roll. 4 00:00:09,440 --> 00:00:12,380 You learn that JavaScript lets you create random numbers, 5 00:00:12,380 --> 00:00:15,640 which you can use to add variety and surprise in your programs. 6 00:00:15,640 --> 00:00:19,760 For example, you could program a game to randomly place enemy spaceships and 7 00:00:19,760 --> 00:00:21,390 asteroids on the screen. 8 00:00:21,390 --> 00:00:25,200 Or you can liven up your homepage by randomly selecting a photo to display each 9 00:00:25,200 --> 00:00:26,900 time someone visits your site. 10 00:00:26,900 --> 00:00:30,110 Or, randomly select a question as part of a quiz application. 11 00:00:31,180 --> 00:00:34,270 Each of these tasks starts with creating a random number. 12 00:00:35,750 --> 00:00:39,130 Generating a random number in JavaScript is quite straightforward. 13 00:00:39,130 --> 00:00:43,730 It's an operation built into JavaScript via a method named Math.random. 14 00:00:43,730 --> 00:00:45,070 Let's look at the documentation for 15 00:00:45,070 --> 00:00:48,140 the Math.random method on the Mozilla Developer Network. 16 00:00:48,140 --> 00:00:50,280 You'll find a link to it in the teacher's notes with this video. 17 00:00:51,510 --> 00:00:55,697 So here it says that Math.random returns a floating-point 18 00:00:55,697 --> 00:00:59,420 pseudo-random number in the range of 0 to 1. 19 00:00:59,420 --> 00:01:03,180 That is from 0 up to, but not including 1. 20 00:01:03,180 --> 00:01:04,550 Let's see how it works. 21 00:01:04,550 --> 00:01:10,567 Although back into the JavaScript console for this, and type Math.random. 22 00:01:10,567 --> 00:01:13,789 And I'll run it a few times in the console to see what it returns. 23 00:01:13,789 --> 00:01:15,049 Again, in the console, 24 00:01:15,049 --> 00:01:18,620 you can press the up arrow key to display the code you previously ran. 25 00:01:18,620 --> 00:01:21,630 Then you can either edit that code or press Return or 26 00:01:21,630 --> 00:01:23,319 Enter to run the code again. 27 00:01:23,319 --> 00:01:28,432 As you can see, Math.random returns a random number with lots of decimal places, 28 00:01:28,432 --> 00:01:30,000 but never the number 1. 29 00:01:30,000 --> 00:01:33,260 Let's say that we want to simulate the role of a six sided die. 30 00:01:33,260 --> 00:01:38,240 We want to get any number from 1 up to and including 6. 31 00:01:38,240 --> 00:01:42,890 Well, Math.random returns a number that's between 0 and 1. 32 00:01:42,890 --> 00:01:46,220 So we could start by multiplying that by 6. 33 00:01:46,220 --> 00:01:47,820 Let's see what this returns. 34 00:01:47,820 --> 00:01:49,930 I'll try this a few times. 35 00:01:49,930 --> 00:01:54,812 Okay, now I'm getting numbers that vary in value between a little over 0 to over 5. 36 00:01:54,812 --> 00:01:57,780 They still all have a decimal values, however. 37 00:01:57,780 --> 00:02:02,142 And I'm want an integer value like 1, 2, 3, 4, 5 or 6. 38 00:02:02,142 --> 00:02:06,008 JavaScript math object provide a couple of methods to help with this. 39 00:02:06,008 --> 00:02:07,415 Math.floor() and 40 00:02:07,415 --> 00:02:12,424 Math.ceil() both convert decimal values to integers or whole numbers. 41 00:02:12,424 --> 00:02:16,385 You provide a number to each of these and they return a new value. 42 00:02:16,385 --> 00:02:21,040 Math.floor rounds the number down toward the floor, if you will. 43 00:02:21,040 --> 00:02:28,775 For example, if you provide Math.floor, the number 1.2 it returns the number 1. 44 00:02:28,775 --> 00:02:33,787 Math.ceil on the other hand, rounds the number up toward the ceiling. 45 00:02:33,787 --> 00:02:41,105 So passing Math.ceil(1.2) rounds the number up to 2. 46 00:02:41,105 --> 00:02:45,860 Now, if the number is already an integer, then the methods return that value. 47 00:02:45,860 --> 00:02:50,094 For instance, passing 2 to Math.ceil returns 2. 48 00:02:50,094 --> 00:02:54,410 And passing 2 to Math.floor returns 2. 49 00:02:54,410 --> 00:02:56,572 You can see more examples of Math.ceil and 50 00:02:56,572 --> 00:02:59,220 Math.floor in the teacher's notes with this video. 51 00:03:00,440 --> 00:03:05,160 So I'll use Math.floor to help round the number to the proper value for 52 00:03:05,160 --> 00:03:06,460 the random number generator. 53 00:03:07,470 --> 00:03:11,175 Since Math.random returned a number value, 54 00:03:11,175 --> 00:03:15,359 I can provide that method to Math.floor like this. 55 00:03:18,009 --> 00:03:20,379 This might look a little complicated right now, so 56 00:03:20,379 --> 00:03:23,780 let's break this down by looking at each part of the code. 57 00:03:23,780 --> 00:03:28,380 In JavaScript and programming in general, code runs inside out. 58 00:03:28,380 --> 00:03:32,610 In other words, what's inside the innermost parentheses happens first. 59 00:03:32,610 --> 00:03:36,077 In this case, Math.random() * 6 gets processed, 60 00:03:36,077 --> 00:03:40,741 or evaluated as programmers like to say, before the Math.floor method. 61 00:03:40,741 --> 00:03:41,925 And this makes sense, 62 00:03:41,925 --> 00:03:45,985 because Math.floor needs a number provided to it before it can do anything. 63 00:03:45,985 --> 00:03:48,946 Let's again start with Math.random, 64 00:03:48,946 --> 00:03:54,380 which returns a value from 0 to a decimal value up to but not including 1. 65 00:03:54,380 --> 00:03:59,600 Most of the time, Math.random returns a really long decimal value like this. 66 00:04:00,810 --> 00:04:05,190 When we multiply the number Math.random returns by 6, 67 00:04:05,190 --> 00:04:09,060 it returns a new number, also with lots of numbers following the decimal. 68 00:04:11,380 --> 00:04:16,150 Finally, if we provide that number to Math.floor, 69 00:04:16,150 --> 00:04:19,040 the method rounds it down to an integer. 70 00:04:19,040 --> 00:04:20,550 I'll run this a few times. 71 00:04:20,550 --> 00:04:27,480 And notice how each time it returns a random integer like 2, 1, 3, 4, and so on. 72 00:04:28,670 --> 00:04:32,755 In fact, this code will always return a value between 0 and 5. 73 00:04:34,470 --> 00:04:37,512 But I want a number between 1 and 6. 74 00:04:37,512 --> 00:04:42,260 Well, to make that happen, I'll need to add 1 to Math.floor. 75 00:04:42,260 --> 00:04:46,270 And this will ensure that I'll get a number between 1 and 6. 76 00:04:46,270 --> 00:04:47,780 I'll run this a few times. 77 00:04:47,780 --> 00:04:55,186 And notice how it returns 2, 4, 1, 5, 5, 1, and so on. 78 00:04:55,186 --> 00:04:59,140 So now you might be asking, why don't you just use Math.ceil? 79 00:04:59,140 --> 00:05:00,350 It rounds upward. 80 00:05:00,350 --> 00:05:03,630 So a number over 5 would round up to 6, right? 81 00:05:03,630 --> 00:05:07,680 Well, this might seem like a good idea, and would make it so that we didn't have 82 00:05:07,680 --> 00:05:13,110 to add one at the end of the statement to produce the number from 1 to 6. 83 00:05:13,110 --> 00:05:17,612 Unfortunately, with that approach there is a chance that you might end up with a 0. 84 00:05:17,612 --> 00:05:24,808 Remember, Math.random returns a number in the range of 0 up to but not including 1. 85 00:05:24,808 --> 00:05:27,760 So the random number returned could be 0. 86 00:05:27,760 --> 00:05:31,480 And using Math.ceil on 0 returns 0. 87 00:05:31,480 --> 00:05:36,450 So with that approach, there's a chance you'd end up with numbers from 0 up to and 88 00:05:36,450 --> 00:05:37,380 including 6. 89 00:05:37,380 --> 00:05:44,654 With Math.floor +1, we make sure that the lowest number returned is 1 instead of 0. 90 00:05:49,158 --> 00:05:53,380 All right, now let's see how we could use this random number generator in a program. 91 00:05:53,380 --> 00:05:56,120 For example, a game where you roll a die. 92 00:05:56,120 --> 00:05:59,960 You can cut along with me by opening the file random.js located 93 00:05:59,960 --> 00:06:01,860 inside your js folder. 94 00:06:01,860 --> 00:06:06,753 Then in index.html, update the source attribute 95 00:06:06,753 --> 00:06:10,402 in the script tag to js/random.js. 96 00:06:12,887 --> 00:06:17,207 I'll start by declaring a variable name dieRoll to store 97 00:06:17,207 --> 00:06:20,460 the result of a random number from 1 to 6. 98 00:06:20,460 --> 00:06:23,790 Next, I'll generate a number from 0 to 5. 99 00:06:23,790 --> 00:06:28,878 Like earlier, I'll multiply Math.random by 6 and 100 00:06:28,878 --> 00:06:34,086 I'll round the return value down using Math.floor. 101 00:06:38,592 --> 00:06:43,540 When rolling a die, the lowest number of returns should be 1 and the highest 6. 102 00:06:43,540 --> 00:06:50,080 So I'll add 1 to the end to make sure that I get a number from 1 to 6. 103 00:06:50,080 --> 00:06:54,285 Finally, I'll use the console.log method to display the result in the console. 104 00:06:54,285 --> 00:06:58,832 I provided a template literal with 105 00:06:58,832 --> 00:07:04,173 the message You rolled ${dieRoll}. 106 00:07:04,173 --> 00:07:06,130 Remember, the dollar sign and 107 00:07:06,130 --> 00:07:11,780 curly brace syntax inserts the value of the direct variable into the string. 108 00:07:11,780 --> 00:07:12,990 Let's see how it works. 109 00:07:12,990 --> 00:07:16,910 I'll save the file and refresh the page. 110 00:07:16,910 --> 00:07:21,550 Each time I refresh the console, prints another random number between 1 and 6. 111 00:07:21,550 --> 00:07:22,050 Good.