�������v�©�¢¤¬�

berg

��v�©�¢¤¬�

!!"#$%&'$()(*+*,#-*".)/,0#)121,30%.)4,#55*".)678)/,9:$90;

!<03$5)=/+/01"3-%>?@@>68AB>C6C>B3$9D>A/1>3E@;

!B3+*)3$)F*3G3$5.)H#"IJF/3(9; berg

!"##$%$%&'&ó\¼

��v�©�¢¤¬�

'&:/3,K),*3LM3D3$5J4/3(9;1#:

8H3%%*"K)J1$4*"5

N*34#K)J4*"5

F,#5K)M%%-K>>HHH;1$4*"5;1#:

?#$%/1%):*

��v�©�¢¤¬�

8M30)/O%*"$##$

!=/+/01"3-%)4/031P)QR;SMT

!8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/:QV;SMT

��v�©�¢¤¬�

Javascript

Javascript basic+��v�©�¢¤¬�

E9%,3$*

!E+*"+3*H

!=/+/01"3-%)O#")H*4)4"#H0*"

!=/+/01"3-%

!?,3*$%&@3(*)=/+/@1"3-%

!W(+/$1*()01"3-%3$5

��v�©�¢¤¬�

Overview��v�©�¢¤¬�

NM2)=/+/01"3-%)X

��v�©�¢¤¬�

B/$59/5*)#O)%M*)N*4O#":)VYYZ;R

��v�©�¢¤¬�

��v�©�¢¤¬�

()*+,&-./)&00123&4*5$66&7&85&*9)9:+//

��v�©�¢¤¬�

=/+/@1"3-%)30)"*/,,2)5##(7%)30),35M%H*35M%)/$()*D-"*003+*

��v�©�¢¤¬�

!C"#%#%2-/,)EEC

!!9$1%3#$/,)

![2$/:31

��v�©�¢¤¬�

F9%)%M*)*$+3"#$:*$%)30)$#%)0#)5##(

A/I*)90)1#$O90*()/$()/$5"2

��v�©�¢¤¬�

!7')Q)\)+*"03#$0T.)]"*O#D.)1M"#:*.)0/O/"3.)#-*"/

!?M3$/

!^ZS

!A/D%M#$

A/$2)4"#H0*"0

��v�©�¢¤¬�

��v�©�¢¤¬�

!=/+/01"3-%)*$53$*0

!?M/I"/)&)7'

!=_5*"A#$I*2)&)!3"*O#D

!`a)&)?M"#:*

!?/"/I/$)&)E-*"/)

!b3%"#)&)0/O/"3

[3c*"*$%)3:-,*:*$%

��v�©�¢¤¬�

[3c*"*$%)3:-,*:*$%

!N*4)4"#H0*")*$53$*0

!8"3(*$%)&)7'

!d*1I#)&)!3"*O#D

!N*4I3%)&)?M"#:*)U)@/O/"3

!C"*0%#)&)E-*"/)

��v�©�¢¤¬�

Javascript��v�©�¢¤¬�

9 function hello(to){ 10 to = to || 'world'; 11 alert("Hello " + to); 12 return true; 13 } 14 var to = 'everyone'; 15 hello(to);

��v�©�¢¤¬�

!B*D31/,)@%"91%9"*

![/%/%2-*)/$()`/,9*0

!`/"3/4,*0

!'D-"*003#$0)/$()E-*"/%#"0

!@%/%*:*$%0

!;;;

��v�©�¢¤¬�

!@#:*)(3c*"*$1*

!E4G*1%

!!9$1%3#$

!C"#%#%2-*)EEC

E9%,3$*

��v�©�¢¤¬�

@#:*)(3c*"*$1*0

��v�©�¢¤¬�

`/"3/4,*0<$%2-*(

��v�©�¢¤¬�

43 var i = 1; 44 i = 'something else'; 45 46 alert(i + 1);

��v�©�¢¤¬�

49 var a = [1, 2, 3]; 50 var b = a; 51 a[0] = 99; 52 alert(b);

��v�©�¢¤¬�

!C"3:3%3+*)%2-*0)

!b9:4*"0

!F##,*/$

!@%"3$5

!$9,,

