JS第一部分

一、JS基础

1.js介绍

1）JavaScript是什么

• JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
• 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
• 现在也可以基于Node.js技术进行服务器端编程

• 浏览器分成渲染引擎和js引擎两部分：浏览器通过js引擎来执行js代码。

2）js组成

• js分为ECMAScript（js语法），DOM（网页文档对象模型），BOM（浏览器对象模型）。
• ECMAScript：是由ECMA（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和拓展。
• 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
• 浏览器对象模型（Browser Object Model，简称BOM），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

3）js引用

• js的引用和css的引用类似，有行内式、内嵌式和外部文件。
• 外部js文件的script标签中不可以写代码

4）js注释和常用语句

单行注释：//注释
多行注释：/注释/
常用语句：

• 1.alert(msg)：浏览器弹出警示框
• 2.console.log(msg)：浏览器控制台打印输出信息
• 3.prompt(info)：浏览器弹出输入框，用户可以输入

2.变量

1）声明变量

语法：var 变量名；

• var是一个js关键字，用来声明变量（variable变量）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• 我们需要通过变量名来访问内存中分配的空间

2）赋值

语法：age = 10；//给age这个变量赋值10

3）变量的初始化

语法：var age = 10；//声明变量的同时赋值为18

4）更新变量

var age = 18；
age = 81；//最后的结果就是81因为18被覆盖掉了
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

5）同时声明多个变量

语法：var age = 10，name = ‘zc’，sex = 2；
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

6）声明变量特殊情况

情况	说明	结果
var age；console.log（age）；	只声明，不赋值	undefined
console.log（age）；	不声明，不赋值，直接使用	报错
age = 10；console.log（age）	不声明，只赋值	10

7）变量命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线()、美元符号($)组成，如:usrAae，num01，_name
• 严格区分大小写。var app；和var App；是两个变量
• 不能以数字开头。18age是错误的
• 不能是关键字、保留字。例如:var、for、while
• 变量名必须有意义。MMD BBD nl → age
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
• 推荐翻译网站：有道，爱词霸

3.数据类型

js数据类型分为两类：

• 简单数据类型（Number，String，Boolean，Undefined，Null）
• 复杂数据类型（object）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
String	字符串类型，如“张三”注意咱们js里面，字符串都是带引号的	“”
Boolean	布尔值类型，如true、false，等价于1和0	false
Undefined	var a；声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null；声明了变量a为空置	null

1）数字型Number

数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

// 1.八进制数字序列范围：0~7
var num1 = 07；// 对应十进制的7
var num2 = 019；// 对应十进制的19
var num3 = 08；// 对应十进制的8
// 2.十六进制数字序列范围：0 ~ 9以及A ~ F
var num = 0xA；

数字型范围

js中数值的最大和最小值

alert(Number.MAX_VALUE)；// 1.7976931348623157e+308
alert(Number.MIN_VALUE)；// 5e-324

数字型三个特殊值

alert（Infinity）；// Infinity
alert（-Infinity）；// -Infinity
alert（NaN）；// Nan

• Infinity，代表无穷大，大于任何值
• -Infinity，代表无穷小，小于任何值
• NaN，Not a number，代表一个非数值

isNaN()

用来判断一个变量是否为非数字的类型，如果不是数字返回ture，如果是数字返回false

2）字符串型String

引号的用法

字符串型可以是引号中的任意文本，其语法为双引号“”和单引号‘’
语法：
var strmsg1 = “我爱北京天安门”；// 使用双引号表示字符串
var strmsg2 = ‘我爱吃猪蹄’；
// 常见错误
var strmsg3 = 我爱大肘子；
因为html标签里面的属性使用的是双引号，js这里我们更推荐使用单引号

js可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）
var strmsg1 = ‘我是“高富帅”程序猿’；// 可以用‘’包含“”
var strmsg2 = “我是‘高富帅’程序员"；// 可以用“”包含‘’
// 常见错误
var badQuotes = ‘what”；// 报错，不能单双引号搭配

字符串转义符

类似html里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是用\开头。

转义符	解释说明
\n	换行符，n是newline的意思
\ |斜杠|
\ ’	‘ 单引号
\ "	” 双引号
\t	tab缩进
\b	空格，b是blank的意思

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获得整个字符串的长度
例：
var strmsg = “我是帅气多金的程序猿！”；
alert（strmsg.length）；// 显示11

