More Related Content What's hot История России, ХХ - начало ХХI века, 11 класс, Загладин Н.В., Козленко С.И.,... История России, ХХ - начало ХХI века, 11 класс, Загладин Н.В., Козленко С.И.,... dg44h
第三课:JS-行为控制语言+js架构思想21. 9 function hello(to){
10 to = to || 'world';
11 alert("Hello " + to);
12 return true;
13 }
14 var to = 'everyone';
15 hello(to);
26. 43 var i = 1;
44 i = 'something else';
45
46 alert(i + 1);
27. 49 var a = [1, 2, 3];
50 var b = a;
51 a[0] = 99;
52 alert(b);
30. 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);
31. 34 function f() {
35 alert(scope);
36 if (!scope) {
37 var scope = 'local';
38 }
39 alert(scope);
40 }
41 f();
33. 54 var a = 1;
55 alert(a);
56
57 return
58 {
59 a: 1
60 };
34. @9::/"3L*
{ !<$%2-*()`/"3/4,*0
!`/"3/4,*)@1#-*
!E-%3#$/,)@*:31#,#$0
37. ?,/00&O"**
62 var info = {
63 first: 'Berg',
64 last: 'Lei',
65 address: {
66 city: 'Beijing',
67 street: 'Shangdi 10th street'
68 }
69 };
38. 71 info['first'];
72 info.first;
73
74 var key = 'first';
75 info[key];
39. 77 for (i in info) {
78 alert(info[i]);
79 }
41. 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']);
42. C"#%#%2-*)1M/3$
null
someone student Object
name : john university: CAS toString : fn
someone['key']
43. @9::/"3L*
{ !?,/00&O"**
!C"#%#%2-*
!C"#%#%2-*)1M/3$
47. 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());
50. 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);
52. ?#$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
function's prototype member
54. var Counter = function() {
var value = 0;
return {
increment: function(inc) {
return value += inc || 1;
},
getValue: function() {
return value;
}
};
}();
56. for (var i = 0; i < count; i++) {
nodes[i].onclick = function() {
alert(i);
};
}
57. for (var i = 0; i < count; i++) {
nodes[i].onclick = function(i) {
return function() {
alert(i);
};
}(i);
}
58. !9$1%3#$/,)-"#5"/::3$5
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 }
59. 187 function inc(value) {
188 return value + 1;
189 }
190 var multInc = multize(inc);
191
192 multInc([1, 2, 3]);
61. A*:#3L/%3#$
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 }
62. 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 }
63. 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 }();
66. @9::/"3L*
{
!7$+#1/%3#$0
!!9$1%3#$
!A*%M#(
!1#$0%"91%#"
!/--,2
67. @9::/"3L*
!?,#09"*
{ !!9$1%3#$/,)-"#5"/::3$5
!A*:#3L/%3#$
!?/01/(*
71. 132 var Counter = function(init) {
133 this.value = init || 0;
134 };
135 var myCounter = new Counter(5);
return a new object link to the
function's prototype member
72. 243 var Person = function(name) {
244 this.name = name;
245 };
246 Person.prototype.getName = function() {
247 return this.name;
248 };
73. 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 };
74. 238 function extend(subClass, superClass) {
239 var F = function() {};
240 F.prototype = superClass.prototype;
241 subClass.prototype = new F();
242 }
76. 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 };
78. 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);
91. N3$(#H)
E4G*1%0
01"**$
O"/:*0jk
8M* O#":0jk
19""*$% M30%#"2
H3$(#H
/$1M#"0jk
(#19:*$%
3:/5*0jk
,#1/%3#$
;;;
;;;
94. !?"*/%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*"+*"
96. 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>
97. [EA)%"**
Document
<html>
<head> <body>
<title> <h1> <p>
"Sample Document" "Title" "This is a " <i> document
simple
99. 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));
102. 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 }
103. !,+,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
105. 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'));
106. 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 }
107. !,+,4,1!5/--*$(?M3,(Q,+,T
!-3804,1!51"*/%*',*:*$%Q!(*7(4,T/
!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T
109. 370 var nodes = document.getElementsByTagName('p');
371 for (var i = 0; i < nodes.length; i++) {
372 nodes[i].style.display = 'none';
373 }
111. 24 .dark{
25 color: #333;
26 }
27 .highlight{
28 color: red;
29 }
376 node.className = 'dark';
114. '+*$%)%2-*
! A#90*)'+*$%
! 1,31I>:#90*(#H$);;;
! I*24#/"()'+*$%
! I*2(#H$>I*29-);;;
! C/5*>',*:*$%)'+*$%
! ,#/(>9$,#/();;;
! #$4,9">#$094:3%);;;
116. W0)C"#-*"%3*0
32 <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 }
118. 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 });
120. 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 };
123. 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);
128. 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();
129. 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');
134. 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/');
160. button
plugin Mobile
dialog
fx behaviors
other
menubar
base ...
Editor
UI Component
extra DOM event ajax ...
core
Base
170. Event
on once
un
get
fire
172. • array
• object • url
• number • swf
• date • cookie
• string • json
• trim/format
175. lang
dispatchEvent instance
addEventListener decontrol
removeEventListener
guid
176. getScrollLeft
page
getScrollTop
createStyleSheet
getViewHeight
getMousePosition
getViewWidth
loadJsFile
getWidth
loadCssFile
getHeight
190. UIBase
button dialog table ...
alert
confirm
modal
keyboard
...
191. UIBase
button dialog table ...
alert
draggable
confirm
stateable modal
keyboard
...
...
192. 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
196. F9%%#$ C/5* 8/4
?/"0#9"*, C#-9- 8##,4/"
W((#$0
B30%`3*H @1"#,,*" `3(*#
A/0I @,3(*"
<74/0* <7
194*
"#%/%* (4%/- %/-
O/(*
01/,* -3$1M %/-6#,(
u3-
0,3(* 0H3-* %9"$
-#- !D '+*$%
F/0*
tF/0*