【快速学习javascript基础】

第一章 JavaScript简介

1.1 javascript是什么？

javascript是一种运行在客户端页面，由浏览器解释执行的脚本语言。
了解点：
1.javascript是世界上最流行的语言之一，运行在客户端的脚本语言
2.解释型语言：运行过程中由js解释器(js引擎)逐行来解释并执行，跨平台
3.单线程：同时只能做一件事，js的引擎是单线程。同理同时能做多件事叫多线程

1.2javascript的三种用法

行内式

      //行内式
	<input type="button" value="点我呀！" onclick="alert('Hello World')" />

内嵌式

 <script>
 alert('Hello World!');
 </script>

外部JS文件

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

一般情况下后两种使用情况比较多

第二章 基础语法

2.1变量

变量：用于存放数据的容器。例如var name=“牛奶”;

数据类型：各种数据所需占用的储存空间不同，为了充分利用储存空间，定义了不同数据类型。

数据类型分类:
1.基本数据类型（值类型）

2.复制数据类型
Object类型，本质就是一组无序的键值对组成的。

2.2 标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，
JavaScript 语言的标识符对大小写敏感，所以‘a’和‘A’是两个不同的标识符。标识符
也有自己的一套命名规则。
规则如下：

• 第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
• 第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。

比如合法的标识符如下：

girl8
_tmp
$student
π

不符合规则的标识符如下

1a  // 第一个字符不能是数字
23  // 同上
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

JavaScript 有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

2.3注释

被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。
两种注释方法：

1. 单行注释，用//起头；

2. 多行注释，放在/※和※/之间。

//单行注释，适合文字或代码比较少的注释

/*多行注释，
适合多行的文字或代码*/

JavaScript 可以兼容 HTML 代码的注释，所以以下方法也适用

<!-- 也是适用于注释 -->

2.4运算符

常用的运算符有以下7种

注意点：容易出错的算数运算符“++”，“–”

举例：通常情况下有以下四种情况
i++; 等程序执行完自加1
++i; 在程序执行前自加1
i- -; 等程序执行完自减1
– --i; 在程序执行前自减1

2.5 if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真假，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示“真”，false表示“假”。
if语法

//if语句
if(判断条件)
{
	执行语句
}

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。
if……else……语法

//if……else……语句
if（判断语句）
{
	执行语句1
}
else
{
	执行语句2
}

2.6分支结构switch

多个if…else连在一起使用的时候，可以转为使用更方便的switch结构。

switch(变量)
{
	case 值1：
	         语句；
			 break；
	case 值2：
	         语句；
			 break；
	default:语句；
}

上面代码根据变量的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

2.7 三元运算符

三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。

//(条件) ? 表达式1 : 表达式2
var even = (n % 2 === 0) ? true : false;
//以上三元运算符等同于以下if判断
var even;
if (n % 2 === 0) {
  even = true;
} else {
  even = false;
}

2.5 for 循环

for (表达式1; 表达式2; 表达式3)
{
        语句;
}

例子

for(var i=0;i<9;i++)
{
 console.log(i);//i的值将打印9次
}

这里值得注意的点是，用以上例子，
条件1 ：var i=0是在for循环的表达式2运行前执行的，并只执行一次
条件2：只有值为真，才继续进行循环。
条件3：i++是在for循环执行完循环语句后执行的

2.6 while循环

while(条件)
{
 //执行条件
}

关于while循环，条件为布尔类型，当条件满足一直为true时，循环进行，条件为false循环停止

2.7do…while循环

do
{
  //执行代码
}
while(条件)

do…while和while循环的区别就是，无论条件是true还是false,都要先执行一次代码再判断while条件，满足条件继续循环，反之停止循环

2.8局部变量和全局变量的区别

局部变量：变量在函数内声明，只能在函数内部访问。
全局变量：变量在函数外定义，整个代码都可以调用的变量

