Preview
Video Player
00:00
00:00
Create a Random Number
7:27JavaScript 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().
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