Return to Video

The Resume's HTML - JavaScript Basics

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

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

Chinese, Simplified subtitles

Revisions Compare revisions