前端(三)-JavaScript

1、基本语法

1.1 引入JavaScript

1.1.1行内引入

<input type="button" value="轻轻点我一下" onclick="javascript:alert('正在学习Javascript!')">

1.1.2 内部引入

<script type="text/javascript">
    function testClickTwo(){
        alert("正在学习JavaScriptTwo")
    }
</script>

<input type="button" value="轻轻点我一下Two" onclick="testClickTwo()">

1.1.3 外部引入

<!-- 引入外部js脚本文件 -->
<script src="js/test.js" type="text/javascript"></script>

1.2 数据类型和变量

typeof

查看数据类型；

关键字	类型
undefined	未定义
number	数字
string	字符串
boolean	布尔

number 的注意点

• NaN; NaN表示Not a Number，当无法计算结果时用NaN表示 ;
• Infinity; Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就 表示为Infinity;

1.3 strict模式

JavaScript在设计之初，为了方便初学者学习，并不强制要求用 var 申明变量。这个设计错误带来了 严重的后果：如果一个变量没有通过 var 申明就被使用，那么该变量就自动被申明为全局变量；

为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的 JavaScript代码，强制通过 var 申明变量，未使用 var 申明变量就使用的，将导致运行错误。

<!--启用strict模式的方法是在JavaScript代码的第一行写上：-->
<script>
    `use strict`;
    // 如果浏览器支持strict模式，下面的代码将报ReferenceError错误:
    abc = 'Hello, world';  //没有使用var声明变量
    console.log(abc);
</script>

1.4 字符串

1.4.1 多行字符串

由于多行字符串用 \n 写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反 引号 ``表示：

`这是一个
多行
字符串`;

1.4.2 模板字符串(注意模板字符的放多行字符串号``反引号里面才可以)

ES6新增了一种模板字符串，表示方法和上面的多行 字符串一样，但是它会自动替换字符串中的变量：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

1.4.3 常用方法

方法	说明
length()	字符串长度
str[index]	通过下标获取字符
toUpperCase()	变大写
toLowerCase()	变小写
charAt(index）	返回指定下标的字符
indexOf(str)	返回指定字符串的下标
lastIndexOf(str)	返回指定字符串最后一次出现的下标
substring(index1,index2)	返回区间的字符(前闭后开)
...	...

1.5 数组

JavaScript的 Array 可以包含任意数据类型，并通过索引来访问每个元素。

1.5.1 初始化

//定义数组1：var 数组名 =new Array([长度]),长度可以省略
var varArray1 = new Array();
//访问数组元素
varArray1[0] = "LPL";
varArray1[1] = "LCK";
varArray1[3] = "LEL";
console.log(varArray1);

//定义数组2,支持直接初始化
var varArray2 = new Array(10,20,30,40,50);
varArray2[5] = 60;
console.log(varArray2);

//定义数组3：直接支持使用中括号
var varArray3 = [100,90,80];
console.log(varArray3);

1.5.2 常用方法

方法	说明
indexOf(index)	通过下标获取元素
slice(index1,index2)	截取指定下标元素，返回新数组(前闭后开)
push(元素...)	向末尾添加任意元素
pop()	将末尾的元素删除
unshift(元素...)	向头部添加任意元素
shift()	将头部的元素删除
sort()	排序
reverse()	反转
splice(index,num,元素...)	从指定的索引开始删除若干元素，然后再 从该位置添加若干元素
concat(array)	把当前的 Array 和另一个 Array 连接起来，并返回一个新的 Array
join([符号])	把当前 Array 的每个元素都用指定的字符串连接起 来，然后返回连接后的字符串：

1.6 对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

1.6.1 定义一个对象

var 对象名 = {
    key: 'value',
    key: 'value',
    key: 'value'
}

1.6.2 获取对象的属性

对象.属性

1.6.3 由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

如果我们要检测对象是否拥有某一属性，可以用 in 操作符：

var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不过要小心，如果用 in 判断一个属性存在，这个属性不一定是 这个对象的，它可能是这个对象继承得 到的：

1 'toString' in xiaoming; // true
//因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以xiaoming 也拥有 toString 属性。

要判断一个属性是否是 xiaoming 自身拥有的，而不是继承得到的，可以用 hasOwnProperty() 方法：

var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

1.7 流程控制

1.7.1 if

1.7.2 for

for ... in ， 它可以把一个对象的所有属性依次循环出来：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于 **Array 也是对象**，而它的每个元素的**索引被视为对象的属性**，所以**遍历出来是下标**；

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
//请注意，for... in 对 Array 的循环得到的是 String 而不是 Number 。

1.7.3 while

1.8 Map 和Set

1.8.1 Map

Map 是一组键值对的结构，具有极快的查找速度。

1.8.1.1初始化

//初始化 Map 需要一个二维数组，或者直接初始化一个空 Map;
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

//由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

1.8.2 Set

Set 和 Map 类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在 Set 中， 没有重复的key;

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'
//重复元素在 Set 中自动被过滤：3
//通过 delete(key) 方法可以删除元素：

1.9 Iterable

遍历 Array 可以采用下标循环，遍历Map 和 Set 就无法使用下标。 为了统一集合类型，ES6标准引入了新的 iterable 类型，Array，Map，Set 属于； 具有 iterable 类型的集合可以通过新的 for ... of 循环来遍历。

更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该 函数。

1.9.1 Array

var a = new Array(元素...);
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
})

1.9.2 Map

Map 的回调函数参数依次为 value 、 key 和 map 本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
	console.log(value);
});

1.9.3 set

Set 没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
	console.log(element);
});

2、交互弹窗

方法	说明
alert(str)	警告弹窗，没有返回值，只有确定按钮
prompt(str)	有输入框(返回值为输入内容，直接取消返回值为空null，没有输入但确认返回值为空字符串)
prompt(str1,str2)	有输入框和默认值
confirm(str)	是否选择框(返回值，true,false)

