29-js

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.csdn.net/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 initializationlet 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"));//12console.log(parseInt(""));//NANconsole.log(parseInt("12a1"));//12console.log(parseInt("12.6"));//12console.log(parseInt("a12"));//NANconsole.log("======================")var str2 = "12.1";console.log(typeof parseFloat(str2));//numberconsole.log(parseFloat(str2));//12.1console.log("==============================")console.log(parseFloat("12.1"));//12.1console.log(parseFloat("1a2.1"));//1console.log(parseFloat("12.1a1"));//12.1console.log(parseFloat("12a"));//12console.log(parseFloat("a12.1"));//NANconsole.log(parseFloat(".12"));//0.12console.log(parseFloat("12.1.1"));//12.1console.log("=============================")console.log(0.1+0.2);//0.30000000000000004console.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));//1console.log(Number(""));//0console.log(Number("a"));//NaNconsole.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);//1console.log(b);//undefinedreturn a+b;
}//方法的调用
console.log(add(1));

11.2JS中方法调用传参分类

1.值传递

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

function add(a,b){alert("方法被调用了")a = a+1;console.log(a);//11return 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 否则是falseconsole.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 否则是falseconsole.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");
}

29-js

JS—Day01

第0节：JS简介

0.1、JavaScript简介

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

0.3、环境的搭建

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

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

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

第四节：JS中常量

第五节：JS中变量

5.1、变量的基本应用

5.2、ES5中变量的特殊使用

5.3、ES6中变量的使用

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

6.1、常见数据类型

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

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

6.4、字符串转数字

第七节、运算符

第八节、分支与循环

第九节、关键字与保留字

第十节、数组

10.2、数组的遍历

10.3、数组中常用的方法

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

11.1、方法的定义

11.2、方法的调用

11.2JS中方法调用传参分类

11.3、JS中变量作用域问题

11.4、JS中闭包

第十二节、JS中对象

JSON与JS对象

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

13.1、String对象–字符串对象

13.2、Math相关的

13.3、日期相关

BOM操作

1.1、浏览器的弹框操作

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

1.3、History对象

1.4、location对象

超时调用和延时调用

Day04

第一节：事件

网页开发中事件：

元素绑定事件的方式：

常用的事件：

事件的绑定

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

方法二：通过DOM元素绑定

方式三：通过addEventListener绑定

事件的移除·

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

点击类

焦点事件：

change事件

预加载事件

键盘下压事件

DOM操作

什么是DOM

页面元素的查找API

操作DOM元素的属性

1、获取元素属性的值

设置属性

操作DOM元素的属性

1、获取元素属性的值

设置属性

相关文章