【web前端HTML+CSS+JS】--- JS学习笔记03

一、JS介绍

• 第一个主要修订版 ES5 (2009)
• 第二个修订版 ES6 (2015)

可以在前端页面上进行逻辑处理，来解决表单的验证等问题，提升效率，直接在前端提示问题，减少服务器压力

应用1：可以做静态验证和动态验证（进行异步请求）

应用2：可以解析后端传过来的响应

应用3：可以制作页面的行为，比如定时轮播、时钟、加载数据...

二、语法

1.语法组成

2.编写位置

可以在head和body中写<script>

还可以写在外部文件中（外部js文件中不能包含<script>），在文件中调用：

<script src="myScript.js"></script>

3.注释

4.显示数据

/*告诉浏览器在 id="demo" 的 HTML 元素中输出 "11"*/
document.getElementById("demo").innerHTML = 5 + 6;

document.write(5 + 6);/*仅用于测试的输出*/

window.alert(5 + 6);

console.log(5 + 6);

6.变量声明与赋值

7.数据类型

JavaScript 使用 Unicode 字符集

（1）number

（2）boolean

（3）undefined

声明变量，但没赋值

（4）string

通过json文件进行前后端的传递，用单引号/双引号都可以表示

（5）null

（6）强制类型转换

转化为number

转化为boolean

转化为string

parseInt和parseFloat分别转为整数和小数，比如下面的指令都可以在控制台输出123.45

8.运算符

（1）算数运算符

除数运算时，整数/整数可以得到小数

（2）自增自减运算符

（3）赋值运算符

（4）比较运算符

===值和类型都相等时才相等

（5）逻辑运算符

（6）三元运算符

（7）字符串连接运算符

当数字被引号包围起来时，被当作字符串

var x = "8" + 3 + 5; /*输出835*/

var x = 3 + 5 + "8";/*输出88*/

9.流程控制语句

do...while是无条件先执行一次

10.隐式转换

11.函数定义和复用

函数表达式

12.arguments对象

封装的是实参的数据，可以获取所有的实参数据，哪怕实参超过形参的数量

13.变量作用范围

（1）全局作用域

全局（在函数之外）声明的变量拥有全局作用域

全局变量可以在 JavaScript 程序中的任何位置访问

（2）函数作用域

局部（函数内）声明的变量拥有函数作用域

局部变量只能在它们被声明的函数内访问

（3）块作用域

在 ES2015 之前，通过 var 关键词声明的变量没没有作用域、代码块的概念

因此在块 {} （比如if语句）内声明的变量可以从块之外进行访问

可以通过let定义，解决这一问题

14.JS内置对象

（1）字符串对象

（2）数组对象

创建

length获取信息并且可以改变信息

访问数组元素

对数组元素进行操作

（3）math对象

（4）date对象

创建：月份从0开始定义

方法：

（5）正则对象

创建有两种方式：

定义了字符串的组成规则

（6）框对象

警告框

询问框

确认框

（7）定时器对象

循环定时：比如广告定时弹出一次

一定定时：比如在打开一个页面多久后，广告只弹出一次

15.自定义对象

通过new关键字创建对象

通过字面量创建对象

通过构造函数创建对象

三、DOM操作

可以动态的改变文档结构

1.Document对象

可以用来获取HTML元素，最常用 document.getElementById() 方法

script要放在内容之后

2.Element对象

获取元素的属性，从而进行增删改查操作 （需要先通过上一步获取元素）

3.标签体内容操作

更改内容：

document.getElementById("demo").innerHTML = "Hello JavaScript!";

更改样式：

document.getElementById("demo").style.fontSize = "25px";

更改属性：

document.getElementById("image").src = "picture.gif";

4.元素关系操作

获取父元素和子元素

5.插入节点

创建新的节点，插入到已有的节点中

还可以插入到已有节点的前面

6.删除节点

通过父删除子，有两种方式：

7.表单操作

通过DOM可以便捷地操作表单

四、事件

1.单击事件

2.焦点事件

3.改变事件

4.鼠标移入移出事件

下例动态地改变class的属性值

5.页面加载事件

定义在页面内容之前，可正常加载

6.表单事件

五、BOM操作

1.window对象

2.location对象

跳转到其他页面，还可以加定时器

3.history对象

六、ES6新增特性

1.let关键字

可以使用 let 关键词声明拥有块作用域的变量

在块 {} 内声明的变量无法从块外访问

通过 var 关键词定义的全局变量属于 window 对象：

通过 let 关键词定义的全局变量不属于 window 对象：

2.const关键字

定义的变量值不允许修改，定义的数组不允许修改整个数组/对象的引用，但可以修改数组元素/对象内容

const 变量必须在声明时赋值

3.箭头函数

允许我们编写更短的函数

如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字

hello = () => "Hello World!";

七、原型