1. JavaScript + Arale
发 帅

3. web 术 职责

4. web 术 职责
JavaScript语

5. web 术 职责
JavaScript语
选择 DOM

6. web 术 职责
JavaScript语
选择 DOM
Arale

7. web 术 职责

10. 职责 MVC
HTML M
CSS 样 V
JavaScript 为 C

11. 职责 MVC
HTML M
CSS 样 V
JavaScript 为 C

12. 职责 MVC
HTML M
CSS 样 V
JavaScript 为 C

13. web 术 职责
JavaScript语
选择 DOM
Arale

14. JavaScript语

15. 语

16. 语
变 时

17. 语
变 时
number, string,
object, boolean, null, undefined

18. 语
变 时
number, string,
object, boolean, null, undefined

20. number, string, boolean
VS.
Number, String, Boolean

21. number, string, boolean 传递
VS.
Number, String, Boolean

22. number, string, boolean 传递
VS.
Number, String, Boolean 对 传递

23. number, string, boolean 传递
VS.
Number, String, Boolean 对 传递
undefined
VS.
null

24. number, string, boolean 传递
VS.
Number, String, Boolean 对 传递
undefined 变 创 赋 应该 传递
VS.
null

25. number, string, boolean 传递
VS.
Number, String, Boolean 对 传递
undefined 变 创 赋 应该 传递
VS.
null 传递

28. var x = new Boolean(false);
if (x) {
alert('hi'); // Shows 'hi'.
}

29. 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';

31. 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);

32. 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);

33. JavaS
cript

35. if (x) {
function foo() {}
}

36. if (x) {
function foo() {}
}

37. if (x) { if (x) {
function foo() {} var foo = function() {}
} }

38. expression & literal

39. 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()

40. 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()

41. 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()

43. 达为

44. 达为
变 储

45. 达为
变 储
结 储

46. 达为
变 储
结 储

47. 达为
变 储
结 储
为 结

49. 对 prototype

50. 对 prototype
function Circle(x, y, z) {
this.x = x;
this.y = y;
this.r = r;
this.getR = function() { return this.r;};
}
//instance method
Circle.prototype.area = function() {
return this.r * this.r * 3.14159;
}
var c = new Circle(0, 0, 2);
alert(c.area());

51. 对 prototype
function Circle(x, y, z) {
this.x = x;
this.y = y; getR Vs. area
this.r = r;
this.getR = function() { return this.r;};
}
//instance method
Circle.prototype.area = function() {
return this.r * this.r * 3.14159;
}
var c = new Circle(0, 0, 2);
alert(c.area());

52. 对 prototype
function Circle(x, y, z) {
this.x = x;
this.y = y; getR Vs. area
this.r = r;
this.getR = function() { return this.r;};
}
//instance method
Circle.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());

53. 对 prototype
function Circle(x, y, z) {
this.x = x;
this.y = y; getR Vs. area
this.r = r;
this.getR = function() { return this.r;};
}
//instance method
Circle.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 对 实 对 这 为 础

54. 继

55. 继
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);
};

56. 继
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);
};

57. 继
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);
};

58. 继
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);
};

59. 继 对 + 链
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);
};

60. 闭

61. 闭
编 严
调

62. 闭
编 严
调
闭 给
变 环
变
scope chain

63. 闭 var sMessage = "hello world";
function sayHelloWorld() {
alert(sMessage);
编 严
}
调 sayHelloWorld();
闭 给
变 环
变
scope chain

64. 闭 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 }

65. 闭 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 }
简单 说 闭
义 变

66. 驱动 编

67. 驱动 编

68. 驱动 编

69. 驱动 编
<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>

70. 驱动 编
<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
var btn = document.getElementById(‘btn’);
btn.onclick = function() {
alert(“button clicked”);
}

71. 驱动 编
<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);});
}

72. 驱动 编
<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);});
}

74. click submit
change keydown
load keypress
mouseover resize
mouseout scroll
blur ......

75. web 术 职责
JavaScript语
选择 DOM
Arale

76. 选择 DOM