!9$(*]$*(

!e*O*"*$1*)%2-*0

!E4G*1%0

!W""/20

!!9$1%3#$0

��v�©�¢¤¬�

`/"3/4,*)@1#-*b#)4,#1I)01#-*

��v�©�¢¤¬�

22 scope = 'global'; 23 function checkscope() { 24 scope = 'local'; 25 alert(scope); 26 myscope = 'local'; 27 alert(myscope); 28 } 29 checkscope(); 30 alert(scope); 31 alert(myscope);

��v�©�¢¤¬�

34 function f() { 35 alert(scope); 36 if (!scope) { 37 var scope = 'local'; 38 } 39 alert(scope); 40 } 41 f();

��v�©�¢¤¬�

E-%3#$/,)@*:31#,#$0[E)bE8)O#"5*%)2#9")@*:31#,#$0

��v�©�¢¤¬�

54 var a = 1; 55 alert(a); 56 57 return 58 { 59 a: 1 60 };

��v�©�¢¤¬�

@9::/"3L*

!<$%2-*()`/"3/4,*0

!`/"3/4,*)@1#-*

!E-%3#$/,)@*:31#,#$0{��v�©�¢¤¬�

E4G*1%

��v�©�¢¤¬�

! W""/20

! !9$1%3#$0

! e*59,/")*D-"*003#$0

! E4G*1%

! b9:4*"0

! @%"3$50

! F##,*/$

} Object

Object-like}��v�©�¢¤¬�

?,/00&O"**

62 var info = { 63 first: 'Berg', 64 last: 'Lei', 65 address: { 66 city: 'Beijing', 67 street: 'Shangdi 10th street' 68 } 69 };

��v�©�¢¤¬�

71 info['first']; 72 info.first; 73 74 var key = 'first'; 75 info[key];

��v�©�¢¤¬�

77 for (i in info) { 78 alert(info[i]); 79 }

��v�©�¢¤¬�

C"#%#%2-*

82 function clone(o) { 83 var F = function() {}; 84 F.prototype = o; 85 return new F(); 86 }

��v�©�¢¤¬�

89 var student = { 90 university: 'CAS' 91 }; 92 var someone = clone(student); 93 94 alert(someone['university']); 95 96 someone['name'] = 'john'; 97 student['university'] = 'HIT'; 98 99 alert(someone['university']);

��v�©�¢¤¬�

someone

name : john

student

university: CAS

Object

toString : fn

someone['key']

null

C"#%#%2-*)1M/3$

��v�©�¢¤¬�

@9::/"3L*

!?,/00&O"**

!C"#%#%2-*

!C"#%#%2-*)1M/3${��v�©�¢¤¬�

!9$1%3#$

��v�©�¢¤¬�

7$+#1/%3#$0

��v�©�¢¤¬�

!9$1%3#$)3$+#1/%3#$

103 function add(a, b) {104 return a + b;105 }106 add();

��v�©�¢¤¬�

A*%M#()3$+#1/%3#$108 var counter = {109 value: 0,110 increment: function(count) {111 return this.value += count || 1;112 }113 };114 alert(counter.increment());

��v�©�¢¤¬�

NM/%f0)g%M30g

��v�©�¢¤¬�

g%M30g)/,H/20)"*O*"0)%#)%M*)#H$*")#4G*1%)#O)%M*)O9$1%3#$)

��v�©�¢¤¬�

W--,2)3$+#1/%3#$118 function sum() {119 var i, len = arguments.length, sum = 0;120 for (i = 0; i < len; i++) {121 sum += arguments[i];122 }123 return sum;124 }125 126 127 var arr = [1, 2, 3, 5];128 sum.apply(this, arr);

��v�©�¢¤¬�

!O9$1%3#$;/--,2Q!"#$%&'.)()*$Th

!!"#$%&')K)3$+#I*0)%M*)O9$1%3#$)/0)3O)3%)H*"*)/):*%M#()#O)!"#$%&'

!()*$)K)-/003$5)3%)%M*)/"59:*$%0)1#$%/3$*()3$)%M*)()*$)/""/2

!O9$1%3#$;1/,,Q!"#$%&'.)()*+,---T

��v�©�¢¤¬�

?#$0%"91%#")3$+#1/%3#$

return a new object link to the function's prototype member

132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5);

��v�©�¢¤¬�

?,#09"*

��v�©�¢¤¬�

var Counter = function() { var value = 0;

return { increment: function(inc) { return value += inc || 1; }, getValue: function() { return value; } };}();

��v�©�¢¤¬�

!9$1%3#$)1/$)/11*00)%#)%M*)1#$%*D%)3$)HM31M)3%)H/0)1"*/%*().)'+*$)%M#95M)%M30)O9$1%3#$)M/0)(+),(-./),!0)1,-;)

?,#09"*

��v�©�¢¤¬�

for (var i = 0; i < count; i++) { nodes[i].onclick = function() { alert(i); };}

��v�©�¢¤¬�

for (var i = 0; i < count; i++) { nodes[i].onclick = function(i) { return function() { alert(i); }; }(i);}

��v�©�¢¤¬�

173 function multize(func) {174 return function() {175 var list = arguments[0],176 ret = [],177 more = [].slice.call(arguments, 0);178 179 for (i = 0; i < list.length; i++) {180 more[0] = list[i];181 ret.push(func.apply(this, more));182 }183 return ret;184 }185 }

!9$1%3#$/,)-"#5"/::3$5

��v�©�¢¤¬�

187 function inc(value) {188 return value + 1;189 }190 var multInc = multize(inc);191 192 multInc([1, 2, 3]);

��v�©�¢¤¬�

W+#3(0%/%*)/$():9%/4,*)(/%/

��v�©�¢¤¬�

195 function fibonacci(n) {196 return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);197 }198 199 for (var i = 0; i <= 10; i++) {200 document.write(i + ': ' + fibonacci(i) + '<br />');201 }

A*:#3L/%3#$

��v�©�¢¤¬�

203 var i = 1,204 startTime = (new Date()).getTime();205 while (i++) {206 fibonacci(i);207 208 if ((new Date()).getTime() - startTime > 1000) {209 alert(i);210 break;211 }212 }

��v�©�¢¤¬�

214 var fibonacci = function() {215 var cache = [0, 1];216 217 var _fib = function(n) {218 var result = cache[n];219 if (typeof result == 'undefined') {220 result = _fib(n-1) + _fib(n-2);221 cache[n] = result;222 }223 return result;224 };225 return _fib;226 }();

��v�©�¢¤¬�

?/01/(*

231 T.e('#header').232 children().233 on('click', function() {234 alert('clicked');235 });

��v�©�¢¤¬�

A/I3$5)[@BQ[#:/3$)0-*13]1),/$59/5*0T

��v�©�¢¤¬�

@9::/"3L*

!7$+#1/%3#$0

!!9$1%3#$

!A*%M#(

!1#$0%"91%#"

!/--,2{

��v�©�¢¤¬�

@9::/"3L*

!?,#09"*

!!9$1%3#$/,)-"#5"/::3$5

!A*:#3L/%3#$

!?/01/(*{

��v�©�¢¤¬�

C"#%#%2-/,)EEC

��v�©�¢¤¬�

?,/0031)-/%%*"$H3%M

-"#%#%2-/,)-/%%*"$

��v�©�¢¤¬�

C0*9(#1,/0031/,

��v�©�¢¤¬�

return a new object link to the function's prototype member

132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5);

��v�©�¢¤¬�

243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };

��v�©�¢¤¬�

243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };

250 var Student = function(name, university) {251 this.name = name;252 this.university = university;253 };254 extend(Student, Person);255 Student.prototype.getUniversity = function() {256 return this.university;257 };

��v�©�¢¤¬�

238 function extend(subClass, superClass) {239 var F = function() {};240 F.prototype = superClass.prototype;241 subClass.prototype = new F();242 }

��v�©�¢¤¬�

W)4*%%*")g*D%*$(g

��v�©�¢¤¬�

266 function extend(subClass, superClass) {267 var F = function() {};268 F.prototype = superClass.prototype;269 subClass.prototype = new F();270 subClass.prototype.constructor = subClass;271 subClass.superClass = superClass.prototype;272 if (superClass.prototype.constructor != Object.prototype.constructor) {273 superClass.prototype.constructor = superClass;274 }275 }276 277 var Student = function(name, university) {278 Student.superClass.constructor.call(this, name);279 this.university = university;280 };

��v�©�¢¤¬�

C"#%#%2-/,)-/%%*"$

��v�©�¢¤¬�

285 var Person = {286 name: 'unnamed',287 getName: function() {288 return this.name;289 }290 };291 ...298 var student = clone(Person);299 student.name = 'John';300 student.study = function() {301 alert("I'm studying.");302 };303 alert(student.name);304 student.name = 'Tom';305 alert(student.name);

��v�©�¢¤¬�

82 function clone(o) { 83 var F = function() {}; 84 F.prototype = o; 85 return new F(); 86 }

��v�©�¢¤¬�

?,/0031/,)3$M*"3%/$1*

!?"*/%3$5)/$)WC7)O#")H3(*0-"*/()90*;

!E%M*")-"#5"/::*"0)$#%)O/:3,3/")H3%M)-"#%#%2-/,)3$M*"3%/$1*;

!b#%):*:#"2&*i13*$%;

��v�©�¢¤¬�

C"#%#%2-/,)3$M*"3%/$1*

!`*"2):*:#"2&*i13*$%;

!7%0)-#H*"),3*0)3$)3%0)03:-,313%2;

