Skip to content

Commit 62a52e5

Browse files
author
lijiabin01
committed
add JS
1 parent 79b0408 commit 62a52e5

9 files changed

Lines changed: 281 additions & 0 deletions

‎JavaScript_1/深入浅出/Screen Shot 2018-05-10 at 10.22.37 AM.png‎

143 KB
Loading

‎JavaScript_1/深入浅出/Screen Shot 2018-05-10 at 10.40.47 AM.png‎

380 KB
Loading

‎JavaScript_1/深入浅出/Screen Shot 2018-05-10 at 2.17.58 PM.png‎

233 KB
Loading

‎JavaScript_1/深入浅出/Screen Shot 2018-05-10 at 2.42.54 PM.png‎

489 KB
Loading

‎JavaScript_1/深入浅出/Screen Shot 2018-05-11 at 1.52.47 PM.png‎

323 KB
Loading

‎JavaScript_1/深入浅出/index1.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="test2.js"></script>
9+
<script src="test3.js"></script>
10+
</head>
11+
<body>
12+
<div id="caption">1111</div>
13+
<input type="button" onclick='changeText()' value="Change Text"/>
14+
<script type="text/javascript">
15+
function changeText(){
16+
document.getElementById('caption').innerHTML = 'Fred Flinstone111';
17+
}
18+
19+
window.onload = function(){
20+
var calculate = document.getElementById("caption");
21+
let str = 'helloworld';
22+
calculate.innerHTML = str;
23+
// calculate.innerText = "got it";
24+
calculate.style.backgroundColor = '#ccc';
25+
}
26+
</script>
27+
</body>
28+
</html>

‎JavaScript_1/深入浅出/test2.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// window.onload = function(){
2+
// var obj = {x: 4};
3+
// console.log(obj.x);
4+
// }
5+
6+
var obj = {x: 431};
7+
console.log(obj.x);
8+
9+
// .instanceof运算符: 此运算符可以判断一个变量是否是某个对象（类）的实例，返回值是布尔类型的
10+
var str = new String("antzone");
11+
console.log(str instanceof String);
12+
13+
//typeof运算符:此运算符可以返回一个字符串，用语说明元算数的类型
14+
var str = new String("antzone");
15+
var strTwo = "antzone";
16+
console.log(typeof str);
17+
console.log(typeof strTwo);
18+
19+
// use strict ： 声明严格模式
20+
21+
//原型链
22+
var obj2 = {x: 111, y: 222, z: 333};
23+
console.log(obj2, obj2.y);
24+
delete obj2.y;
25+
console.log(obj2);
26+
27+
// 属性 get set 方法
28+
// delete 删除属性
29+
var cat = new Object();
30+
cat.legs = 4;
31+
cat.name = "kitty";
32+
console.log(cat);
33+
if (cat.hasOwnProperty('legs')) {
34+
console.log("has legs");
35+
}
36+
var man = {
37+
age: 28,
38+
weibo: '@Bosd'
39+
}
40+
console.log(typeof cat);
41+
console.log(typeof man);
42+
43+
// 对象标签、序列化
44+
// proto:原型标签
45+
// class标签
46+
// extensible表示对象是否可扩展
47+
48+
var obj3 = {x: 1, y: true, z:[1, 2, 3], nullVal: null};
49+
var json = JSON.stringify(obj3);
50+
console.log(obj3);
51+
console.log(json);
52+
53+
// OOP
54+
// 基于原型的继承
55+
// prototype:对象上预设的原型属性
56+
function Fool(){
57+
this.x = 1;
58+
}
59+
60+
Fool.prototype.x = 2;
61+
console.log(Fool.x);
62+
console.log(Fool.prototype.x);
63+
64+
// 测试
65+
function Person(name, age){
66+
this.name = name;
67+
this.age = age;
68+
}
69+
console.log("Person class:" + typeof Person);
70+
71+
Person.prototype.hi = function(){
72+
console.log("Hi my name is" + this.name + "i am" + this.age + "years old now");
73+
}
74+
Person.prototype.LEGS_NUM = 2;
75+
Person.prototype.ARMS_NUM = 2;
76+
Person.prototype.walk = function(){
77+
console.log(this.name + "is walking");
78+
}
79+
80+
function Student(name, age, className) {
81+
// call调用父类
82+
Person.call(this, name, age);
83+
this.className = className;
84+
}
85+
86+
// 继承Person的prototype方法
87+
// Object.create创建空对象，并且空对象的原型指向Persion；避免直接赋值时给student原型增加属性时Person也跟着增加的错误
88+
Student.prototype = Object.create(Person.prototype);
89+
// constructor指向student本身，如果不设置的话constructor会指向Person
90+
Student.prototype.constructor = Student;
91+
92+
Student.prototype.hi = function(){
93+
console.log("Hi my name is" + this.name + "i am" + this.age + "years old now" + "and from" + this.className);
94+
}
95+
96+
Student.prototype.learn = function(subject){
97+
console.log("Hi my name is" + this.name + "is learning" + subject + "at" + this.className + ".");
98+
}
99+
100+
var bosn = new Student("Bosn", 29, "Class3,Grade 2");
101+
console.log("new obj type" + typeof bosn);
102+
bosn.hi;
103+
bosn.LEGS_NUM;
104+
bosn.walk();
105+
bosn.learn('math');
106+
107+
108+