var a=2;//全局变量
function ms(){
var b=3;//局部变量
//函数内部
console.log(a);//能访问
console.log(b);//能访问
}
//在函数外部
console.log(a);//能访问
console.log(b);//不能访问

第三章 javascript函数和对象

3.1函数

函数：是一段独立的代码块，可以实现功能；通过函数名调用才执行

function functionName(参数)//参数可以为空
{
  //执行的代码
  return 返回值;//有返回值的话加上返回值，没有可省略
}

注意点：
1.函数名区分大小写，不能使用关键字
2.函数中不能指定返回值类型
3.函数的参数列表不需要使用数据类型

3.2javascript对象

javascript对象分为自定义对象和内置对象

3.2.1自定义对象

所谓的自定义对象，就是把决定权完全交给你，你所创建的对象的属性和方法完全由你自己定义设定。

一、对象的介绍

对象：在javascript中，对象是一组无序的相关属性和方法的集合

打个比方，你有一个女朋友，她就是你的对象，她的名字，年龄，肤色都是她的属性。而她会叫你“宝宝”，她会陪你“打游戏”，她会陪你"吃饭"这就是她的方法

属性：事物的特征（常用名词）
方法：事物的行为（常用动词）

二、对象的三种创建方法

1、字面量创建对象

var star={name:"小谢",age:18,sex:'男',sayHello:function(){alert("你好呀！");}};

{}里包含对象的属性和方法：采用键值对的形式
键：属性名（name,age）
值：属性值（“小谢”,18）任意数据类型

2、利用内置构造函数Object()创建对象

//第一步
var obj1=new Object();//创建空对象
/*通过内置函数Object创建的对象，此时已经保存在了obj1变量中*/
//第二步
/*给对象添加属性和方法*/
obj1.name="小谢";
obj1.age=18;
obj1.sayHello=function(){
alert("你好哇！");
}

3、自定义构造函数创建对象
构造函数：一种特殊的函数，用来初始化对象(为对象属性赋值)

//构造函数的封装格式
function 构造函数名(形参1，形参2，形参3){
this.属性名1=参数1；
this.属性名2=参数2；
this.属性名3=参数3；
this.方法名=函数体;
}
//构造函数的调用
var obj=new 构造函数名(实参1，实参2，实参3);

实例

function Person(name1,age1,sex1){
  this.name=name1;//通过形参赋值给属性
  this.age=age1;
  this.sex=sex1;
  this.eat=function()//函数体给方法
  {
  console.log("我是一个饭搭子！");
  }
}
var p1=new Person("小儿",25,'男');//实例化调用构造函数
p1.eat();//调用构造方法
console.log(p1.name);//打印属性

因为构造函数的便捷性，被称为"生产函数的工厂"。

三、对象的使用

1.对象的遍历
使用for…in

//创建对象
var obj1={
name:"小谢师哥";
age:21;
sex:'男';
love:'女';
};
//打印对象的所有值（遍历）
//for……in：循环遍历数组和对象
for(var v in obj1)
{
console.log(v);//打印的是属性名 name  age sex love
console.log(obj1[v]);//可以打印对象中的属性值和方法
}

2.对象的删除
首先解释以下，我们这里说的对象的删除不是把整个对象删除，而是删除对象的属性 。
应用场景：当我们在开发中，不需要用到某个对象的某个属性的时候就可以选择删除对象的属性。
语法说明：delete.对象名.属性；

//创建一个对象
var obj2={
name:"gg爆",
sex:'雄',
age:"未知",
eat:function(){
console.log("爱吃超级棒棒糖！");}
};
//删除obj2对象的age属性
delete.obj2.age;
//删除obj2对象的eat方法
delete.obj2.eat;//在删除的时候不要"()"

3.2.2内置对象

内置对象就是指在javascript自带的一些对象，这些对象供开发者使用，并提供一些常用或基本的功能，帮助我们进行快速开发。