字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
• +号口诀，字符相连

// 1.字符串“相加”
alert（‘hello’ + ‘’ + ‘world’）；// hello world
// 2.数值字符串“相加”
alert（‘100’ + ‘100’）；// 100100
// 3.数值字符串 + 数值
alert（‘11’ + 12）；// 1112

将变量加入拼接
例：
console.log（‘小明’+18）；
var age = 18；
// console.log（‘小明age岁’）；这样不行
console.log（‘小明’ + age）；// 小明18
console.log（‘小明’ + age + ‘岁’）；// 小明18岁

3）布尔型Boolean

布尔类型有两个值：true和false，其中true表示真（对），false表示假（错）
在表示整数的时候，ture表示1，false表示0，可以参与算数的运算

4）Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

var a；
console.log（a）；// undefined
console.log（‘你好’ + a）；// 你好undefined
console.log （11 + a）；// NaN

一个声明变量给null值，里面存的值为空

var a = null；
console.log（‘你好’ + a）；// 你好null
console.log（11 + a）；// 11
console.log（ture + a）；// 1

5）获取变量数据类型

语法：typeof 变量名；
如：console.log（typeof 变量名）；
通过控制台字的颜色也可以判断数据类型

6）数据类型转换

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1；alert（num.toString()）；
String()强制转换	转成字符串	var num=1；alert（String(num)）；
加号拼接字符串（隐式转换）	和字符串拼接的结果都是字符串	var num=1；alert（num+“字符串”）

转换为数字型

方式	说明	案例
parseInt(string)函数*（注意大小写）	将string类型转成整数数值型	parseInt(string)
parseFloat(‘78’)函数*（注意大小写）	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转成数值型	Number(‘12’)
js隐式转换（- * /）	利用算数运算隐式转换为数值型	‘12’-0

转换为布尔型

方式	说明	案例
Boolean函数	其他类型转成布尔值	Boolean(‘turn’)

