29-js

哥，你好猛

于 2021-09-02 09:58:20 发布

阅读量332

点赞数

分类专栏：前端三件套+jQuery 文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/wy1511861159/article/details/120054681

版权

前端三件套+jQuery 专栏收录该内容

10 篇文章

订阅专栏

JS—Day01

第0节：JS简介

编译语言：在运行之前会源代码进行编译。

为什么需要编译：我们写的代码通过高级语言写（C++，java）面向用户友好。但是计算机只认识0或1，所有我们需要将写好的源代码便以为机器码。编译往往通过编译器（翻译的作用），每一门高级语言都会有自带的编译器（软件）。

解释型语言：边解释边运行。（解释这个动作：本质上也是将源码解释成机器码），我们任何一门解释型语言都需要有一个解释器（软件–翻译）。常见的解释器：java—JVM

0.1、JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中

发展历史：

1、由网景公司的布兰登.艾奇发明，最初叫liveScript

2、由于网景当时和sun公司有合作，希望liveScript借着Java能够快速发展，所有更名叫JavaScript

3、JavaScript的语法标准是有ECMA协会指定，称为ECMAScript

4、目前最新的语法标准ES6 ，但是目前所有浏览器支持的版本是ES5

0.2、为什么浏览器可以执行JavaScript

https://blog.youkuaiyun.com/u014744118/article/details/80698602

0.3、环境的搭建

运行环境：谷歌浏览器

开发环境：HBuilder ,IDEA, webStrom…

第一节：HTML页面中使用JS的三种方式

1、内嵌方式–在标签上直接写JS的代码
问题：与HTML标签强耦合，不便于代码的复用及维护（不推荐）
2、内部JS代码–在head或者body标签通过script标签声明JS代码的编写域
问题：只能在当前页面使用，在其他是不能复用。
3、外部引入–在head标签或body标签中通过script标签进行引入

注意点：
1、script标签可以放在head也可以放在body
关于放在head还是body的选择–建议是放body最后
为什么：浏览器解析HTML文件是从上往下去解析，很多时候我们会对页面元素进行操作
（如：添加一个事件动态渲染页面），如果将JS放在head标签中，解析到JS代码的时候
HTML元素还没有加载进浏览器，就会报错。所有我们建议将JS代码放在body结束标签前面
2、引入script标签和编写JS代码的script标签不能共用
3、每一句JS代码都已;结束，虽然不写JS代码也可以正常的执行，是因为浏览器会默认帮我们加上
分号。（会带来效率问题）
4、JS语言是一门大小写敏感的语言如：alert 和ALERT 是完全不一样
5、JS中注释的写法/注释内容/ 多行注释 //单行注释

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<!--	<script type="text/javascript">
			alert("hello JavaScript");
		</script>-->
		
		
		
	</head>
	<body>
		<!--<button οnclick="alert('hello JavaScript')">点我一下</button>-->
	
	<script type="text/javascript" src="js/demo01.js" ></script>
	<script type="text/javascript">
		/*
		 * 我是注释
		 * 我是注释
		 */
		Alert("aaaa");//我是单行注释
	</script>
	</body>
</html>

第二节、JS中的数据输出方式

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1、alert() 弹出一个弹出框，内容直接通过括号中传参数
			  问题：1、数据弹出后点确定就消失
			      2、会影响项目调试
			2、console输出 然后在浏览器的Console页面进行调试
		-->
		<script type="text/javascript">
			/*alert("aaa");
			alert("bbb");*/
		/*	console.log("aa");
			console.warn("bb");
			console.error("cc");*/
			
			/*输入框*/
			/*var test =  prompt("请输入");
			alert(test);*/
			
			/*确认框*/
			confirm("你确定吗？");
		</script>
	</head>
	<body>
		<button></button>
		
		<script>
			//对button操作
		</script>
	</body>
</html>

第三节：关于JS代码放置位置的说明

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				
<!--		<script type="text/javascript">
			var a =  document.getElementsByTagName("span")[0].innerText;//获取p标签中的文本，将			文本赋值给text变量
			//Uncaught TypeError: Cannot read property 'innerText' of undefined
			//报错内容：不能读取一个未定义的元素的innerText属性
			//报错的原因：浏览器从上往下解析代码，解析到这个地方的时候，span元素没有加载进			      来
			//元素找不到。
			alert(a);//输出text值
		</script>-->
	</head>
	<body>
		<span>hello JS</span>
			<script type="text/javascript">
			var a =  document.getElementsByTagName("span")[0].innerText;//获取p标签中的文本，将文本赋值给text变量
			alert(a);//输出text值  
			//此处弹出hello JS
			//浏览器从上往下加载，解析到此处的时候元素已经加载进来，所以不会报错。
			//因此我们建议大家将JS代码放在body结束的前面
		</script>
	</body>
