Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Putting JS In a webpage (Video Version)

Get Embed Code
6 Languages

Showing Revision 2 created 02/23/2015 by Josh Kline.

  1. A basic webpage, like this one,
    is made up of HTML tags, like all these.

  2. Now, when we want to style a webpage,
    how do we bring CSS into it?
  3. We add a `<style>` tag.
  4. And the browser knows
    when it sees a style tag
  5. to use its CSS engine
    to process that tag.
  6. We usually put the `<style>` tag
    in the `<head>`,
  7. because we want to make sure that
    the browser processes the styles
  8. before it renders the HTML tags.
  9. Otherwise, if we put `<style>`
    at the bottom here,
  10. then we could have an FOUC:
    a flash of unstyled content,
  11. and people would see
    our wepage naked-- gross!
  12. Let's bring it back here where it belongs.
  13. Okay, so now this webpage has style.
  14. How do we bring JavaScript into a webpage
    when we want to add interactivity?
  15. For that, we add a `<script>` tag.
  16. And the best place to put a `<script>` tag
  17. is actually at the very bottom of the page
    right before your end `</body>` tag.
  18. I've put it there, and
    I'll explain why it's there in a bit.
  19. Now what can I put
    inside this `<script>` tag?
  20. Hmm, we can put any valid JavaScript in it,
    like `var four = 2 +2;`.
  21. But that's not terribly exciting, because
    nothing's happening on our webpage.
  22. And if you're on Khan Academy,
    you probably already knew
  23. that four equals two plus two.
  24. So one thing I can do
    to check that it works,
  25. is to write this line of code here.
  26. Okay, you don't see anything, right?
  27. And maybe you've never seen
    this function before.
  28. This function, `console.log`,
    is a special one we can use
  29. in many JavaScript environments,
    including browsers.
  30. And it will write out things
    to the JavaScript console.
  31. You can find that console
    in your browser
  32. by pressing Command-Option-I,
    or Control-Option-I,
  33. or right-clicking anywhere on the page,
    and selecting "Inspect element".
  34. Pause the talkthrough now,
    and try to bring up your dev console
  35. to see that message.
  36. So, did you see it? Great!
  37. You can close the console now
    if you'd like,
  38. as it can take up a lot of room.
  39. It can also get distracting since
    it'll show you every error as I'm typing.
  40. It is a great tool for debugging, though.
  41. So definitely file it away
    in your toolbox.
  42. Now let me actually do something
    to the page with JavaScript,
  43. using a line of code that
    will not make a lot of sense yet.
  44. See what happened?
  45. Our webpage disappeared, and was replaced
    with our "leet hacker" message.
  46. We'll go into more details about
    how this line of code actually works.
  47. But basically it found the `<body>` tag,
    and replaced the contents.
  48. Now what would happen if I copied
    and pasted this `<script>` tag,
  49. and stuck it up in the `<head>`
    with the `<style>` tag?
  50. It doesn't work-- why not?
  51. Because the webpage evaluates
    the `<script>` tag
  52. before it sees the `<body>` tag.
  53. And it says, "Uh-oh, I haven't even seen
    `document.body` yet,
  54. "And you're trying to manipulate it!
    That can't happen."
  55. That's why we have to put our
    `<script>` tag at the bottom of the page.
  56. So that the webpage sees
    the `<body>` tag first,
  57. sees everything in it,
    and then we start doing stuff to it.
  58. We want to make sure that
    the webpage exists first.
  59. And that's different from CSS:
  60. We want to put our `<style>` tag
    at the beginning,
  61. because the CSS parser is fine
    with applying styles
  62. to things that don't exist yet.
  63. It'll just apply them once they happen.
  64. But JavaScript DOM is not fine with that.
  65. So make sure it goes at the bottom here.
  66. Try adding the `<script>` tag
    in the next challenge,
  67. making sure you put it at the bottom,
  68. and then I promise I will explain
    much more about this line right here.