CSS JavaScript JSON Ajax.ppt

CSS JavaScript JSON Ajaxviz webfrontendtechnology2009 12 为了更平坦的世界Foraflatterworld 目录 第1部分CSS第2部分JavaScriptAndJSON第3部分AJAX第4部分前端技术的未来 第1部分CSS Div CSS可以实现标准化网页布局Div divisionCSS cascadingstylesheetsCSS是网页的衣服 用来渲染网页元素 1 1样式表语言的位置 行内样式 内联样式 Style属性嵌入样式Head中使用style标签外部样式Link方式引入输入样式 importurl 的方式将某个外置文件引入当前的外置文件 importurl 的方式将摸个外置文件引入到嵌入样式中 CSS选择器 1 2CSS选择器 标签选择器类选择器ID选择器伪类及伪对象选择器关联选择器组合选择器 选择器分组 more 标准和实现之间的差距 1 3盒子模型以及布局初步 一 1 3盒子模型以及布局初步 二 第2部分JavaScriptAndJSON JavaScript应知应会UnobtrusiveJavaScriptThesevenrulesofUnobtrusiveJavaScript byChrisHeilmann JavaScript 最佳实践 JSONJavaScriptObjectNotation 2 1对象怎样成为对象 varperson newObject 问题 Object是什么 是类么 JavaScript和传统面向对象语言 Java C 不同 varperson json表示 2 2对象的属性 varperson person name 张无忌 person age 20 2 3JSON语法初步 一 属性引用操作符 和 不是万能的varperson person name 张无忌 varageKey ag e person ageKey 20 person 2name 曾阿牛 2 3JSON语法初步 二 varperson name 张无忌 age 20 varweapons name 倚天 weight 80 name 屠龙 weight 120 2 3JSON语法初步 三 从技术上讲 JSON无法表示日期值 主要是因为JavaScript缺少任何种类的日期字面量 一般直接使用newDate 来构造日期使用getTime 或valueOf 方法来获取毫秒数 2 4不要过多的 污染 顶级对象 在顶层之间使用var声明的变量都作为window的属性不在顶层 不使用var声明的变量也作为window的属性这是坏习惯 项目组内部通用的JS库 命名空间 function varyida window yida yida foo function alert bar 2 5函数是JavaScript中的一等公民 Functionsasfirst classcitizens BearBibeaultvarperson name 张无忌 age 20 person sayHello function alert 谁给我一把剑 剑指向一条出路 问题 一个函数可否作为另一个函数的参数传递 2 6总在页面加载完毕后开始 写 脚本 OnlyJavaScriptwindow onload function alert domready WithMootoolsFrameworkwindow addEvent domready function alert domready WithjqueryFramework document ready function alert domready 2 7遵循不唐突的JavaScript 总是为元素注册事件 foo1 1 htmlfoo1 2 htmlfoo1 3 html 2 8回调 foo2 htmlwindow setTimeout function 1000 2 9上下文和this foo3 html根据函数如何被调用 同一个函数可以拥有不同的函数上下文 这对写出优雅且灵活的JavaScript代码相当有用 2 10作用域 foo4 htmlwindow onload function varfoo function if true varbar bar alert bar alert window bar foo 2 11JavaScript函数没有传统面向对象的重载 只读数组arguments两种方式模拟重载varfoo function for vari 0 i arguments length i alert arguments i foo 1 2 3 2 12闭包 在声明函数时 可以在声明之处引用在其作用域内的任何变量 甚至在声明之处已经超出作用域而关闭声明之后 这些变量仍为该函数所支持 foo5 html注意 1 JavaScript中的所有闭包都被隐式的创建 不像其他支持闭包的语言需要显示的语法 这是双刃剑 一方面便于创建闭包 无论程序员是有意还是无意 另一方面可能会带来意外的后果 循环的引用可能会造成内存泄漏 2 函数上下文不被包含的闭包的一部分 需要声明一个中间变量来实现 foo6 html 2 13函数作为一等公民未介绍的内容 模块级联套用记忆递归 2 14面向对象一种实现方式 JavaScript是一种基于原型 prototype 的面向对象的语言 没有类的概念基于原型模式创建对象 functionPerson name this name name Person prototype sayHello function alert this name varp newPerson Jane p sayHello alert Person prototype isPrototypeOf p Person prototype Person的prototype对象 construtctor sayHello p proto 2 15prototype 对JS的对象中的成员是有访问操作 读和写 读的时候从原型链的原型对象上读 写的时候往本对象上写 functionPerson Person prototype age 22 varp1 newPerson varp2 newPerson p2 age 23 alert p1 age alert p2 age Person Person的prototype对象 p1 p2 prototype proto proto age 22 age 23 constructor 2 16prototype最佳实践 functionPerson name age this name name this age age Person prototype constructor Person sayHello function alert this name foo function alert foo varp newPerson Jane 33 2 17prototype未介绍的内容 基于prototypechaining的继承 2 18Ecma262实用对象 RegExpStringDateMathGlobal和WindowencodeURI 和eval 2 19主流的JS框架 Google排名中的10个最著名的JavaScript库 第3部分Ajax AsynchronousJavaScriptAndXML 使用XHTML和CSS的基于标准的表示技术 老技术 新 思想 无刷新更新页面 按需获取数据 减小服务器负担 给用户连续动态的体验 使用XMLHttpRequest进行异步数据检索 使用DOM进行动态显示和交互 3 1了解 Ajax是什么 3 2使用JavaScript原生API实现Ajax应用 四个步骤1 创建xhr2 注册readyState变化时的回调函数3 设置与服务器的连接情况及提交方式4 发送请求创建自己Ajax工具集对XHR进行了简单朴素的封装 3 3异步请求往服务端发送的参数值 发送方式GetPost发送形式类似同步 表单或URL传参 发送XML 不常用 注 使用xhr的send方法还可以向服务器端发送XMLxhr send 222cccc BufferedReaderbr request getReader 3 4解析服务器端的响应 返回HTML返回JSONJSON作为一种轻量级的数据交换格式 尽管它作为JavaScript语言的一个子集 但它与语言无关 它是一种文本格式方便被人或机器阅读 返回XMLvardomObj xhr responseXML 直接用domapi解析问题 什么时候返回JSON 什么时候返回HTML 3 5安全的使用JSON 一 eval函数有着骇人听闻的安全问题 Goggle 在服务器存有而已的情况下 有漏洞的服务器获取不能正确的对JSON编码 推荐使用http www json org json2 js中的JSON parse来代替eval 如果文本中包含危险数据JSON parse将抛出一个异常 很多框架 如Mootools GWT内置了自己的解析方式 jQuery1 3 2直接使用eval解析JSON GettheJavaScriptobject ifJSONisused if type json data window eval data 3 5安全的使用JSON 二 1 2 function document forms 0 action 3 6跨域访问 跨域访问的问题XMLHttpRequest的一个特殊安全问题 IE 访问跨域页面时会给出提示