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...
Prochain SlideShare
Chargement dans…5
×

YUI ─ 阿大

2 448 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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>

×