</html>

第四节：JS中常量

常量：
什么是常量：一旦赋予值则不能再被改变

字面常量：
整型常量：代码中写的任意一个整数就是整型常量
实型常量：代码中写的任意一个小数
字符串常量：代码中通过单引号或双引号引用的就是字符串常量
布尔常量: 只有2个值，true或者false

自定义常量（ES6的新特性）
基本的语法：const 常量名 = 值

<script type="text/javascript">
    //自定义常量
    const NUM = 123;

//修改常量的值
NUM = 456; // Assignment to constant variable.
//常量的值一经赋值则不能再被修改
console.log(NUM)
</script>

第五节：JS中变量

5.1、变量的基本应用

变量：
什么是变量
1、变量就是一个可以被修改的数据
现实生活中，蜂巢柜就是一个典型的变量，今天是放的你的快递，你把快递取出来后
明天放的别人的快递。
本质：里面的东西（内容）是可以发生变化的

怎么定义变量
1、基本的语法：
var 变量名;
注意：这个地方跟java不一样，原因是JS我们称为弱类型的语言，在定义的时候不需要
指定数据类型。（这里不指定数据类型，不意味着JS没有数据类型）
怎么使用变量
1、往变量中存值
变量名 = 字面量
2、将变量中的值取出来
直接通过变量名

<script type="text/javascript">
    //定义一个变量
    var num;//修建一个快递柜,同时为快递柜取名num
    //往变量中存值
    num = 5;//往快递柜中放快递
    //取出变量中值
    console.log(num);//取快递
</script>

<script type="text/javascript">
    var num;//修建一个快递柜,同时为快递柜取名num
//往变量中存值
num = 5;//往快递柜中放快递
//取出变量中值
console.log(num);//取快递

//1.如何修改变量中的值
num = 6;
console.log(num);

//2.初始化：第一次给变量赋值
var num2;
num2 = 7;//num2的初始化
num2 = 8;//不是num2的初始化

//3.如果我没有对某一边初始化直接使用
//输出undefined 这个值
var num3;//定义变量
console.log(num3);

//4.变量定义的其他方式
//4.1、在定义时就初始化
var num5 = 5;
//4.2、一次定义多个变量，每个变量之间用,隔开
var num6,num7,num8;//同时定义了3个变量
//4.3、定义个多个变量并赋予初始值
var num9=10,num10=11;
console.log(num9);
console.log(num10);
</script>

5.2、ES5中变量的特殊使用

ES5中变量的特殊使用方式：
1、可以先使用再定义输出值为undefined
为什么：浏览有一个预解析过程
什么叫预解析：在代码执行之前会将所有的变量的定义，方法的定义提至代码最前面

2、可以多次定义重名的变量，后定义的变量会将前面的变量覆盖掉。

<script type="text/javascript">
    /*	console.log(num);
       var num = 5;*/
    //等价于
    /*	var num;
console.log(num);//此时num是只定义没有赋初值，则会输出undefined
num = 5;*/
    var num = 5;
    console.log(num);
    var num = 6;
    console.log(num);
</script>

5.3、ES6中变量的使用

ES6定义变量
1.怎么定义
let 变量名
2.赋初值
变量名 = 值
3.取值
变量名

<script type="text/javascript">
    //通过ES6的语法标准定义变量
    let num = 5;
    console.log(num);
    num = 6;
    console.log(num);

    /*	//ES6中不支持先使用再定义
			console.log(num2); // Cannot access 'num2' before initialization
			let num2 =5;*/

    //E6中不支持重复定义重名的变量
    let num = 7;
    console.log(num);//Identifier 'num' has already been declared
</script>

第六节、JS中数据类型及转换

6.1、常见数据类型

数据类型分类
1、基本数据类型
number:在代码中任意一个整数或者小数就是number数据类型
string:在代码中任意一个字符串就是string类型
boolean:只有2个值：true或者false
undefined：只有1个值undefined

2、引用数据类型 object ->对象 object，方法 function，数组 Array null

3、typeof操作符
作用：就是查看某个变量的数据类型

4、JS中不同数据类型之间比较的问题
== 是比较他们的值（值相当）
=== 既比较值又比较类型（严格相等）