!63(3$5)%M30)O/1%)(#*0):#"*)M/":)%M/$)5##(;

��v�©�¢¤¬�

@9::/"3L*

��v�©�¢¤¬�

!=/+/01"3-%)30)"*/,,2)5##()/$()3:-#"%/$%

!6/+*)035$3]1/$%)(3c*"*$1*0)O"#:)%M*)@EA')E86'e)BWbd<Wd'

![2$/:31

!C"#%#%2-/,)EEC

!!9$1%3#$/,

!!9$1%3#$0)/"*)]"0%)1,/00)#4G*1%0)

��v�©�¢¤¬�

QA��v�©�¢¤¬�

Client-Side JavaScript

��v�©�¢¤¬�

'D/:-,*0)2#9f+*)0**$)0#)O/".M/+*)$#)-/"%319,/")1#$%*D%

��v�©�¢¤¬�

��v�©�¢¤¬�

!N*4)F"#H0*")'$+3"#$:*$%

!',*:*$%0

!?/01/(3$5)@%2,*)@M**%0

!'+*$%0

!E%M*")O*/%9"*0

E9%,3$*

��v�©�¢¤¬�

N*4)F"#H0*")'$+3"#$:*$%

��v�©�¢¤¬�

N3$(#H)/0)d,#4/,)'D*19%3#$)?#$%*D%

309 var answer = 42;310 alert(window.answer === answer);

��v�©�¢¤¬�

8M*19""*$%H3$(#H

(#19:*$%

M30%#"2

O"/:*0jk

,#1/%3#$

;;;

N3$(#H)E4G*1%0

01"**$

O#":0jk

/$1M#"0jk

3:/5*0jk

;;;

��v�©�¢¤¬�

'+*$%)("3+*$O#":)d<7

��v�©�¢¤¬�

=/+/@1"3-%)/((0)&,"(2#3))%#)%M*)1#$%*$%)/$()3%0)-"*0*$%/%3#$

��v�©�¢¤¬�

!?"*/%3$5)+309/,)*c*1%0)

!@#"%3$5)%M*)1#,9:$0)#O)/)%/4,*)

!63(3$5)1*"%/3$)1#$%*$%)/$()"*+*/,3$5)(*%/3,0)0*,*1%3+*,2)/0)%M*)90*")g("3,,0)(#H$g)3$%#)%M/%)1#$%*$%

!@%"*/:,3$3$5)%M*)4"#H03$5)*D-*"3*$1*)42)1#::9$31/%3$5)(3"*1%,2)H3%M)/)H*4)0*"+*"

��v�©�¢¤¬�

',*:*$%

��v�©�¢¤¬�

1 <html> 2 <head> 3 <title>Sample Document</title> 4 </head> 5 <body> 6 <h1></h1> 7 <p>This is a <i>simple</i> document. 8 </body> 9 </html>

��v�©�¢¤¬�

[EA)%"**Document

<html>

<head> <body>

<title>

"Sample Document"

<h1> <p>

"Title" "This is a " <i>

simple

document

��v�©�¢¤¬�

8"/+*"03$5)',*:*$%0