‎JavaScript_1/深入浅出/test3.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// 数组，数组是弱类型的，可以把不同类型放到同一个数组里，size from 0 to 2^23 - 1
2+
// 通过自变量创建数组
3+
var arr = [1, true, null, undefined, [1, 2, 3], {x: 1}];
4+
console.log(arr[2]);
5+
// 通过Array构造器创建数组
6+
var arr2 = new Array(10);
7+
var arr3 = new Array(1, 2, 55);
8+
delete arr3[1];
9+
console.log(arr3);
10+
arr3.push("myTest");
11+
console.log(arr3);
12+
arr3.unshift(0); // 增加头部元素
13+
14+
// 二维数组
15+
// 稀疏数组：并不含有从0开始的连续索引，一般length属性值比实际元素个数大
16+
17+
// 数组方法
18+
// Array.prototype.
19+
// sort reverse 排序
20+
// concat合并数组
21+
// slice返回部分数组
22+
// splice数组拼接
23+
24+
// 数组遍历
25+
var arr4 = [1, 2, 3, 4, 5];
26+
arr4.forEach(function(x, index, a){
27+
console.log(x + '|' + index + '|' + (a === arr));
28+
});
29+
30+
// 数组映射
31+
var arr5 = [1, 2, 3];
32+
arr.map(function(x){
33+
return x + 10;
34+
});
35+
36+
// 数组过滤filter
37+
// 数组判断every some
38+
// reduce输入值后可进行计算后返回结果值，reduceRight聚合结果
39+
// 数组检索 indexOf lastIndexOf
40+
// isArray判断是否为数组
41+
42+
// 总结
43+
// VS 一般对象
44+
// 相同：都可以继承，是对象，对象不一定是数组，都可以当做对象添加删除属性
45+
// 不同：数组自动更新length，按索引访问数组常常比访问一般对象属性明显迅速。
46+
47+
// ---
48+
// 函数
49+
// 函数的length表示它形参的个数
50+
// 没有return默认返回undefined
51+
// 函数声明
52+
// 函数表达式
53+
(function(){
54+
// 立即执行函数表达式
55+
})();
56+
// 区别：函数声明会别提前
57+
// Function函数构造器
58+
// var func1 = new Function('a', 'b', 'console.log(a + b');
59+
// func1(1, 2);
60+
// 全局的this（浏览器）指的是window
61+
// call/apply
62+
function add(c, d){
63+
return this.a + this.b + c+ d;
64+
}
65+
var o = {a:1, b: 3};
66+
add.call(o, 5, 6);//扁平传参数
67+
add.apply(o, [10, 24]);//作为数组传递
68+
function bar(){
69+
console.log(Object.prototype.toString.call(this));
70+
}
71+
bar.call(7);
72+
73+
// 函数属性和方法
74+
// bind可以改变函数this，可以颗粒化
75+
76+
// 闭包 可以封装一些复杂的函数逻辑，可以访问函数里面的变量
77+
// 滥用闭包会导致性能和空间的浪费
78+
!function(){ // 立即执行的匿名函数
79+
console.log("local data:" + "got");
80+
81+
var localData = "localData hear";
82+
document.addEventListener('click', function(){
83+
console.log("local data:" + localData);
84+
});
85+
}();
86+
87+
88+
// OOP补充：
89+
// 模拟重载
90+
// 调用子类方法
91+
// 链式调用
92+
// 抽象类
93+
// defineProperty（ES5）
94+
95+
96+
97+
98+

‎JavaScript_1/深入浅出/数组是否相等.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
5+
<title>Untitled Document</title>
6+
7+
</head>
8+
<body>
9+
<script type="text/javascript">
10+
/*
11+
* param1 Array
12+
* param2 Array
13+
* return true or false
14+
*/
15+
/*全等===和相等==的区别
16+
console.log(100 === '100');//false
17+
console.log(100 == '100');//true
18+
总结是===类型不同也会返回false ，==类型不同，值相同返回true*/
19+
20+
// 在Object.prototype.toString.apply眼里undefined也是Object。
21+
22+
//1. 数组中的成员类型相同，顺序可以不同。例如[1, true] 与 [false, 2]是相似的。
23+
// 2. 数组的长度一致。
24+
// 3. 类型的判断范围，需要区分:String, Boolean, Number, undefined, null, 函数，日期, window.
25+
function type(a){
26+
return a === null ? '[object Null]':Object.prototype.toString.apply(a); //hack ie678
27+
}
28+
function arraysSimilar(arr1, arr2){
29+
//Array.isArray判断是否是数组
30+
if(!Array.isArray(arr1) || !Array.isArray(arr2) ||arr1.length!=arr2.length){return false;}
31+
var arr3=[];
32+
var arr4=[];
33+
var x;
34+
for(var i in arr1){
35+
arr3.push(type(arr1[i]));
36+
arr4.push(type(arr2[i]));
37+
}
38+
if(arr3.sort().toString()==arr4.sort().toString()){
39+
return true;
40+
}else{
41+
return false;
42+
}
43+
}
44+
</script>
45+
<script src="testData.js"></script>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)