Return to Video

The Resumes HTML - JavaScript Basics

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

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
04:01

English subtitles

Revisions Compare revisions