Skip to content

Commit 2ff7f9e

Browse files
amydevyaamydevya
committed
new
1 parent 96263ce commit 2ff7f9e

27 files changed

Lines changed: 604 additions & 0 deletions

‎10期JS正式课/正式课第二周/第一天/1.原型复习.png‎

58.9 KB
Loading

‎10期JS正式课/正式课第二周/第一天/1.原型的复习.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
function Fn(){//构造函数：构造函数中存放的都是私有的属性和方法
10+
this.x=100;
11+
}
12+
Fn.prototype.showX=function(){};//原型：原型上存放的都是公有的属性和方法；
13+
var f=new Fn; //实例：既可以使用私有的属性和方法，也可以使用公有的属性和方法；
14+
//alert(Object instanceof Function) //instanceOf :前面的实例，是否属于 后面的类
15+
alert(Function instanceof Object) //对象 属于 Object
16+
//alert(Fn instanceof Function)
17+
//alert(f instanceof Object)
18+
</script>
19+
</body>
20+
</html>

‎10期JS正式课/正式课第二周/第一天/10.DOM映射.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body{
8+
font-size: 50px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div>0</div>
14+
<div>1</div>
15+
<div>2</div>
16+
<div>3</div>
17+
<script>
18+
//DOM映射：HTML页面结构 和 元素集合之间的关系；
19+
//当页面结构发生变化的时候，元素集合虽然没有重新获取，但是也会自动发生改变;
20+
//元素集合的不同操作，也能直接影响页面；
21+
var aDiv=document.getElementsByTagName('div');
22+
</script>
23+
</body>
24+
</html>

‎10期JS正式课/正式课第二周/第一天/11.排序.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body{
8+
font-size: 50px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div>23</div>
14+
<div>16</div>
15+
<div>9</div>
16+
<div>2</div>
17+
<script src="utils.js"></script>
18+
<script>
19+
var aDiv=document.getElementsByTagName('div');
20+
//1.类数组转数组
21+
var ary=utils.makeArray(aDiv);
22+
//2.sort排序
23+
ary.sort(function(a,b){
24+
//a:当前项 b：下一项
25+
return a.innerHTML- b.innerHTML;
26+
});
27+
//3.把排好序的数组重新插入页面
28+
for(var i=0; i<ary.length; i++){
29+
document.body.appendChild(ary[i]);
30+
}
31+
32+
33+
34+
35+
</script>
36+
</body>
37+
</html>

‎10期JS正式课/正式课第二周/第一天/12.汉字排序.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body{
8+
font-size: 50px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div>珠峰</div>
14+
<div>刘胡兰</div>
15+
<div>布什</div>
16+
<div>爱国者</div>
17+
<script src="utils.js"></script>
18+
<script>
19+
var aDiv=document.getElementsByTagName('div');
20+
//1.类数组转数组
21+
var ary=utils.makeArray(aDiv);
22+
//2.sort排序
23+
ary.sort(function(a,b){
24+
//a:当前项 b：下一项
25+
a=a.innerHTML;
26+
b= b.innerHTML;
27+
return a.localeCompare(b)
28+
});
29+
//3.把排好序的数组重新插入页面
30+
for(var i=0; i<ary.length; i++){
31+
document.body.appendChild(ary[i]);
32+
}
33+
34+
35+
36+
37+
</script>
38+
</body>
39+
</html>

‎10期JS正式课/正式课第二周/第一天/2.原型的复习2.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>
6+
</head>
7+
<body>
8+
<script>
9+
function Fn(){
10+
this.x=100;
11+
}
12+
Fn.prototype.showX=function(){};
13+
var f=new Fn;
14+
/*alert(Fn instanceof Function);
15+
alert(Object instanceof Function);*/
16+
//通过以上测试，说明：每个函数数据类型都属于Function这个类的实例；--Function 是 Object 的爹;
17+
//既然每个函数数据类型，都是Function的实例，因为所有的实例，都是对象，所以，每个函数数据类型也是对象；
18+
//alert(Function instanceof Object) //--Object 是 Function 的爹； 这里把Function做为对象
19+
//Object.prototype 是 Function.prototype的爹；Object.prototype是所有对象的爹；
20+
var ary=[];
21+
alert(ary instanceof Array);
22+
alert(ary instanceof Object);
23+
24+
</script>
25+
</body>
26+
</html>

‎10期JS正式课/正式课第二周/第一天/3.关于call.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
/*Function.prototype.call=function(){
10+
//1.把“this这个实例”中的 “this关键字” 变成call的第一个参数
11+
//2.“this这个实例”立即执行
12+
this();
13+
}*/
14+
var obj={};
15+
function fn(n,m){
16+
alert(this+(n+m))
17+
}
18+
//fn.call(obj,2,3);
19+
/*
20+
* 1.call把点前面的函数中的this关键字变成call的第一个参数；
21+
* 2.call从第二个参数开始，相当于给call点前面的函数，从左往右一个个的传参
22+
* 3.当改完this，传完参数，fn立即执行
23+
* */
24+
function f1(){
25+
alert(1)
26+
}
27+
function f2(){
28+
alert(2)
29+
}
30+
// f1.call(f2);
31+
/*
32+
* 1.把f1中的this关键字变成f2;
33+
* 2.让f1立即执行
34+
* */
35+
f1.call.call.call.call.call.call(f2);
36+
</script>
37+
</body>
38+
</html>

‎10期JS正式课/正式课第二周/第一天/4.call,apply,bind区别.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
//'use strict'; //严格模式
10+
var obj={};
11+
function fn(){
12+
alert(this);
13+
}
14+
//在严格模式下，传什么，this就是什么
15+
// fn.call(undefined);
16+
// fn.call(null)
17+
//fn.call()
18+
//在非严格模式下，传undefined和null 拿到的都是window
19+
//fn.call()
20+
//fn.call(undefined)
21+
//fn.call(null)
22+
23+
/*function fn(n,m){
24+
alert(this+(n+m));
25+
}*/
26+
//fn.call(obj,2,3)
27+
//fn.apply(obj,[2,3])
28+
/*var res=fn.bind(obj,2,3);
29+
res();*/
30+
/*bind
31+
* bind属于预处理机制；
32+
* 1.先改变fn中的this指向，同时，给fn中的参数赋值
33+
* 2.返回一个经过修改后的函数；
34+
* 3.在我们需要的时候，手动调用；
35+
*
36+
* */
37+
</script>
38+
</body>
39+
</html>

‎10期JS正式课/正式课第二周/第一天/5.apply用法.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
function F(x,y){
10+
this.x=x;
11+
this.y=y;
12+
}
13+
function S(x,y){
14+
// F.call(this,x,y)
15+
var ary=[];
16+
for(var i=0; i<arguments.length; i++){
17+
ary.push(arguments[i]);
18+
}
19+
F.apply(this,ary)
20+
}
21+
</script>
22+
</body>
23+
</html>

‎10期JS正式课/正式课第二周/第一天/6.求平均数.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
//关于范冰冰演技的评分：
10+
function average(){
11+
//1.类数组转数组
12+
/*var ary=[];
13+
for(var i=0; i<arguments.length; i++){
14+
ary.push(arguments[i]);
15+
}*/
16+
var ary=Array.prototype.slice.call(arguments,1,4);
17+
console.log(ary)
18+
//2.sort排序
19+
ary.sort(function(a,b){return a-b});
20+
//3.掐头去尾
21+
ary.pop();
22+
ary.shift();
23+
//4.求平均数
24+
return (eval(ary.join('+'))/ary.length).toFixed(2);
25+
}
26+
var res=average(9.7,8.77,0.77,5.777,1.7);
27+
alert(res)
28+
</script>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)