English subtitles

← Mixing replace() and append() - JavaScript Basics

Get Embed Code
6 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

  1. As we know, HTML defines the content of a page.
  2. Now that we know how to replace text,
  3. we can replace placeholders in HTML with real data.
  4. After that, we just need to append HTML strings to start building our resume.
  5. >> Let's look inside helper.js, which through the magic of computers we
  6. have over here on this side of the screen.
  7. It contains some helper data that your project will take advantage of.
  8. Because helper.js shows up before resumebuilder.js, which you can't see,
  9. but it's way down here at the bottom of the screen.
  10. It will load first, and we'll have access to all the data from helper.js,
  11. when we start writing resumebuilder.js.
  12. We can see a few string variables here,
  13. Ike HTML mobile, HTML email and HTML twitter.
  14. Each of them has a percent, data percent place holder.
  15. Here and here.
  16. And each of those will be replacing %data% with our actual data.
  17. >> So how are they going to replace %data%?
  18. >> The same way we replaced awesome with fun, using the replace method.
  19. >> Let's see it.
  20. >> Let's say I wanted my properly formatted name to appear on the page.
  21. In that case,
  22. I first need to create a new variable that stores HTML with my data.
  23. I'll save a variable called formattedName and set it equal to
  24. HTMLheaderName.replace, %data%,
  25. and pass in a variable storing my name.
  26. Then I will pin the formattedName to the header.
  27. Voila.
  28. There's my formatted name.
  29. >> Very cool.