内置对象就是javascript提供的封装好不让你修改的对象，但是你可以直接使用

常用的内置对象有: Array、Math、Date、String、Number等

一、Array对象

1、创建数组对象实例的两种方式：

字面量方式

var arr=[1,"小谢",true];

构造函数Array()方式

var arr=new Array();//创建出一个空数组
arr[0]="大耳朵图图";//通过索引添加值，数组默认第一个索引为0
arr[1]="牛爷爷";
arr[2]="胡英俊";
arr[3]="图图妈";

常见的三种创建Array（）方式

//第一种情况，创建一个不含有元素的数组
var arr0=new Array();
//第二种情况，创建一个确定数量元素的数组
var arr1=new Array(5);//含有5个元素的数组
//第三种情况，创建不同类型的数组
var arr2=new Array(1,2,false,"你好");

2、对数组进行增删改查操作：
增加：push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = [];//一个空数组

arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]

unshift()方法用于在数组的第一个位置添加元素（一个或多个），并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

删除：pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']

shift()方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

修改：reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组

//splice的第一个参数是删除的起始位置（从0开始），
//第二个参数是被删除的元素个数。
//如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]

[11, 101].sort()
// [101, 11]

[10111, 1101, 111].sort()
// [10111, 1101, 111]

查询：join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

Array数组的方法很多，可以根据实际需求查询即可

3.遍历数组
方式一：for循环

var stus=["宋江","孙悟空","刘备","刘姥姥"];
for(var i=0;i<stus.length;i++)
{
  console.log(stus[i]);
}

方式二：for循环的另一种方式

var stus=["宋江","孙悟空","刘备","刘姥姥"];
for(var x in stus)
{
  console.log(stus[x]);
}

二、Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法。
跟数学相关的运算都可以使用Math中的成员。
常用的方法：
Math.abs方法返回参数值的绝对值。

Math.abs(1) // 1
Math.abs(-1) // 1

Math.max方法返回参数之中最大的那个值，Math.min返回最小的那个值。如果参数为空, Math.min返回Infinity, Math.max返回-Infinity。

Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1
Math.min() // Infinity
Math.max() // -Infinity

Math.round方法用于四舍五入。

Math.round(0.1) // 0
Math.round(0.5) // 1
Math.round(0.6) // 1

Math.sqrt方法返回参数值的平方根。如果参数是一个负值，则返回NaN。

Math.sqrt(4) // 2
Math.sqrt(-4) // NaN

在开发中，根据实际开发的需求区寻找相应的方法即可

三、Date对象

Date对象和Math对象不一样，Date是一个构造函数，使用时需要实例化后使用。Date实例用来处理时间和日期

//使用Date实例化日期对象
var now=new Date();
//获取指定时间的日期对象
var date=new Date("2023/6/2");

四、String对象

为了方便操作基本数据类型，javascript提供了三个特殊的内置对象：String、Number、Boolean。在下面数据转换的时候会详细了解到。
包装对象把简单数据类型包装成为像对象一样，可以调用属性和方法

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"
//变量s1是字符串，s2是对象。
//由于s2是字符串对象，
//s2.valueOf方法返回的就是它所对应的原始字符串。

charAt方法返回指定位置的字符，参数是从0开始编号的位置。

var s = new String('abc');

s.charAt(1) // "b"
s.charAt(s.length - 1) // "c"

更多方法，使用时查询

五、Nunber对象

创建Number对象的语法

var myNum=new Number(value);

Number对象的toString方法，用来将一个数值转为字符串形式

(10).toString() // "10"

3.2.3数据类型转换

在书写程序中，有时候数据的处理需要转换，在javascript中，有两种转换数据的方式：

• 强制转换
• 自动转换

一、强制转换

