Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
JavaScript lets you create random numbers, which you can use to add variety and surprise in your programs. You generate a random number in JavaScript via a method named Math.random().
Resources
Example Return Values
Math.floor()  Return Value  Math.ceil()  Return Value 

Math.floor() 
Math.ceil() 

Math.floor(1.2) 
1 
Math.ceil(1.2) 
2 
Math.floor(0.0012) 
0 
Math.ceil(0.0012) 
1 
Math.floor(5.028) 
5 
Math.ceil(5.028) 
6 
Math.floor(2) 
2 
Math.ceil(2) 
2 
Math.floor(0) 
0 
Math.ceil(0) 
0 

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

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

0:05
The outcome is random and could be different each time you roll.

0:09
You learn that JavaScript lets you create random numbers,

0:12
which you can use to add variety and surprise in your programs.

0:15
For example, you could program a game to randomly place enemy spaceships and

0:19
asteroids on the screen.

0:21
Or you can liven up your homepage by randomly selecting a photo to display each

0:25
time someone visits your site.

0:26
Or, randomly select a question as part of a quiz application.

0:31
Each of these tasks starts with creating a random number.

0:35
Generating a random number in JavaScript is quite straightforward.

0:39
It's an operation built into JavaScript via a method named Math.random.

0:43
Let's look at the documentation for

0:45
the Math.random method on the Mozilla Developer Network.

0:48
You'll find a link to it in the teachers notes with this video.

0:51
So here it says that Math.random returns a floatingpoint

0:55
pseudorandom number in the range of 0 to 1.

0:59
That is from 0 up to, but not including 1.

1:03
Let's see how it works.

1:04
Although back into the JavaScript console for this, and type Math.random.

1:10
And I'll run it a few times in the console to see what it returns.

1:13
Again, in the console,

1:15
you can press the up arrow key to display the code you previously ran.

1:18
Then you can either edit that code or press Return or

1:21
Enter to run the code again.

1:23
As you can see, Math.random returns a random number with lots of decimal places,

1:28
but never the number 1.

1:30
Let's say that we want to simulate the role of a six sided die.

1:33
We want to get any number from 1 up to and including 6.

1:38
Well, Math.random returns a number that's between 0 and 1.

1:42
So we could start by multiplying that by 6.

1:46
Let's see what this returns.

1:47
I'll try this a few times.

1:49
Okay, now I'm getting numbers that vary in value between a little over 0 to over 5.

1:54
They still all have a decimal values, however.

1:57
And I'm want an integer value like 1, 2, 3, 4, 5 or 6.

2:02
JavaScript math object provide a couple of methods to help with this.

2:06
Math.floor() and

2:07
Math.ceil() both convert decimal values to integers or whole numbers.

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

2:16
Math.floor rounds the number down toward the floor, if you will.

2:21
For example, if you provide Math.floor, the number 1.2 it returns the number 1.

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

2:33
So passing Math.ceil(1.2) rounds the number up to 2.

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

2:45
For instance, passing 2 to Math.ceil returns 2.

2:50
And passing 2 to Math.floor returns 2.

2:54
You can see more examples of Math.ceil and

2:56
Math.floor in the teachers notes with this video.

3:00
So I'll use Math.floor to help around the number to the proper value for

3:05
the random number generator.

3:07
Since Math.random returned a number value,

3:11
I can provide that method to Math.floor like this.

3:18
This might look a little complicated right now, so

3:20
let's break this down by looking at each part of the code.

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

3:28
In other words, what's inside the innermost parentheses happens first.

3:32
In this case, Math.random() * 6 gets processed,

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

3:40
And this makes sense,

3:41
because Math.floor needs a number provided to it before it can do anything.

3:45
Let's again start with Math.random,

3:48
which returns a value from 0 to a decimal value up to but not including 1.

3:54
Most of the time, Math.random returns a really long decimal value like this.

4:00
When we multiply the number Math.random returns by 6,

4:05
it returns a new number, also with lots of numbers following the decimal.

4:11
Finally, if we provide that number to Math.floor,

4:16
the method rounds it down to an integer.

4:19
I'll run this a few times.

4:20
And notice how each time it returns a random integer like 2, 1, 3, 4, and so on.

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

4:34
But I want a number between 1 and 6.

4:37
Well, to make that happen, I'll need to add 1 to Match.floor.

4:42
And this will ensure that I'll get a number between 1 and 6.

4:46
I'll run this a few times.

4:47
And notice how it returns 2, 4, 1, 5, 5, 1, and so on.

4:55
So now you might be asking, why don't you just use Math.ceil?

4:59
It rounds upward.

5:00
So a number over 5 would round up to 6, right?

5:03
Well, this might seem like a good idea, and would make it so that we didn't have

5:07
to add one at the end of the statement to produce the number from 1 to 6.

5:13
Unfortunately, with that approach there is a chance that you might end up with a 0.

5:17
Remember, Math.random returns a number in the range of 0 up to but not including 1.

5:24
So the random number returned could be 0.

5:27
And using Math.ceil on 0 returns 0.

5:31
So with that approach, there's a chance you'd end up with numbers from 0 up to and

5:36
including 6.

5:37
With Math.floor +1, we make sure that the lowest number returned is 1 instead of 0.

5:49
All right, now let's see how we could use this random number generator in a program.

5:53
For example, a game where you roll a die.

5:56
You can cut along with me by opening the file random.js located

5:59
inside your js folder.

6:01
Then in index.html, update the source attribute

6:06
in the script tag to js/random.js.

6:12
I'll start by declaring a variable name dieRoll to store

6:17
the result of a random number from 1 to 6.

6:20
Next, I'll generate a number from 0 to 5.

6:23
Like earlier, I'll multiply Math.random by 6 and

6:28
I'll round the return value down using Math.floor.

6:38
When rolling a die, the lowest number of returns should be 1 and the highest 6.

6:43
So I'll add 1 to the end to make sure that I get a number from 1 to 6.

6:50
Finally, I'll use the console.log method to display the result in the console.

6:54
I provided a template literal with

6:58
the message You rolled ${dieRoll}.

7:04
Remember, the dollar sign and

7:06
curly brace syntax inserts the value of the direct variable into the string.

7:11
Let's see how it works.

7:12
I'll save the file and refresh the page.

7:16
Each time I refresh the console, prints a different random number between 1 and 6.

7:21
Good.
You need to sign up for Treehouse in order to download course files.
Sign up