Return to Video

Variable Substitution - Web Development

  • 0:01 - 0:03
    Now we're actually going to use these templates. First thing
  • 0:03 - 0:07
    we're going to learn is, variable substitution. The syntax for in,
  • 0:07 - 0:11
    substituting a variable in Jinja is just double curly braces,
  • 0:11 - 0:13
    and then you include your variable name, and then you
  • 0:13 - 0:17
    close your curly braces. Pretty simple, right? Basically these curly
  • 0:17 - 0:20
    braces, it just means print. It's as if you typed
  • 0:20 - 0:23
    the print statement. In the middle of your HTML code.
  • 0:23 - 0:26
    So let's see what that looks like in practice. Okay,
  • 0:26 - 0:30
    I'm going to go into my shopping list HTML file. And add,
  • 0:30 - 0:32
    I'm just going to add a string right to the bottom of
  • 0:32 - 0:35
    the file. Okay. So I just said hello, and then I
  • 0:35 - 0:39
    added in a curly, curly name. Now, where is name defined? It
  • 0:39 - 0:42
    does not define anywhere yet. Let's see what happens when I
  • 0:42 - 0:46
    reload this page with just this. Here I am in a
  • 0:46 - 0:48
    browser. Let's reload this page. And it says hello, and there's
  • 0:48 - 0:51
    nothing there. Actually we can get rid of this egg. That's a
  • 0:51 - 0:54
    little leftover. So Jinja, if the variable's not
  • 0:54 - 0:58
    defined, just quietly doesn't include it. Now let's
  • 0:58 - 1:00
    go ahead and include name. Lets just kind of
  • 1:00 - 1:05
    hacked this in real quick. Name equals Steve. Okay,
  • 1:05 - 1:07
    so, remember before I was talking about this
  • 1:07 - 1:10
    star, star syntax. Name equals Steve basically gets
  • 1:10 - 1:13
    passed in as star, star kw, which gets
  • 1:13 - 1:16
    passed along here. Which gets received by render string
  • 1:16 - 1:19
    as star, star params. Just different variable names, to
  • 1:19 - 1:23
    be deliberately confusing for some reason, and which gets passed
  • 1:23 - 1:27
    into the render function from Jinja, which expects keyword parameters.
  • 1:27 - 1:30
    So, it's going to define name equals Steve, and if we
  • 1:30 - 1:33
    go to our browser and reload this. We see, it
  • 1:33 - 1:35
    says hello Steve. Let's see if we can make this
  • 1:35 - 1:38
    a little bit fancier. What is instead of name equals
  • 1:38 - 1:42
    Steve all the time, we said name equals self.request.get name.
  • 1:42 - 1:43
    So we can put name as a, as a parameter.
  • 1:43 - 1:47
    Let's see if that works. Okay, if I reload this
  • 1:47 - 1:50
    page, I get nothing, because there is no parameter. But
  • 1:50 - 1:53
    if I add name equals udacity, we can see that
  • 1:53 - 1:57
    udacity appears in our template. Okay, so, right now we
  • 1:57 - 2:01
    basically have this very elaborate way of doing string substitution
  • 2:01 - 2:03
    via these files, but we can, we can always see
  • 2:03 - 2:06
    we're somewhat on the right direction of having cleaner code.
  • 2:07 - 2:12
    And, time for our quick quiz, okay, so what I want you to do, is use
  • 2:12 - 2:14
    variable substitution, the syntax I just showed you,
  • 2:14 - 2:17
    to make this string. The quick brown and
  • 2:17 - 2:20
    then the variable, animal1, jumped over the lazy,
  • 2:20 - 2:23
    and then the variable, animal2. Go ahead and
  • 2:23 - 2:25
    type this complete string with the correct variable
  • 2:25 - 2:28
    substitutions for these variables, in the box here.
タイトル:
Variable Substitution - Web Development
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
CS253 - Web Development
Duration:
02:29

English subtitles

改訂 Compare revisions