1.Number(）
使用Number函数，可以将任意类型的值转化成数值
值的转换规则如下：

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

对象的转换：Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组。
如下所示：

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

2.String()
String函数可以将任意类型的值转化成字符串
值类型的转换：

//数值：转为相应的字符串。
String(123) // "123"

//字符串：转换后还是原来的值。
String('abc') // "abc"

//布尔值：true转为字符串"true"，false转为字符串"false"。
String(true) // "true"

//undefined：转为字符串"undefined"。
String(undefined) // "undefined"

//null：转为字符串"null"。
String(null) // "null"

对象的转换：String方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。
如下所示：

String([1, 2, 3]) // "1,2,3"

3.Boolean()
函数可以将任意类型的值转为布尔值
转换规则如下：

除了以下五个值的转换结果为false，其他的值全部为true。除了它本身就是false
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

二、自动转换

遇到以下三种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。
第一种情况，不同类型的数据互相运算。

123 + 'abc' // "123abc"

第二种情况，对非布尔值类型的数据求布尔值。

if ('abc') {
  console.log('hello')
}  // "hello"

第三种情况，对非数值类型的值使用一元运算符（即+和-）。

+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN

由于自动转换具有不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用Boolean()、Number()和String()函数进行显式转换。

第四章 DOM模型

文档对象模型（Document Object Model,DOM）当浏览器解释执行HTML代码时，就把HTML文档转换为一个文档对象(DOM树)

4.1访问元素的3种方式

方法名	参数
doument.getElementsByTagName(“标签名”)	通过标签名找节点，返回一个数组
doument.getElementsByName(“name值”)	通过Name属性找节点，返回一个数组
doument.getElementsById()	通过id找节点，返回单个节点

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	//javascript代码
	<script>
   function f(){
	var a=document.getElementsByName("ss");//找到name为ss节点
	a[0].style.color="red";//给节点设置red红色
	var b=document.getElementsByTagName("li");//找到li标签
	b[1].style.fontWeight="bold";//字体设置为粗体
}
    </script>
	<body>
		<ul>
			<li name="ss">四川</li>
			<li >江苏</li>
			<li >江西</li>
			<li id="dd">山东</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.2 节点关系

节点之间都有层级关系
两种关系：1父子 2兄弟
父节点拥有子节点；同级节点被称为兄弟节点

获取父节点：parentNode属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	//javascript代码
	<script>
   function f(){
	//找到span节点
	var s=document.getElementById("sp1");
	//找到span节点的父节点（没找到的话就返回null）
	console.log(s.parentNode);//
	s.parentNode.style.backgroundColor="red";
}
    </script>
	<body>
		<div>
		   <span id="sp1">我是子元素</span>
		   <input type="button" value="点击" onclick="f()" />
        </div>
	</body>
</html>

获取子节点：children、childNodes属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function mm(){
	var ui=document.getElementsByTagName("ul")[0];
	//1.子节点childNodes，所有的字节点包含元素节点\文本节点
	console.log(ul.childNodes);
	//2.children获取所有的子元素节点，开发中常用
	console.log(ul.children);
  }
    </script>
	<body>
		<ul>
			<li >学生</li>
			<li >市长</li>
			<li >渔民</li>
			<li >农民</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

获取兄弟节点：children、childNodes属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){
	var pp1=document.getElementById("pro1");
	//1.nextSibling 下一个兄弟节点：包含元素节点、文本节点等
	console.log(pp1.nextSibling);
	console.log(pp1.previousSibling);
	//2.nextElementSibling 得到下一个兄弟节点元素
	console.log(pp1.nextElementSibling);
	console.log(pp1.previousElementSibling);//上一个兄弟节点
  }
    </script>
	<body>
		<ul>
			<li >学生</li>
			<li id="pro1">市长</li>
			<li >渔民</li>
			<li >农民</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.3操作DOM树的原理

当网页加载时，浏览器就会构建当前页面的文档对象模型(DOM树)
在DOM树中的每一个分支的终点称为一个节点，每一个节点都是一个对象，使用javascript操作DOM树上的节点，从而实现访问、修改、删除或添加网页上的内容。