77. DOM

78. DOM
Document Object Model

79. DOM
Document Object Model
HTML XML 编 规
W3C标

80. DOM
Document Object Model
HTML XML 编 规
W3C标
过JS DOM对 达 页

81. DOM manipulation

82. DOM manipulation
创

83. DOM manipulation
创
删

84. DOM manipulation
创
删
获 /

85. DOM manipulation
创
删
获 /
访问/

86. DOM

87. DOM
getElementById removeChild
firstChild, lastChild,childNodes replaceChild
previousSibling, nextSibling,
createElement
parentNode
getElementsByTagNam createTextNode
e
insertBefore
appendChild
innerHTML

88. 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);

89. 选择 /selector

90. 选择 /selector
css选择
sizzle

91. web 术 职责
JavaScript语
选择 DOM
Arale

93. Arale

95. Arale

96. Arale Js
Arale

97. Alice
Arale Js
Arale

98. Alice
Arale Js
Arale
combo

99. Alice
Arale Js maven
Arale
combo

100. Alice
Arale Js maven
Arale
static server
combo

101. Alice
Arale Js maven
Arale
static server
combo

103. Hello World!

104. Hello World!
$E.domReady(function(){
$("btn").click(function(e){
alert("Hello Arale!");
});
});

105. Selector

106. Selector
id选择 : $(‘id’)

107. Selector
id选择 : $(‘id’)
Node

108. Selector
id选择 : $(‘id’)
Node
杂选择 $$(selector)

109. Selector
id选择 : $(‘id’)
Node
杂选择 $$(selector)
组 组 节 为Node

110. Dom & Node
$D —— 态
$Node—— 对 获 实

111. Dom & Node
$D —— 态
$Node—— 对 获 实
Dom
toDom
getPosition
setStyle
getDocumentWidth
getDocumentHeight
getViewportWidth
getViewportHeight

112. Dom & Node
$D —— 态
$Node—— 对 获 实
Node
Dom
addClass
toDom removeClass
getPosition attr
setStyle inject
getDocumentWidth getStyle
getDocumentHeight setStyle
getViewportWidth next
getViewportHeight previous
parent
query

113. Event——$E

114. Event——$E
$E.domReady(function() {
//do something
});

115. Event——$E
connect
disconnect
$E.domReady(function() {
//do something subscribe
});
unsubscribe
publish
trigger
delegate
live

116. Event——$E
connect
disconnect
$E.domReady(function() {
//do something subscribe
});
unsubscribe
publish
trigger
delegate
live

117. 组——$A

118. 组——$A
$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);
});

119. 组——$A
$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);
});
map & reduce

120. 组——$A
$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);
});
map & reduce
each
every
some
map
filter

121. 组——$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

123. 颗 块设计

124. 颗 块设计 combo 务

125. 颗 块设计 combo 务

126. 颗 块设计 combo 务
Loader.use(‘arale.http’, function() {
$Ajax.get(‘url’, {
success: function() {
}
});
});

127. A B
Loader.use(‘C’, function() {
//some code here
})
C
载C 块js 时
A B还 载 时
载

128. 颗 块设计
A B
Loader.use(‘C’, function() {
//some code here
})
C
载C 块js 时
A B还 载 时
载

130. 码检

131. 码检
压缩

132. 码检
压缩
编码检测

133. 码检
压缩
测试
编码检测

134. 码检
压缩
测试
编码检测
赖 计

135. 码检
压缩
测试
编码检测
赖 计

136. 码检
压缩
测试
编码检测
赖 计

137. 码检
压缩
测试
编码检测 Maven
赖 计

138. 项
码检
压缩
测试
编码检测 Maven
赖 计

139. http://arale.alipay.net
http://arale.alipay.net:3000
发组 http://arale.alipay.net/
wiki/doku.php?id=wigetdevelopment
jsdoc规 http://arale.alipay.net/wiki/
doku.php?id=jsdocstandard

140. task
JS实现
Array#sort
(delegate)
Arale demo

141. Q&A

142. Thanks!