Your SlideShare is downloading. ×

Javascrpt arale

1,318

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. JavaScript + Arale 发 帅
    • 2. web 术 职责
    • 3. web 术 职责JavaScript语
    • 4. web 术 职责JavaScript语选择 DOM
    • 5. web 术 职责JavaScript语选择 DOMArale
    • 6. web 术 职责
    • 7. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    • 8. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    • 9. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    • 10. web 术 职责JavaScript语选择 DOMArale
    • 11. JavaScript语
    • 12.
    • 13. 语变 时
    • 14. 语 变 时 number, string,object, boolean, null, undefined
    • 15. 语 变 时 number, string,object, boolean, null, undefined
    • 16. number, string, boolean VS. Number, String, Boolean
    • 17. number, string, boolean 传递 VS. Number, String, Boolean
    • 18. number, string, boolean 传递 VS. Number, String, Boolean 对 传递
    • 19. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined VS. null
    • 20. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined 变 创 赋 应该 传递 VS. null
    • 21. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined 变 创 赋 应该 传递 VS. null 传递
    • 22. var x = new Boolean(false);if (x) { alert(hi); // Shows hi.}
    • 23. var x = new Boolean(false);if (x) { alert(hi); // Shows hi.}var x = Boolean(0);if (x) { alert(hi); // This will never be alerted.}typeof Boolean(0) == boolean;typeof new Boolean(0) == object;
    • 24. function f1(x) { var a = 1; if(x) { var b = 2; } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
    • 25. function f1(x) { var a = 1; 1 if(x) { 2 var b = 2; undefined } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
    • 26. JavaS cript
    • 27. if (x) { function foo() {}}
    • 28. if (x) { function foo() {}}
    • 29. if (x) { if (x) { function foo() {}     var foo = function() {}} }
    • 30. expression & literal
    • 31. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") } console.log(f1); console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2(); } fn()
    • 32. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") } console.log(f1); console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2(); } fn()
    • 33. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") 结 } console.log(f1); null function console.log(f2); function f2() { function } function console.log(f2); f3 var f2 = function() { console.log("f3"); } f2(); } fn()
    • 34. 达为
    • 35. 达为变 储
    • 36. 达为变 储 结 储
    • 37. 达为变 储 结 储
    • 38. 达为变 储 结 储为 结
    • 39. 对 prototype
    • 40. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
    • 41. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
    • 42. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { //static method return this.r * this.r * 3.14159; Circle.getClassName = function() {} return “Circle”;var c = new Circle(0, 0, 2); }alert(c.area());
    • 43. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { //static method return this.r * this.r * 3.14159; Circle.getClassName = function() {} return “Circle”;var c = new Circle(0, 0, 2); }alert(c.area()); prototype 对 实 对 这 为 础
    • 44.
    • 45. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () { alert(this.color);};function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    • 46. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    • 47. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA(); 链ClassB.prototype.sayName = function () { alert(this.name);};
    • 48. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA(); 链ClassB.prototype.sayName = function () { alert(this.name);};
    • 49. 继 对 + 链function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () { alert(this.color);};function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    • 50.
    • 51. 闭 编 严调
    • 52. 闭 编 严 调闭 给 变 环 变 scope chain
    • 53. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld();闭 给 变 环 变 scope chain
    • 54. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld(); var iBaseNum = 10;闭 给 function addNum(iNum1, iNum2) { function doAdd() { 变 环 return iNum1 + iNum2 + iBaseNum; 变 } return doAdd(); scope chain }
    • 55. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld(); var iBaseNum = 10; 闭 给 function addNum(iNum1, iNum2) { function doAdd() { 变 环 return iNum1 + iNum2 + iBaseNum; 变 } return doAdd(); scope chain }简单 说 闭 义 变
    • 56. 驱动 编
    • 57. 驱动 编
    • 58. 驱动 编
    • 59. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
    • 60. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}
    • 61. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
    • 62. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
    • 63. click submitchange keydownload keypressmouseover resizemouseout scrollblur ......
    • 64. web 术 职责JavaScript语选择 DOMArale
    • 65. 选择 DOM
    • 66. DOM
    • 67. DOMDocument Object Model
    • 68. DOMDocument Object ModelHTML XML 编 规 W3C标
    • 69. DOMDocument Object ModelHTML XML 编 规 W3C标 过JS DOM对 达 页
    • 70. DOM manipulation
    • 71. DOM manipulation 创
    • 72. DOM manipulation 创 删
    • 73. DOM manipulation 创 删 获 /
    • 74. DOM manipulation 创 删 获 / 访问/
    • 75. DOM
    • 76. DOMgetElementById removeChildfirstChild, lastChild,childNodes replaceChildpreviousSibling, nextSibling, createElementparentNodegetElementsByTagNam createTextNodee insertBeforeappendChild innerHTML
    • 77. var newP = document.createElement("p");var txt = Kilroy was here.;var newT = document.createTextNode(txt);newP.appendChild(newT);var p2 = document.getElementsByTagName(p)[1];p2.parentNode.replaceChild(newP,p2);
    • 78. 选择 /selector
    • 79. 选择 /selectorcss选择sizzle
    • 80. web 术 职责JavaScript语选择 DOMArale
    • 81. Arale
    • 82. Arale
    • 83. Arale Js Arale
    • 84. AliceArale Js Arale
    • 85. AliceArale Js Arale combo
    • 86. AliceArale Js maven Arale combo
    • 87. Alice Arale Js maven Aralestatic server combo
    • 88. Alice Arale Js maven Aralestatic server combo
    • 89. Hello World!
    • 90. Hello World! $E.domReady(function(){ $("btn").click(function(e){ alert("Hello Arale!"); }); });
    • 91. Selector
    • 92. Selector id选择 : $(‘id’)
    • 93. Selector id选择 : $(‘id’) Node
    • 94. Selector id选择 : $(‘id’) Node 杂选择 $$(selector)
    • 95. Selector id选择 : $(‘id’) Node 杂选择 $$(selector) 组 组 节 为Node
    • 96. Dom & Node $D —— 态 $Node—— 对 获 实
    • 97. Dom & Node $D —— 态 $Node—— 对 获 实 Dom toDom getPosition setStyle getDocumentWidth getDocumentHeight getViewportWidth getViewportHeight
    • 98. Dom & Node $D —— 态 $Node—— 对 获 实 Node Dom addClass toDom removeClass getPosition attr setStyle inject getDocumentWidth getStyle getDocumentHeight setStyle getViewportWidth next getViewportHeight previous parent query
    • 99. Event——$E
    • 100. Event——$E $E.domReady(function() { //do something });
    • 101. Event——$E connect disconnect $E.domReady(function() { //do something subscribe }); unsubscribe publish trigger delegate live
    • 102. Event——$E connect disconnect $E.domReady(function() { //do something subscribe }); unsubscribe publish trigger delegate live
    • 103. 组——$A
    • 104. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);});
    • 105. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce
    • 106. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce each every some map filter
    • 107. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce Others: each clean every remove some combine map erase filter include last
    • 108. 颗 块设计
    • 109. 颗 块设计 combo 务
    • 110. 颗 块设计 combo 务
    • 111. 颗 块设计 combo 务 Loader.use(‘arale.http’, function() { $Ajax.get(‘url’, { success: function() { } }); });
    • 112. A B Loader.use(‘C’, function() { //some code here }) C 载C 块js 时A B还 载 时载
    • 113. 颗 块设计 A B Loader.use(‘C’, function() { //some code here }) C 载C 块js 时 A B还 载 时 载
    • 114. 码检
    • 115. 码检压缩
    • 116. 码检压缩编码检测
    • 117. 码检压缩 测试编码检测
    • 118. 码检压缩 测试编码检测 赖 计
    • 119. 码检压缩 测试编码检测 赖 计
    • 120. 码检压缩 测试编码检测 赖 计
    • 121. 码检压缩 测试编码检测 Maven 赖 计
    • 122. 项 码检压缩 测试编码检测 Maven 赖 计
    • 123. http://arale.alipay.nethttp://arale.alipay.net:3000 发组 http://arale.alipay.net/wiki/doku.php?id=wigetdevelopmentjsdoc规 http://arale.alipay.net/wiki/doku.php?id=jsdocstandard
    • 124. task JS实现 Array#sort (delegate) Arale demo
    • 125. Q&A
    • 126. Thanks!

    ×