HTML & JavaScript

2,014 views
1,898 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,014
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML & JavaScript

  1. 1. HTML 和 JavaScript 2009-04-29
  2. 2. WEB 前端工程师
  3. 3. WEB 前端工程师 ? <ul><li>招聘要求可能是这样的: </li></ul><ul><li>1. 精通各种 Web 前端技术,包括 XHTML/XML/CSS/JavaScript/ActionScript 等( JS 和 AS 之一即可); </li></ul><ul><li>2. 深刻理解 Web 标准,对可用性、可访问性等相关知识有实际的了解和实践经验; </li></ul><ul><li>3. 有基于 Ajax 或 Flash 的 RIA 应用开发经验; </li></ul><ul><li>4. 至少精通一门非 Web 前端脚本的语言(如 Java/PHP/C++ ),并有项目经验; </li></ul><ul><li>5. 个性乐观开朗,逻辑性强,善于和各种背景的人合作 </li></ul><ul><li>6. 计算机、数学、自动化等相关专业本科以上学历优先 </li></ul>
  4. 4. WEB 前端工程师 - 知识结构
  5. 5. WEB 前端工程师 - 工作职责 <ul><li>1. 产品的视觉呈现(设计) </li></ul><ul><li>2. 产品前端交互的实现(与用户交互) </li></ul><ul><li>3. 产品前端逻辑的实现(与后台数据交互) </li></ul><ul><li>4. 保证产品用户体验 </li></ul>
  6. 6. HTML
  7. 7. HTML <ul><li>超文本标记语言( HyperText Mark-up Language ) </li></ul><ul><li>元素( element )、属性( attribute,property )和数据类型( data type ) </li></ul>
  8. 8. HTML- 历史 <ul><li>HTML+(1993) -> HTML 2(1995) -> HTML 3.2(1996) -> HTML 4(1997) -> HTML 4.01(1999) ISO/IEC 15445:2000 (“ ISO HTML” ) -> HTML 5(Now) </li></ul><ul><li>A history of HTML http://www.w3.org/People/Raggett/book4/ch02.html </li></ul>
  9. 9. HTML-XHTML 历史 <ul><li>Extensible Hypertext Markup Language </li></ul><ul><li>XHTML 1.0 (2000) -> XHTML 1.1 (2001) -> XHTML 2.0 (Now) </li></ul><ul><li>http://www.w3.org/MarkUp/ </li></ul>
  10. 10. HTML-html 与 xhtml 区别 <ul><li>以下是 XHTML 具备: </li></ul><ul><li>标签不能重叠 , 可以嵌套 </li></ul><ul><li>标签与属性都要小写 </li></ul><ul><li>标签都要有始有终 , 要么以 </p> 形式结束 , 要么以 <br /> 形式结束 </li></ul><ul><li>每个属性都要有属性值 , 并且属性值要在双引号中 </li></ul><ul><li>别用 name 用 id </li></ul><ul><li>http://www.w3.org/TR/xhtml1/#diffs </li></ul>
  11. 11. HTML- 什么是 DTD <ul><li>DTD 文档类型定义 (Document Type Definition ) </li></ul><ul><li>1 定义 HTML 文档中所使用的元素和属性遵守哪一种版本的 HTML 规范 </li></ul><ul><li>2 以确定该使用什么规则来校验文档 </li></ul><ul><li>http://www.w3.org/TR/REC-html40/sgml/dtd.html </li></ul>
  12. 12. HTML- 我们正在使用的标准 <ul><li>HTML 4.01 </li></ul><ul><li>http://www.w3.org/TR/1999/REC-html401-19991224/ </li></ul>
  13. 13. HTML-4.01DTD <ul><li>HTML 4.01 DTD 规范分为: Strict, Transitional, Frameset </li></ul><ul><ul><li>严格的 (Strict) :使用 CSS 来做格式化,不能使用任何表现层的标识和属性,【解读:尽可能少地包含表现性( presentational )的标记】 </li></ul></ul><ul><ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN &quot;http://www.w3.org/TR/html4/ strict .dtd&quot;> </li></ul></ul></ul><ul><ul><li>过渡的 (Transitional) :要求非常宽松的 DTD ,向严格的文件类型描述过渡的缓冲 </li></ul></ul><ul><ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; &quot;http://www.w3.org/TR/html4/ loose .dtd&quot;> </li></ul></ul></ul><ul><ul><li>框架的 (Frameset) :专门针对框架页面设计使用的 DTD ,如果你的页面中包含有框架,需要采用这种 DTD </li></ul></ul><ul><ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; &quot;http://www.w3.org/TR/html4/ frameset .dtd&quot;> </li></ul></ul></ul>
  14. 14. HTML– 标签使用原则 <ul><li>简洁( html 标签不能滥用) </li></ul><ul><li>语义( html 标签不能乱用) </li></ul><ul><ul><li>直观的认识标签 (markup) 和属性 (attribute) </li></ul></ul><ul><ul><li>对搜索引擎友好 </li></ul></ul>
  15. 15. HTML- 进阶 <ul><li>分离内容和表现 </li></ul><ul><li>语义化 HTML </li></ul>
  16. 16. HTML-CSS <ul><li>CSS 指层叠样式表 ( C ascading S tyle S heets) </li></ul><ul><li>把样式添加到 HTML 中,是为了解决内容与表现分离的问题 </li></ul><ul><li>遵循 w3c 标准 </li></ul><ul><li>兼容浏览器包括 ie6,ie7,ff2,ff3 </li></ul>
  17. 17. HTML- 使用 CSS 好处 <ul><li>样式解决了一个普遍的问题 </li></ul><ul><ul><li>HTML 标签原本被设计为用于定义文档内容。通过使用 <h1> 、 <p> 、 <table> 这样的标签, HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。 W3C 在 HTML 4.0 之外创造出样式。 </li></ul></ul><ul><li>样式表极大地提高了工作效率 </li></ul><ul><ul><li>通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。 </li></ul></ul><ul><li>多重样式将层叠为一个 </li></ul><ul><ul><li>样式表允许以多种方式规定样式信息 。 </li></ul></ul>
  18. 18. HTML-CSS 用法 <ul><li>直接加入 HTML 文档 </li></ul><ul><li>URL 引用方式 </li></ul>
  19. 19. HTML-CSS 层叠次序 <ul><li>一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。 </li></ul><ul><ul><li>浏览器缺省设置 </li></ul></ul><ul><ul><li>外部样式表 </li></ul></ul><ul><ul><li>内部样式表(位于 <head> 标签内部) </li></ul></ul><ul><ul><li>内联样式(在 HTML 元素内部) </li></ul></ul><ul><li>因此,内联样式(在 HTML 元素内部)拥有最高的优先权。 </li></ul>
  20. 20. HTML- 例子
  21. 21. HTML- 例子
  22. 22. HTML- 例子
  23. 23. HTML- 例子
  24. 24. HTML- 展望 HTML 5.0 <ul><li>大量的使用 div 元素 , 缺少更明确的语义描述区块 , 孕育了 HTML5.0 的产生。 </li></ul>
  25. 25. JavaScript
  26. 26. JavaScript- 历史 <ul><li>Javascript 是一种由 Netscape 的 LiveScript 发展而来的面向对象的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl ,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢 , 只有 28.8kbps ,验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 JavaScript ,提供了数据验证的基本功能。 </li></ul><ul><li>JavaScript 的正式名称是 “ ECMAScript” 。 </li></ul><ul><li>ECMA-262 是正式的 JavaScript 标准。 </li></ul><ul><li>在 1997 年, ECMA 会员大会采纳了它的首个版本 。 </li></ul><ul><li>在 1998 年,该标准成为了国际 ISO 标准 (ISO/IEC 16262) 。 </li></ul><ul><li>在 2005 年 12 月, ECMA 发布 ECMA-357 标准( ISO/IEC 22537 )出台,主要增加对扩展标记语言 XML 的有效支持。 </li></ul><ul><li>目前 JavaScript 的最新版本为 1.8 </li></ul>
  27. 27. JavaScript- 描述 <ul><li>被设计用来向 HTML 页面添加交互行为 </li></ul><ul><li>是一种脚本语言(脚本语言是一种轻量级的编程语言) </li></ul><ul><li>是一种解释性语言(就是说,代码执行不进行预编译) </li></ul><ul><li>通常被直接嵌入 HTML 页面 </li></ul><ul><li>由数行可执行计算机代码组成 </li></ul>
  28. 28. JavaScript- 用法 <ul><li>直接加入 HTML 文档 </li></ul><ul><li>URL 引用方式 </li></ul><script language=“javascript&quot;> <!-- document.writeln(&quot; 这是 JavaScript !采用直接插入的方法! &quot;); //--> </script> <script src=“jsfilename.js” type=“text/javascript”></script>
  29. 29. JavaScript- 基础 <ul><li>运算符 </li></ul><ul><li>表达式 </li></ul><ul><li>语句 </li></ul><ul><li>变量 </li></ul><ul><li>函数 </li></ul><ul><li>对象 </li></ul><ul><li>事件 </li></ul>
  30. 30. JavaScript- 类型 <ul><li>ECMAScript 有 5 种原始类型( primitive type ),即 Undefined 、 Null 、 Boolean 、 Number 和 String 。 </li></ul><ul><li>除了原始类型,其他都是对象( object )。 </li></ul>
  31. 31. JavaScript- 对象 <ul><li>ECMA-262 把对象( object )定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。严格说来,这意味着对象是无特定顺序的值的数组。 </li></ul><ul><li>在 ECMAScript 中,对象由特性( attribute )构成,特性可以是原始值,也可以是引用值。如果特性存放的是函数,它将被看作对象的方法( method ),否则该特性被看作属性( property )。 </li></ul><ul><li>本地对象、内置对象和宿主对象 </li></ul>
  32. 32. JavaScript- 本地对象 <ul><li>ECMA-262 把本地对象( native object )定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。 </li></ul><ul><li>Object , Function , Array , String , Boolean , Number , Date , RegExp , Error , EvalError , RangeError , ReferenceError , SyntaxError , TypeError , URIError </li></ul>
  33. 33. JavaScript- 内置对象 <ul><li>ECMA-262 把内置对象( built-in object )定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现”。 </li></ul><ul><li>这意味着开发者不必明确实例化内置对象,它已被实例化了。 </li></ul><ul><li>ECMA-262 只定义了两个内置对象,即 Global 和 Math (它们也是本地对象,根据定义,每个内置对象都是本地对象)。 </li></ul><ul><li>Global 对象根本不存在 </li></ul>
  34. 34. JavaScript- 宿主对象 <ul><li>所有非本地对象都是宿主对象( host object ),即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM ( Browser Object Model )和 DOM ( Document Object Model )对象都是宿主对象。 </li></ul>
  35. 35. JavaScript-BOM <ul><li>window 对象是整个 BOM 的核心,所有对象和集合都以某种方式回接到 window 对象。 </li></ul>
  36. 36. JavaScript-DOM <ul><li>DOM 给予开发者空前的对 HTML 的访问能力,并使开发者能将 HTML 作为 XML 文档来处理和查看。 </li></ul>
  37. 37. JavaScript- 库 <ul><li>jQuery : JavaScript 库中的新成员,提供 css 和 xpath 选择符查找元素, ajax ,动画效果等 </li></ul><ul><li>dojo :一个巨大的库,包括的东西很多, dijit 和 dojox 是 dojo 的扩展,几乎你想要的各种 JavaScript 程序都包括了 </li></ul><ul><li>prototype :一个非常流行的库,使用了原型链向 JavaScript 中添加了很多不错的函数 </li></ul><ul><li>YUI : Yahoo !用户界面,非常实用,提供各种解决方案 </li></ul>
  38. 38. 参考资料 <ul><li>http://www.w3school.com.cn </li></ul><ul><li>http://docs.jquery.com/Main_Page </li></ul><ul><li>http://www.dojotoolkit.org/docs </li></ul><ul><li>http://www.prototypejs.org/api </li></ul><ul><li>http://developer.yahoo.com/yui </li></ul><ul><li>http://jslint.com/ </li></ul><ul><li>http://www.crockford.com/javascript/jsmin.html </li></ul>

×