代表空、否定的值会被转换为false，如‘’、0、NaN、null、undefined
其余值都会被转换为true
例：
console.log(Boolean(‘’)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log (Boolean(‘小白’)); // true
console.log(Boolean(12)); // true

7）数组

数组指一组数据的集合，其中的每个数据被称为元素

// 普通变量一次只能存储一个值
var num = 10；
// 数组一次可以存储多个值
var arr = [1，2，3，4，5]；

数组的创建方式

• 利用new创建数组
  语法：var 数组名 = new Array（）；
• 利用数组字面量创建数组
  语法：
  var 数组名 = []；
  var 数组名 = [12，ture，56.2，‘小白’];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

数组的长度

语法：数组名.length

数组中新增元素

• 通过修改length长度新增数组元素
  例如：
  var arr = [1,2,3,4];
  arr.length = 7;
  // 由于没有给4.5.6的空间赋值，所以默认值是undefined
• 通过修改数组索引新增数组元素
  var arr = [1,2,3,4];
  arr[4] = 5;

4.运算符

运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号

1）算数运算符

*算数运算符：+（加） -（减） （乘） /（除） %（取余）

浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算数计算时其精度远远不如整数

var result = 0.1 + 0.2；// 结果不是0.3，而是：0.30000000000000004
console.log（0.07*100）；// 结果不是7，而是7.000000000000001

所以：不要直接判断两个浮点数是否相等

2）递增和递减运算符

前置递增运算符

++num前置递增，就是自加1，类似于num = num + 1，但是++num写成来更简单
先自加，后返回值

后置递增运算符

num++后置递增，就是自加1，类似于num = num + 1，但是num++写成来更简单
先返回原值，后自加

<script>	
 	var a = 10;	
 	++a;// ++a 11	a = 11	
 	var b = ++a + 2; // a = 12	++a = 12
	console.log(b); // 14
	
	var c = 10;
	c++; // c++ 11 c = 11
	var d =c++ +2; // c++ = 11	c=12I
	console.log(d); // 13
	
	var e = 10;
	var f = e++ + ++e; // 1. e++ = 10 e=11 	2.e=12	++e =12	
	console.log(f); // 22
	// 后置自增	先表达式返回原值 后面变量再自加1	
</script>

3）比较运算符

比较运算符：>（大于号）<（小于号）>=（大于等于号）<=（小于等于号）==（判等号（会转型））!=（不等号）（全等符号，如下）

37 === '37'；// 结果false，===需要值和数据类型都一致

4）逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
逻辑运算符：&&（逻辑与）||（逻辑或）！（逻辑非）

逻辑与短路运算

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第二个表达式的值为假，则返回表达式1

逻辑或短路运算

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第二个表达式的值为假，则返回表达式2

console.log(123 || 456)；// 123
console.log(0 || 456)；//456
console.log(123 || 456 || 789)；// 123

5）赋值运算符

赋值运算符：=（直接赋值）+=（加一个数后赋值）-=（减一个数后赋值）=（乘一个数后赋值）/=（除一个数后赋值）%=（取模后再赋值*）

6）运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先* / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&（逻辑与） 后逻辑或
7	赋值运算符	=
8	逗号运算符	，

二、JS语法

流程控制主要有三种结构，分别为顺序结构（顺序执行）、分支结构（条件执行）和循环结构（循环执行）

1.顺序结构

顺序结构时程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

三元表达式

有三元运算符组成的式子称为三元表达式
如：？ ：
语法：条件表达式 ？ 表达式1 ：表达式2
如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值

2.分支结构

1）if 语句

// 条件成立执行代码，否则什么也不做
if（条件表达式）{
//条件成立执行的代码语句
}

2）if else 语句

//条件成立，执行if里面的代码，否则执行else里面的代码
if（条件表达式）{
//[如果]条件成立执行的代码
} else {
//[否则]执行的代码
}

3）if else if 语句

if（条件表达式1）{
	语句1;
} else if（条件表达式2）{
	语句2;
} else if（条件表达式3）{
	语句3;
} else {
//以上条件都不成立执行的代码
}

4）switch 语句

switch（表达式）{
	case value1:
		执行语句1;// 表达式等于（必须是全等）value1时要执行的代码
		break;
	case value2:
		执行语句2;// 表达式等于（必须时全等）value2时要执行的代码
		break;
	default:
		执行最后的语句;// 表达式不等于value时要执行的代码
}

3.循环结构

1）for 循环

for(初始化变量；条件表达式；操作表达式）{
	//循环体
}

• for 循环可以重复执行某些相同代码
• for 循环可以重复执行些许不同的代码，因为我们有计数器
• for 循环可以重复执行某些操作，比如算术运算符加法操作
• 随着需求增加，双重for循环可以做更多、更好看的效果
• 双重 for 循环，外层循环一次，内层 for 循环全部执行
• for 循环是循环条件和数字直接相关的循环
• 分析要比写代码更重要
• 一些核心算法想不到，但是要学会，分析它执行过程

2）while 循环

while（条件表达式）{
	//循环体代码
}
//先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则推出循环，执行后面的代码

• JS 中循环有for、while、do while
• 三个循环很多情况下都可以相互替代使用
• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
• while和 do.….while可以做更复杂的判断条件，比for 循环灵活一些
• while 和 do.….while执行顺序不一样，while先判断后执行，do.….while先执行一次，再判断执行
• while 和do.….while执行次数不一样，do.…while 至少会执行一次循环体，而 while 可能一次也不执行

3）do while 循环

do {
	//循环体
} while（条件表达式）
//do while 先执行一次循环体，再判断条件表达式

4）continue

continue用于立即跳出本次循环，继续循环下一次循环（本次循环体中continue之后的代码就会少执行一次）

5）break

break用于立即跳出整个循环体（循环结束）

三、JS函数

函数在使用时分为两步：声明函数和调用函数

1.声明函数

// 声明函数
function 函数名（）{
	//函数体代码
}

function是声明函数的关键字，必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数命名为动词，比如：getSum

2.调用函数

//调用函数
函数名（）;//通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号
声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

3.形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同时也需要传递相应的参数，这些参数被称为实参。

• 形参：形式上的参数。函数定义的时候传递的参数，当时并不知道是什么。
• 实参：实际上的参数。函数调用的时候传递的参数，实参是传递给形参的

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

函数形参和实参个数不匹配的问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

function sum(num1, num2){
console.log(num1 +num2);
}
sum(100，200); // 形参和实参个数相等，输出正确结果
sum(100, 400，500，700); // 实参个数多于形参，只取到形参的个数
sum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN

注意：在js中，形参的默认值是undefined

形参和实参小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔
• 形参的个数可以和实参个数不匹配，但是结果不可预计，所以个数要尽量匹配

4.函数的返回值

• 有的时候，我们会希望函数将值返回给调用者，此时我们通过使用return语句就可以实现
• return语句之后的代码不被执行
• return只能返回一个值，一个数组可以返回
• 函数都是有返回值的：
  1.如果有return则返回，return后面的值
  2.如果没有return则返回undefined

break,continue,return的区别

• break :结束当前的循环体(如 for、while)
• continue:跳出本次循环，继续执行下次循环(如 for、while)
• return :不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的承数体内的代码

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments 对象，arguments 对象中存储了传递的所有实参

// arguments 的使用
function fn() {
// console.log(arguments);// 里面存储了所有传递过来的实参 arguments=[1,2,3]
console.log(arguments.length);//测长度
console.log(arguments[2]);
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
fn(1, 2, 3);
// 得到的是伪数组并不是真正意义上的数组
// 1.具有数组的 length 属性
// 2.按照索引的方式进行存储的
// 3.它没有真正数组的一些方法 pop() push()等等

函数可以调用另一个函数

function fn1() {
	console.log(111); 
	fn2();
	console.log('fn1');
}
function fn2() {
	console.log(222); 
	console.log('fn2');
}
fn1();

结果：111 222 fn2 fn1

四、JS事件

1.获取元素

1）根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。
语法：document.getElementById(‘id名’);

<div id="time">2019-9-9</div>
<script>
// 1.因为我们文档页面从上往下加载，所以先得有标签。所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过驼峰命名法
// 3.参数 id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time'); console.log(timer);
console,log(typeof timer);
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer); 
</script>

结果：2019-9-9

2）根据标签名获取

使用getElementByld()方法可以获取带有指定标签名的元素对象集合。
语法：document.getElementByTagName(‘标签名’);

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
• 得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素
注意：父元素必须是单个对象（必须指明是哪一个元素的对象），获取的时候不包括父元素自己。

<ul>
	<li>1</li>
	<li>1</li>
	<li>1</li>
	<li>1</li>
</ul>
<ol>
	<li>1</li>
	<li>1</li>
	<li>1</li>
	<li>1</li>
</ol>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
	var lis = document.getElementsByTagName('li');
	console.log(lis); 
	console.log(lis[0]);
// 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式 
	for (var i = 0; i < lis.length; i++) {
		console.log(lis[i]);
	}
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素返回的空的伪数组的形式
// 5、element.getElementsByTagName('标签名');
// var ol = document.getElementsByTagName('ol'); 
// console.log(o1[0].getElementsByTagName('li')); //这样是不正确的
	var ol = document.getElementById('ol');
	console.log(ol.getElementsByTagName('li'));
</script>

3）通过html5新增的方法获取

• document.getElementsByClassName('类名’);
  // 根据类名返回元素对象集合
• document.querySelector(‘选择器’);
  // 根据指定选择器返回第一个元素对象
• document.querySelectorAll(‘选择器’);
  // 根据指定选择器返回

<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs =document.getElementsByClassName('box'); console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号.box #nav 
var firstBox=document.querySelector('.box'); console.log(firstBox);
var nav =document.querySelector( "#nav'); I 
console.log(nav);
var li = document.querySelector('li'); console.log(li);
// 3. querySelectorA11()返回指定选择器的所有元素对象集合
var allBox =document.querySelectorAll('.box'); console.log(allBox);
var lis = document.querySelectorAll('li'); console.log(lis);
</script>

4）特殊元素获取

获取body元素

1.document.body // 返回body元素对象

获取html元素

1.document.documentElement // 返回html元素对象

2.事件

事件分为三部分：事件源，事件类型，事件处理程序
1.事件源：事件被触发的对象
2.事件类型：如何触发事件，比如：鼠标点击（onclick）
3.事件处理程序，通过一个函数赋值的方式完成

<input type="bottom" value="点击" id="btn">
<script>
	var a=document.getElementById('btn');
	a.onclick = function() {
	alert('你好')
}
</script>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发