Your SlideShare is downloading. ×
0
YUI Simple Introduction
前端工程师 Front-end Engineer
什么是前端工程师?
什么是前端工程师? <ul><ul><li>做 Demo </li></ul></ul><ul><ul><li>HTML/CSS/JavaScript </li></ul></ul><ul><ul><li>在各种浏览器里保持一致 </li></...
前端流程
做前端很简单?
非也 !
 
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul>
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul>
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul>
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器...
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器...
掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器...
 
  国际化、 可用性 、本地化、视觉设计、 易用性 、信息架构、 安全 、流程化、 性能 、标准、设备、可移植性  ... ...
 
YUI
YUI 是一把彪悍的军刀 http://developer.yahoo.com/yui
怎样自学成才 Examples: http://developer.yahoo.com/yui/examples/ API Docs: http://developer.yahoo.com/yui/docs/ Team Blog: http:/...
今天我们要讨论的 <ul><ul><li>YAHOO.lang  </li></ul></ul><ul><ul><li>YAHOO.util.* </li></ul></ul><ul><ul><ul><ul><li>Event </li></u...
YAHOO.lang 为 YUI 提供语言级的工具和扩展 <ul><ul><li>YAHOO.lang.trim() </li></ul></ul><ul><ul><li>YAHOO.lang.merge() </li></ul></ul><u...
YAHOO.lang YAHOO.lang.trim()   // 去除字符串两端的空格 <script  type =&quot; text/javascript &quot;>      var  str = &quot;   Tao Ba...
YAHOO.lang YAHOO.lang.trim()   // 去除字符串两端的空格 <script  type =&quot; text/javascript &quot;>      var  str = &quot;   Tao Ba...
YAHOO.lang YAHOO.lang.merge()   // 属性合并 <script  type =&quot; text/javascript &quot;>      var  p1 = {name: null ,age:0,se...
YAHOO.lang 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.lang.html
YAHOO.util.Dom 展现军刀实力的时候到了 <ul><ul><li>YAHOO.util.Dom.get() </li></ul></ul><ul><ul><li>YAHOO.util.Dom.getElementsByClass()...
YAHOO.util.Dom YAHOO.util.Dom.get()   // 根据 ID 获取 Dom 对象 <script  type =&quot; text/javascript &quot;>      YAHOO.util.Dom...
YAHOO.util.Dom YAHOO.util.Dom.get()   // 根据 ID 获取 Dom 对象 <script  type =&quot; text/javascript &quot;>      YAHOO.util.Dom...
YAHOO.util.Dom YAHOO.util.Dom.getElemetsByClassName()    // 根据 Class 获取 Dom 对象 <script  type =&quot; text/javascript &quot...
YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName()    // 获取匹配 Class 的最近父 Dom 对象 <script  type =&quot; text/javascript ...
YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName()    // 获取匹配 Class 的最近父 Dom 对象 <script  type =&quot; text/javascript ...
YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class()    // 方便的操作元素的 class <style  type =&quot; text/css &quot;> .hidden { di...
YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class()    // 方便的操作元素的 class <style  type =&quot; text/css &quot;> .hidden { di...
YAHOO.util.Dom 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html
YAHOO.util.Event 事件集中营。调兵遣将尽在其中。 <ul><ul><li>YAHOO.util.Event.onDOMReady() </li></ul></ul><ul><ul><li>YAHOO.util.Event.on(...
YAHOO.util.Dom YAHOO.util.Dom.onDOMReady()    // 页面载入完成后执行 <script  type =&quot; text/javascript &quot;>      var  Event =...
YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <script  type =&quot; text/javascript &quot;>      var  Event = YAHOO.ut...
YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <button  id =&quot; J_Btn1 &quot;  class =&quot; J_Btn &quot;> 按钮 1</but...
YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <button  id =&quot; J_Btn1 &quot;  class =&quot; J_Btn &quot;> 按钮 1</but...
YAHOO.util.Event YAHOO.util.Dom.preventDefault()   // 取消默认事件 <a  href =&quot; http://.../XX.html &quot;  id =&quot; J_Expa...
YAHOO.util.Event YAHOO.util.Dom.getTarget()   // 获取事件目标元素 <div  id =&quot; J_Box &quot;  style =&quot; width:100px;height:...
YAHOO.util.Event 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html
YAHOO.util.Connection 异步连接,省心省力 <ul><ul><li>YAHOO.util.Connection.asyncRequest() </li></ul></ul><ul><ul><li>YAHOO.util.Con...
YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script  type =&quot; text/javascript &q...
YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script  type =&quot; text/javascript &q...
YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Post 请求 <script  type =&quot; text/javascript &...
YAHOO.util.Connection YAHOO.util.Connection.setForm() // 设置提交表单 <script  type =&quot; text/javascript &quot;>      var  Co...
YAHOO.util.Connection YAHOO.util.Connection.abort() // 终止请求 <script  type =&quot; text/javascript &quot;>      var  Con = ...
YAHOO.util.Connection 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Connect.html
YAHOO.util.Get 最常见的就是用来跨域请求数据 <ul><ul><li>YAHOO.util.Get.script() </li></ul></ul><ul><ul><li>如何回调( Global or Jsonp ) </li>...
YAHOO.util.Get YAHOO.util.Get.script() // 动态加载一个 js <script  type =&quot; text/javascript &quot;>      var  Get = YAHOO.ut...
YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用全局变量来实现跨域获取数据 //data.js var  __DATA__ = &quot; Great Wall &quot...
YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用 JSONP 来实现跨域获取数据 //data.js foo (&quot; Great Wall &quot;) ; <sc...
YAHOO.util.Get 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Get.html
YUI 文档中文化项目 http://code.google.com/p/yui-doc-zh/
总结
总结 <ul><ul><li>YAHOO.lang </li></ul></ul><ul><ul><li>YAHOO.util.Dom </li></ul></ul><ul><ul><li>YAHOO.util.Event </li></ul>...
综合练习
Q&A
谢谢 !
<ul><li>TODO </li></ul><ul><ul><li>添加 speaker notes </li></ul></ul><ul><ul><li>添加一些图片每个知识点最后添加一个练习题 </li></ul></ul><ul><ul...
Upcoming SlideShare
Loading in...5
×

YUI ─ 阿大

1,551

Published on

针对开发的前端技能培训之YUI篇

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

No Downloads
Views
Total Views
1,551
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
112
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 简单 YUI 介绍 淘宝 UED 阿大
  • 在介绍 YUI 之前先来了解下前端工程师 前端工程师很年轻 只有 5 岁 前端工程师的嘉年华 D2 http://www.d2forum.org 2007 年举办第一届,最近一届在阿里巴巴滨江(行)总部,时间: 2009 年 12 月 19 日
  • 那么到底什么是前端工程师呢? 或者说前端工程师都要做些什么? notice :可以问问大家的看法,大家眼中的前端工程师。 
  • 做 demo 是最基本的 要了解 html/css/javascript ,实际工作中可能了解的还要多一点点,比如后台的知识和交互知识。 css/ 盒模型 /js 等在不同浏览器里往往有不一样的表现 一些简单的页面要在不同浏览器里表现一致比较容易做到。
  • 根据淘宝的实际情况,一般在需求阶段就会有前端介入 图例只是项目或日常中的一部分过程。另外一些与前端关系不大的这里省略了。
  • 互动时间: html :标记语言 css :描述语言 js :动态语言
  • 问问大家从这张图中看出什么? 下一 PPT , 7 个知识点 一个合格的前端工程师的涉猎范围
  • (X)HTML CSS DOM BOM JavaScript 数据传输 Flash
  • 浏览器 操作系统 前端语言 后台
  • 苹果 windows Linux/Unix/ 移动平台 上网本(趋势) Google
  • 渲染引擎: Safair/Chrome   WebKit Firefox Gecko 目前的 firefox 3.X 是基于 mozilla 的 Gecko1.9 平台开发的。 IE  Trident(mshtml) Opera Presto  js 引擎: safari  Nitro firefox   3.X TraceMonkey  2.X  SpiderMonkey Chrome V8 opera 10 Futhark    10.5 Carakan  IE6 JScript5.6 IE7 JScript5.7 IE8 JScript6
  • 标准模式 怪异模式 doctype &lt;!DOCTYPE html&gt; 15 字符
  • 数据有点夸张,但说明了前端工程师的知识点非常广泛。 接触的平台复杂。标准不统一 。
  • 在从另一维度来看一下。
  • 一些关键词
  • 束缚 复杂 凌乱
  • YUI 是什么 YUI 是 yahoo 的开源前端库,包括 js
  • 什么情况下需要使用军刀: 复杂的环境 YUI 能解决哪些问题: 1 ,浏览器兼容方面      事件, DOM , ajax 等的 2 ,方便的工具函数 3 ,统一的开发模式
  • var Dom = YAHOO.util.Dom 推荐大家使用这个写法
  • Transcript of "YUI ─ 阿大"

    1. 1. YUI Simple Introduction
    2. 2. 前端工程师 Front-end Engineer
    3. 3. 什么是前端工程师?
    4. 4. 什么是前端工程师? <ul><ul><li>做 Demo </li></ul></ul><ul><ul><li>HTML/CSS/JavaScript </li></ul></ul><ul><ul><li>在各种浏览器里保持一致 </li></ul></ul>
    5. 5. 前端流程
    6. 6. 做前端很简单?
    7. 7. 非也 !
    8. 9. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul>
    9. 10. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul>
    10. 11. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul>
    11. 12. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器核心: ×4 </li></ul></ul>
    12. 13. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器核心: ×4 </li></ul></ul><ul><ul><li>渲染模式: ×2 </li></ul></ul>
    13. 14. 掌握技能 <ul><ul><li>知识点: 6 </li></ul></ul><ul><ul><li>领域: ×4 </li></ul></ul><ul><ul><li>平台: ×3 </li></ul></ul><ul><ul><li>浏览器核心: ×4 </li></ul></ul><ul><ul><li>渲染模式: ×2 </li></ul></ul>572
    14. 16.   国际化、 可用性 、本地化、视觉设计、 易用性 、信息架构、 安全 、流程化、 性能 、标准、设备、可移植性 ... ...
    15. 18. YUI
    16. 19. YUI 是一把彪悍的军刀 http://developer.yahoo.com/yui
    17. 20. 怎样自学成才 Examples: http://developer.yahoo.com/yui/examples/ API Docs: http://developer.yahoo.com/yui/docs/ Team Blog: http://yuiblog.com/
    18. 21. 今天我们要讨论的 <ul><ul><li>YAHOO.lang  </li></ul></ul><ul><ul><li>YAHOO.util.* </li></ul></ul><ul><ul><ul><ul><li>Event </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Dom </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Connection </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Get </li></ul></ul></ul></ul>
    19. 22. YAHOO.lang 为 YUI 提供语言级的工具和扩展 <ul><ul><li>YAHOO.lang.trim() </li></ul></ul><ul><ul><li>YAHOO.lang.merge() </li></ul></ul><ul><ul><li>YAHOO.lang.isXX() </li></ul></ul><ul><li>      isArray;isBoolean;isFunction;isNull;isNumber; </li></ul><ul><li>     isObject;isString;isUndefined;isValue </li></ul><ul><ul><li>... ... </li></ul></ul>
    20. 23. YAHOO.lang YAHOO.lang.trim()   // 去除字符串两端的空格 <script  type =&quot; text/javascript &quot;>      var str = &quot;  Tao Bao   &quot; ;      YAHOO.lang.trim(str); //return &quot;Tao Bao&quot; </script>
    21. 24. YAHOO.lang YAHOO.lang.trim()   // 去除字符串两端的空格 <script  type =&quot; text/javascript &quot;>      var str = &quot;  Tao Bao   &quot; ;      YAHOO.lang.trim(str); //return &quot;Tao Bao&quot; </script> <script  type =&quot; text/javascript &quot;>      var str = [&quot;  Tao Bao   &quot;] ;      YAHOO.lang.trim(str); //return [&quot;  Tao Bao  &quot;] </script>
    22. 25. YAHOO.lang YAHOO.lang.merge()   // 属性合并 <script  type =&quot; text/javascript &quot;>      var p1 = {name: null ,age:0,sex:&quot; -> &quot;} ;      var p2 = {name:&quot; ada &quot;,age:18} ;      var p3 = YAHOO.lang.merge(p1,p2);       //p3 = {name:&quot;ada&quot;,age:18,sex:&quot;->&quot;} </script>
    23. 26. YAHOO.lang 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.lang.html
    24. 27. YAHOO.util.Dom 展现军刀实力的时候到了 <ul><ul><li>YAHOO.util.Dom.get() </li></ul></ul><ul><ul><li>YAHOO.util.Dom.getElementsByClass() </li></ul></ul><ul><ul><li>YAHOO.util.Dom.getAncestorByClassName() </li></ul></ul><ul><ul><li>YAHOO.util.Dom.addClass[removeClass ... ...]() </li></ul></ul><ul><li>       getClientWidth;getClientHeight;       getDocumentWidth;getDocumentHeight;       getFirstChild;getLastChild;       insterAfter;insterBefore </li></ul><ul><ul><li>... ... </li></ul></ul>
    25. 28. YAHOO.util.Dom YAHOO.util.Dom.get()   // 根据 ID 获取 Dom 对象 <script  type =&quot; text/javascript &quot;>      YAHOO.util.Dom.get(&quot; J_Id &quot;) ; // return HTMLElement </script>
    26. 29. YAHOO.util.Dom YAHOO.util.Dom.get()   // 根据 ID 获取 Dom 对象 <script  type =&quot; text/javascript &quot;>      YAHOO.util.Dom.get(&quot; J_Id &quot;) ; // return HTMLElement </script> <script  type =&quot; text/javascript &quot;>      var ids = [&quot; J_Id1 &quot;,&quot; J_Id2 &quot;,&quot; J_Id3 &quot;] ;      YAHOO.util.Dom.get(ids) ;      // return HTMLElement[] </script>
    27. 30. YAHOO.util.Dom YAHOO.util.Dom.getElemetsByClassName()    // 根据 Class 获取 Dom 对象 <script  type =&quot; text/javascript &quot;>      var Dom = YAHOO.util.Dom ;      Dom.getElementsByClassName(&quot; J_Class &quot;, &quot;LI&quot; , &quot;J_Root&quot; ) ;       // return HTMLElement[] </script>
    28. 31. YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName()    // 获取匹配 Class 的最近父 Dom 对象 <script  type =&quot; text/javascript &quot;>      var Dom = YAHOO.util.Dom ;      Dom.getAncestorByClassName(&quot; J_Child &quot;,&quot; J_Parent &quot;) ;       // return HTMLElement </script>
    29. 32. YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName()    // 获取匹配 Class 的最近父 Dom 对象 <script  type =&quot; text/javascript &quot;>      var Dom = YAHOO.util.Dom ;      Dom.getAncestorByClassName(&quot; J_Child &quot;,&quot; J_Parent &quot;) ;       // return HTMLElement </script> // 获取匹配 TagName 的最近父 Dom 对象 <script  type =&quot; text/javascript &quot;>      var  Dom = YAHOO.util.Dom ;      Dom.getAncestorByTagName(&quot; J_Child &quot;,&quot; UL &quot;) ;       // return HTMLElement(UL) </script>
    30. 33. YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class()    // 方便的操作元素的 class <style  type =&quot; text/css &quot;> .hidden { display :none;} </style> <script  type =&quot; text/javascript &quot;>      var Dom = YAHOO.util.Dom ;      Dom.addClass(&quot; J_Id &quot;,&quot; hidden &quot;) ; // 将元素隐藏 </script>
    31. 34. YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class()    // 方便的操作元素的 class <style  type =&quot; text/css &quot;> .hidden { display :none;} </style> <script  type =&quot; text/javascript &quot;>      var Dom = YAHOO.util.Dom ;      Dom.addClass(&quot; J_Id &quot;,&quot; hidden &quot;) ; // 将元素隐藏 </script> <script  type =&quot; text/javascript &quot;>      var  Dom = YAHOO.util.Dom ;      var lists = Dom.getElementsByClassName(&quot; J_List &quot;) ;      // 将所有 class 中包含 J_List 的元素隐藏      Dom.addClass(lists ,&quot; hidden &quot;) ;  </script>
    32. 35. YAHOO.util.Dom 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html
    33. 36. YAHOO.util.Event 事件集中营。调兵遣将尽在其中。 <ul><ul><li>YAHOO.util.Event.onDOMReady() </li></ul></ul><ul><ul><li>YAHOO.util.Event.on() </li></ul></ul><ul><ul><li>YAHOO.util.Event.preventDefault() </li></ul></ul><ul><ul><li>YAHOO.util.Event.getTarget() </li></ul></ul><ul><ul><li>... ... </li></ul></ul>
    34. 37. YAHOO.util.Dom YAHOO.util.Dom.onDOMReady()    // 页面载入完成后执行 <script  type =&quot; text/javascript &quot;>      var Event = YAHOO.util.Event ;      Event.onDomReady(init) ;      function init(){          //init code      } </script>
    35. 38. YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <script  type =&quot; text/javascript &quot;>      var  Event = YAHOO.util.Event ;      Event.on(&quot; J_Btn &quot;,&quot; click &quot;,foo) ;      function foo(e){          alert(&quot; 别摸我 &quot;) ;      } </script>
    36. 39. YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <button  id =&quot; J_Btn1 &quot;  class =&quot; J_Btn &quot;> 按钮 1</button> <button  id =&quot; J_Btn2 &quot;  class =&quot; J_Btn &quot;> 按钮 2</button> <button  id =&quot; J_Btn3 &quot;  class =&quot; J_Btn &quot;> 按钮 3</button>
    37. 40. YAHOO.util.Event YAHOO.util.Dom.on()   // 优雅地绑定事件 <button id =&quot; J_Btn1 &quot; class =&quot; J_Btn &quot;> 按钮 1</button> <button  id =&quot; J_Btn2 &quot;  class =&quot; J_Btn &quot;> 按钮 2</button> <button  id =&quot; J_Btn3 &quot;  class =&quot; J_Btn &quot;> 按钮 3</button> <script type =&quot; text/javascript &quot;>      var  Event = YAHOO.util.Event ,Dom = YAHOO.util.Dom ;      var btns = [&quot; J_Btn1 &quot;,&quot; J_Btn2 &quot;,&quot; J_Btn3 &quot;] ;      //var btns = Dom.getElementsByClassName(&quot;J_Btn&quot;) ;      Event.on(btns,&quot; click &quot;,foo) ;      function  foo(e){          alert(this.id) ;      } </script> Demo  http://zhuhj.googlecode.com/svn/trunk/YUIPPTDEMO/YUI-Event-array.html
    38. 41. YAHOO.util.Event YAHOO.util.Dom.preventDefault()   // 取消默认事件 <a href =&quot; http://.../XX.html &quot;  id =&quot; J_Expand &quot;> 展开 </a> <script type =&quot; text/javascript &quot;>      var  Event = YAHOO.util.Event ;      Event.on(&quot; J_Expand &quot;,&quot; click &quot;,handleExpand) ;      function  handleExpand(e){          Event.preventDefault(e);          // other code      } </script>
    39. 42. YAHOO.util.Event YAHOO.util.Dom.getTarget()   // 获取事件目标元素 <div id =&quot; J_Box &quot; style =&quot; width:100px;height:100px;baground-color:#ff0000; &quot;>      <a href =&quot; http://.../XX.html &quot;  id =&quot; J_Expand &quot;> 展开 </a> <div> <script type =&quot; text/javascript &quot;>      var  Event = YAHOO.util.Event ;      Event.on(&quot; J_Expand &quot;,&quot; click &quot;,foo) ;      function  foo(e){          alert(Event.getTarget(e).tagName) ;      } </script>
    40. 43. YAHOO.util.Event 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html
    41. 44. YAHOO.util.Connection 异步连接,省心省力 <ul><ul><li>YAHOO.util.Connection.asyncRequest() </li></ul></ul><ul><ul><li>YAHOO.util.Connection.setForm() </li></ul></ul><ul><ul><li>YAHOO.util.Connection.abort() </li></ul></ul><ul><ul><li>... ... </li></ul></ul>
    42. 45. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script type =&quot; text/javascript &quot;>      var  Con = YAHOO.util.Connection ;      var callback = {          timeout: 30000,          success: function(r){              alert(r.responseText) ;          },          failure: function(r){              alert(r.status) ; // 0: 表示通讯错误   1: 表示用户取消          }      }      Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ; </script>
    43. 46. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script type =&quot; text/javascript &quot;>      var  Con = YAHOO.util.Connection ;      var  callback = {          timeout: 30000,          success: function (r){              alert(r.responseText) ;          },          failure: function (r){              alert(r.status) ; // 0: 表示通讯错误   1: 表示用户取消          }      }      Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ; </script>
    44. 47. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Post 请求 <script type =&quot; text/javascript &quot;>      var  Con = YAHOO.util.Connection ;      var  callback = {          timeout: 30000,          success: function (r){              alert(r.responseText) ;          },          failure: function (r){              alert(r.status) ; // 0: 表示通讯错误   1: 表示用户取消          }      }      Con.asyncRequest(&quot; post &quot;,&quot; url &quot;,callback,&quot; name=ada&age=18 &quot;) ; </script>
    45. 48. YAHOO.util.Connection YAHOO.util.Connection.setForm() // 设置提交表单 <script type =&quot; text/javascript &quot;>      var  Con = YAHOO.util.Connection ;      var  callback = {          timeout: 30000,          success: function (r){              alert(r.responseText) ;          },          failure: function (r){              alert(r.status) ; // 0: 表示通讯错误   1: 表示用户取消          }      }      Con.setForm(&quot;J_FormId&quot;) ;      Con.asyncRequest(&quot; post &quot;,&quot; url &quot;,callback) ; </script>
    46. 49. YAHOO.util.Connection YAHOO.util.Connection.abort() // 终止请求 <script type =&quot; text/javascript &quot;>      var  Con = YAHOO.util.Connection ;Event = YAHOO.util.Event;      var  callback = {          timeout: 30000,          success: function (r){              alert(r.responseText) ;          },          failure: function (r){              if(r.status !== 1){alert(&quot; 请求失败 &quot;) ;}          }      }      Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ;      Event.on(&quot; J_Cancel &quot;,&quot; click &quot;, function (){Con.abort() ;}) ; </script>
    47. 50. YAHOO.util.Connection 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Connect.html
    48. 51. YAHOO.util.Get 最常见的就是用来跨域请求数据 <ul><ul><li>YAHOO.util.Get.script() </li></ul></ul><ul><ul><li>如何回调( Global or Jsonp ) </li></ul></ul><ul><ul><li>YAHOO.util.Get.css() </li></ul></ul><ul><ul><li>... ... </li></ul></ul>
    49. 52. YAHOO.util.Get YAHOO.util.Get.script() // 动态加载一个 js <script type =&quot; text/javascript &quot;>      var  Get = YAHOO.util.Get ;      var  opts = {          timeout: 30000,          chartset: &quot;GBK&quot;,          onSuccess: function (o){},          onFailure: function(o){},          onTimeout: function(o){}      }      Get.script(&quot; http://... .../***.js &quot;,opts) ; </script>
    50. 53. YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用全局变量来实现跨域获取数据 //data.js var __DATA__ = &quot; Great Wall &quot; ; <script type =&quot; text/javascript &quot;>      var  Get = YAHOO.util.Get ;      var  opts = {          ... ...          onSuccess: function (o){              try {alert(window.__DATA__) ;} catch (e){}          }          ... ...      }      Get.script(&quot; http://... .../data.js &quot;,opts) ; </script>
    51. 54. YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用 JSONP 来实现跨域获取数据 //data.js foo (&quot; Great Wall &quot;) ; <script type =&quot; text/javascript &quot;>      var  Get = YAHOO.util.Get ;      var  opts = {          timeout: 30000,          chartset: &quot;GBK&quot;,          onFailure: function(o){},          onTimeout: function(o){}      }      Get.script(&quot; http://... .../data.js?jsonp=foo &quot;,opts) ; </script>
    52. 55. YAHOO.util.Get 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Get.html
    53. 56. YUI 文档中文化项目 http://code.google.com/p/yui-doc-zh/
    54. 57. 总结
    55. 58. 总结 <ul><ul><li>YAHOO.lang </li></ul></ul><ul><ul><li>YAHOO.util.Dom </li></ul></ul><ul><ul><li>YAHOO.util.Event </li></ul></ul><ul><ul><li>YAHOO.util.Connection </li></ul></ul><ul><ul><li>YAHOO.util.Get </li></ul></ul>
    56. 59. 综合练习
    57. 60. Q&A
    58. 61. 谢谢 !
    59. 62. <ul><li>TODO </li></ul><ul><ul><li>添加 speaker notes </li></ul></ul><ul><ul><li>添加一些图片每个知识点最后添加一个练习题 </li></ul></ul><ul><ul><li>准备一个综合练习题 </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×