Return to Video

Terrific Text Part 2

  • 0:01 - 0:05
    So now that we learned how to use text,
    let's get a bit more fancy.
  • 0:05 - 0:06
    The first fancy thing is that now we're
  • 0:06 - 0:08
    going to start using the word "string".
  • 0:08 - 0:11
    You might think, "String?
    That's what my cat plays with."
  • 0:11 - 0:13
    But for programmers,
    string is a special name
  • 0:13 - 0:15
    we use for bits of text.
  • 0:15 - 0:17
    You can think of it like
    a string of characters, if it helps.
  • 0:17 - 0:19
    Your name is a string,
    your school's name is a string,
  • 0:19 - 0:22
    and every text message
    you've ever sent is also a string.
  • 0:22 - 0:25
    Basically, just think, string equals text.
  • 0:26 - 0:29
    So we used drawing
    and coloring with strings already.
  • 0:29 - 0:31
    Could we use variables
    with strings? Of course!
  • 0:31 - 0:33
    Just like you might normally
    put a number into a variable,
  • 0:33 - 0:35
    you could also put a string
    into a variable.
  • 0:35 - 0:37
    We just say something like,
  • 0:37 - 0:41
    "var myName = (whatever your name is)"
    so "Sophia";
  • 0:41 - 0:43
    remembering those quotes.
  • 0:43 - 0:44
    And then we put the variable myName
  • 0:44 - 0:47
    into the quoted text
    instead of writing "Sophia" directly,
  • 0:47 - 0:49
    like we were doing before.
  • 0:49 - 0:51
    And this way though it
    looks the same right now,
  • 0:51 - 0:53
    we can actually,
    write this multiple times
  • 0:53 - 0:55
    you know, one time there, one time there,
  • 0:55 - 0:57
    you know maybe we
    can be a little artistical.
  • 0:57 - 0:59
    And then all you have to do
    is to change this one variable
  • 0:59 - 1:02
    to be your name, and then you have
  • 1:02 - 1:04
    your name written three times.
  • 1:04 - 1:07
    So, just flipping that back,
    what if we want to get
  • 1:07 - 1:10
    kind of crazy, can we
    start adding together strings?
  • 1:10 - 1:13
    Like you remember when we maybe
    started adding together variables?
  • 1:13 - 1:15
    Well we can actually do that,
  • 1:15 - 1:17
    the computer will just
    stick the two strings together.
  • 1:17 - 1:20
    So for example, you know,
    we can get rid of this,
  • 1:20 - 1:22
    to do it only one time
    and then we can use this other variable
  • 1:22 - 1:27
    message that's going to be my name,
    plus say a bunch of exclamation marks.
  • 1:28 - 1:30
    And if we stick message into text
    to draw this variable
  • 1:30 - 1:33
    instead of my name,
    we can see that
  • 1:33 - 1:35
    all it did is just stuck those exclamation marks
  • 1:35 - 1:37
    that we had onto the back of my name.
  • 1:38 - 1:40
    And we can even make this
    a little bit more exciting,
  • 1:40 - 1:43
    if we wanted to write message, say, twice.
  • 1:43 - 1:46
    So this looks pretty reasonable,
    you know adding strings means
  • 1:46 - 1:49
    you stick one string
    onto the back of the other string.
  • 1:49 - 1:52
    But you might be thinking,
    can we get really crazy?
  • 1:52 - 1:55
    And start multiplying or dividing
    or subtracting strings?
  • 1:55 - 1:57
    Could we do that? Well no we can't,
  • 1:57 - 1:59
    with strings we can only add them.
  • 1:59 - 2:02
    You're right that we could divide
    and subtract with number variables,
  • 2:02 - 2:05
    but string variables only allow us to add.
  • 2:05 - 2:07
    But still being curious and asking
    those sorts of questions,
  • 2:07 - 2:10
    is the right attitude in programming.
  • 2:10 - 2:12
    You might think, "What would
    it mean to divide a string?"
  • 2:13 - 2:17
    So we can also use animation
    and mouse interaction with text strings.
  • 2:18 - 2:20
    For example, we can make the string
    follow the mouse around.
  • 2:20 - 2:23
    Just by sticking it in a draw loop
    like we did with the rectangles.
  • 2:23 - 2:26
    So if you think about how to do this,
    we would say var draw,
  • 2:27 - 2:30
    and then we'll stick all of this, right in here.
  • 2:30 - 2:33
    This probably looks really familiar,
    from "intro to animation."
  • 2:33 - 2:36
    And you might think, alright, well to
    make it follow the mouse around,
  • 2:36 - 2:39
    we certainly need to use
    mouseX, and mouseY
  • 2:39 - 2:43
    and there you have it we're
    actually painting with our name.
  • 2:43 - 2:47
    And of course if we wanted,
    we could easily set a background,
  • 2:47 - 2:51
    say to, you know, a nice light blue.
  • 2:51 - 2:55
    And now we have that the text
    is just following the mouse around,
  • 2:55 - 2:57
    just like we saw with the rectangles.
  • 2:57 - 3:00
    And now as a last fun trick,
    let's use animation,
  • 3:00 - 3:03
    and make the text size
    grow and grow and grow.
  • 3:03 - 3:06
    So, here we're setting the textSize to 30,
    as we learned in variables
  • 3:06 - 3:11
    instead of using 30, we could also say,
    var howBig equals 30;
  • 3:11 - 3:14
    and then use this variable
    instead of doing 30 directly.
  • 3:15 - 3:16
    Well that's the exact same thing,
  • 3:16 - 3:19
    and we need to obviously
    be changing something
  • 3:19 - 3:20
    in order to get an animation.
  • 3:20 - 3:25
    So we can do that by saying,
    how big equals how big plus one
  • 3:25 - 3:28
    which actually means,
    if you remember howBig gets,
  • 3:28 - 3:32
    you know how big it was before,
    plus one to make it a little bit larger
  • 3:32 - 3:35
    and now we just need to
    restart the program,
  • 3:35 - 3:37
    and here we have that
    as we're moving the mouse around,
  • 3:37 - 3:40
    the text size is growing and growing
    and growing and growing
  • 3:40 - 3:42
    because of this line right here.
  • 3:43 - 3:45
    And you know, just on your own,
  • 3:45 - 3:48
    you might think, okay how
    can we make it grow faster?
  • 3:48 - 3:52
    So now, not only do you know how
    to manipulate shapes with code,
  • 3:52 - 3:55
    but you can also use text with code as well.
Title:
Terrific Text Part 2
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:
03:57
Jennifer Fennerl edited English subtitles for Terrific Text Part 2
Jennifer Fennerl edited English subtitles for Terrific Text Part 2
Jennifer Fennerl edited English subtitles for Terrific Text Part 2
Uni Mikkelsen edited English subtitles for Terrific Text Part 2
Uni Mikkelsen edited English subtitles for Terrific Text Part 2

English subtitles

Revisions