Skip to content

Commit 31410bd

Browse files
zhouxiaotianzhouxiaotian
committed
20170727
1 parent 8ae1967 commit 31410bd

File tree

10 files changed

+284
-1
lines changed

10 files changed

+284
-1
lines changed

‎WEEK1/DAY4/3-1.png‎

70.6 KB
Loading

‎WEEK1/DAY4/3-2.png‎

81.1 KB
Loading

‎WEEK1/DAY4/3-scope.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88

9-
<script src="js/3-1.js"></script>
9+
<script src="js/3-2.js"></script>
1010
</body>
1111
</html>

‎WEEK1/DAY4/4-vote.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>投票</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
a {
13+
margin: 10px 50px;
14+
text-decoration: none;
15+
color: #555;
16+
font-size: 24px;
17+
display: block;
18+
width: 300px;
19+
line-height: 35px;
20+
text-align: center;
21+
border: 1px solid green;
22+
}
23+
24+
a span {
25+
color: red;
26+
font-weight: bold;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<h1>认为任立欣长得丑的请狂点赞！</h1>
32+
<a href="javascript:;" id="submit">我非常同意 <span id="countBox">0</span></a>
33+
34+
<script src="js/4.js"></script>
35+
</body>
36+
</html>

‎WEEK1/DAY4/5-THIS.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训</title>
6+
</head>
7+
<body>
8+
<script>
9+
//->THIS:函数执行的主体(杜伟民.吃饭() ->吃饭的主体是“杜伟民”,THIS就是“杜伟民”)
10+
//console.log(this);//->window 我们研究THIS都是研究函数中的THIS,全局下的THIS都是WINDOW
11+
12+
// function fn() {
13+
// console.log(this);
14+
// }
15+
// fn();//->window.fn() this:window
16+
17+
// ~function () {
18+
// fn();//->THIS:window
19+
// function fn() {
20+
// console.log(this);
21+
// }
22+
// }();
23+
24+
//->THIS是谁和函数在哪执行的或者函数在哪创建的没有半毛钱的关系，想知道THIS，按照以下规律分析即可 (以后遇到THIS问题,三四而后行:"你以为你以为的就是你以为的")
25+
//[非严格模式下]
26+
27+
//1、自执行函数中的THIS是WINDOW
28+
// ~function () {
29+
// console.log(this);//->window
30+
// }();
31+
32+
//2、给元素的事件绑定方法,当方法执行的时候,方法中的THIS是当前元素本身
33+
// document.body.onclick=function () {
34+
// console.log(this);//->document.body
35+
// }
36+
37+
//3、方法执行，看方法名前面是否有“.”，有的话，“.”前面是谁THIS就是谁，没有的话，THIS就是WINDOW
38+
// function fn() {
39+
// console.log(this);
40+
// }
41+
// var obj = {
42+
// aa: fn
43+
// };
44+
// fn();//->this:window
45+
// obj.aa();//->this:obj
46+
47+
function fn() {
48+
console.log(this);
49+
}
50+
document.body.onclick = function () {
51+
//this:document.body
52+
53+
//fn();//->fn中的this:window
54+
}
55+
</script>
56+
</body>
57+
</html>

‎WEEK1/DAY4/6.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
var num = 2;
10+
var obj = {num: 3};
11+
obj.fn = (function (num) {
12+
this.num *= 2;
13+
num *= 2;
14+
return function () {
15+
this.num *= 2;
16+
num *= 3;
17+
console.log(num);
18+
}
19+
})(obj.num);
20+
var fn = obj.fn;
21+
fn();
22+
obj.fn();
23+
console.log(num, obj.num);
24+
</script>
25+
</body>
26+
</html>

‎WEEK1/DAY4/js/3-2.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// i++：自身基础上加一
2+
// ++i：自身基础上加一
3+
// var i = 2;
4+
// console.log(5 + (i++), i);//->7、3
5+
// i = 2;
6+
// console.log(5 + (++i), i);//->8、3
7+
// i++:在和其它值进行运算的时候，它是先拿原有的值进行运算，运算完成后本身在累加
8+
// ++i:它是先自身累加，拿累加后的结果和其它值进行运算的
9+
10+
//思考题:
11+
// var i = 2;
12+
// console.log(5 + (++i) + (i++) - (i++) - (++i));//->1
13+
14+
//------------------------
15+
var n = 10;
16+
function fn(i) {
17+
return function (n) {
18+
console.log(n + (++i));
19+
}
20+
}
21+
var f = fn(10);
22+
f(1);
23+
f(5);
24+
fn(10)(1);//->先把FN执行(传递10),把FN执行的返回结果(小函数)紧接着在执行(传递1)
25+
fn(10)(5);

‎WEEK1/DAY4/js/4.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
var submit = document.getElementById('submit'),
2+
countBox = document.getElementById('countBox');
3+
4+
// submit.onclick = function () {
5+
// /*
6+
// * 变量提升: var n;
7+
// */
8+
// var n = 0;
9+
// countBox.innerHTML = ++n;
10+
// /*
11+
// * 代码执行完成后：栈内存销毁
12+
// */
13+
// };
14+
15+
//->利用了全局作用域不销毁的原理，把我们需要累加的值存储在全局变量中，每一次点击执行函数，在形成的私有作用域中，把全局变量的值进行累加，这样就可以实现我们的需求了
16+
//=>弊端：如果都遵循这个思路,会导致全局变量过多(全局变量可能出现污染的问题),所以在某些正规的小团队中,是命令规定禁止使用全局变量的
17+
// var n = 0;
18+
// submit.onclick = function () {
19+
// countBox.innerHTML = ++n;
20+
// };
21+
22+
//->给ONCLICK赋值的时候:形成一个不销毁的私有作用域(私有变量N也不销毁了)
23+
//->ONCLICK=XXXFFF111
24+
//->弊端：不利于性能优化
25+
// submit.onclick = (function () {
26+
// var n = 0;
27+
// return function () {//->xxxfff111
28+
// countBox.innerHTML = ++n;
29+
// }
30+
// })();
31+
32+
// ~function () {
33+
// var n = 0;
34+
// submit.onclick = function () {
35+
// countBox.innerHTML = ++n;
36+
// }
37+
// }();
38+
39+
/*
40+
* 思路三：自定义属性
41+
* 把值存储在自定义属性上也可以实现保存的作用
42+
*/
43+
// submit.zhufengN = 0;
44+
// submit.onclick = function () {
45+
// //->this:submit
46+
// countBox.innerHTML = ++this.zhufengN;
47+
// };
48+
49+
/*
50+
* 思路四：利用innerHTML的设置内容的机制
51+
*/
52+
submit.onclick = function () {
53+
countBox.innerHTML++;
54+
//->countBox.innerHTML = parseInt(countBox.innerHTML) + 1;
55+
};
56+
57+
//->思考题：回去后把反对的按钮也加上

‎WEEK1/DAY4/task.txt‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
1、上课布置的思考题
2+
var i = 12;
3+
function fn() {
4+
i = 13;
5+
return function (n) {
6+
console.log(n + (++i));
7+
}
8+
}
9+
var f = fn();
10+
f(10);
11+
fn()(10);
12+
f(20);
13+
fn()(20);
14+
15+
===
16+
17+
var i = 1;
18+
function fn() {
19+
i += 2;
20+
return function (n) {
21+
console.log(n + (++i));
22+
}
23+
}
24+
var f = fn();
25+
f(1);
26+
fn()(2);
27+
f(3);
28+
fn()(4);
29+
30+
=====
31+
32+
var i = 1;
33+
function fn() {
34+
i += 2;
35+
return function (n) {
36+
console.log(n + (i++));
37+
}
38+
}
39+
var f = fn();
40+
f(1);
41+
fn()(2);
42+
fn()(4);
43+
f(3);
44+
45+
======
46+
47+
以下代码的功能是要实现为5个input按钮循环绑定click点击事件，绑定完成后点击1、2、3、4、5五个按钮分别会alert输出0、1、2、3、4五个字符。
48+
请问如下代码是否能实现？
49+
如果不能实现那么现在的效果是什么样的？
50+
应该做怎样的修改才能达到我们想要的效果，并说明原理？
51+
<div id="btnBox">
52+
<input type="button" value="button_1" />
53+
<input type="button" value="button_2" />
54+
<input type="button" value="button_3" />
55+
<input type="button" value="button_4" />
56+
<input type="button" value="button_5" />
57+
</div>
58+
59+
<script type="text/javascript">
60+
var btnBox=document.getElementById('btnBox');
61+
var inputs=btnBox.getElementsByTagName('input');
62+
var l=inputs.length;
63+
for(var i=0;i<l;i++){
64+
inputs[i].onclick=function(){
65+
alert(i)
66+
}
67+
}
68+
</script>
69+
70+
========================================
71+
2、完成 “珠峰培训正式课作业[第一周]” 作业题，要求画图的题目，需要画图 (下周二上课抽查)
72+
73+
========================================
74+
3、预习作业
75+
http://video.zhufengpeixun.cn/kecheng/detail_1029018
76+
第一章(第二节)
77+
课件1
78+
课件2
79+
课件4
80+
课件5
81+
课件6
82+
(周日上课前看完即可)

‎WEEK1/DAY4/珠峰培训正式课作业[第一周].doc‎

84.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)