YouTube

Got a YouTube account?

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

Chinese, Simplified subtitles

← The Resume's HTML - JavaScript Basics

Get Embed Code
7 Languages

Showing Revision 2 created 08/27/2016 by Udacity Robot.

  1. 我们先来看一下 index.html
  2. 别担心 HTML 其实非常简单
  3. 它用于描述网页内容和元素布局
  4. 我们来看里面都写了什么
  5. 最上面是页面的 head 标签
  6. 我们通常会链接到 CSS 像在这里
  7. 在 body 部分 我们能找到一行文字
  8. Hello world
  9. 转到 Chrome 浏览器上能看到同样的文字
  10. 如果你想学习更多 HTML 知识
  11. 请查看讲师注释
  12. HTML 里面有几个值得注意的元素
  13. 比如这个 id 等于 main 的 div 元素
  14. 里面包含显示在浏览器的那行 Hello world
  15. Div 分隔页面中的不同部分
  16. 你可以把他们看成装东西的空箱子
  17. 这里 我们赋予该 div 唯一 id main
  18. 后面会通过 JavaScript 引用它
  19. 你注意到其它东西了么 James?
  20. 这看起来还不像一份简历
  21. 但基本结构已经有了
  22. 比如 education work projects 三个部分
  23. 现在向里面填充内容怎么样 ?
  24. 这时 网站开发者
  25. 通常有两种策略可选
  26. 一种是采取硬编码的方式
  27. 将内容直接写到 HTML 里
  28. 另一种是使用 HTML 模板
  29. 在用户请求页面的时候向里面填充所需数据
  30. 来看一看 experience 部分的两种实现
  31. 硬编码版本中
  32. 所有 Phillip J.Fry 的信息都列在这里
  33. 再来看看模板方法里 experience 部分
  34. 目前它还是空的
  35. 硬编码的方式适于初学
  36. 但长远来讲绝不是个好办法
  37. 我们可能在任意时间要修改页面
  38. 每次都要打开 HTML 进行手动修改绝对是个头疼事
  39. 在简历项目中 我们会使用模板方法
  40. 你觉得怎么样
  41. 棒 那对我很有用
  42. 另外 这并不是 HTML 课程
  43. 那不是我们关注的重点
  44. 优秀的 HTML 在线课程有很多
  45. 查看讲师注释里的链接吧
  46. 在 HTML 文件顶部 有一个链接指向 jQuery 库
  47. 我们还引入了 helper.js,
  48. 里面保存着为项目准备的代码
  49. 过几分钟我们来细看它
  50. HTML 文档底部还有两个脚本标记
  51. 这是对应 resumeBuilder.js 的
  52. 来告知浏览器下载并运行 JavaScript
  53. 我们用该脚本向 HTML 的 main 部分添加内容
  54. 浏览器渲染页面后显示 Hello world
  55. 为了方便观察
  56. 我们聚焦到页面上
  57. Hello world 在这 然后是一些空白部分和 JavaScript
  58. 在另一边
  59. 我们能看到它在浏览器中大概样貌
  60. 先打印 Hello world
  61. 之后是简历的若干部分
  62. 到了包含 JavaScript 的部分
  63. 浏览器就会运行脚本
  64. 改写 HTML 的 experience 部分
  65. 页面中出现我们的简历内容
  66. 等一下
  67. 你可能会问其它部分在哪
  68. 我们简历中本应包含的内容
  69. 页面上却没有完全显示
  70. 这是底下这段代码造成的
  71. 我们用 JavaScript
  72. 检查这些部分是否有内容
  73. 如果没有 就隐藏它们
  74. 我们之后会对这段 JavaScript 作详细说明