HTML基础之JS
Posted brf-test
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础之JS相关的知识，希望对你有一定的参考价值。
TML中的三把利器的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
5
6
7
8
9
10
11
12
13
14
15
|
es5
name = ‘dsx‘; // 默认全局变量
function func()
var name = ‘niulaoshi‘; // 局部变量
es6
// let 定义的变量没有 预解析
alert(num1);
let num1 = 1;
alert(num1);
// const 也没有变量预解析 const 定义的程序不可以修改 常量
const num2 = 2;
alert(num2);
num2 = 3
|
JS基本数据类型（JavaScript 声明数据类型通过new）
字符串
|
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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();
ES6
var demo = function (a,b)
alert(a+b)
;
demo(2,2);
// 箭头函数时es6的写法，多个参数 括号括起来 接一个=> 大括号中的写的和其他函数中相同
var rs = (a,b) =>
alert(a+b)
;
rs(1,2);
// 单个参数可以省略括号 但是建议写上
var rs2 = (a) =>
alert(‘a‘)
;
rs2();
// 箭头函数可以解决 在vue中写请求时 获取不到当前vue实例data数据的问题
//ES6 对象简写
let name = ‘aa‘;
let age = 12;
var person =
name:name,
age:age,
show:function ()
;
person.show();
let person =
name,
age,
show()
alert(this.age)
;
person.show()
|
面向对象
|
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) 转义字符串解码
|
以上是关于HTML基础之JS的主要内容，如果未能解决你的问题，请参考以下文章