berg
!!"#$%&$()(*+*,#-*".)/,0#)121,30%.)  4,#55*".)678)/,9:$90;!<03$5)=/+/01"3-%>?@@>68AB>C6C>B3$9D>  A/1>3E@;! B3+*)3$)F*3G3$5...
?#$%/1%):*&:/3,K),*3LM3D3$5J4/3(9;1#:8H3%%*"K)J1$4*"5N*34#K)J4*"5F,#5K)M%%-K>>HHH;1$4*"5;1#:
8M30)/O%*"$##$!=/+/01"3-%)4/031P)QR;SMT!8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/:  QV;SMT
JavascriptJavascript basic+
E9%,3$*!E+*"+3*H!=/+/01"3-%)O#")H*4)4"#H0*" !=/+/01"3-% !?,3*$%&@3(*)=/+/@1"3-%!W(+/$1*()01"3-%3$5
Overview
NM2)=/+/01"3-%)X
B/$59/5*)#O)%M*)N*4             O#":)VYYZ;R
()*+,&-./)&00123&4*5$66&7&85&*9)9:+//
=/+/@1"3-%)30)"*/,,2)5##(      7%)30),35M%H*35M%)/$()*D-"*003+*
!C"#%#%2-/,)EEC!!9$1%3#$/,)![2$/:31
F9%)%M*)*$+3"#$:*$%)30)          $#%)0#)5##(     A/I*)90)1#$O90*()/$()/$5"2
A/$2)4"#H0*"0!7)Q))+*"03#$0T.)]"*O#D.)1M"#:*.)0/O/"3.)  #-*"/!?M3$/ !^ZS !A/D%M#$
[3c*"*$%)3:-,*:*$%!=/+/01"3-%)*$53$*0 !?M/I"/)&)7 !=_5*"A#$I*2)&)!3"*O#D !`a)&)?M"#:* !?/"/I/$)&)E-*"/) !b3%"#)&)0/O/"3
[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-*"/)
Javascript
9   function hello(to){10       to = to || world;11       alert("Hello " + to);12       return true;13   }14   var to = ev...
!B*D31/,)@%"91%9"*![/%/%2-*)/$()`/,9*0!`/"3/4,*0!D-"*003#$0)/$()E-*"/%#"0!@%/%*:*$%0!;;;
E9%,3$*!@#:*)(3c*"*$1*!E4G*1%!!9$1%3#$!C"#%#%2-*)EEC
@#:*)(3c*"*$1*0
`/"3/4,*0    <$%2-*(
43 var i = 1;44 i = something else;4546 alert(i + 1);
49   var a = [1, 2, 3];50   var b = a;51   a[0] = 99;52   alert(b);
!C"3:3%3+*)%2-*0) !e*O*"*$1*)%2-*0 !b9:4*"0          !E4G*1%0 !F##,*/$          !W""/20 !@%"3$5           !!9$1%3#$0 !$9,,...
`/"3/4,*)@1#-*     b#)4,#1I)01#-*
22   scope = global;23   function checkscope() {24       scope = local;25       alert(scope);26       myscope = local;27  ...
34 function f() {35      alert(scope);36      if (!scope) {37          var scope = local;38      }39      alert(scope);40 ...
E-%3#$/,)@*:31#,#$0  [E)bE8)O#"5*%)2#9")@*:31#,#$0
54   var a = 1;55   alert(a);5657   return58   {59       a: 160   };
@9::/"3L*{   !<$%2-*()`/"3/4,*0    !`/"3/4,*)@1#-*    !E-%3#$/,)@*:31#,#$0
E4G*1%
}! W""/20! !9$1%3#$0! e*59,/")*D-"*003#$0                            Object! E4G*1%                        }! b9:4*"0! @%"...
?,/00&O"**62 var info = {63     first: Berg,64     last: Lei,65     address: {66         city: Beijing,67         street: ...
71   info[first];72   info.first;7374   var key = first;75   info[key];
77 for (i in info) {78     alert(info[i]);79 }
C"#%#%2-*82 function clone(o) {83     var F = function() {};84     F.prototype = o;85     return new F();86 }
89   var student = {90       university: CAS91   };92   var someone = clone(student);9394   alert(someone[university]);959...
C"#%#%2-*)1M/3$                                              null  someone           student          Object name : john  ...
@9::/"3L*{   !?,/00&O"**    !C"#%#%2-*     !C"#%#%2-*)1M/3$
!9$1%3#$
7$+#1/%3#$0
!9$1%3#$)3$+#1/%3#$103 function add(a, b) {104     return a + b;105 }106 add();
A*%M#()3$+#1/%3#$108 var counter = {109     value: 0,110     increment: function(count) {111         return this.value += ...
NM/%f0)g%M30g
g%M30g)/,H/20)"*O*"0)%#)%M*)#H$*")#4G*1%)#O)%M*)O9$1%3#$)
W--,2)3$+#1/%3#$118   function sum() {119       var i, len = arguments.length, sum = 0;120       for (i = 0; i < len; i++)...
!O9$1%3#$;/--,2Q!"#$%&.)()*$Th !!"#$%&)K)3$+#I*0)%M*)O9$1%3#$)/0)3O)3%)    H*"*)/):*%M#()#O)!"#$%&  !()*$)K)-/003$5)3%)%M*...
?#$0%"91%#")3$+#1/%3#$132 var Counter = function(init) {133     this.value = init || 0;134 };135 var myCounter = new Count...
?,#09"*
var Counter = function() {    var value = 0;       return {           increment: function(inc) {                return val...
?,#09"*!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,-;)
for (var i = 0; i < count; i++) {    nodes[i].onclick = function() {        alert(i);    };}
for (var i = 0; i < count; i++) {    nodes[i].onclick = function(i) {        return function() {            alert(i);     ...
!9$1%3#$/,)-"#5"/::3$5173 function multize(func) {174     return function() {175         var list = arguments[0],176      ...
187   function inc(value) {188       return value + 1;189   }190   var multInc = multize(inc);191192   multInc([1, 2, 3]);
W+#3(0%/%*)/$():9%/4,*)(/%/
A*:#3L/%3#$195 function fibonacci(n) {196     return n < 2 ? n : fibonacci(n - 1) +fibonacci(n - 2);197 }198199 for (var i...
203 var i = 1,204     startTime = (new Date()).getTime();205 while (i++) {206     fibonacci(i);207208     if ((new Date())...
214 var fibonacci = function() {215      var cache = [0, 1];216217      var _fib = function(n) {218          var result = ...
?/01/(*231 T.e(#header).232 children().233 on(click, function() {234      alert(clicked);235 });
A/I3$5)[@B   Q[#:/3$)0-*13]1),/$59/5*0T
@9::/"3L*{    !7$+#1/%3#$0     !!9$1%3#$     !A*%M#(     !1#$0%"91%#"     !/--,2
@9::/"3L*    !?,#09"*{   !!9$1%3#$/,)-"#5"/::3$5    !A*:#3L/%3#$    !?/01/(*
C"#%#%2-/,)EEC
?,/0031)-/%%*"$               H3%M-"#%#%2-/,)-/%%*"$
C0*9(#1,/0031/,
132 var Counter = function(init) {133     this.value = init || 0;134 };135 var myCounter = new Counter(5);            retu...
243   var Person = function(name) {244       this.name = name;245   };246   Person.prototype.getName = function() {247    ...
243   var Person = function(name) {244       this.name = name;245   };246   Person.prototype.getName = function() {247    ...
238 function extend(subClass, superClass) {239     var F = function() {};240     F.prototype = superClass.prototype;241   ...
W)4*%%*")g*D%*$(g
266 function extend(subClass, superClass) {267     var F = function() {};268     F.prototype = superClass.prototype;269   ...
C"#%#%2-/,)-/%%*"$
285   var Person = {286       name: unnamed,287       getName: function() {288           return this.name;289       }290  ...
82 function clone(o) {83     var F = function() {};84     F.prototype = o;85     return new F();86 }
?,/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#...
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##(;
@9::/"3L*
!=/+/01"3-%)30)"*/,,2)5##()/$()3:-#"%/$% !6/+*)035$3]1/$%)(3c*"*$1*0)O"#:)%M*)    @EA)E86e)BWbd<Wd![2$/:31!C"#%#%2-/,)EEC!...
QA
Client-Side JavaScript
D/:-,*0)2#9f+*)0**$)0#)O/".M/+*)$#)-/"%319,/")1#$%*D%
E9%,3$*!N*4)F"#H0*")$+3"#$:*$%!,*:*$%0 !?/01/(3$5)@%2,*)@M**%0!+*$%0!E%M*")O*/%9"*0
N*4)F"#H0*")$+3"#$:*$%
N3$(#H)/0)d,#4/,)D*19%3#$)?#$%*D%309 var answer = 42;310 alert(window.answer === answer);
N3$(#H)          E4G*1%0           01"**$          O"/:*0jk  8M*                O#":0jk19""*$%    M30%#"2H3$(#H           ...
+*$%)("3+*$      O#":)d<7
=/+/@1"3-%)/((0)&,"(2#3))%#)%M*)1#$%*$%)/$()3%0)-"*0*$%/%3#$
!?"*/%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*...
,*:*$%
1 <html>2   <head>3     <title>Sample Document</title>4   </head>5   <body>6     <h1></h1>7     <p>This is a <i>simple</i>...
[EA)%"**               Document                <html>     <head>                        <body>     <title>              <h...
8"/+*"03$5),*:*$%0
314 function countNode(node) {315     var numtags = 0;316     if (node.nodeType == 1 /*Node.ELEMENT_NODE*/)317         num...
!$#(*;$#(*82-*!$#(*;1M3,(b#(*0 ![2$/:31)/""/2!$#(*;%/5b/:*!$#(*;3$$*"68AB!$#(*;-/"*$%b#(*
!3$(3$5),*:*$%0
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 my...
!,+,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
A#(3O2),*:*$%0
337 function sortChildren(e) {338     var children = [];339     for (var x = e.firstChild; x != null; x = x.nextSibling) {...
359 var iNode = document.getElementsByTagName(i);360 for (var i = 0; i < iNode.length; i++) {361     var b = document.crea...
!,+,4,1!5/--*$(?M3,(Q,+,T!-3804,1!51"*/%*,*:*$%Q!(*7(4,T/!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T
?/01/(3$5)@%2,*)@M**%0
370 var nodes = document.getElementsByTagName(p);371 for (var i = 0; i < nodes.length; i++) {372     nodes[i].style.displa...
!7$)?@@K !:/"53$&,*O%K)V-D!7$)=/+/01"3-% !*,*:*$%;0%2,*;:/"53$B*O%)l)gV-Dgh
24     .dark{25         color: #333;26     }27     .highlight{28         color: red;29     }376 node.className = dark;
@9::/"3L*![EA)%"**!8"/+*"03$5),*:*$%0!!3$(3$5),*:*$%0!A#(3O2),*:*$%0!?/01/(3$5)@%2,*)@M**%0
+*$%
+*$%)%2-*! A#90*)+*$% ! 1,31I>:#90*(#H$);;;! I*24#/"()+*$% ! I*2(#H$>I*29-);;;! C/5*>,*:*$%)+*$% ! ,#/(>9$,#/();;; ! #$4,9...
+*$%)6/$(,3$5
W0)C"#-*"%3*032 <input type="button" onclick="toggleHighlight(this)"value="click me!"/>378 function toggleHighlight(elemen...
W0)W%%"349%*0387 document.body.onclick = function(e) {388     e = window.event || e;389     toggleHighlight(e.target || e....
e*530%"/%3#$393   function bindEvent(element, type, listener) {394       if (element.addEventListener) {395           elem...
+*$%)C"#-/5/%3#$
408   bindEvent(document.body, click, function(e) {409       e = window.event || e;410       toggleHighlight(e.target || e...
E%M*")O*/%9"*0
83:*"
431   setTimeout(function() {432       alert(1);433   }, 1000);434435   var count = 1;436   var timer = setInterval(functi...
setTimeout(fn, 0);
?#(*)30$f%)3$+#I*()"35M%)/H/2)49%)30)"9$)g/0)0##$)/0)-#0034,*;g
?##I3*0
W)833:#,)30)/)0:/,,)/:#9$%)#O)$/:*()(/%/)0%#"*()42)%M*)H*4)4"#H0*"
446 document.cookie = username=berg;447448 var nextYear = new Date();449 nextYear.setFullYear(nextYear.getFullYear() + 1);...
452 function getCookie(key) {453     var reg = new RegExp((^| ) + key + =([^;]*)(;|x24)),454         result = reg.exec(doc...
Advanced scripting
?#::9$31/%*)H3%M)/)H*4)0*"+*")H3%M#9%)1/903$5)%M*)H*4)4"#H0*")"*,#/(
!WG/D !mAB6%%-e*n9*0%)#")W1%3+*mE4G*1%!F"#H0*)M30%#"2)1#$%"#,!C/5*)"*$(*"
@*"+*"&03(*)=/+/01"3-%
466   var http = require(http);467   http.createServer(function(req, res) {468         res.writeHead(200, {Content-Type: t...
68ABo)O*/%9"*0
e*O*"*$1*)&)4##I0!=/+/@1"3-%K)8M*)[*]$3%3+*)d93(*)&)  [/+3()!,/$/5/$!!"#"$%&()*+,-.+/001+2"&)$+3+40567"$+  8&0%9:0&1!C"#)=...
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...
QA
!anks
8M*)(*035$)U)/"1M3%*1%9"*)#O)                   8/$5"/: =/+/01"3-%)4/031P Javascript basic+                         berg
?
A library is like a toolkit
0.5sdelay
20%
Changing Every Day
• Prototype• jQuery• mootools• sencha (EXT)
••••
Tangram
[ˈtæŋɡrəm]TangGram
[ˈtæŋɡrəm]TangGram
M%%-K>>%/$5"/:;4/3(9;1#:
button              plugin                                    Mobile                             dialog  fx         behavi...
tangram base
••••
•••
••
•••
coreextra
codesearch• http://fe/stable/tangram/codesearch.html•••               url
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%*...
DOM•••••     ready
Event   on    once   un   get  fire
browser•• isSome
• array• object         • url• number         • swf• date           • cookie• string         • json • trim/format
ajax  get postrequest form
lang Class   inherits Event   module         isXXX
lang    dispatchEvent     instance   addEventListener   decontrolremoveEventListener         guid
getScrollLeft    page                    getScrollTopcreateStyleSheet                   getViewHeightgetMousePosition     ...
?/01/(*231 T.e(#header).232 children().233 on(click, function() {234      alert(clicked);235 });
tangram UI
•••
•••
••   DOM••
constructor              ...              ...prototype              ...
constructorprototype
constructoraddon constructorprototypeaddon prototype
ui.some.create({ });ui.some.options = { };ui.Some.extend({ });
UIBase
UIBasebutton   dialog    table   ...
UIBasebutton   dialog    table          ...                        alert                       confirm                     ...
UIBase         button   dialog    table          ...                                 alertdraggable                       ...
ui                                       ui                dialog         tab button       carsourel     suggestion       ...
tangram mobile   (beta)
•••
•    •   2K••• UI
F9%%#$        C/5*            8/4?/"0#9"*,     C#-9-           8##,4/"                                                W((#...
Tangram
mp3  IMTangram             hao123
Tangramhttp://github.com/BaiduFE
QA
Thanks!berg
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
第三课:JS-行为控制语言+js架构思想
Upcoming SlideShare
Loading in...5
×

第三课:JS-行为控制语言+js架构思想

1,209

Published on

百度web前端课程之js

Published in: Technology, Economy & Finance
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,209
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
110
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

第三课:JS-行为控制语言+js架构思想

  1. 1. berg
  2. 2. !!"#$%&$()(*+*,#-*".)/,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 !"##$%$%&&
  3. 3. ?#$%/1%):*&:/3,K),*3LM3D3$5J4/3(9;1#:8H3%%*"K)J1$4*"5N*34#K)J4*"5F,#5K)M%%-K>>HHH;1$4*"5;1#:
  4. 4. 8M30)/O%*"$##$!=/+/01"3-%)4/031P)QR;SMT!8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/: QV;SMT
  5. 5. JavascriptJavascript basic+
  6. 6. E9%,3$*!E+*"+3*H!=/+/01"3-%)O#")H*4)4"#H0*" !=/+/01"3-% !?,3*$%&@3(*)=/+/@1"3-%!W(+/$1*()01"3-%3$5
  7. 7. Overview
  8. 8. NM2)=/+/01"3-%)X
  9. 9. B/$59/5*)#O)%M*)N*4 O#":)VYYZ;R
  10. 10. ()*+,&-./)&00123&4*5$66&7&85&*9)9:+//
  11. 11. =/+/@1"3-%)30)"*/,,2)5##( 7%)30),35M%H*35M%)/$()*D-"*003+*
  12. 12. !C"#%#%2-/,)EEC!!9$1%3#$/,)![2$/:31
  13. 13. F9%)%M*)*$+3"#$:*$%)30) $#%)0#)5##( A/I*)90)1#$O90*()/$()/$5"2
  14. 14. A/$2)4"#H0*"0!7)Q))+*"03#$0T.)]"*O#D.)1M"#:*.)0/O/"3.) #-*"/!?M3$/ !^ZS !A/D%M#$
  15. 15. [3c*"*$%)3:-,*:*$%!=/+/01"3-%)*$53$*0 !?M/I"/)&)7 !=_5*"A#$I*2)&)!3"*O#D !`a)&)?M"#:* !?/"/I/$)&)E-*"/) !b3%"#)&)0/O/"3
  16. 16. [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-*"/)
  17. 17. Javascript
  18. 18. 9 function hello(to){10 to = to || world;11 alert("Hello " + to);12 return true;13 }14 var to = everyone;15 hello(to);
  19. 19. !B*D31/,)@%"91%9"*![/%/%2-*)/$()`/,9*0!`/"3/4,*0!D-"*003#$0)/$()E-*"/%#"0!@%/%*:*$%0!;;;
  20. 20. E9%,3$*!@#:*)(3c*"*$1*!E4G*1%!!9$1%3#$!C"#%#%2-*)EEC
  21. 21. @#:*)(3c*"*$1*0
  22. 22. `/"3/4,*0 <$%2-*(
  23. 23. 43 var i = 1;44 i = something else;4546 alert(i + 1);
  24. 24. 49 var a = [1, 2, 3];50 var b = a;51 a[0] = 99;52 alert(b);
  25. 25. !C"3:3%3+*)%2-*0) !e*O*"*$1*)%2-*0 !b9:4*"0 !E4G*1%0 !F##,*/$ !W""/20 !@%"3$5 !!9$1%3#$0 !$9,, !9$(*]$*(
  26. 26. `/"3/4,*)@1#-* b#)4,#1I)01#-*
  27. 27. 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);
  28. 28. 34 function f() {35 alert(scope);36 if (!scope) {37 var scope = local;38 }39 alert(scope);40 }41 f();
  29. 29. E-%3#$/,)@*:31#,#$0 [E)bE8)O#"5*%)2#9")@*:31#,#$0
  30. 30. 54 var a = 1;55 alert(a);5657 return58 {59 a: 160 };
  31. 31. @9::/"3L*{ !<$%2-*()`/"3/4,*0 !`/"3/4,*)@1#-* !E-%3#$/,)@*:31#,#$0
  32. 32. E4G*1%
  33. 33. }! W""/20! !9$1%3#$0! e*59,/")*D-"*003#$0 Object! E4G*1% }! b9:4*"0! @%"3$50 Object-like! F##,*/$
  34. 34. ?,/00&O"**62 var info = {63 first: Berg,64 last: Lei,65 address: {66 city: Beijing,67 street: Shangdi 10th street68 }69 };
  35. 35. 71 info[first];72 info.first;7374 var key = first;75 info[key];
  36. 36. 77 for (i in info) {78 alert(info[i]);79 }
  37. 37. C"#%#%2-*82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  38. 38. 89 var student = {90 university: CAS91 };92 var someone = clone(student);9394 alert(someone[university]);9596 someone[name] = john;97 student[university] = HIT;9899 alert(someone[university]);
  39. 39. C"#%#%2-*)1M/3$ null someone student Object name : john university: CAS toString : fnsomeone[key]
  40. 40. @9::/"3L*{ !?,/00&O"** !C"#%#%2-* !C"#%#%2-*)1M/3$
  41. 41. !9$1%3#$
  42. 42. 7$+#1/%3#$0
  43. 43. !9$1%3#$)3$+#1/%3#$103 function add(a, b) {104 return a + b;105 }106 add();
  44. 44. 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());
  45. 45. NM/%f0)g%M30g
  46. 46. g%M30g)/,H/20)"*O*"0)%#)%M*)#H$*")#4G*1%)#O)%M*)O9$1%3#$)
  47. 47. 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 }125126127 var arr = [1, 2, 3, 5];128 sum.apply(this, arr);
  48. 48. !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
  49. 49. ?#$0%"91%#")3$+#1/%3#$132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5); return a new object link to the functions prototype member
  50. 50. ?,#09"*
  51. 51. var Counter = function() { var value = 0; return { increment: function(inc) { return value += inc || 1; }, getValue: function() { return value; } };}();
  52. 52. ?,#09"*!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,-;)
  53. 53. for (var i = 0; i < count; i++) { nodes[i].onclick = function() { alert(i); };}
  54. 54. for (var i = 0; i < count; i++) { nodes[i].onclick = function(i) { return function() { alert(i); }; }(i);}
  55. 55. !9$1%3#$/,)-"#5"/::3$5173 function multize(func) {174 return function() {175 var list = arguments[0],176 ret = [],177 more = [].slice.call(arguments, 0);178179 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 }
  56. 56. 187 function inc(value) {188 return value + 1;189 }190 var multInc = multize(inc);191192 multInc([1, 2, 3]);
  57. 57. W+#3(0%/%*)/$():9%/4,*)(/%/
  58. 58. A*:#3L/%3#$195 function fibonacci(n) {196 return n < 2 ? n : fibonacci(n - 1) +fibonacci(n - 2);197 }198199 for (var i = 0; i <= 10; i++) {200 document.write(i + : + fibonacci(i)+ <br />);201 }
  59. 59. 203 var i = 1,204 startTime = (new Date()).getTime();205 while (i++) {206 fibonacci(i);207208 if ((new Date()).getTime() - startTime> 1000) {209 alert(i);210 break;211 }212 }
  60. 60. 214 var fibonacci = function() {215 var cache = [0, 1];216217 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 }();
  61. 61. ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  62. 62. A/I3$5)[@B Q[#:/3$)0-*13]1),/$59/5*0T
  63. 63. @9::/"3L*{ !7$+#1/%3#$0 !!9$1%3#$ !A*%M#( !1#$0%"91%#" !/--,2
  64. 64. @9::/"3L* !?,#09"*{ !!9$1%3#$/,)-"#5"/::3$5 !A*:#3L/%3#$ !?/01/(*
  65. 65. C"#%#%2-/,)EEC
  66. 66. ?,/0031)-/%%*"$ H3%M-"#%#%2-/,)-/%%*"$
  67. 67. C0*9(#1,/0031/,
  68. 68. 132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5); return a new object link to the functions prototype member
  69. 69. 243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };
  70. 70. 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 };
  71. 71. 238 function extend(subClass, superClass) {239 var F = function() {};240 F.prototype = superClass.prototype;241 subClass.prototype = new F();242 }
  72. 72. W)4*%%*")g*D%*$(g
  73. 73. 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 }276277 var Student = function(name, university) {278 Student.superClass.constructor.call(this, name);279 this.university = university;280 };
  74. 74. C"#%#%2-/,)-/%%*"$
  75. 75. 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("Im studying.");302 };303 alert(student.name);304 student.name = Tom;305 alert(student.name);
  76. 76. 82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  77. 77. ?,/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*$%;
  78. 78. 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##(;
  79. 79. @9::/"3L*
  80. 80. !=/+/01"3-%)30)"*/,,2)5##()/$()3:-#"%/$% !6/+*)035$3]1/$%)(3c*"*$1*0)O"#:)%M*) @EA)E86e)BWbd<Wd![2$/:31!C"#%#%2-/,)EEC!!9$1%3#$/, !!9$1%3#$0)/"*)]"0%)1,/00)#4G*1%0)
  81. 81. QA
  82. 82. Client-Side JavaScript
  83. 83. D/:-,*0)2#9f+*)0**$)0#)O/".M/+*)$#)-/"%319,/")1#$%*D%
  84. 84. E9%,3$*!N*4)F"#H0*")$+3"#$:*$%!,*:*$%0 !?/01/(3$5)@%2,*)@M**%0!+*$%0!E%M*")O*/%9"*0
  85. 85. N*4)F"#H0*")$+3"#$:*$%
  86. 86. N3$(#H)/0)d,#4/,)D*19%3#$)?#$%*D%309 var answer = 42;310 alert(window.answer === answer);
  87. 87. N3$(#H) E4G*1%0 01"**$ O"/:*0jk 8M* O#":0jk19""*$% M30%#"2H3$(#H /$1M#"0jk (#19:*$% 3:/5*0jk ,#1/%3#$ ;;; ;;;
  88. 88. +*$%)("3+*$ O#":)d<7
  89. 89. =/+/@1"3-%)/((0)&,"(2#3))%#)%M*)1#$%*$%)/$()3%0)-"*0*$%/%3#$
  90. 90. !?"*/%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*"+*"
  91. 91. ,*:*$%
  92. 92. 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>
  93. 93. [EA)%"** Document <html> <head> <body> <title> <h1> <p>"Sample Document" "Title" "This is a " <i> document simple
  94. 94. 8"/+*"03$5),*:*$%0
  95. 95. 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));
  96. 96. !$#(*;$#(*82-*!$#(*;1M3,(b#(*0 ![2$/:31)/""/2!$#(*;%/5b/:*!$#(*;3$$*"68AB!$#(*;-/"*$%b#(*
  97. 97. !3$(3$5),*:*$%0
  98. 98. 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);328329 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 }
  99. 99. !,+,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
  100. 100. A#(3O2),*:*$%0
  101. 101. 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 }344345 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));
  102. 102. 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 }
  103. 103. !,+,4,1!5/--*$(?M3,(Q,+,T!-3804,1!51"*/%*,*:*$%Q!(*7(4,T/!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T
  104. 104. ?/01/(3$5)@%2,*)@M**%0
  105. 105. 370 var nodes = document.getElementsByTagName(p);371 for (var i = 0; i < nodes.length; i++) {372 nodes[i].style.display = none;373 }
  106. 106. !7$)?@@K !:/"53$&,*O%K)V-D!7$)=/+/01"3-% !*,*:*$%;0%2,*;:/"53$B*O%)l)gV-Dgh
  107. 107. 24 .dark{25 color: #333;26 }27 .highlight{28 color: red;29 }376 node.className = dark;
  108. 108. @9::/"3L*![EA)%"**!8"/+*"03$5),*:*$%0!!3$(3$5),*:*$%0!A#(3O2),*:*$%0!?/01/(3$5)@%2,*)@M**%0
  109. 109. +*$%
  110. 110. +*$%)%2-*! A#90*)+*$% ! 1,31I>:#90*(#H$);;;! I*24#/"()+*$% ! I*2(#H$>I*29-);;;! C/5*>,*:*$%)+*$% ! ,#/(>9$,#/();;; ! #$4,9">#$094:3%);;;
  111. 111. +*$%)6/$(,3$5
  112. 112. 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 }
  113. 113. W0)W%%"349%*0387 document.body.onclick = function(e) {388 e = window.event || e;389 toggleHighlight(e.target || e.srcElement);390 };
  114. 114. 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 }400401 bindEvent(document.body, click, function(e) {402 e = window.event || e;403 toggleHighlight(e.target || e.srcElement);404 });
  115. 115. +*$%)C"#-/5/%3#$
  116. 116. 408 bindEvent(document.body, click, function(e) {409 e = window.event || e;410 toggleHighlight(e.target || e.srcElement);411 });412413 bindEvent(document.getElementById(my-id), click, function(e) {414 e = window.event || e;415 stopPropagation(e);416 });417418419 stopPropagation = function(event) {420 if (event.stopPropagation) {421 event.stopPropagation();422 } else {423 event.cancelBubble = true;424 }425 };
  117. 117. E%M*")O*/%9"*0
  118. 118. 83:*"
  119. 119. 431 setTimeout(function() {432 alert(1);433 }, 1000);434435 var count = 1;436 var timer = setInterval(function() {437 if (count == 10) {438 clearTimeout(timer);439 }440 document.body.innerHTML += Adding<br />;441 count++;442443 }, 1000);
  120. 120. setTimeout(fn, 0);
  121. 121. ?#(*)30$f%)3$+#I*()"35M%)/H/2)49%)30)"9$)g/0)0##$)/0)-#0034,*;g
  122. 122. ?##I3*0
  123. 123. W)833:#,)30)/)0:/,,)/:#9$%)#O)$/:*()(/%/)0%#"*()42)%M*)H*4)4"#H0*"
  124. 124. 446 document.cookie = username=berg;447448 var nextYear = new Date();449 nextYear.setFullYear(nextYear.getFullYear() + 1);450 document.cookie = username=berg; expires= +nextYear.toGMTString();
  125. 125. 452 function getCookie(key) {453 var reg = new RegExp((^| ) + key + =([^;]*)(;|x24)),454 result = reg.exec(document.cookie);455456 if (result) {457 return result[2] || null;458 }459460 return null;461 }462 getCookie(username);
  126. 126. Advanced scripting
  127. 127. ?#::9$31/%*)H3%M)/)H*4)0*"+*")H3%M#9%)1/903$5)%M*)H*4)4"#H0*")"*,#/(
  128. 128. !WG/D !mAB6%%-e*n9*0%)#")W1%3+*mE4G*1%!F"#H0*)M30%#"2)1#$%"#,!C/5*)"*$(*"
  129. 129. @*"+*"&03(*)=/+/01"3-%
  130. 130. 466 var http = require(http);467 http.createServer(function(req, res) {468 res.writeHead(200, {Content-Type: text/plain});469 res.end(Hello Worldn);470 }).listen(1337, 127.0.0.1);471 console.log(Server running at http://127.0.0.1:1337/);
  131. 131. 68ABo)O*/%9"*0
  132. 132. 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
  133. 133. 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#$
  134. 134. QA
  135. 135. !anks
  136. 136. 8M*)(*035$)U)/"1M3%*1%9"*)#O) 8/$5"/: =/+/01"3-%)4/031P Javascript basic+ berg
  137. 137. ?
  138. 138. A library is like a toolkit
  139. 139. 0.5sdelay
  140. 140. 20%
  141. 141. Changing Every Day
  142. 142. • Prototype• jQuery• mootools• sencha (EXT)
  143. 143. ••••
  144. 144. Tangram
  145. 145. [ˈtæŋɡrəm]TangGram
  146. 146. [ˈtæŋɡrəm]TangGram
  147. 147. M%%-K>>%/$5"/:;4/3(9;1#:
  148. 148. button plugin Mobile dialog fx behaviors other menubar base ... Editor UI Componentextra DOM event ajax ...core Base
  149. 149. tangram base
  150. 150. ••••
  151. 151. •••
  152. 152. ••
  153. 153. •••
  154. 154. coreextra
  155. 155. codesearch• http://fe/stable/tangram/codesearch.html••• url
  156. 156. 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
  157. 157. DOM••••• ready
  158. 158. Event on once un get fire
  159. 159. browser•• isSome
  160. 160. • array• object • url• number • swf• date • cookie• string • json • trim/format
  161. 161. ajax get postrequest form
  162. 162. lang Class inherits Event module isXXX
  163. 163. lang dispatchEvent instance addEventListener decontrolremoveEventListener guid
  164. 164. getScrollLeft page getScrollTopcreateStyleSheet getViewHeightgetMousePosition getViewWidth loadJsFile getWidth loadCssFile getHeight
  165. 165. ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  166. 166. tangram UI
  167. 167. •••
  168. 168. •••
  169. 169. •• DOM••
  170. 170. constructor ... ...prototype ...
  171. 171. constructorprototype
  172. 172. constructoraddon constructorprototypeaddon prototype
  173. 173. ui.some.create({ });ui.some.options = { };ui.Some.extend({ });
  174. 174. UIBase
  175. 175. UIBasebutton dialog table ...
  176. 176. UIBasebutton dialog table ... alert confirm modal keyboard ...
  177. 177. UIBase button dialog table ... alertdraggable confirmstateable modal keyboard ... ...
  178. 178. ui ui dialog tab button carsourel suggestion draggable popup tooltip table droppable input progressbar accordion stateable itemset pager menubar decorator modal combox starRate posable datepicker slider ColorPalette Login
  179. 179. tangram mobile (beta)
  180. 180. •••
  181. 181. • • 2K••• UI
  182. 182. F9%%#$ C/5* 8/4?/"0#9"*, C#-9- 8##,4/" W((#$0B30%`3*H @1"#,,*" `3(*#A/0I @,3(*" <74/0* <7194* "#%/%* (4%/- %/-O/(* 01/,* -3$1M %/-6#,(u3- 0,3(* 0H3-* %9"$-#- !D +*$% F/0* tF/0*
  183. 183. Tangram
  184. 184. mp3 IMTangram hao123
  185. 185. Tangramhttp://github.com/BaiduFE
  186. 186. QA
  187. 187. Thanks!berg
  1. A particular slide catching your eye?

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

×