<script type="text/javascript">

    //定义一个变量
    /*	var num = "123";
			console.log(typeof num);


			var num2;
			console.log(num2);
			console.log(typeof num2);
			console.log("-----------------------")
			var num3 = null;
			console.log(num3);
			console.log(typeof num3);*/

    //注意：什么是不给他赋值，什么是时候赋null
    //如果你希望该变量以后用于存储对象的时候，该变量赋为null
    //如果你希望该变量以后用于存储基本数据类型的时候就不赋予初值。

    var num1 = "1";
    var num2 = 1;
    console.log(num1===num2);
</script>

6.2、数据类型转为字符串-自动转

string和基本数据类型之间的转换
1.自动转换
不同数据类型之间进行运算的时候会发生类型的转换

<script type="text/javascript">
    var num = 5;
    var str = "aa";

    console.log(num+str);//5aa--直接拼接字符串

    var str2 = 'a';
    console.log(num+str2);//5a -- JS中不管是单引号还是双引号都是字符串

    var bol1 = false;
    console.log(num+bol1);//5 

    console.log("==================")
    console.log(str2+bol1);//afalse 直接进行字符串拼接
    //总结：在JS中只要有字符串的+ 就直接进行字符串的拼接

    console.log(num+bol1+str2);
</script>

6.3、基本数据类型转为字符串-代码转

将基本数据类型转为string
方式一、对于Number,Boolean
调用toString方法

方式二、String(目标数)

方式三、new String(目标数).toString()

方式四、目标数+""

<script type="text/javascript">
    /*	var num = 5;
			console.log(typeof num);
			var num2 =  num.toString();
			console.log(typeof num2);

			var num3 = false;
			console.log(typeof num3.toString());*/
    /*var num5;
			console.log(typeof num5.toString());//Uncaught TypeError: Cannot read property 'toString' of undefined*/

    //基本数据类型转字符串
    /*var num6 =  String(true);
			console.log(num6);
			console.log(typeof String(true));*/
    /*var num6 =  String(undefined);
			console.log(num6);
			console.log(typeof num6);*/

    // 方式三、new String(目标数).toString()

    var num = new String(null).toString();
    console.log(num);
    console.log(typeof num);

</script>

6.4、字符串转数字

方式1.praseInt(目标字符串)–字符串转为整数
规则：从字符串的第一个字符开始扫描，碰到第一个非数字的时候就
停止扫描。被扫描的就是转出来的数值。
NAN：not a number 非数值–不能转为一个整数

方式2.praseFloat(目标字符串)
规则：从字符串的第一个字符开始扫描，碰到第一个非数值字符就停止扫描
但是会扫描进去至多一个小数点

方式3.Number(目标字符串)
规则：严格转数字如果是空字符串-0
ture-1
false-0
数值–对应的数字
字符串中包含非数字–NAN

3.JS中的浮点数底层采用2进制科学计数法，他是不精确的。
所以在精确运算的时候不建议直接运算。
解决方案：引入第三方库文件

number.toFixed(精确位数)
用于保留指定位数的小数，会发生四舍五入的方式。如果小数点位数
不够则通过0填充

<script type="text/javascript">
    var str = "12";
    /*	console.log(typeof str);
			//将Str转为整数
			console.log(typeof parseInt(str));
			console.log(parseInt(str));*/
    //转换规则
    console.log(parseInt("12.1"));//12
    console.log(parseInt(""));//NAN
    console.log(parseInt("12a1"));//12
    console.log(parseInt("12.6"));//12
    console.log(parseInt("a12"));//NAN

    console.log("======================")

    var str2 = "12.1";
    console.log(typeof parseFloat(str2));//number
    console.log(parseFloat(str2));//12.1

    console.log("==============================")
    console.log(parseFloat("12.1"));//12.1
    console.log(parseFloat("1a2.1"));//1
    console.log(parseFloat("12.1a1"));//12.1
    console.log(parseFloat("12a"));//12
    console.log(parseFloat("a12.1"));//NAN
    console.log(parseFloat(".12"));//0.12
    console.log(parseFloat("12.1.1"));//12.1
    console.log("=============================")
    console.log(0.1+0.2);//0.30000000000000004
    console.log("=============================");
    var str3 = "-12.5"; 
    var num =   Number(str3);
    console.log(typeof num);
    console.log(num.toFixed(0));//13  
    console.log(num.toFixed(2));
    console.log("================");
    console.log(Number(true));//1
    console.log(Number(""));//0
    console.log(Number("a"));//NaN
    console.log(Number("12a"));//NaN
