Return to Video

If/Else Part 1 (Video Version)

  • 0:01 - 0:04
    Here's a function
    you might not know about: random.
  • 0:04 - 0:07
    It takes in two parameters:
    a lower bound and an upper bound,
  • 0:07 - 0:11
    and it gives you back a random number
    somewhere between those two bounds.
  • 0:11 - 0:14
    So here, this variable number will be
    somewhere between zero and one.
  • 0:14 - 0:18
    Then we're going to draw that number
    to the canvas using this text function.
  • 0:18 - 0:22
    Those last two parameters are
    for the x and y coordinates of the text
  • 0:22 - 0:26
    and we use textSize and fill
    to set the fill and the color of the text.
  • 0:26 - 0:28
    So if I press Restart a couple of times,
  • 0:28 - 0:30
    you can see the random numbers
    being generated,
  • 0:30 - 0:34
    and you'll see the precision of
    these numbers is to three decimal places.
  • 0:34 - 0:35
    So here's a question--
  • 0:35 - 0:38
    what if I only wanted to generate
    a number that's either zero or one?
  • 0:38 - 0:42
    Well, we can use
    this other function called round,
  • 0:42 - 0:46
    and this takes in a number that can
    have as many decimals as you want,
  • 0:46 - 0:48
    and it rounds it to the nearest integer.
  • 0:48 - 0:52
    So I'm just going to go ahead
    and make a new variable called integer
  • 0:52 - 0:54
    and assign it whatever round gives us.
  • 0:54 - 0:56
    We can also draw that integer
    to the screen
  • 0:56 - 0:58
    with our handy-dandy text function.
  • 0:58 - 1:00
    So text(integer
  • 1:00 - 1:06
    --we'll put it maybe at 160
    and 350. Nice.
  • 1:06 - 1:12
    So this shows us that round of 0.2314
    rounds down to zero,
  • 1:12 - 1:18
    and if I put in something like 4.6,
    that would round me up to 5. Neat.
  • 1:18 - 1:21
    So if I wanted to randomly generate
    a zero or a one,
  • 1:21 - 1:24
    I can take this random decimal
    that we're generating,
  • 1:24 - 1:27
    that falls between zero and one,
  • 1:28 - 1:31
    and stick it right into
    that round function.
  • 1:31 - 1:33
    So just like this:
    I'm going to grab this number
  • 1:33 - 1:35
    and plop it down here.
  • 1:35 - 1:37
    And now you can see
  • 1:37 - 1:40
    that whenever we generate
    a number that's less than 0.5,
  • 1:40 - 1:41
    it gets rounded down to zero,
  • 1:41 - 1:45
    and whenever we generate a number
    that is greater than or equal to 0.5,
  • 1:45 - 1:47
    it gets rounded up to one.
  • 1:48 - 1:51
    Maybe you can start to see the beginning
    of some sort of coin-flip game here
  • 1:51 - 1:55
    where if you flip a zero,
    your friend gives you a dollar,
  • 1:55 - 1:58
    and if you flip a one,
    your friend gives you ten dollars.
  • 1:58 - 1:59
    Great game, right?
  • 1:59 - 2:02
    In fact, let's go ahead
    and illustrate this coin-flipping game
  • 2:02 - 2:03
    with some super realistic coins
  • 2:03 - 2:06
    that just happen to look
    like really boring ellipses.
  • 2:06 - 2:11
    Just like this: I'm going to draw
    an ellipse in the middle of our canvas
  • 2:11 - 2:12
    and that's going to be our coin.
  • 2:12 - 2:15
    Ooh! It's covering the text.
    Let's scoot that up a bit.
  • 2:17 - 2:21
    Great, and I have this idea
    where, if I flip a zero,
  • 2:21 - 2:23
    I'm going to show
    the purple side of the coin,
  • 2:23 - 2:28
    so to make the coin purple,
    I can just fill it with some purple.
  • 2:29 - 2:33
    If I flip a 1,
    I'll show the yellow side of the coin
  • 2:33 - 2:35
    so it'll be a purple
    and yellow-sided coin.
  • 2:35 - 2:38
    And luckily, with our impressive
    knowledge of if-statements
  • 2:38 - 2:39
    this is super easy.
  • 2:39 - 2:45
    We can just say if integer equals zero,
  • 2:45 - 2:48
    (remember we use
    three equals signs to check for equality),
  • 2:48 - 2:53
    then we will fill the ellipse purple.
  • 2:54 - 2:58
    Then, if integer is equal to one,
  • 2:59 - 3:01
    we have a different fill function
  • 3:02 - 3:04
    and we'll make that one yellow.
  • 3:06 - 3:09
    Great. And it works! Woo hoo!
  • 3:09 - 3:11
    But let's think about this for a second--
  • 3:11 - 3:14
    integer here will only ever
    be zero or one, right?
  • 3:14 - 3:16
    We designed it that way
  • 3:16 - 3:19
    so that means
    that either this statement will be true,
  • 3:19 - 3:21
    or this statement will be true
  • 3:21 - 3:22
    Always.
  • 3:22 - 3:25
    We've covered every possible case here, which means
  • 3:25 - 3:28
    we can start thinking about
    our decision-making a little differently.
  • 3:28 - 3:32
    That is, if integer is equal to zero,
    we will fill it purple,
  • 3:33 - 3:35
    otherwise, we'll fill yellow.
  • 3:36 - 3:38
    So, do you see
    how we don't have to say anything
  • 3:38 - 3:41
    about integer being one
    in that second case?
  • 3:41 - 3:42
    All we have to say is,
  • 3:42 - 3:45
    "If integer is zero, do this;
    otherwise, do that",
  • 3:45 - 3:48
    and, in programming,
    the way we say "otherwise" is "else."
  • 3:48 - 3:49
    So watch this:
  • 3:49 - 3:53
    I'm just going to replace this second
    if-condition with the word "else"
  • 3:53 - 3:55
    and what this means is,
  • 3:55 - 3:58
    if the stuff inside these parentheses
    is true,
  • 3:58 - 4:00
    then run the code in these brackets.
  • 4:00 - 4:02
    Otherwise, run the code in these brackets.
  • 4:03 - 4:06
    Sometimes we'll even put the "else"
    on the same line as that closing bracket
  • 4:06 - 4:08
    just to remind ourselves
  • 4:08 - 4:10
    that these two blocks of code
    are very, very connected.
  • 4:10 - 4:14
    You can't have an else block
    unless you've just had an if block.
  • 4:14 - 4:15
    Got it?
  • 4:15 - 4:18
    This will also help you remember
  • 4:18 - 4:23
    to not put something in between
    the two blocks, like var y equals zero,
  • 4:23 - 4:26
    and that would just break everything!
    So don't do that.
  • 4:27 - 4:30
    Great. So now we know about if/else
    which is really good
  • 4:30 - 4:33
    when we are deciding
    between two possible things to do.
  • 4:33 - 4:34
    But what if we have more?
  • 4:34 - 4:37
    What if I generated
    an integer between zero and two
  • 4:37 - 4:40
    and then I had three possibilities:
    zero, one, or two? What then?
  • 4:40 - 4:43
    Duh duh duh! To be continued!
Title:
If/Else Part 1 (Video Version)
Description:

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

more » « less
Video Language:
English
Duration:
04:45

English subtitles

Revisions