4.3.1 添加元素

操作步骤：
第一步：创建元素
第二步：把新元素挂到DOM树上

创建元素：

doucument.createElement("标签名");

添加元素的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){

     //创建新节点并赋值
	var li1=document.createElement("li");
	li1.innerText="中国";
	
	//找到父节点
	var ul1=document.getElementById("uu");
	
	//添加元素的方式1
	ul1.appendChild(li1);//添加到末尾
	
	//添加元素的方法2
	//node.insertBefore(child,指定元素)；在指定元素前插入
	ul1.insertBefore(li1,ul1.children[1]);
	
  }
    </script>
	<body>
		<ul id="uu">
			<li >学生</li>
			<li >市长</li>
			<li >渔民</li>
			<li >农民</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.3.2 删除元素

操作步骤：
第一步：找到节点
第二步：删除节点

删除元素的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){
  
    //找到想要删除的节点
	var li1=document.getElementById("zz");
	
	//删除节点的方式一
	//找到父节点
	var ul1=document.getElementById("uu");
	ul1.removeChild(li1);
	
	//删除节点的方式二
	li1.remove();

  }
    </script>
	<body>
		<ul id="uu">
			<li >班主任</li>
			<li >校长</li>
			<li >语文老师</li>
			<li id="zz">作业</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.3.3 修改元素

声明：此处说的修改元素指的是修改元素的属性

修改属性的两种方式
1.对象名.属性=属性值
2.对象名.setAttribute(“属性值”，值);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){
  
    //找到想要修改的节点
	var li1=document.getElementById("zz");
	
	//修改节点的方式一
	li1.setAttribute("style","font-weight:bold;");
	
	//修改节点的方式二
	li1.textContent="无作业";
	li1.style.color="red";

  }
    </script>
	<body>
		<ul id="uu">
			<li >看电影</li>
			<li >听音乐</li>
			<li >打游戏</li>
			<li id="zz">假期作业</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.3.4 复制元素

复制元素这里会涉及到两个知识点
node.cloneNode(); 浅拷贝：只复制标签
node.cloneNode(true);深拷贝：复制标签和内容

操作步骤
第一步：找到父节点
第二步：找到节点、复制节点
第三步：把复制的节点挂到父节点下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){
  
	//找到父节点
	var ul1=document.getElementById("uu");
    //找到节点进行深克隆
	var li1=ul1.children[3].cloneNode(true);
    //把克隆的元素挂到父节点
	ul1.appendChild(li1);

  }
    </script>
	<body>
		<h1>你心目中最好看的女明星</h1>
		<ul id="uu">
			<li >赵丽颖</li>
			<li >杨颖</li>
			<li >范冰冰</li>
			<li id="zz">赵露思</li>
			<li>杨超越</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

4.3.4 替换元素

替换元素的语法
父元素.replaceChild(newnode,oldnode);

操作步骤：
第一步：找到旧元素
第二步：找到旧元素的父节点
第三步：创建新元素
第四步：新元素替代旧元素

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function f(){
    //找到旧元素
    var li1=document.getElementById("zz");
	
	//找到旧元素的父节点
	var ul1=document.getElementById("uu");
	
	//创建新元素
	var input1=document.createElement("input");
	
	//新元素替换旧元素
	ul1.replaceChild(input1,li1);

  }
    </script>
	<body>
		<ul id="uu">
			<li >技术部</li>
			<li >人事部</li>
			<li >市场部</li>
			<li id="zz">法务部</li>
			<li>后勤部</li>
		</ul>
		<input type="button" value="点击" onclick="f()" />
	</body>
</html>

第五章 BOM模型

BOM（Browser Object Model）即浏览器对象模型
BOM是由多个对象构成的一个树状模型，window对象是BOM的顶层对象，其他对象都是该对象的子对象。window对象代表浏览器窗口。

