English subtitles

← The Resumes HTML - JavaScript Basics

Get Embed Code
7 Languages

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

  1. >> Lets start with index.html.
  2. Don't worry HTML is pretty simple.
  3. It describes the content and lay out of elements on a web page.
  4. We'll be comparing what we see here to the website.
  5. In this top section, we see the page's head tag defined.
  6. We'll often find CSS in JavaScript links, like these here.
  7. Inside the body of the text, we can see that we've got content that says,
  8. Hello world.
  9. And when we flip over to Chrome, there it is.
  10. If you want to learn more about HTML,
  11. check out the link in the instructor's notes.
  12. Looking through the HTML for our resume, there are a few elements worth noting.
  13. Like this one, div id equals main.
  14. I can see that it says, Hello world here, but showed up on the website.
  15. Div represents different elements on the page,
  16. you can think of them as starting like empty all purpose boxes.
  17. In this case, we've given this div a unique id of main,
  18. which our JavaScript will be referencing later.
  19. Do you see anything else, James?
  20. >> It doesn't look like a resume at all right now,
  21. but I do see some structure for one.
  22. It looks like there are sections for education, work and projects.
  23. What do you think about filling these in with our resume data?
  24. >> Yeah.
  25. You know, web developers have options for building great web pages.
  26. And I think there are two obvious strategies.
  27. They can either hard code the information by writing HTML that
  28. explicitly defines the content users should see.
  29. Or they can use an HTML template and
  30. fill it in with data programmatically when a user requests a page.
  31. In this case, we can see the two work experience sections.
  32. In the hard coded version, we can see all of Phillip J.
  33. Fry's data listed here.
  34. While on the template side, we see the work experience section.
  35. But right now, it's empty.
  36. >> The hard coded route is good to start, but it isn't a solution for
  37. the long term.
  38. Anytime we want to make a change to the page,
  39. we have to open up the HTML, make the changes by hand, which can be a big pain.
  40. For the resume project, we'll be using the template strategy.
  41. What do you think?
  42. >> Yeah, that works for me.
  43. besides, if we weren't then this class would be about HTML.
  44. Which it isn't.
  45. >> Yeah, there are other great introductions to HTML online.
  46. See the instructor's notes for a few links.
  47. At the top of the HTML, there's a link to jQuery.js, the jQuery library.
  48. There's also helper.js,
  49. which contains some simple helper JavaScript we've prepared for your project.
  50. We'll be coming back to it in a few minutes.
  51. >> We've got two more script tags at the bottom of the HTML.
  52. This tag for resumeBuilder.js, tells the browser to download and
  53. execute some JavaScript.
  54. We'll be using this script to add HTML content to the main section of the HTML.
  55. >> The browser will render this page just saying, Hello world.
  56. To give you a better overview of what's going on here,
  57. we've zoomed out the page so you can see everything all at once.
  58. We have Hello world here, some empty resume sections and then some JavaScript.
  59. And over on this side,
  60. we can see a general representation of how it would look in a browser.
  61. We're printing the Hello world and
  62. then after the Hello world, we have all of the resume sections.
  63. And when we hit the JavaScript section that includes resume builder down here,
  64. the browser will run the script.
  65. Which will change the HTML in these experience sections and
  66. the page will now show our resume.
  67. >> But wait.
  68. You may ask yourself, what about all of these experience sections.
  69. It looks like they're in the resume, but
  70. they aren't showing up on the page right now.
  71. That's because of these scripts at the bottom of our resume.
  72. Using JavaScript, we're checking to see if any of
  73. these sections contain any content.
  74. And if not, we hide them.
  75. We'll get a chance to break down these JavaScript sections later