��v�©�¢¤¬�

314 function countNode(node) {315 var numtags = 0;316 if (node.nodeType == 1 /*Node.ELEMENT_NODE*/)317 numtags++;318 var children = node.childNodes;319 for (var i = 0; i < children.length; i++) {320 numtags += countNode(children[i]);321 }322 return numtags;323 }324 alert(countNode(document.body));

��v�©�¢¤¬�

!$#(*;$#(*82-*

!$#(*;1M3,(b#(*0

![2$/:31)/""/2

!$#(*;%/5b/:*

!$#(*;3$$*"68AB

!$#(*;-/"*$%b#(*

��v�©�¢¤¬�

!3$(3$5)',*:*$%0

��v�©�¢¤¬�

16 <ul id="my-ul">17 <li>line1</li>18 <li>line2</li>19 <li>line3</li>20 <li>line4</li>21 </ul>

327 var myElement = document.getElementById('my-id');328 329 var myList = document.getElementById('my-ul');330 var myListItem = myList.getElementsByTagName('LI');331 for (var i = 0; i < myListItem.length; i++) {332 alert(myListItem[i].innerHTML);333 }

��v�©�¢¤¬�

!,+,4,1!55*%',*:*$%F27(Q#-6!)#1*T

!,+,4,1!55*%',*:*$%0F28/5b/:*Q!(*7(4,T/