区别：BOM模型是文档对象模型，操作浏览器窗口
DOM是文档对象模型：操作网页

架构图如下：

实例图片说明

5.1Window对象

Window对象：全局对象，每打开一个浏览器窗口，在内存中就创建了一个Window对象。window对象代表一个独立的窗口

alert()、close()、confirm()、prompt()方法的使用示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
	function del_m(){
    if(confirm("确认删除吗？"))
	{
		alert("正在删除中……");
	}
	else
	{
		alert("不能删除");
	}

  }
  function in_name(){
	  var res=prompt("请输入年龄","18");
	  alert("输入的年龄是："+res);
  }
    </script>
	<body>
		<input type="button" value="欢迎信息" onclick="alert('欢迎您');" />
		<input type="button" value="关闭页面" onclick="window.close()" />
		<input type="button" value="删除" onclick=del_m() />
		<input type="button" value="输入年龄" onclick=in_name() />
	</body>
</html>

定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

定时器的使用：

/*setTimeout的使用方法*/
var timerId = setTimeout(执行代码/函数, 推迟时间(毫秒));
//第二个参数如果省略，则默认为0。


/*setTimeout的使用方法*/
var timerId= setInterval(执行代码/函数, 推迟时间(毫秒));
//setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。比如，

取消定时器
clearTimeout()和clearInterval()函数

var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);

clearTimeout(id1);
clearInterval(id2);

5.2Document对象

当HTML载入进浏览器的时候，就成为了Document对象，负责操作网页。
Document对象的常用方法如下

5.3Location对象

Location对象：负责操作浏览器的地址栏。
Location.href=“地址链接”：转换至链接页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
    function f(){
		location.href="https://www.douyin.com/";
	}
    </script>
	<body>

		<input type="button" value="点击看抖音" onclick=f() />
	</body>
</html>

5.4History对象

包含了用户在浏览器中访问过的历史记录
History对象的常用方法

名称	说明
back()	相当于后退
forward()	相当于前进按钮
go(“url” or 数字)	go(2)前进2页，go(-2)后退两页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
    function f1(){
		
		/* 后退使用 */
		history.back();
		//等同于history.go(-1);
	}
	function f2(){
		
		/* 前进使用 */
		history.forward();
		//等同于history.go(1);
	}
    </script>
	<body>

		<input type="button" value="后退" onclick=f1() />
		<input type="button" value="后退" onclick=f2() />
	</body>
</html>

第六章 事件

6.1理解事件

事件：是可以被侦测到的行为，触发— 响应机制；
如果点击按钮，就会除法onclick事件，某函数会自动调用(对事件作出响应)

事件三要素
1.事件源：触发事件的元素
2.事件名（类型）：如click事件
3.事件处理程序：事件触发后要执行的代码（函数）

6.2注册事件

注册事件有两种方式：
一、传统注册：利用on开的事件，如onclick

<button onclick = “alert(‘123’)”></button>

btn.onclick = function(){}

二、方法监听注册：eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

eventTarget.addEventListener(type,listener[,useCapture])
/*三个参数：

type：事件类型字符串，比如 click、mouseover。这里不需要加on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认是false。*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>

		<input type="button" value="按钮1"  />
		<input type="button" value="按钮2"  />
	</body>
	<script>
	var btn=document.querySelectorAll("input");
	
	btn[0].onclick=function(){alert("点了一次按钮1");}
	btn[0].onclick=function(){alert("点了两次按钮1");}
	
	btn[1].addEventListener("click",function(){alert("按钮2点了一次");});
	btn[1].addEventListener("click",function(){alert("按钮2点了两次");});
	</script>
</html>

两者的区别：传统的注册事件（onclick）在多个动作执行时，只会执行最后一个。而监听注册事件会依次执行一遍。

传统的js事件如下所示：

最后，希望本篇文章对您有所帮助！