HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。
在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。
引入JavaScript代码，类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
JS变量
|
1
2
3
4
|
name = 'dsx'; // 默认全局变量
function func() {
var name = 'niulaoshi'; // 局部变量
}
|
JS基本数据类型（JavaScript 声明数据类型通过new）
字符串
扫描二维码关注公众号，回复：
96690 查看本文章
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//定义字符串
var str = '你开心就好！';
var name = '大师兄';
// 字符串的拼接
var name_str = name+str;
//字符串操作
str = '大师兄'
str.charAt(0) 根据角标获取字符串中的某一个字符 char字符
str.substring(1,3) 根据角标获取 字符串子序列 大于等于x 小于y
str.length 获取字符串长度
str.concat('牛教授') 拼接字符串
str.indexOf('大师') 获取子序列的位置
str.slice(0,1) 切片 start end
str.toLowerCase() 变更为小写
str.toUpperCase() 变更大写
str.split('师',1) 切片 返回数组 参数2 为取分割后数组的前x个元素
数字类型（
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
var age = 18;
var score = 89.22;
number = '18';
// 字符串转
var n = parseInt(number);
// 转换成小数
f =parseFloat(number)
布尔类型（
true 或 false）
var t = true; var f = false;
|
数组类型（就是Python的列表）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
// 第一种创建方式 var list = new Array();
list[0] = '大师兄';
list[1] = '牛教授';
// 第二种创建方式
var list2 = new Array('大师兄','牛教授');
// 第三种创建方式
var list3 = ['大师兄','牛教授'];
数组操作
var list3 = ['大师兄','牛教授'];
list3.length 数组的长度
list3.push('dsx') 尾部追啊参数
list3.shift() 头部获取一个元素 并删除该元素
list3.pop() 尾部获取一个元素 并删除该元素
list3.unshift('dsx') 头部插入一个数据
list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素
list3.splice(n,0,val) 指定位置插入元素
list3.splice(n,1,val) 指定位置替换元素
list3.splice(n,1) 指定位置删除元素
list3.slice(1,2) 切片;
list3.reverse() 反转
list3.join('-') 将数组根据分割符拼接成字符串
list3.concat(['abc']) 数组与数组拼接
list3.sort() 排序
|
对象类型（等同于Python的字典）
|
1
2
3
4
5
|
var dict = {name:'dsx',age:18,sex:'男' };
var age = dict.age;
var name = dict['name'];
delete dict['name'] 删除
delete dict.age 删除
|
定时器
|
1
2
3
4
5
6
|
setInterval(alert('大师兄'),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位
function t1() {
console.log('我是大师兄')
}
setInterval('t1()', 5000);// 可以运行方法
|
JS条件判断语句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
if (条件) {
执行代码块
} else if (条件) {
执行代码块
} else {
执行代码块
};
if (1 == 1) {
console.log()
} else if (1 != 1) {
console.log()
} else if (1 === 1) {
console.log()
} else if (1 !== 1) {
console.log()
} else if (1 == 1 && 2 == 2) { //and
console.log()
} else if (1 == 1 || 2 == 2) { //or
console.log()
}
switch (a) {
case 1:
console.log(111);
break;
case 2:
console.log(222);
break;
default:
console.log(333)
}
|
JS循环语句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
第一种循环
循环的是角标
tmp = ['宝马', '奔驰', '尼桑'];
tmp = '宝马奔驰尼桑';
tmp = {'宝马': 'BMW', '奔驰': 'BC'};
for (var i in tmp) {
console.log(tmp[i])
}
第二种循环
不支持字典的循环
for (var i = 0; i < 10; i++) {
console.log(tmp[i])
}
第三种循环
while (1 == 1) {
console.log(111)
}
|
函数定义
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
1、普通函数
function 函数名(形参, 形参, 形参) {
执行代码块
}
函数名
(形参, 形参, 形参);
2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递
setInterval(function () {
console.log(11)
}, 5000);
3、自执行函数创建函数并且自动执行
当引入多个
js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突
(function (name) {
console.log(name)
})('dsx');
作用域
Python的作用域是以函数作为作用域的，其他语言以代码块（{}）作为作用域的。
JavaScript是以函数作为作用域
function tmp() {
var name = 'dsx';
console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前，已经创建
var name = 'nhy';
function a() {
var name='dsx';
function b() {
console.log(name);
}
return b
}
var c = a();
c();
3、函数的作用域存在作用域链（代码不执行时，先生成作用域链）
当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则
function outer() {
name = 'nn';
function inner() {
var name = 'ii'
console.log('in', name)
}
console.log('out', name);
inner()
}
outer();
函数不调用时，只生成作用域，当调用时遵循作用域链执行，
name都为hhh
function outer() {
var name = 'nn';
function inner() {
console.log('in', name)
}
var name = 'hhh';
console.log('out', name);
inner()
}
outer();
4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行
var xxx;
function func() {
console.log(name);
var name = 'dsx';
}
func();
|
面向对象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
// 在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用
// JavaScript的类默认就拥有了Python的构造函数__init__
function Foo(name) {
this.name = name;
}
// 创建对象时JavaScript需要用到new关键字来创建对象
var obj = new Foo('dsx');
console.log(obj.name);
// 类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源
// 创建对象时，say每次创建对象，都会创意一个say的方法。
function Foo1(name) {
this.name = name;
this.say = function () {
console.log(this.name)
}
}
var obj1 = new Foo1('dsx_obj1');
obj1.say();
// 完善类的定义
function Foo2(name) {
this.name = name
}
// 类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时去现在Foo中找，没有找到，会在去原型中找
是否有该方法。有执行，没有就报错
Foo2.prototype = {
say: function () {
console.log(this.name)
}
};
var obj2 = new Foo2('dsx_obj2');
obj2.say();
|
序列化
|
1
2
|
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
|
转义
转义中文或特殊字符
|
1
2
3
4
5
6
7
8
9
10
11
|
1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义
2、& 代表参数的链接，如果就是想传& 给后端那么必须转义
decodeURI(url) URl中未转义的字符
decodeURIComponent(url) URI组件中的未转义字符
encodeURI(url) URI中的转义字符
encodeURIComponent(url) 转义URI组件中的字符
字符串转义
var name='大师兄'
escape(name) 对字符串转义
unescape(name) 转义字符串解码
|