</script>

第七节、运算符

运算符：
1、算数运算符 + - * / %
2、赋值运算符 =
3、复合赋值运算符 += *= /= -= %= 如:a +=b ==>a = a+b
4、比较运算符 > < >= <= != == ===(全等)
5、逻辑运算符 && || !
注意：除了全等都跟JAVA中运算一致

第八节、分支与循环

1、分支
单分支
if(布尔类型表达式){
//如果计算结果为真，则执行
}
双分支
if(布尔类型表达式){
//结果为真则执行
}else{
//结果为假则执行
}
多分支
if()else if()else.....

switch(值)
case:值1
语句...
break;
case：值2
....
default:
语句...

注意：此处执行的规则是按照switch后num进行严格匹配（全等 ===）

2、循环

1、for2、while3、do while
规则：跟JAVA中一样

3、break:结束整个循环
continue：结束当次循环，开始下一次循环
return:1.结束方法 2.返回值

第九节、关键字与保留字

保留字：
什么是关键字：有特殊含义的一些单词
什么是保留字：没有特殊含义，但是也被保留下来了。在给其他变量，方法取名的不能使用

标识符：给变量，方法（类，接口…）取名的
规则： 1、数字，美元符，下划线的任意组合
2、不能以数字开头
3、不能是关键字及保留字

规范： 1、见名知意
2、如果是多个单词则采用驼峰命名第二个单词首字母大写

第十节、数组

数组
1.什么是数组
用于存储一组（多个）数据

定义数组
方式一：var 数组名 = [元素1,元素2…]
方式二: var 数组名 = new Array(元素1,元素2…);
方式三：var 数组名 = new Array(size);

3.访问数组通过下标进行访问
语法：数组名[下标]

4.获取数组长度通过length属性进行获取

特殊用法：
1、JS中数组可以越界
2、JS中数组下标可以是非数值，存储时可以理解为是一个K-V键值对
其中下标是K 存的值为V
3、如果定义一个数组没有赋初值，其中每个元素的值是undefined

<script type="text/javascript">
			//定义数组 方式一
			var arr = [1,2,3];
	/*		console.log(arr);
			//定义数组 方式二
			var arr2 = new Array(1,2,3);
			console.log(arr2);
			//定义数组 方式三
			var arr3 = new Array(7);
			console.log(arr3);*/
			console.log(arr[1]);
			console.log(arr[5]);//undefined 可以越界
			
			arr["test"] = "hello";
			
			console.log(arr["test"]);
			
			var arr3 = new Array(7);
			console.log(arr3[0]);
			arr3[9] = 10;
			console.log(arr3.length);//10
		</script>

10.2、数组的遍历

