Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Start a free Basic trial
to watch this video
Random numbers aren't just for dice. You can use random numbers to add variety and surprise to your programs.
Random Numbers in JavaScript
Math.random() at the Mozilla Developer Network

0:00
Roll a die, and you'll get a number from one to six.

0:04
Which number you get is up to chance.

0:06
The outcome is random, and could be different each time you roll the die.

0:11
JavaScript lets you create random numbers, too, which you can use to add variety and

0:15
surprise in your programs.

0:17
For example, you could program a game to randomly place enemy spaceships on

0:21
the screen.

0:23
Or you could liven up your home page by randomly selecting a photo

0:26
to display each time someone visits your site.

0:30
Or you could randomly select a question as part of a quiz application.

0:34
Each of these tasks start with creating a random number.

0:39
Let's look at the documentation for

0:40
the Math.random method on the Mozilla developer network.

0:44
It says that Math.random returns a floating point pseudorandom number in

0:49
the range of zero to one that is a number from 0 up to but

0:55
not including 1, let's see how it works.

0:59
I'm going to open the JavaScript console and try it out.

1:04
Remember the clear command I introduced in the last video?

1:07
It's very useful.

1:08
It lets you erase whatever's in the console.

1:12
Now I'll try it Math.random.

1:14
[BLANK_AUDIO]

1:18
Okay there's the number.

1:20
I can repeat this a few times just to show that we actually are getting

1:23
different numbers.

1:24
Here's a nifty console trick by the way.

1:26
If you press the up arrow, the last command is displayed again.

1:30
You can either edit that line or just hit Return, or Enter, to run the code again.

1:38
As you can see,

1:39
we get some numbers with lots of decimal places, but never the number one.

1:44
Let's say, we want to simulate the roll of a six sided die.

1:47
We wanna get any number from one up to and including six.

1:52
Now Math.random returns a number that's between zero and one.

1:56
So, we could start by multiplying that by six.

1:59
Let's see what we get.

2:02
Okay. Now we're getting numbers that vary in

2:04
value between a little over zero to over five.

2:07
They still all have decimal values, however.

2:10
And we want an integer, like 1, 2, 3, 4, 5 or 6.

2:16
JavaScript's Math Object provides a couple of methods to help with this.

2:21
Math.floor and Math.ceil both convert decimal values to integers.

2:28
You provide a number to each of these and they return a new value.

2:31
Math.floor rounds the number down toward the floor so

2:36
Math.floor(1.2) will return the value 1.

2:40
Math.ceil, on the other hand, rounds the number up toward the ceiling.

2:47
So Math.ceil(1.2) rounds that number up to 2.

2:52
Now, if the number is already an integer, then the methods just return that value.

2:58
Math.floor(2) returns 2 and Math.ceil(2) returns 2, also.

3:04
We'll use Math.floor to help us round the number to the proper value for

3:10
our random number generator.

3:12
Since Math.random() returns a number value,

3:14
we can actually give that method to Math.floor.

3:17
Okay, this looks a little complicated but

3:20
it's easy to understand if you look at each part of the code.

3:24
In JavaScript and programming in general, code runs inside out.

3:29
In other words, the stuff inside the innermost parentheses happens first.

3:34
So the Math.random() times 6 is processed, or

3:38
evaluated, as programmers like to say, before the Math.floor method.

3:44
This just makes sense.

3:45
Math.floor needs a number before it can do anything, anyway.

3:49
All right, let's start with Math.random.

3:51
This returns a value from zero to a decimal value up to, but

3:55
not including one.

3:57
Let's say Math.random returns a really long decimal value, like this.

4:01
[BLANK_AUDIO]

4:03
That number is then multiplied by six which gives us

4:06
a new number also with a lot of numbers following the decimal.

4:12
Finally, that number is given to Math.floor which then rounds it

4:16
down to an integer, 4 for example.

4:21
Each time this code runs, you'll get a random integer, 0, 3, 4, 5, and so on.

4:26
In fact, this code will always return a value between 0 and 5.

4:30
But hey, we wanted a number between 1 and 6.

4:35
No problem.

4:36
Just add a one to it and you'll get a number between one and six.

4:39
[SOUND] Now you might be wondering why we don't just use the Math.ceil method.

4:45
It rounds upwards, so a number over five would round up to six.

4:50
It seems like a good idea, and might make it so that we don't have to

4:53
add one at the end of the statement to produce a number from one to six.

4:58
Unfortunately, there's a slight chance you'll end up with a zero.

5:02
Remember, the Math.random method returns a number from zero up to one.

5:10
The random number can actually be zero.

5:12
In this case using Math.ceil on zero returns zero.

5:18
So, if we did use Math.ceil, we could end up with numbers from zero up to and

5:23
including six.

5:25
All right, enough math.

5:27
Let's see how we can use this random number generator in a program.

5:32
You can follow along in workspaces by clicking the Launch Workspace button on

5:36
this page.

5:37
[BLANK_AUDIO]

5:39
I'll open the app.js file, and I'll start by creating a variable

5:45
to hold the results of a random number from one to six.

5:49
Next I'll get a number from zero to five.

5:54
And then I'll round it down.

5:56
[BLANK_AUDIO]

5:58
And I just need to add the closing parentheses for the Math.floor method and

6:04
type plus 1 to the end to give us a number from one to six.

6:08
Alright lets display this random number using an alert box.

6:12
[BLANK_AUDIO]

6:13
Lets see how it works.

6:15
I'll save the file.

6:18
And preview the workspace.

6:20
[BLANK_AUDIO]

6:21
Let's reload this a few times.

6:23
[BLANK_AUDIO]

6:26
All right each time we get different numbers.

6:29
Random numbers between one and six, hooray.
You need to sign up for Treehouse in order to download course files.
Sign up