!,+,4,1!55*%',*:*$%0F2b/:*Q1(4,6!)#1*T

��v�©�¢¤¬�

A#(3O2)',*:*$%0

��v�©�¢¤¬�

337 function sortChildren(e) {338 var children = [];339 for (var x = e.firstChild; x != null; x = x.nextSibling) {340 if (x.nodeType == 1 /* Node.ELEMENT_NODE */) {341 children.push(x);342 }343 }344 345 children.sort(function(n, m) {346 var s = n.firstChild.data;347 var t = m.firstChild.data;348 if (s < t) return -1;349 else if (s > t) return 1;350 else return 0;351 });352 for (var i = 0; i < children.length; i++) {353 e.appendChild(children[i]);354 }355 }356 sortChildren(document.getElementById('my-ul'));

��v�©�¢¤¬�

359 var iNode = document.getElementsByTagName('i');360 for (var i = 0; i < iNode.length; i++) {361 var b = document.createElement('input');362 var html = iNode[i].innerHTML;363 b.type = 'button';364 iNode[i].appendChild(b);365 b.value = html;366 b.setAttribute('disabled', 'disabled');367 }

��v�©�¢¤¬�

!,+,4,1!5/--*$(?M3,(Q,+,T

!-3804,1!51"*/%*',*:*$%Q!(*7(4,T/

!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T

��v�©�¢¤¬�

?/01/(3$5)@%2,*)@M**%0

��v�©�¢¤¬�

370 var nodes = document.getElementsByTagName('p');371 for (var i = 0; i < nodes.length; i++) {372 nodes[i].style.display = 'none';373 }

��v�©�¢¤¬�

!7$)?@@K

!:/"53$&,*O%K)V-D

!7$)=/+/01"3-%

!*,*:*$%;0%2,*;:/"53$B*O%)l)gV-Dgh

��v�©�¢¤¬�

24 .dark{25 color: #333;26 }27 .highlight{28 color: red;29 }

376 node.className = 'dark';

��v�©�¢¤¬�

@9::/"3L*

![EA)%"**

!8"/+*"03$5)',*:*$%0

!!3$(3$5)',*:*$%0

!A#(3O2)',*:*$%0

!?/01/(3$5)@%2,*)@M**%0

��v�©�¢¤¬�

'+*$%

��v�©�¢¤¬�

'+*$%)%2-*!A#90*)'+*$%

!1,31I>:#90*(#H$);;;

!I*24#/"()'+*$%

!I*2(#H$>I*29-);;;

!C/5*>',*:*$%)'+*$%

! ,#/(>9$,#/();;;

!#$4,9">#$094:3%);;;

��v�©�¢¤¬�

'+*$%)6/$(,3$5

��v�©�¢¤¬�

W0)C"#-*"%3*032 <input type="button" onclick="toggleHighlight(this)" value="click me!"/>

