"WordPress Basics" was retired on July 6, 2019.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Numbers!
You have completed JavaScript Numbers!
Preview
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 |
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Roll die and
you'll get a number from one to six.
0:00
Which number you get is up to chance.
0:03
The outcome is random and
could be different each time you roll.
0:05
You learn that JavaScript lets
you create random numbers,
0:09
which you can use to add variety and
surprise in your programs.
0:12
For example, you could program a game
to randomly place enemy spaceships and
0:15
asteroids on the screen.
0:19
Or you can liven up your homepage by
randomly selecting a photo to display each
0:21
time someone visits your site.
0:25
Or, randomly select a question
as part of a quiz application.
0:26
Each of these tasks starts
with creating a random number.
0:31
Generating a random number in
JavaScript is quite straightforward.
0:35
It's an operation built into JavaScript
via a method named Math.random.
0:39
Let's look at the documentation for
0:43
the Math.random method on
the Mozilla Developer Network.
0:45
You'll find a link to it in
the teacher's notes with this video.
0:48
So here it says that Math.random
returns a floating-point
0:51
pseudo-random number in
the range of 0 to 1.
0:55
That is from 0 up to, but not including 1.
0:59
Let's see how it works.
1:03
Although back into the JavaScript
console for this, and type Math.random.
1:04
And I'll run it a few times in
the console to see what it returns.
1:10
Again, in the console,
1:13
you can press the up arrow key to
display the code you previously ran.
1:15
Then you can either edit that code or
press Return or
1:18
Enter to run the code again.
1:21
As you can see, Math.random returns a
random number with lots of decimal places,
1:23
but never the number 1.
1:28
Let's say that we want to simulate
the role of a six sided die.
1:30
We want to get any number from 1 up to and
including 6.
1:33
Well, Math.random returns
a number that's between 0 and 1.
1:38
So we could start by
multiplying that by 6.
1:42
Let's see what this returns.
1:46
I'll try this a few times.
1:47
Okay, now I'm getting numbers that vary in
value between a little over 0 to over 5.
1:49
They still all have a decimal values,
however.
1:54
And I'm want an integer value like 1,
2, 3, 4, 5 or 6.
1:57
JavaScript math object provide
a couple of methods to help with this.
2:02
Math.floor() and
2:06
Math.ceil() both convert decimal
values to integers or whole numbers.
2:07
You provide a number to each of these and
they return a new value.
2:12
Math.floor rounds the number down
toward the floor, if you will.
2:16
For example, if you provide Math.floor,
the number 1.2 it returns the number 1.
2:21
Math.ceil on the other hand,
rounds the number up toward the ceiling.
2:28
So passing Math.ceil(1.2)
rounds the number up to 2.
2:33
Now, if the number is already an integer,
then the methods return that value.
2:41
For instance,
passing 2 to Math.ceil returns 2.
2:45
And passing 2 to Math.floor returns 2.
2:50
You can see more examples of Math.ceil and
2:54
Math.floor in the teacher's
notes with this video.
2:56
So I'll use Math.floor to help round
the number to the proper value for
3:00
the random number generator.
3:05
Since Math.random returned a number value,
3:07
I can provide that method
to Math.floor like this.
3:11
This might look a little
complicated right now, so
3:18
let's break this down by looking
at each part of the code.
3:20
In JavaScript and programming in general,
code runs inside out.
3:23
In other words, what's inside
the innermost parentheses happens first.
3:28
In this case,
Math.random() * 6 gets processed,
3:32
or evaluated as programmers like to say,
before the Math.floor method.
3:36
And this makes sense,
3:40
because Math.floor needs a number
provided to it before it can do anything.
3:41
Let's again start with Math.random,
3:45
which returns a value from 0 to a decimal
value up to but not including 1.
3:48
Most of the time, Math.random returns
a really long decimal value like this.
3:54
When we multiply the number
Math.random returns by 6,
4:00
it returns a new number, also with
lots of numbers following the decimal.
4:05
Finally, if we provide
that number to Math.floor,
4:11
the method rounds it down to an integer.
4:16
I'll run this a few times.
4:19
And notice how each time it returns a
random integer like 2, 1, 3, 4, and so on.
4:20
In fact, this code will always
return a value between 0 and 5.
4:28
But I want a number between 1 and 6.
4:34
Well, to make that happen,
I'll need to add 1 to Math.floor.
4:37
And this will ensure that I'll
get a number between 1 and 6.
4:42
I'll run this a few times.
4:46
And notice how it returns 2,
4, 1, 5, 5, 1, and so on.
4:47
So now you might be asking,
why don't you just use Math.ceil?
4:55
It rounds upward.
4:59
So a number over 5 would round up to 6,
right?
5:00
Well, this might seem like a good idea,
and would make it so that we didn't have
5:03
to add one at the end of the statement
to produce the number from 1 to 6.
5:07
Unfortunately, with that approach there is
a chance that you might end up with a 0.
5:13
Remember, Math.random returns a number in
the range of 0 up to but not including 1.
5:17
So the random number returned could be 0.
5:24
And using Math.ceil on 0 returns 0.
5:27
So with that approach, there's a chance
you'd end up with numbers from 0 up to and
5:31
including 6.
5:36
With Math.floor +1, we make sure that the
lowest number returned is 1 instead of 0.
5:37
All right, now let's see how we could use
this random number generator in a program.
5:49
For example, a game where you roll a die.
5:53
You can cut along with me by
opening the file random.js located
5:56
inside your js folder.
5:59
Then in index.html,
update the source attribute
6:01
in the script tag to js/random.js.
6:06
I'll start by declaring
a variable name dieRoll to store
6:12
the result of a random number from 1 to 6.
6:17
Next, I'll generate a number from 0 to 5.
6:20
Like earlier,
I'll multiply Math.random by 6 and
6:23
I'll round the return value
down using Math.floor.
6:28
When rolling a die, the lowest number of
returns should be 1 and the highest 6.
6:38
So I'll add 1 to the end to make sure
that I get a number from 1 to 6.
6:43
Finally, I'll use the console.log method
to display the result in the console.
6:50
I provided a template literal with
6:54
the message You rolled ${dieRoll}.
6:58
Remember, the dollar sign and
7:04
curly brace syntax inserts the value
of the direct variable into the string.
7:06
Let's see how it works.
7:11
I'll save the file and refresh the page.
7:12
Each time I refresh the console, prints
another random number between 1 and 6.
7:16
Good.
7:21
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up