1、普通for循环--下标从0开始，通过下标进行访问数组名[下标]
2、for in的方式遍历出数组的下标，解决第一个种方式不能遍历
非数值下标的情况
``基本语法：for(var 下标 in 数组名){下标}3.forEeach(function(element,index){`

});
其中element–元素值
index–元素对应的下标

<script type="text/javascript">
    var arr = [1,2,3,4];
    arr["test"] = "hello";
    arr[6] = 5;
    /*console.log(arr);*/

    /*//普通for循环遍历
			for(var i = 0;i<arr.length;i++){
				console.log(arr[i]);
			}*/
    for(var item in arr){
        console.log(arr[item]);
    }

    /*	arr.forEach(function(a,b){
				console.log(a);
				console.log(b);
			});*/
</script>

10.3、数组中常用的方法

1.push 在数组的尾端追加元素
2.unshift在数组的头部追加元素
3.pop 删除最后一个元素
4.shift 删除数组第一个元素
5.reverse 数组的反转
6.splice(从哪切，切几个) 数组的切片
7.join() 将数组中元素通过逗号连接返回一个字符串

8.indexOf() 找对应元素的下，如果没有找到则返回-1

第十一节、JS中方法–本质是一个object

11.1、方法的定义

什么是方法（函数）：一个功能集合==包含实现该功能需要的操作及变量。

JS中怎么定义方法：

1.声明式–通过function关键字进行声明

function funName(arg1,arg2…){

//方法的实现

}

function add(a,b){
    var sum = a+b;
    return sum;
}

说明：

1、参数列表中每一个参数前不需要写数据类型，因为JS是一门弱类型的语言（值的类型在赋值的时候确定，声明时只需要用var），由于JS中声明变量都是通过var关键字，此处可以省略。

2、返回也没用声明类型（原因跟参数是一样的）。

3、通过return关键字进行数据的返回。

2.变量形式

var 变量名 = function(agr1…){

//写方法体

}

var jian = function(a,b){
    var num = a-b;
    return num;
}

说明：此处变量名其实就是方法名

3.函数式

var 变量名 = new Function(可以变参数)；

说明：

1、变量名就是函数名

2、关于参数说明：最后一个参数是方法体，前面的参数是形参别表

var cheng = new Function("a","b","return a*b");
console.log(cheng(3,4));//12

说明：a 表示第一个形参，b表示第二个形参

return a*b是方法体。

11.2、方法的调用

通过方法名（形参列表）进行调用。

1.方法调用时可以不用严格匹配参数列表，如果对应位没有传值的则默认为undefined。

function add(a,b){
    alert("方法被调用了")
    console.log(a);//1
    console.log(b);//undefined
    return a+b;
}

//方法的调用
console.log(add(1));

11.2JS中方法调用传参分类

1.值传递

传递一个值的拷贝，函数中对值的操作不会影响原来的变量的数值。

function add(a,b){
    alert("方法被调用了")

    a = a+1;
    console.log(a);//11
    return a+b;
}

//方法的调用
var a = 10;
console.log(add(a));
console.log(a);//10

2.引用传递

传递一个地址，函数中对地址的操作会影响原来变量的对象。

function testArr(arr){
    arr[0] = 5;
}

var arr = [1,2,3];
testArr(arr);
console.log(arr);

11.3、JS中变量作用域问题

JS中变量作用域只在方法中生效

function test(){
    var num2 = 10;//此处num2为局别变量
    //num2 = 10;此处是在对num2赋值，浏览器在预解析时，
    //需要对num2赋值，但是此处没有定义变量，所有在程序前面定义
    //num2
}

11.4、JS中闭包

什么是闭包：

简单理解就是在方法中再定义方法，子方法可以操作父方法的变量。父方法返回子方法对象

闭包的好处：

1、我们可以读取方法中的内部变量

2、可以让方法的变量一直存在于内存中

闭包的问题：

1、内存的消耗问题

3、案例：

function addSum(){
    var sum = 0;//父方法中的变量的生命周期会跟页面一致
    //闭包的问题：资源占用问题
    function opSum(){
        sum++;
        alert(sum);
    }
    return opSum;
}

第十二节、JS中对象

面向对象也是JavaScript语言的核心概念，也是一个很重要的数据类型。

什么是对象？

简单说，JS中对象就是一组键值对的集合。

定义语法：

var 变量 = {键：值，键2：值2}

var student = {name:'李强',age:12,sex:"男"};

上述代码中：我们通过{}中放键值对，创建一个对象。将此对象地址赋予了student变量

对象当中有2个键值对，其中第一个键为name,值为李强；第二个键age，值12…

1、键名：键其实是字符串，只不过默认都是字符串，所以可以不写引号

2、关于JS中对象可以放的数据类型，可以放任意的基本数据类型，Object(对象，Array，function，null)

2、使用对象：

对象名.方法（属性）—>键去取值

console.log(student3.name);
student3.test();
student3.teacher.name;

3、往对象中加入新的键值对

对象名.键 = 值

对象名[键] = 值

student3.hello = "hello";
student3["hello02"] = "hello02";

4、修改键值对

student3.name = "张强";

JSON与JS对象

什么是JSON：
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
简单理解：JSON其实就是JS对象的字符串的表达形式
JSON：用于数据传递
WEB开发中：前后端数据传递
分布式系统，服务与服务之间数据的传递
为什么选JSON:和语言系统都无关，本质只是一个文本，文本的传递
与语言，操作系统，网络协议都无关只与编码格式有关系。只要双方保持
统一的编码与解码，则数据就可以正常传递。

                                  JS对象转为JSON字符串--JS对象序列化：
			 JSON.Stringify();
			 
			 JSON字符串转JS对象--JSON的反序列化
			 JSON.parse();
		-->
	</head>
	<body>
		<script type="text/javascript">
			var obj1 = {'name':'李强','sex':'男'};//JS对象
			var obj2 = '{"name":"李强","sex":"男"}';//JSON字符串
			//{"name":"李强","sex":"男"}
			console.log(obj1);
			console.log(JSON.stringify(obj1));
			console.log(obj2);
			var obj3 = JSON.parse(obj2);
			console.log(obj3);
		</script>

第十三节、JS中常见的内置对象及方法

13.1、String对象–字符串对象

charAt(index) 通过下标找对应位的字符

indexof(string) 找字符串第一出现的位置

subStr(m,n)截取子串 m开始位置，n表示长度

var str = "abcdsadewrew";
console.log(str.substr(2,2));//cd

substring(m,n) m截取的起始位置，n表示结束位置

13.2、Math相关的

Math.random()–生成0-1随机数

Math.floor()–向下取整

Math.ceil(-12.9)–向上取整

13.3、日期相关

var date =  new Date();//封装系统当前的时间
console.log(date);
console.log(date.getYear());
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());//获取当前时间的字符串表示形式

BOM操作

BOM Browser Object Model 浏览器对象模型。JS将浏览器看成一个对象，封装了一些方法实现了对浏览器的操作。BOM操作的最顶层对象叫做window对象，window代表整个浏览器窗口

1.1、浏览器的弹框操作

alert(“需要弹出的内容”)；弹出提示框

promt(“提示信息”)；弹出输入框

comfirm();弹出确认框

alert("hello");

promt(“提示信息”)；弹出输入框

该方法有一个返回值，返回的就是用户输入的内容

var str =  prompt("请输入");
alert(str);

comfirm();弹出确认框

该方法有一个返回值，返回值表示用户是选择确认还是取消

返回值：true–确认

false–取消

var str =  confirm("请确认！");
alert(str);

注意：以上我都没有写对象名，是直接调用方法。是因为JS操作页面有一个最顶层window的对象，所有操作浏览器页面的动作都封装window或者window的子对象中。所以我们直接调用window对象方法的时候可以省略window。

1.2、浏览器打开或者关闭窗口

window.open() 可以打开一个指定的窗口，也可以打开空的窗口

window.close() 关闭指定窗口

1、window.open()

我们可以传递一个指定URL路径，如果没有传则打开一个空窗口。

我们指定打开窗口的位置 _self (本窗口开新窗口) _blank(默认新窗口中窗口)

//window.open("http://www.baidu.com");
//window.open();

open("http://www.baidu.com","_self");

2、window.close() 关闭自身窗口

window.close();

1.3、History对象

history对象表示浏览器历史访问记录相关的操作，history对象是window对象的子对象。

length 浏览器历史地址个数

forword 向前

back 回退

go(index|url) 跳转到指定页面

forword()在时间轴浏览记录中前进1个页面–类似于浏览器的向前进的箭头按钮

back() 在时间轴浏览记录中后退1个页面–类似于浏览器的回退按钮

go() 参数：正数–页面时间轴浏览记录前进指定个数

负数-- 页面时间轴浏览记录后退指定个数

0 – 跳转本页面，重新加载本页面

go(1)===>forword()

go(-1)===>back()

function testHistory(){
    console.log(history.length)
}

function testBack(){
    //history.back();
    history.go(2);
}

1.4、location对象

location对象也是window对象的子对象，提供了关于地址栏信息相关的一些操作

href 属性–表示当前浏览地址栏中信息

replace 替换地址栏中地址

reload 重新加载地址栏中地址

function testLoaction(){
    //console.log(window.location.href);	//href--表示浏览器地址栏中信息
    //location.href = "33-3-BOM关于历史记录操作.html";
    location.reload();//重新加载本页面
    location.replace("http://www.baidu.com");
}

超时调用和延时调用

让程序在指定的时间后去执行某个任务。

var id = setTimeout(function,time)

作用：在指定的时间后将function加入到调用队列中,但是并不是马上会执行

补充：栈：先进后出压栈弹栈 Stack

队列：先进先出 Queue

<script type="text/javascript">
    var id ;
function start(){
    //1.获取当前时间
    var date = new Date();
    //2.转为字符串
    var str = date.toLocaleString();
    //3.显示
    document.getElementsByTagName("p")[0].innerHTML = str;
    //4.设置超时调用
    id = setTimeout(start,1000);//2个参数  1.每个指定时间需要执行的函数对象 2.时间间隔
    //清除超时调用   setTimeOut会返回一个该超时调用的唯一标识,我们可以通过clearTimeOut(唯一标识)
}

function stop(){
    clearTimeout(id);
}
</script>

延时函数

setInterval(function ,time)

作用：在指定的时间后将函数加入到调用队列中

<script type="text/javascript">

    function start(){
    //1.获取当前时间
    var date = new Date();
    //2.转为字符串
    var str = date.toLocaleString();
    //3.显示
    document.getElementsByTagName("p")[0].innerHTML = str;
    //4.设置超时调用
}
var id = setInterval(start,1000);//设置延时函数，返回一个唯一标识
//后续根据该id将次延时函数清掉

function stop(){
    clearInterval(id);
}
</script>

Day04

第一节：事件

什么是事件：发生在HTML元素上的一些动作（点击某个元素，鼠标移出某个元素，键盘下压动作。我们通过JS来处理事件（一旦触发某个事件后就做出相应的反馈）。

事件源：触发事件的源头（车）— HTML页面上的元素

监听器：一直监视着事件源，如果一旦触发则调用事件的处理（路上摄像–一旦被摄像头捕捉到违章为调用处理）。-- 对元素绑定事件

事件的处理：一旦触发了某个事件就做出相应的动作。-- JS的方法

网页开发中事件：

事件源：HTML代码

监听器：HTML代码绑定一个事件（绑定监听器）

事件的处理：JS的方法

元素绑定事件的方式：

常用的事件：

click 鼠标单击事件

dbclick 鼠标双击事件

blur 元素失去焦点事件

foucs 元素获取焦点事件

change 元素内容发生变化

mouseover 鼠标悬停

…

事件的绑定

方式一：直接在HTML元素上通过一个属性（on+事件名） = “对事件处理”

<button ondblclick="alert('我被点了2次')">点击事件2</button>

注意：上述这种写法是JS代码与元素之间是强耦合的，我们可以将JS代码抽出来封装成一个方法，可以直接调用方法

<button ondblclick="testClick()">点击事件2</button>

方法二：通过DOM元素绑定

DOM元素.on事件名 = 函数对象（可以是匿名函数，写好的函数对象）

document.getElementsByTagName("button")[0].onm9.ouseenter = testMouseIn;
document.getElementsByTagName("button")[0].onmouseout = testClick;

document.getElementsByTagName(“button”)[0]通过元素名获取页面所有该元素名的元素，通过数组下标进行方法操作。

方式三：通过addEventListener绑定

DOM元素.addEventListener(“事件名”，函数对象) （可以是匿名函数，可以是写好的函数对象）

document.getElementsByTagName("button")[0].addEventListener("mouseout",testClick);
document.getElementsByTagName("button")[0].addEventListener("mouseenter",testMouseIn);

注意：三种方式都可以采用形同写法对一个元素绑定多个事件。

事件的移除·

语法：DOM元素.removeEventLisener（“事件名”，函数对象）

document.getElementsByTagName("button")[0].removeEventListener("click",testCilck);

上述代码的含义：移除了指定DOM元素的click事件及testClick函数对象（通过事件名和函数对象名去匹配）

document.getElementsByTagName("button")[0].addEventListener("click",testCilck);
document.getElementsByTagName("button")[0].addEventListener("click",testCilck2);
document.getElementsByTagName("button")[0].removeEventListener("click",testCilck);

上述操作：只移除了addEventListener(“click”,testCilck);

注意：通过removeEventListener移除只能移除通过addEventListener添加事件。

<button onclick="testCilck()">事件移除</button>
document.getElementsByTagName("button")[0].removeEventListener("click",testCilck);

上述代码执行后onclick事件还在。

一些常用的事件及应用场景

点击类

单击事件 click

双击事件 dbclick

应用场景：按钮，a标签

<button onclick="testClick()">点击事件</button>	

<a href="javascript:void(0)" onclick="testClick()">点击事件</a>
<!--a标签默认是跳转页面
我们可以通过href的值为 javascript:void(0)//消除跳转
    -->
    <script type="text/javascript">
        function testClick(){
        alert("hello");
    }
</script>

注意：我们在A标签上绑定事件，如果希望A标签不做页面跳转，而是执行绑定的行函数，需要通过javaScript:void（0）赋给A标签的herf属性。

焦点事件：

blur失去焦点

focus 获得焦点

应用场景：输入框

<input type="text"  onblur="testBlur()" />
    <script type="text/javascript">
        function testFocus(){
        alert("焦点获得了");
    }
function testBlur(){
    alert("焦点失去");
}
</script>

change事件

作用：元素的内容发生改变时执行

change

应用场景:下拉框

请选择省份：
    <select name="city" onchange="testChange()">
        <option value="1">四川</option>
<option value="2">重慶</option>
<option value="3">武汉</option>
</select>

<script type="text/javascript">
    function  testChange(){
    alert("下拉框被改变了")
}
</script>

预加载事件

onload事件

作用：等待页面加载完成后再去执行

使用场景：需要加载完页面后再执行JS

<script type="text/javascript">

    /*console.log(document.getElementsByTagName("p")[0]);//undifined
			//原因：浏览器解析代码实从上往下执行解析，执行到第7行的时候，后面的元素还没有
			//加载进来。所有这里就找不到对应的元素，打印undifined*/
    window.onload = function(){
    console.log(document.getElementsByTagName("p")[0]);//找到了对应元素
    //原因：此处添加了预加载事件，JS会等待整个页面加载完成后再去执行
    //浏览器解析到第11的时候，会跳过预加载中的内容。往下解析，解析完成后
    //在回来执行预加载函数
}
</script>
</head>
<body>
    <p>我是P标签</p>
</body>

键盘下压事件

onkeydown

应用常见：登录，注册–用户按下回车去处理登录，注册…

注意：回车键的keycode为13 ECS —27

<script type="text/javascript">
    window.onload = function(){
    //鼠标下压
    var inputDom = document.getElementsByTagName("input")[0];
    inputDom.onkeydown = function(e){
        if(e.keyCode==13){
            console.log("执行登录。。。。")
        }
    }
}
</script>
</head>
<body>
    <input type="text"/>
        </body>

DOM操作

什么是DOM

浏览器对HTML页面进行解析的时候，我们将所有的节点（属性，文本，标签）都解析成一个一个的节点。我们通过树的结果来对节点与节点之间的包含关系进行组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p7LSGEji-1630547885892)(https://i.loli.net/2021/08/20/dGkoT53MeS8RPvh.png)]

我们常用父子，兄弟等属于来描述节点与几点之间的关系

父：某个节点的上一层节点 head就是title父节点

子：某个节点的下一层节点 hody解释html子节点

兄弟：拥有想用的父节点就兄弟 a节点和h1节点就是兄弟节点

JS封装了很多方法供我们去操作节点----操作页面的元素----改变页面的内容

页面元素的查找API

getElementByID(ID值)：通过指定的id查找元素

getElemetsByName(name值) 通过指定name属性找到元素

getElementsByTagName(“标签名”) 通过指定的标签名找到元素

getElementByID(ID值)：通过指定的id查找元素

可以实现精确查找，页面上往往多个元素之间ID是唯一的。如果多个元素ID值相同，则会找第一个。

注意：一个页面上的元素与元素之间的ID往往都是不相同的。原因：我们进行前端页面开发的时候对元素控制：样式控制–class属性 JS操作元素–id

getElemetsByName(name值)-- 通过Name属性获取，会把所有name属性值相同的元素都查找出来，形成一个数组。

应用场景：页面一组单选框一组多选框

function domByName(){
var doms =  document.getElementsByName("hobby");
//判断该单选框或者多选框是否被选中
for(var i  = 0;i<doms.length;i++){
                                   if( ){//判断是否被选中 被选中了返回true 否则是false
                                   console.log(doms[i]);
                                   }
                                   }
                                   }

if(doms[i].checked){//判断是否被选中 被选中了返回true 否则是false
    //console.log(doms[i]);
    doms[i].checked=false;
}

getElementsByTagName(“标签名”) 通过指定的标签名找到元素

相同的标签名会被查找出来，形成一个数组。

操作DOM元素的属性

1、获取元素属性的值

DOM元素.属性名

DOM元素[“属性名”] 注意用中括号，需要加引号

DOM元素.getAttribute("属性名”）获取指定属性的值

	function getDiv(){
				var div1 =  document.getElementById("div1");
				console.log(div1.id);
				console.log(div1["className"]);
			}

应用场景：多选框

function getCheckBox(){
    var doms = document.getElementsByName("hobby");
    for(var i = 0;i<doms.length;i++){
        if(doms[i].checked){
            console.log(doms[i].value);
         //   console.log(doms[i].getAttribute("value"));
        }
    }
}

设置属性

setAttribute(属性名，属性值)

元素.属性 = 值

function changdiv1(){
    var div1 =  document.getElementById("div1");
    //div1.className = "div2";
    div1.setAttribute("class","div2");
}

组单选框一组多选框

function domByName(){
var doms =  document.getElementsByName("hobby");
//判断该单选框或者多选框是否被选中
for(var i  = 0;i<doms.length;i++){
                                   if( ){//判断是否被选中 被选中了返回true 否则是false
                                   console.log(doms[i]);
                                   }
                                   }
                                   }

if(doms[i].checked){//判断是否被选中 被选中了返回true 否则是false
    //console.log(doms[i]);
    doms[i].checked=false;
}