378 function toggleHighlight(element) {379 if (element.className == 'highlight') {380 element.className = 'dark';381 }else {382 element.className = 'highlight';383 }384 }

��v�©�¢¤¬�

W0)W%%"349%*0

387 document.body.onclick = function(e) {388 e = window.event || e;389 toggleHighlight(e.target || e.srcElement);390 };

��v�©�¢¤¬�

e*530%"/%3#$393 function bindEvent(element, type, listener) {394 if (element.addEventListener) {395 element.addEventListener(type, listener, false);396 } else if (element.attachEvent) {397 element.attachEvent('on' + type, listener);398 }399 }400 401 bindEvent(document.body, 'click', function(e) {402 e = window.event || e;403 toggleHighlight(e.target || e.srcElement);404 });

��v�©�¢¤¬�

'+*$%)C"#-/5/%3#$

��v�©�¢¤¬�

408 bindEvent(document.body, 'click', function(e) {409 e = window.event || e;410 toggleHighlight(e.target || e.srcElement);411 });412 413 bindEvent(document.getElementById('my-id'), 'click', function(e) {414 e = window.event || e;415 stopPropagation(e);416 });417 418 419 stopPropagation = function(event) {420 if (event.stopPropagation) {421 event.stopPropagation();422 } else {423 event.cancelBubble = true;424 }425 };

��v�©�¢¤¬�

E%M*")O*/%9"*0

��v�©�¢¤¬�

83:*"

��v�©�¢¤¬�

431 setTimeout(function() {432 alert(1);433 }, 1000);434 435 var count = 1;436 var timer = setInterval(function() {437 if (count == 10) {438 clearTimeout(timer);439 }440 document.body.innerHTML += 'Adding<br />';441 count++;442 443 }, 1000);

��v�©�¢¤¬�

setTimeout(fn, 0);

��v�©�¢¤¬�

?#(*)30$f%)3$+#I*()"35M%)/H/2)49%)30)"9$)g/0)0##$)/0)-#0034,*;g

��v�©�¢¤¬�

?##I3*0

��v�©�¢¤¬�

W)833:#,)30)/)0:/,,)/:#9$%)#O)$/:*()(/%/)0%#"*()42)%M*)H*4)4"#H0*"

��v�©�¢¤¬�

446 document.cookie = 'username=berg';447 448 var nextYear = new Date();449 nextYear.setFullYear(nextYear.getFullYear() + 1);450 document.cookie = 'username=berg; expires=' + nextYear.toGMTString();

��v�©�¢¤¬�

452 function getCookie(key) {453 var reg = new RegExp('(^| )' + key + '=([^;]*)(;|\x24)'),454 result = reg.exec(document.cookie);455 456 if (result) {457 return result[2] || null;458 }459 460 return null;461 }462 getCookie('username');

��v�©�¢¤¬�

Advanced scripting��v�©�¢¤¬�

?#::9$31/%*)H3%M)/)H*4)0*"+*")H3%M#9%)1/903$5)%M*)H*4)4"#H0*")"*,#/(

��v�©�¢¤¬�

!WG/D

!mAB6%%-e*n9*0%)#")W1%3+*mE4G*1%

!F"#H0*)M30%#"2)1#$%"#,

!C/5*)"*$(*"

��v�©�¢¤¬�

@*"+*"&03(*)=/+/01"3-%

��v�©�¢¤¬�

466 var http = require('http');467 http.createServer(function(req, res) {468 res.writeHead(200, {'Content-Type': 'text/plain'});469 res.end('Hello World\n');470 }).listen(1337, '127.0.0.1');471 console.log('Server running at http://127.0.0.1:1337/');

��v�©�¢¤¬�

68ABo)O*/%9"*0

��v�©�¢¤¬�

e*O*"*$1*)&)4##I0

!=/+/@1"3-%K)8M*)[*]$3%3+*)d93(*)&)[/+3()!,/$/5/$

!!"#"$%&'()*+,-.+/001+2"&)$+3+40567"$+8&0%9:0&1

!C"#)=/+/01"3-%)[*035$)C/%%*"$0)&)e#00)6/":*0.)[90%3$)[3/L

!--I)#$)=/+/01"3-%)&)C*%*"&C/9,)p#1M