3、函数

3.1 常用系统函数

方法	说明
parseInt(strNum)	将字符串转换为整型数字
parseFloat(strNum)	将字符串转换为浮点型数字
isNaN(值)	true,表示不是数字，false,表示是数字

3.2 自定义函数

3.2.1定义函数

方式1

function abs(x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
}
//一旦执行到 return 时，函数就执行完毕，并将结果返回。
//如果没有 return 语句，函数执行完毕后也会返回结果，只是结果为 undefined 。

方式2

var abs = function (x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
};
//在这种方式下， function (x) { ... } 是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量 abs ，所以，通过变量 abs 就可以调用该函数。
//上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个 ; ，表示赋值语句结束。

3.3两个重要点

3.3.1arguments 关键字

JavaScript还有一个免费赠送的关键字 arguments ，它只在函数内部起作用，并且永远指向当前函数 的调用者传入的所有参数。

function foo(x) {
console.log('x = ' + x); // 10
for (var i=0; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30)

3.3.2 rest 参数

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数只能写在最后，前面用 ... 标识，从运行结果可知，传入的参数先绑定 a 、 b ，多余的 参数以数组形式交给变量 rest ;

3.4 变量的作用域

描述	作用域
var声明的变量	全局变量
不用var声明的变量(不建议使用)	全局变量
方法以内的变量	局部变量

3.4.1 两个关键字

关键字	说明
let	声明局部变量的关键字
const	声明常量的关键字

3.4.2 全局对象

实际上，JavaScript默认有一个全局对象 window ，全 局作用域的变量实际上被绑定到 window 的一个属性：

4、事件

事件	说明
onclick	单机事件
onfocus	获取焦点事件
onblur	失去焦点事件
onkeydown	键盘按下事件
onkeyup	键盘抬起事件
onkeypress	键盘产生可输入字符事件
onmouseover	鼠标移入事件
onmouseout	鼠标移除事件

5、BOM

5.1 windows

方法	说明
close()	关闭浏览器窗口
open()	打开指定url浏览器窗口(可指定窗口大小)

5.2 history

方法	说明
back()	返回上一个页面
forward()	下一个页面
go()	加载某个具体URL (go(-1)返回上一个页面 go(1)下一个页面)

5.3 location

属性	说明
host	主机名+端口号
hostname	主机名
href	完整URL(给href赋值可以跳转到指定页面)

方法	说明
repload()	重新加载文档
replace()	用新的文档替换当前文档

5.4 document

属性	说明
referrer	返回载入前文档的URL
URL	返回当前文档的URL
cookie	返回当前页面的cookie

方法	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementByName()	返回带有指定name值的对象集合
getElementByTagName()	返回带有指定标签的对象的集合
getElementByClassName()	返回带指定class值的对象集合
write()	向文档写文本，HTML表达式或JavaScript代码

5.5 innerHTML 与 innerText

方法()	说明
innerHTML = ""	往节点里里面些内容，里面的标签会被解析
innerHTML	获取节点里面的内容
innerText = ""	往节点里里面些内容，里面的标签不会被解析
innerText	获取节点里面的内容

toFixed(number) 保留指定位数

5.6 Date

方法	说明
getDate()	每月中的第几天
getDay()	每周的第几天
getHours()	小时
getMinutes()	分钟
getSeconds()	秒数
getMonth()	月份(0~11)
getFullYear()	年份
getTime()	时间戳

6.7 Math对象

方法	说明
ceil()	向上舍入
floor()	向下舍入
rand()	四舍五入
random()	返回0~1之间的随机数

6.8 定时函数与清除函数(时钟特效)

定时函数

方法	说明
setTimeout("调用的函数",等待的秒数)	指定时间后执行一次函数
setInterval("调用的函数",间隔的秒数)	指定时间间隔一直执行函数

清除函数

方法	说明
clearTimeout(setTimeout返回的ID值)	停止执行函数
clearInterval(setInterval返回的ID值)	停止执行函数

6、DOM

6.1 层次关系访问节点

层次访问节点1，包含text，注释等其他内容；

属性名称	说明
parentNode	返回接待你的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

层次访问节点2，只包含标签元素节点

属性名称	说明
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

6.2 操作节点

6.2.1操作节点属性

方法	说明
getAttribute("属性名")	获得节点指定属性值
setAttribute("属性名",属性参数)	设置节点的属性值

6.2.2创建和插入节点

方法	说明
cerateElement(tagName)	通过标签名创建新的元素节点
A.appendChild(B)	把B节点(作为子节点)追加到A节点的末尾
inseretBefore(A,B)	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

cloneNode(deep)的深拷贝和浅拷贝

方法	说明
cloneNode(false)	浅拷贝(不拷贝标签内部的子元素)
cloneNode(true)	深拷贝(包括标签内部的子元素一起拷贝)

6.2.3 删除和替换节点

方法	说明
removeChild(node)	删除指定的节点
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点

注意只有父节点才可以删除子节点或者替换子节点；

6.3 操作节点样式

6.3.1 事件

修改样式主要与事件一起使用；

事件	说明
onclick	单机事件
onfocus	获取焦点事件
onblur	失去焦点事件
onkeydown	键盘按下事件
onkeyup	键盘抬起事件
onkeypress	键盘产生可输入字符事件
onmouseover	鼠标移入事件
onmouseout	鼠标移除事件

6.3.2 通过节点的style属性

元素节点.style.样式属性=”样式值“；

//举例
document.getElementById("cart").style.backgroundColor="#fff";

6.3.3 className属性

//carOut类属性时在CSS外部样式中已经存在的
document.getElementById("cart").className = "cartOut";