��v�©�¢¤¬�

e*O*"*$1*)&)H*403%*0

!;5'&9$<01.*+-))(*==>>>?@5'&9$A01.?0&6=

!=/+/01"3-%)1,#09"*0K)M%%-K>>G344*"3$5;1#:>O/n>$#%*0>1,#09"*0>

!!3"0%&1,/00)O9$1%3#$K)M%%-K>>*$;H3I3-*(3/;#"5>H3I3>!3"0%&1,/00qO9$1%3#$

��v�©�¢¤¬�

QA��v�©�¢¤¬�

!anks

��v�©�¢¤¬�

=/+/01"3-%)4/031P

berg Javascript basic+berg

8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/:

��v�©�¢¤¬�

xĦ¶²¥��?��v�©�¢¤¬�

A library is like a toolkit

��v�©�¢¤¬�

��v�©�¢¤¬�

ÉzÊ�M

��v�©�¢¤¬�

�à�M

��v�©�¢¤¬�

��v�©�¢¤¬�

0.5sdelay

��v�©�¢¤¬�

��v�©�¢¤¬�

20%��v�©�¢¤¬�

Ð<�M

��v�©�¢¤¬�

Changing Every Day��v�©�¢¤¬�

��§�ÆĈ

��v�©�¢¤¬�

• Prototype

• jQuery

• mootools

• sencha (EXT)

��v�©�¢¤¬�

• �#$�Ħ�oµ�

• �Óy\

• �ñ�Â%�

• �[ĊI>�{B

��v�©�¢¤¬�

��v�©�¢¤¬�

Tangram

��v�©�¢¤¬�

[ˈtæŋɡrəm]

ĨTangĩ°í�PN«ÊJç

ĨGramĩ°ísì�Ĭþ�Ĩ�Mĩ

��þÿÊ��m¥ĨN«Ê�Mĩħ

��v�©�¢¤¬�

[ˈtæŋɡrəm]

ĨTangĩ°í�PN«ÊJç

ĨGramĩ°ísì�Ĭþ�Ĩ�Mĩ

��þÿÊ��m¥ĨN«Ê�Mĩħ

��v�©�¢¤¬�

M%%-K>>%/$5"/:;4/3(9;1#:

��v�©�¢¤¬�

Component

Base

DOM event ajax

fx

base

behaviors other

...

core

extra

plugin

UI

button

dialog

menubar

... Editor

Mobile

��v�©�¢¤¬�

tangram base��v�©�¢¤¬�

Éz�MâÁ�

• ĝ¸Z´;• ē1�Mâ�ëô¸Ĥ• �Mâ�Ę`R7×ĀÆĦ��• å±Y¯ÊđÈßæ

��v�©�¢¤¬�

ýú�ă

• £�iòĦ�o• a(ĬĒ&,Ö• �ĝðC�Î

��v�©�¢¤¬�

bà·

• ¨l¦Ğ ĭER~7�ÆU��W��Dė

• a(¡c ĭ ��oAÅgāL�Ügā

��v�©�¢¤¬�

• 0�á5Êĝ¸ċ�• í9ÜÄ"Ă• �Îċ�OLĆ:r*ðC¨k�ÎĜ

bà·

��v�©�¢¤¬�

core

extra

µ� ¹

�o ¹

��v�©�¢¤¬�

codesearch

• http://fe/stable/tangram/codesearch.html

• ċ��ĝôÊ�Ε ½/h.•����url

��v�©�¢¤¬�

CDN|Æ!r01"3-%)%2-*lg%*D%>G/+/01"3-%g)0"1lgM%%-K>>

3:5;4/3(9;1#:>G0>%/$5"/:&4/0*&1#"*&V;^;Y;G0gsr>01"3-%s

!r01"3-%)%2-*lg%*D%>G/+/01"3-%g)0"1lgM%%-K>>3:5;4/3(9;1#:>G0>%/$5"/:&4/0*&V;^;Y;G0gsr>01"3-%s

��v�©�¢¤¬�

DOM

• ď@• ��• 4�• ³�• )�Īċ�OĬreadyÙī

��v�©�¢¤¬�

Event

on

un

get

once

fire

��v�©�¢¤¬�

browser

• À­G• isSome

��v�©�¢¤¬�

• array

• object

• number

• date

• string

• trim/format

• url

• swf

• cookie

• json

��v�©�¢¤¬�

ajax

get

request

post

form

��v�©�¢¤¬�

lang

Class

Event

isXXX

inherits

module

��v�©�¢¤¬�

lang

dispatchEvent

addEventListener

removeEventListener

guid

instance

decontrol

��v�©�¢¤¬�

page

createStyleSheet

loadJsFile

getMousePosition

loadCssFile

getHeight

getScrollLeft

getScrollTop

getViewHeight

getViewWidth

getWidth

��v�©�¢¤¬�

?/01/(*

231 T.e('#header').232 children().233 on('click', function() {234 alert('clicked');235 });

��v�©�¢¤¬�

tangram UI��v�©�¢¤¬�

Éz�MâÁ�

• ĝ¸Z´Ĭ?�ã�ÌgÚ?• �ëô¸Ĥ• 8ą¨k;

��v�©�¢¤¬�

ýú�ă

• Ĥ�ëĬa(FĠ• �ĝãI��Á�• £iòĬFĖÆ

��v�©�¢¤¬�

bà·

• ĕÆ_Ø��2Ď��• ��ªDOMï½

• čĈ��®6°øê��• ãILñ�Ėƨ\;

��v�©�¢¤¬�

constructor

prototype

...

...

...

��v�©�¢¤¬�

��üÁ�F��

��v�©�¢¤¬�

constructor

prototype

��v�©�¢¤¬�

constructor

prototype

addon constructor

addon prototype

��v�©�¢¤¬�

ui.some.create({ });

ui.some.options = { };

ui.Some.extend({ });

p�ČnõËb Ĕé

ğ�Ĕé

ĥûĔé

��v�©�¢¤¬�

�ñ¾Ý±ĎO

�ñ��±ĎO

��3];

��b ;ĈÔ

Ě8ñî��

ČáõËp�

��v�©�¢¤¬�

UIBase

��v�©�¢¤¬�

UIBase

dialogbutton table ...ºÅ

��v�©�¢¤¬�

UIBase

dialogbutton table ...

alert

confirm

modal

keyboard

...

��

ºÅ

��v�©�¢¤¬�

UIBase

dialogbutton

draggable

table ...

stateable

...

alert

confirm

modal

keyboard

...

ñ

��

ºÅ

��v�©�¢¤¬�

button

accordion

uiã� uiñ

carsourel

combox

datepicker

dialog

popup

input

menubaritemset pager

modal

progressbar

slider

starRate

suggestion

tab

tabletooltip

draggable

droppable

stateable

decorator

posable

ColorPalette Login

��v�©�¢¤¬�

tangram mobile (beta)

��v�©�¢¤¬�

Éz�MâÁ�

• Æ�tf=1ªě• +eHÑ®T• ã�Fë�Y¯

��v�©�¢¤¬�

ýú�bÃ

• �!ÞÚÀLuöÀ• ÞÚÀ�2K

• »ĉW}• �!ĊIù�ýXÊ��L9Ç• UI�ß;

��v�©�¢¤¬�

tF/0*

F/0*

!D

194*O/(*u3--#-

"#%/%*01/,*0,3(*

'+*$%

(4%/--3$1M0H3-*

%/-%/-6#,(%9"$

<7

F9%%#$?/"0#9"*,B30%`3*HA/0I

C/5*C#-9-@1"#,,*"@,3(*"

8/48##,4/"`3(*#

<74/0*

W((#$0

��v�©�¢¤¬�

Ú?F"ĂÊVÏx

��v�©�¢¤¬�

��v�©�¢¤¬�

Tangram

��v�©�¢¤¬�

ÍĐèġ�à

ÉÒ�x

-qQ¿

�ę

÷Ģ^

hao123

ÕĘ

¶úÛ

Ąć

IM

äģ1�

wKÜd

mp3

SQ

Tangram

��v�©�¢¤¬�

j���8'Tangramhttp://github.com/BaiduFE

��v�©�¢¤¬�

QA��v�©�¢¤¬�

Thanks!berg��v�©�¢¤¬