网安——js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    alert("我是一个js");
</script>

JS语法，必须放在双闭合标签script中，嵌套在网页内部执行
script标签可以放在程序的任何地方，但是一般会放在程序的最下方
script标签内部，只能放JS语法。标签、样式等不能放在script标签内部
script标签有一个type属性，属性值为text/JavaScript。代表的是书写JS语法

二、内置语法

内置函数：内置即浏览器自带的，函数即某个功能

2.1 alert 警告框

alert 即警告、警报的意思

概述：alert是JS当中内置函数，他的主要作用是，在浏览器的正上方弹出一个警示框

<script type="text/javascript">
    //内置函数alert
    alert("这是一个警示框");
    alert('这是另一个警示框');
</script>

JS单行注释：使用 //
警告框使用：关键字alert +（）
小括号里面是传递的参数，即为警告框显示的内容
参数一般用单引号或出双引号包裹
在每一行程序结尾，必须加上一个分号，表示这个语句结束了

2.2 prompt 提示框

prompt 即提示、提示符的意思

概述：prompt也是JS中的内置函数，主要作用是在浏览器的上方，弹出一个提示框

<script>
    prompt("这是一个提示框");
    prompt('这是另一个提示框');
</script>

prompt与alert一模一样
以关键字prompt +（）
传递参数，一般情况下需要加上一对单引号或双引号
在程序结尾处，必须加一个分号，表示这行语句结束

2.3 console 控制台

console即控制台的意思

概述：在JS中，可以通过console对象的log方法在控制台中输出一些内容

控制台可以通过浏览器右击-检查查看，快捷键：CTRL+shift + i

<script>
    console.log("这是一条控制台信息");
    console.log('这是另一条控制台信息',"而且还能写两条哦");
</script>

console.log 可以在控制台打印一些数据
如果需要打印多个数据，多个数据间用逗号隔开
当程序出现错误的时候会有红色提示，可在控制台查看

控制台可以进行一些数学运算，可直接获取运算结果

三、字面量

概述;在JS世界当中，我们书写的数据不能是任意的，由于JS中的数据是有数据类型划分的。

JS的数据类型一共有六种：五个基本数据类型和一个引用类型

五个基本的数据类型包括：

string（字符串类型）：“你拍一，我拍一”
Number(数字类型)：100、200、2000
Boolean（布尔类型）：true、false
Undefined（为定义类型）：undefined
Null（空对象类型）：null

一个引用类型包括：

Object（引用类型）：函数、数组、正则、DOM、BOM

注意：编程时，书写的数据必须是这六种数据类型当中的数值，如果不是程序就会报错，例如不加引号的字符串

字面量：就是某一个类型数据的一个固定数值；当看到这个固定数值的时候，就知道它是属于哪种类型的数据

3.1 数字类型字面量

概述：在JS当中，数字类型的字面量使用频率相对较高。常用的数字类型字面量就是整数和小数（浮点数）

3.1.1整数字面量

概述：在JS当中整数字面量，即为十进制的数字。逢10进一。整数的数字区分正负之分。

整数是有正负之分的。
数字在控制台中打印的时候，是蓝色的。

3.1.2浮点数

概述：浮点数，即为小数。数字当中带有小数点的。浮点数也有正负之分。

小数即为浮点数。数字当中带有小数点的。
小数也有正负之分
0~1之间的小数可以省略零

小数在进行计算的时候：比如0.1 + 0.2这个比较特殊。
由于0.1和0.2在进行计算的时候，计算机底层转换为二进制数据进行计算。没办法整除（后面保留17位小数）
由于遵守IEEE754浮点数算数标准。

3.1.3科学计数法

概述：科学计数法，也是表示数字一种形式。代表的是某一个数字与10的N次幂的乘积。

科学计算法，也是表达数字一种形式
代表的是某一个数字与10的N次幂的乘机。
科学计数法中的英文单词e可以是大写的，当然也可以是小写的。

3.1.4特殊值

3.1.4.1 Indinity

Infinity即无穷的意思

概述：在JS当中，数字其实是有范围的。-2^53~2^53,如果开发中书写数字超出这个范围，可以利用特殊值Infinity进行表示。Infinity这个数字类型的特殊值，也有正负之分。

在控制台中打印的数字，切记是蓝色的。
数字类型的特殊值Infinity（无穷大），也有正负之分。（代表这个数字超出JS数字范围）
Infinity（无穷大）的首个英文字母，是大写的。

3.1.4.2 NaN

概述：NaN，英文全称【Not A Number】，它是Number（数字类型）中的一个特殊值。这个数值，一般是在数学计算不出结果的时候会出现的。

比如：在数学当中，数字零不能作为分母的。如果出现这种现象，别的语言可能崩掉。

但是在JS当中，不会出现崩掉现象，而是给你返回一个数字类型特殊值NaN。

在数学当中，零是不能作为分母的。在别的语言当中，零作为分母，程序可能会崩掉
console.log(0/0); 如果分子、分母同时为零。认为分母零（零），但是计算不出结果，只能返回一个数字类型特殊值NaN

console.log(1/0); 如果分子（不为零），分母为零。认为分母零（趋近于零的这样的一个数字），只能返回一个数字类型特殊值Infinity。

3.2字符串类型的字面量

概述：字符串（string）类型数据外层需要加上双引号、单引号。

字符串：是由字符组成的，而字符串中的字符，可以是汉字、英文字母、数字、任意特殊字符

字符串的数据外层必须加上双引号或单引号
字符串在控制台上打印的时候是黑色的（数字类型是蓝色的）
数据外层如果加上双引号、单引号。即为字符串类的数据
空格也可以作为字符串的字符
如果字符串中一个字符也没有，称之为空字符

四、变量

4.1变量的基本使用

variable即变量、可变情况

变量可以理解为一个容器，容器中可以存放任意类型的字面量数值、或者装载数学计算完的结果

可以通过访问变量名字、获取到变量存储的结果

变量在使用的时候分为三步：声明、赋值和使用

1、声明：我们在使用变量之前，要通过关键字var进行声明一次

2、赋值：可以将任意类型的字面量数值、数字计算完结果，赋值给变量

3、使用：通过访问变量名字，获取到变量存储结果

变量声明这一步必不可少

4.2 变量使用注意事项

声明一个变量但是不赋值。默认初始值为为定义类型值undefined

一个变量在声明一次后，可以进行多次赋值。后者赋值的数据会层叠前者赋值的数据

直接访问一个未声明的变量，会直接报错

4.3其他声明方式

可以将第一步声明和第二步赋值合并在一起
一个关键字var可以同时声明多个变量，多个变量之间用逗号隔开

4.4命名标识符规范

概述：对变量、函数起名字的时候，必须要遵守以下规则

可以是数字、英文字母、下划线、美元符号$
不能以数字开头
不能是关键字、保留字

4.5变量声明提升

概述：各大浏览器的厂商都有属于自己的解析器。在翻译代码的时候，会将变量的声明部分，提升到当前作用域的最上方。

解析器：各大浏览器厂商都有属于自己的解析器。就是将代码翻译给浏览器，让浏览器知道写的是什么

作用域：书写代码的范围

<script>
    console.log(sex);//undefined
    var sex ;
    sex = "女"
    console.log(sex);//女
</script>
//--------相当于--------------
<script>
    var sex ;
    console.log(sex);//undefined
    sex = "女"
    console.log(sex);//女
</script>

即第一个控制台输出的undefined是因为解释器将var定义的sex提到顶部了，但是不会赋值部分不会提升，所以第一次在控制台输出的是默认初始值undefined
第二次访问变量时，已经给sex赋值了，所以得出结果为女

五、数据类型的判断

概述：在JS中，可以利用关键字typeof，它主要的作用时可以检测任意类型的字面量或者变量存储的数据为什么类型的数值。

Null类型是第二个只有一个值的数据类型（第一个是Undefined，该类型的值只有一个undefined，该值用于表示某个变量不存在，或者没有为其分配值，也用于表示对象的属性不存在），这个特殊的值是null，从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null值会返回“object”的原因，其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来
typeof关键字可以检测数据的类型
使用的时候，关键字typeof + 空格 + 检测数据即可

六、数据类型的转换

6.1数字转换为字符串

在JS当中，可以通过连字符（+）将数字类型的数据转换为字符串

如果语句当中没有出现字符串，这个加号就是数学的加法，可以进行数学的加法运算
如果语句中出现了字符串，这个加号就不是数学的加法了，是所谓的连字符，可以将数据从左到右变成字符串

6.2 字符串转换为数字

概述：在JS当中，我们可以通过parseInt，和parseFloat将字符串转换为数字

内置函数parseInt，可以将字符串中的数字形式字符串转换为数字（只能得到整数）
内置函数parseFloat，可以将字符串中的数字形式的字符串转换为数字（可以精确到小数部分）

二者都使用的是驼峰命名，即 I 和F必须大写，否则会报错
在进行转换时，从左到右转换，如果数字形式字符，转换为数字，遇见了非数字形式的字符，后面的数据就不进行转换了
parseInt和parseFloat的使用方法都是一模一样的，只是精确度不同

七、提示框

提示框prompt可以在浏览器上方弹出一个提示框。用户是可以输入数据的。我们可以获取用户输入进来的数据，利用这些用户输入进来的数据，进行编程

<script>
    var x = prompt("有几只鸭子在水面上");
    console.log("水面上有" + x +"只鸭子");
</script>

用户在提示框中输入进来的数据，可以用变量进行存储
用户输入进来的数据都是字符串类型的数据

八、数学运算符

在JS语言中，也有数学运算符；其实数学运算都就是加、减、乘、除，取余数（%）

九、数学对象

在JS中，给我们提供了一个内置的数学对象Math，这个对象拥有很多的属性和方法

对象：在JS中，我们经常讲引用类型的数据称为对象

Math数学对象，提供了很多数学方法
Math对象的属性后面不需要加上小括号
MAth对象的方法后面要加上小括号
Math数学对象的方法中，如果传递多个参数，需要用逗号隔开

十、数学运算符

数学运算都即加减乘除和取余，注意的是加号在有字符串参与的时候是作为连字符使用的

在JS中，除了Number之外的数据类型也可以参与数学运算，只不过浏览器中的解析器会自动的将其他类型的数据“隐式转换”为数字参见数学运算

10.1Number类型数值参与

Number类型数值参与运算就是正常的加减乘除运算

10.1.1 Number类型的特殊值参与

Infinity参与运算的加减乘除结果都是Infinity，取余得到的是NaN，算不出来

NaN参与数学运算，其结果都是NaN

10.2 其他类型数据参与（不包含字符串类型）

概述：在JS当中，不仅仅Number类型的数值可以参与数学运算。其他类型的数据也可以参与数学运算。只不过，浏览器翻译器，自动的将这些数据‘隐式转换’数字参与数学运算。

其他数据类型：布尔类型、未定义类型、空对象类型。

备注：其实浏览器中的解析器，底层是通过内置的函数Number，将其他类型的数据饮食转换为数字的。

布尔类型	隐式转换为数字
true	1
false	0

未定义类型	隐式转换为数字
undefined	NaN

空对象类型	隐式转换为数字
null	0

10.3 string类型参与

特别注意：加号，比较特殊。如果语句当中，出现字符串，加号所谓连字符。

字符串和加号一起使用（连字符）。将数据从左到右依次拼接，转换为字符串。
字符串和减、乘、除、取余数进行数学运算的时候。字符串需要“隐式转换”为数字参与。

string类型	隐式转换为数字
空字符串	0
纯数字字符的字符串	隐式转换为对应的数字
非纯数字字符的字符串	隐式转换为NaN

十一、比较运算符

概述：在JS语言当中也有所谓比较运算符（比较操作符）。比如：大于、小于、大于等于、小于等于等等。

比较运算符作用：进行数据对比，如果对比结果是真的，返回布尔值true，如果对比的结果为假的，返回布尔值false。

特别注意：在生活、学习当中，经常出现数字和数字进行比较大小。但是需要注意的是，在JS这门语言当中，不仅仅数字类型的数据可以参与比较运算符。其他类型的数据（字符串、布尔值、未定义、空对象）也可以参与比较运算。只不过浏览器中的解析器，将其他类型的数据自动的‘隐式转换’为数字进行比较。

>	大于
>=	大于等于
<	小于
<=	小于等于
==	相等
===	全等（值和数据类型都等）
!=	不等
!===	不全等

一个等号称之为赋值运算符（经常给变量进行赋值）。不是比较运算符（不是用来比较大小的）
两个等号（比较运算符：相等的判断），判断依据是数值是否相等。
三个等号（比较运算符：全等的判断），判断的依据是数值和数据类型是否全等。

11.1 Number类型的数值参与

正常的Number类型间的加减乘除以及取余计算都是正常的按法计算即可，返回的结果是true和false

相等和全等：

三个等号全等，是要判断数值和数据类新是否都相等的

11.1.1 Number类型的特殊值参与

Infinity参与比较运算时，按正常计算即可，Infinity全等于其本身
NaN，在JS当中，全部特殊值【数字类型：Infinity、NaN；未定义：undefined；空对象：null】当中，只有数字类型的特殊值NaN和自身比较的时候不等。其余的特殊值和自身比较的时候都是相等的。
数字类型的特殊值NaN参与比较运算：只有带！(不)，返回的是布尔值true，其余都是false。

11.2 其他类型数据参与（不包含字符串类型）

概述：在JS当中，其他类型数据（布尔、未定义、空对象）也可以参与比较运算。

需要注意的是，其他类型的数据参与比较运算的时候，需要‘隐式转换’为数字参与比较运算。

下面是其他类型数据隐士转换为数字

11.3 字符串类型参与

概述：字符串类型数据也可以参与比较运算。

其他类型数据（数字、布尔、未定义、空对象）和字符串进行对比。--通过隐式转换为数字进行对比，隐式转换的值和上面数学计算的值相同
字符串和字符串进行对比。通过ACSII进行对比。

注意：字符串和字符串进行对比的时候是通过ASCII进行对比。如果是字符串和字符串进行对比。

是通过从左到右一个一个字符进行比较，直到比较除结果为止。

0~9<A-Z<a-z:这些字符从左到右依次变大。

字符串与字符串对比：

如果是字符串和字符串进行对比。从左到右一个一个字符对比。直到对比除结果结束。
0~9 < A - Z <a - z从左到头依次变大。
汉字太多了，但是每一个汉字都有对应的ASCII数值（没有必要去记忆）

十二、逻辑运算符

概述：在JS语言当中是有逻辑运算符（逻辑操作符）。

逻辑运算符一共三个：逻辑与&&、逻辑或|、逻辑非！。

在JS当中一般情况下布尔值参与逻辑运算，但是其他的类型的数值也可以参与逻辑运算，只不过浏览器中的解析器会将其他类型的数据‘隐式转换’为布尔类型数据参与逻辑运算。

12.1布尔类型数值参与运算

12.1.1 逻辑与

概述：当两者（AB）同时为真（true），返回的结果才为真（true）。否则即为假（false）

语法格式：A&&B

逻辑与运算符在使用的时候：当两者同时为真，返回结果即为真

逻辑与可以用串联电路图记忆：当开关S闭合，电流流通。

如果A（l1）为真，电流会流到B（l2），结果即为B（l2）。

如果A（l1）为假，电流会流到A（l1），结果即为A（l1）。

12.1.2 逻辑或

概述：当两者有一个为真（true），返回结果即为真（true）。否则为假（false）

语法格式：A||B

逻辑或可以用并联电路图记忆：开关S闭合，电流流通。

如果A灯泡亮了（true），电路会完成，结果即为A。

如果A灯泡坏了（false），电流会流到B，结果即为B。

12.1.3 逻辑非

概述：置反

逻辑非运算符可以同时多个出现，例如：！！！true即为false

12.2 其他类型数据参与

概述：在JS语言当中，其他类型数据【数字、字符串、未定义、空对象】也可以参与逻辑运算。

像这种非正常现象，返回结果可能不是布尔值。是由于其他类型数据参与逻辑运算的时候，浏览器中解析器会自动的将这些数据隐士转换为布尔值参与。

数字类型=>布尔值

数字类型数值	布尔值
0、NaN	false
其余的数字	true

字符串=>布尔值

字符串类型数值	布尔值
空字符串	false
非空的字符串	true

未定义类型=>布尔值

未定义类型数值	布尔值
undefined	false

空对象=>布尔值

空对象类型数值	布尔值
null	false

其他类型数据参与逻辑运算的时候，其实浏览器底层也是通过Boolean内置函数实现自动隐式转换为布尔值参与的。
其他运算符也可以和逻辑运算符一起使用

流程控制语句

一、if条件语句基本使用

概述：在JS语言当中，是有所谓流程控制语句。流程控制语句：条件语句、循环语句。

条件语句：程序中如果出现一种、或者多种情况要进行选择的时候，只能选择某一个符合条件的分支去执行，这样的语句，称之为条件语句。

1.1 if条件语句的基本使用

语法格式：

if（条件）{
        代码
        代码
   }

if条件语句是由关键字if开头，后面紧随一个小括号。
小括号里面放置条件：条件一般需要的是布尔值、其他类型数值、运算符计算完结果
小括号后面紧随大花括号（结构体），结构体里面可以书写代码。
如果条件为真，条件语句结构体才会执行。如果条件为假，条件语句结构体不会执行。

if条件语句中条件：一般需要布尔值，其他类型数值也可以参与，但都是隐式转换为布尔值参与的。
数学运算符、比较运算符、逻辑运算符等等返回的结果也可以作为条件语句的条件使用。
if条件语句中：如果条件为真，才会执行结构体中的代码。如果条件为假的，结构体中的语句不会执行。
条件语句：不管你是执行了结构体、或者没有执行结构体里面代码。条件语句后面代码也会执行。

1.2else关键字

关键字else可以结合if条件语句一起使用

语法格式：

if(条件){
      书写代码
}else{
    
      书写代码
}

关键字else可以结合if条件语句一起使用。不是必须的。
else关键字（否则），else关键字的这个分支，其实是有暗含条件。
暗含条件是对于上面分支的条件进行否定。

案例1：

问题：让学生输入自己分数，对应弹出及格、挂科。


<script><script>
    var score = parseInt(prompt("请输入你的分数"));
    if (score>60){
        alert("恭喜你，你通过了");
    }else{
        alert ("你没有及格哦");
    }
</script>

关键字else可以结合if条件语句一起使用。所谓暗含条件：对于上面分支的条件进行否定。
条件语句在使用的时候：一种情况、多种情况下，只能选择某一个符合条件分支执行。

案例2：

问题：让用户输入一个数字，对应弹出这个数字是偶数、奇数。

偶数：就是能被2整除的数字 4

奇数：不能被2整除的数字 3

    var num = prompt("请输入数字");
    if(num % 2 ==0){
        alert(num + "是个偶数");
    }else{
        alert(num + "是个奇数");
    }
</script>

一个等号：赋值运算符（不是比较运算符），经常用来给变量赋值。
两个、三个等号：比较运算符（比较是否相等、全等），返回的结果为布尔值。
以后程序中如果出现：两中情况选择其一，可以利用if+else解决问题。

1.3多分支if条件语句

概述：多分支if条件语句，它是if条件语句升级版。可以在多种情况下，选择某一个符合条件的分支去执行。

语法格式：

if(条件1){
  ....书写代码
}else if(条件2){
 ....书写代码
}else if(条件3){
 .....书写代码
}else if(条件4){
 ....书写代码
}

案例：用户输入一个分数，对应弹出他的成绩查询结果。

<script>
    var num = prompt("请输入你的分数");
    if (num<60){
        alert("同学你挂科了");
    }else if(num<70){
        alert("同学你及格了");
    }else if(num<80){
        alert("同学你得了良好");
    }else {
        alert("同学你得了优秀");
    }
</script>

条件语句：切记，永远是在多种情况下，选择一个分支去执行的。

1.4if条件语句嵌套使用

概述：if条件语句中结构体内部可以书写任意代码。甚至还可以在内部在书写一个条件语句。

特别注意：如果嵌套在内部条件语句执行，内外条件语句都要符合条件才可以执行。

案例：让用户输入一个性别、以及年龄，对应弹出这个人能否结婚？

<script>
    var sex =prompt("请输入您的性别");
    var age =prompt("请输入您的年龄");
    if(sex =="女"){
        if(age>=18){
            alert("您可以结婚");
        }else{
            alert("您还不可以结婚啦");
        }
    }else if(sex =="男"){
        if(age>=22){
            alert("可以结婚啦");
        }else{
            alert("不可以结婚哦");
        }
    }else {alert("您输入错误了")}
</script>
//if条件语句可以嵌套使用
//else关键字否定的是同级的条件语句分支

二、二、赋值运算符

概述：我们已经学习很多运算符：数学运算符、比较运算符、逻辑运算符。初次之外，JS当中还有赋值运算符。

赋值运算符：经常给变量进行赋值。

赋值运算符： = 、 +=、-=、*=、/=、%=

声明一次变量后可以进行多次赋值

<script>
    var num = 100;
    console.log(num);//100
    num +=6;
    console.log(num);//100+6=106
    num-=100;
    console.log(num);//106-100=6
    num*=2;
    console.log(num);//6*2=12
    num/=3;
    console.log(num);//12/3=4
    num%=2;
    console.log(num);//4%2=0
</script>

2.1自增，自减

概述：自增 ++ 、自减 --。他们也属于赋值运算符（又称：一元运算符）。他们主要的作用结合变量一起使用进行赋值。

作用：可以给变量进行赋值。就是在已有变量存储数值基础之上进行加一、减去一操作。

A++           //当前这一次使用变量A后，进行加一操作
A--            //当前这一次使用变量A后，进行减一操作
++A         //当前这一次使用变量A前，进行加一操作
--A          //当前这一次使用变量A前，进行减一操作

如果++、--出现在变量名字之前：当前这一次使用变量之前，进行（加上1、减去1）；如果++ -- 出现在变量名字之后：当前这一次使用变量以后，进行（加上1、减去1）
++或--放在变量之后：

++或--放在变量之前：

三、switch条件语句

switch: 开关 case:条件、情况 break:终止、打破default：默认

概述：在JS当中是有所谓流程控制语句：条件语句 + 循环语句。

条件语句：if条件语句、switch条件语句。if条件语句能做的，switch条件语句也可以做。

语法格式:

switch(条件）{
        case 条件1：
                书写代码；
　　　　　break；
        case 条件2：
                书写代码；
        break；
　　　　　default：
　　　　　break;
　
}

switch条件语句中小括号里面：布尔值，变量，表达式等
case关键字后面紧随的是判断条件，判断条件为真执行分支，判断条件为假不执行分支
break关键字，他的作用是终止条件语句，执行腰间语句后面的代码

案例：星座查询

用户输入自己的星座，对应弹出这个星座的特征

<script>
    var xingzuo = prompt("请输入您的星座");
    switch(xingzuo){
        case "狮子座":
            alert("狮子女是太阳花，她明艳动人，热爱交往，并且活的非常跳跃，觉得人生充满变数和神奇。");
            break;
            case"":
            alert("白羊座♈，黄道十二星座之第一宫，位于双鱼座之东，金牛座之西，出生日期为阳历3月21日~4月20日。);
            break;
        default:
            alert("其他星座");
            break;      
    }
</script>

某一个分支如果符合条件且没有遇见关键字break，会从符合条件的这个分支，按照顺序依次向下执行。
break关键字：立即、立即、马上终止条件语句，执行条件语句外层后面能带
default对于其余分支进行否定，使用的时候功能近似else。
注意：if结合else使用 switch结合default。

3.2学生成绩查询

概述：if、switch都是属于条件语句，他们两者功能一样的。他们两者主要的作用是：都是在多种情况下，选择某一个分支进行执行（条件语句：永远是多选一）。

学生成绩查询条件：

小于 60 挂科

大于等于60且小于70 及格

大于等于70且小于80 良好

大于等于80 优秀

<script>
    var score = parseInt(prompt("请输入您的成绩"));
    switch(true){
        case score<60:
            alert('不好意思，你挂科了');
        break;
        case score<70:
            alert('及格了');
        break;
        case score<80:
            alert('良好');
        break;
        default:
            alert('优秀');
        break;

    }
</script>

四、循环语句

概述:在JS这门语言当中，是有所谓流程控制语句。流程控制语句是由条件语句+循环语句组成。

条件语句：在一种、多种条件下，选择某一个符合条件分支进行执行。

循环语句：在程序当中，出现了大量重复性的语句的时候，可以利用循环语句进行解决。

4.1for循环语句的使用

语法格式：

for(定义变量 ；设置条件 ；变量操作){
    循环体；
}

案例：在控制台输出5次“今天是个好天气”

<script>
    for(var i=0;i<5;i++){
        console.log("今天是个好天气");
    }
</script>

【循环语句第一步】:经常用来声明一个或者多个变量，一般情况下都是有初始值的。（循环语句第一步只是执行一次）
【循环语句第二步】:经常用来进行条件判断(需要的是布尔值)，如果条件为真，会执行循环语句第三步、第四步。如果条件为假的，立即终止循环语句。
【循环语句第三步】:也称之为循环语句，循环体。这里面经常书写大量重复性的代码。
【循环语句第四步】：经常用来给第一步声明的变量进行重新赋值。

4.2for循环语句其他书写方式

第一种方式：省略第二步的条件判断，不建议这样书写，因为循环语句第二部没有书写判断条件，默认数值为布尔值真，会导致“死循环”

第二种方式：

 for(var k = 5; k < 10; k+=3){
       console.log(k);//5、8
  }

循环语句第四步，经常给变量进行重新赋值，这步当中可以使用任意赋值运算符。

第三种方式：

for(var k = 1 , t = 9; k + t < 20; t+=5){
         console.log(t);//9、14
  }

循环语句第一步：可以声明一个、多个变量【循环语句第一步：只是执行一次即可】

4.3穷举思想

概述:穷举思想：我们可以将题目的全部的情况一一验证,根据题目要求将符合条件的情况作为结果输出。

比如：请你输出1~100之间偶数。（偶数：就是可以被2整除的数字）

<script>
    for(var num=1;num<=100;num++){
        if(num%2==0){
            console.log(num+"是偶数");
        }
    }
</script>

穷举思想：在JS当中实现原理：循环语句+条件语句。

4.4 循环语句嵌套使用

概述:在JS语言当中，我们可以通过循环+条件语句实现穷举思想。除此之外循环语句也可以嵌套使用。

五、综合使用

5.1变量注意事项

<script>

  //声明一个变量sum，进行了三次赋值
   var sum = 0 ;
       sum += 1;
       sum += 2;
 //声明第二个变量
  var sum = 99999;
  console.log(sum);
</script>

在程序当中，可以声明多个变量（同名变量），像上面这种情况，多个同名变量在使用的时候
后者同名变量会覆盖前者同名变量存储的数据，使用的是后面的变量存储数据。

5.2累加器

问题:请你编写一个程序，输出1~10之间这些数字的累加的和？

0+1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 +10 = 55

<script>
//循环外层声明一个变量接收累加结果
    var sum =0;
    for(var num =0;num<=10;num++){
        sum +=num;
    }
console.log(sum);
</script>

累加问题：需要用一个变量进行记录每一轮计算完的结果。在下一轮循环的时候进行使用。
注意问题：累加器【sum变量】:不要放在循环体里面，相当于声明十个同名变量（后者覆盖前者：前者保留数据失效了）

5.3水仙花数字

问题:编写程序，请你在控制台中输出三位数字中的水仙花数字？

暗含条件：三位数字100~999

水仙花数字：153 = 3^3 + 5^3 + 1^3

解题思路：穷举思想

<script>
    for(var num=100;num<=999;num++){
        ge =num%10;
        shi=parseInt(num/10)%10;
        bai=parseInt(num/100);
        sum=Math.pow(ge,3)+Math.pow(shi,3)+Math.pow(bai,3);
        if (sum ==num){
            console.log(num);
        }
    }
</script>

5.5寻找质数

问题:请你编写程序，输出1~100之间的质数?

质数：某一个数字他的约数只有两个，数字1和这个数字本身。

<script> 
    for (var num=1;num < 100;num++){
        var sum =0;
        //累加的值sum要放在第一层循环的里面，
        //每次一层数据给一个新的数字，sum重新赋值为0
        for(var i=1;i<=num;i++){
            if (num % i== 0){
                sum++;
            }
        }
        if(sum==2){
            console.log(num);
        }
    }
</script>

六、关键字

6.1关键字break

break：立即终止、停止

概述:关键字break，也可以结合循环语句一起使用。它的作用是立刻终止循环语句。

例如下图中遇到4即停止循环语句，所以打印出来的只有1~3

6.2关键字continue

continue:继续

概述:关键字continue，也可以结合循环语句一起使用。它主要的作用是：立刻终止当前这一次循环，

然后去执行循环语句的下一次循环。

例如：将上面的代码中的break换成continue之后，只是m=4的这一次循环被终止，后面的循环还是在继续

七、其他循环语句

概述：在JS当中，流程控制语句分为两种：条件语句 + 循环语句

条件语句：程序当中出现多种情况进行选择，选择某一个符合条件分支进行执行。if、switch

循环语句：程序当中出现大量重复性语句，可以用循环语句解决。for、while、do...while

7.1while循环语句基本使用

概述:while也属于循环语句，他的作用也是可以处理大量重复性出现语句。

注意:有的人管for、while循环语句，称之为‘前测试循环语句’。

前测试循环语句：先进行条件判断，再执行循环体。

语法格式：

while(条件){
    ...循环体
    书写重复性代码地方
}

while循环语句:小括号里面放置的是循环语句判断条件【一般需要布尔值、其他类型数据（隐式转换）、表达式】
当循环语句的判断条件为真，循环体才会执行。否则循环体不会执行。

案例：

1、在控制台中输出数字1~10

<script>
    var num = 1;
    while(num<=10){
        console.log(num);
        num++;
    }
</script>

2：在控制台中输出1~10之间偶数

<script>
    var num = 1;
    while(num<=10){
        if(num%2==0){
        console.log(num);
        }
        num++;
    }
</script>

3.在控制台输出数字1~10的累加之和

<script>
    var num = 1;
    var sum = 0;
    while(num<=10){
        sum +=num;
        num++;
    }
    console.log(sum);
</script>

7.2 do.....while语句

概述:do...while也属于JS当中循环语句。它的作用也是可以解决大量重复性问题。

do...while循环语句属于后测试循环语句。

后测试循环语句：先执行循环体，在进行循环条件判断。

注意:由于do...while后测试循环语句【先执行循环体、后进行条件判断】：循环体至少执行一次。

语法：

do{
  ...循环体
   书写语句地方
}while(判断条件);

案例：

1、在控制台中打印出数字1~10【注意：控制台与变量++先后顺序】

<script>
    var num =1;
    do {
        console.log(num);
        num++;
    }while(num<=10);
</script>

2、在控制台中输出两个随机数字【0~9】，且两者不同同时为零。

<script>
    do{
        var m =parseInt(Math.random()*10);
        var i =parseInt(Math.random()*10);
    }while(m==0&&i==0);
//当m和i同为0时执行循环
    console.log("i="+i);
    console.log("m="+m);
</script>

函数

1.1函数简介

function:函数、功能。

概述:

函数【function】，函数你可以理解为将某一个常用的功能进行封装。当你想使用这个功能的时候，可以选择调用、执行这个功能即可。

注意:JavaScript脚本语言当中，函数分为两种：一种关键字function定义函数、一种是表达式形式函数。

函数使用分为两部分：声明、调用

举例子：在前面课程当中，我们学习很多内置函数alert、prompt。

alert:将警告框功能进行封装，当我们想使用这个功能的时候，调用、执行这个功能。

prompt:将提示框功能进行分装，当我们想使用这个功能的时候，调用、执行这个功能。

1.2关键字形式函数

概述:在JS这门语言当中，函数有两种形式：第一种关键字形式函数，关键字形式函数，需要通过关键字

function进行声明、定义。

基本语法：

//声明部分
function fun(){
  ....书写代码地方
}
//调用部分
fun();

案例：

函数使用分为两部分：声明、调用【可以多次调用这个功能】
函数在JS当中属于Object引用类型数据，不是Function类型的【因为JS语言当中没有这个类型】
函数如果只是声明、但是没有调用。函数体里面代码不会自行的。

1.3 形参和实参

概述:形参【形式参数】、实参【实际参数】

在函数声明的时候，声明部分的小括号里面可以书写形参。

在函数调用的时候，调用时候传递数据称之为实参。

<script>
    function add(a,b){
        console.log(a,b);
    }
    add("你好","哇");
</script>

声明函数时，括号里面的称之为形式参数多个形参之间用逗号隔开
调用函数时，括号理念的称为实际参数，多个实参之间用逗号隔开，实参可以是任意类型的数据
注意：用户调用函数的时候，会将实参按照顺序依次赋值给形参。

形参个数，不能决定实参个数。实参个数，也不能决定形参个数。

1.4变量认知

概述:变量，变量你可以理解为是一个容器，可以承载任意类型的字面数值或者计算完结果。

通过访问变量名字，就可以获取到变量存储数据。

变量：在JS当中变量分为两种：局部变量、全局变量。

局部变量：在JS当中局部变量，只有两种情况：①作为函数形参 ②变量在函数体中声明；局部变量只能在函数体中使用。

全局变量：除了局部变量以外的都是全局变量；全局变量，可以在JS行为层中任意地方使用。

函数形参、函数体中声明变量即为局部变量：局部变量只能在函数体中使用

1.5作用域

scope:作用域

概述:作用域：可以理解为是书写代码的范围。

全局作用域:书写JS代码范围最大的两个script标签之间。

函数拥有作用域：函数的作用域即为函数体【函数作用域是在全局作用域当中的】

<script>
    //全局变量
    var count = 666;
    function fun (){
　　　　//函数体内部没有找到count，于是去函数体外找到全局变量count
       console.log(count);
    }
    fun();
</script>

作用域：书写JS代码范围【全局作用域、函数作用域】
由于函数作用域没有局部变量count，因此会沿着作用域练向上查找（等等，我找找我家老大看看他有没有）
一看全局作用于中有全局变量count，因此函数作用域‘借来’使用一下。

1.5.1经典面试题

1、下面代码打印出的结果是多少

<script>
  var num = 66;
  function fun (){
        var num = 99;
      console.log(num);
  }
  fun();
</script>

打印结果为99，因为函数会先在自己内部查找，查找不到才会去外部看全局变量

2、下面代码的结果时什么

<script>
  var num = 66;
  function fun (){
        console.log(num);
        var num = 99;
  }
  fun();
</script>

打印结果为undefined，在函数体内部，定义变量会提升，提升到当前作用域的最上方
当调用函数后，在函数内部查看是否有num变量，由于变量提升，所以num变量定义在最上面，然后调用变量并打印，之后才是变量赋值，提升变量并不提升赋值，所以此处结果为undefined

3、以下代码的结果

<script>
  var num = 66;
  function fun (){
         console.log(num);
         if(false){
             var num = 99;
         }
  }
  fun();
</script>

打印结果还是为undefined，因为任何语句都不能阻挡变量的提升，即使是不执行if语句但是定义变量还是会被提升在当前作用域的最上方

1.6关键字return

概述:关键字return一般集合函数一起使用。而且需要注意，这个关键字一般只能在函数体中使用。

这个关键字的作用是两个：

函数体中如果遇见关键字return，函数体中后面语句不在执行
函数体中关键字可以将计算完结果返回【函数体外部可以获取到函数返回结果】

关键字return一般结合函数一起使用，而且需要在函数体中使用
函数体中遇见关键字return之后，函数中中的return后面的语句就不再执行了

<script>
    function fun(){
        var num=100;
        return num;
    }
    var sum = fun()
    console.log(sum);//结果为100
</script>

关键字return可以将函数体中数据||计算完结果返回。【返回给函数体外部，函数体外部可以访问到这个数据】

1.7函数综合练习

1、习题1

请你封装一个函数，这个函数功能是判断某一个数字是不是水仙花数字。如果是水仙花数字，返回结果布尔值真。否则返回布尔值假。

<script>
    var num=parseInt(prompt("请输入一个数字"));
function isNarcissus(){
    var ge = num % 10,shi = parseInt(num / 10)%10,bai = parseInt(num / 100);
    var sum =Math.pow(ge,3) + Math.pow(shi,3) + Math.pow(bai,3);
    if(sum == num){
       return true;
    }else{
        return false;
    }
}

if(isNarcissus()){
    console.log("是一个水仙花数字");
}else{
    console.log("不是一个水仙花数字");
}
</script>

2、习题2

问题:请你设计一个函数，这个函数功能是可以判断某一个数字是不是完美数字。

如果是完美数字，函数返回一个布尔值真。否则返回布尔值假的。

完美数字:比如完美数字6

比如：数字6的约数1、2、3之和等于这个数字本身即为完美数字

<script>
    var num =parseInt(prompt("请输入一个数字"));
    function fun(){
        var sum =0;
        for(var i=0;i<num;i++){
            if (num%i==0){
                sum +=i;
            }
        }
        if(sum==num){
            return true;
        }else{
            return false;
        }
}
var prefect = fun(6);
if (prefect){
    alert(num+"是完美数字");
}else{
    alert(num+"不是完美数字");
}
</script>

1.8表达式形式函数

概述:在JS当中函数有两种形式：

第一种:关键字function定义的函数。

第二种：表达式形式函数，就是讲关键字function定义的函数赋值给变量形式。

<script>
   var jch  = function  () {
          console.log("我爱你塞北的大雪呀");
   }
   jch();
   jch();
</script>

将关键字function定义函数赋值给变量，这种形式的函数【称之为表达式形式函数】
表达式形式函数中关键字形式函数可以省略关键字形式函数名字【匿名函数】

1.9关键字形式函数与表达式形式函数区别

概述:两者功能是一样的（都属于函数:都是可以将某一个功能进行封装，当你想用这个功能的时候，调用即可）

但是，他们两者在使用的时候语法有一些注意事项

表达式形式函数:只能在声明之后才可以调用。如果在之前调用会提示不是一个函数

关键字形式函数可以在声明之前、声明之后调用。
由于解析器，可以将关键字形式函数声明部分提升到当前作用域最上方。

1.10回调函数

概述：当一个函数执行的时候，传递实参是另一个函数的声明部分。这个实参（函数）即为回调函数

当某一个函数执行的时候，传递实参是另外一个函数声明部分，这个实参的函数即为回调函数。

1.11递归

概述:在很多语言当中，都有函数直接或者间接调用自身这种现象。像这种现象称之为递归现象。

这种情况要注意，上面的代码是个死循环

1.12IIFE

概述:IIFE,在声明表达式形式函数的同时立刻马上执行一次。

<script>
    var fun=function(){
        console.log("今天天气好晴朗");
    }();
</script>

表达式函数后面才可以紧随小括号立即执行一次

1.13IIFE其他写法

概述:关键字形式函数后面不能紧随小括号立即执行。但是程序员可以通过一些手段，

将关键字形式函数变为表达式形式函数。

加、减、非、小括号：可以将关键字形式函数变为表达式形式的函数

每一个IIFE都有属于自己独立作用域，且相互不影响的。

数组

一、数组

概述:在很多的编程语言当中都有数组存在。数组你可以理解为是一个大容器，这个容器可以存储很多的任意类型数值。存储的数据都是有序的数据。在JS这门语言当中数组利用中括号进行表示。

<script>
   //在JS当中用中括号代表数组
   console.log([]);
   //数组在JS当中属于引用类型数据
   console.log(typeof []);
   //数组可以存储很多任意类型数据
   console.log([1,true,NaN,"快乐",null,function(){}]);
   //数组在使用的时候为了方便，
   //可以将数组赋值给变量进行存储，通过访问变量名字就可以操作数组
   var arr = ["你好","我好","大家好",1,NaN,false];
   console.log(arr);
</script>

数组利用中括号进行表示，而且是引用类型数据。
数组里面存储的数据我们经常叫做‘元素’，多个元素之间利用逗号隔开。
以后再使用数组的时候，最好把数组赋值给变量使用。这样操作比较方便。

1.1数组的基本使用

概述:在JS当中数组（引用类型数据）可以存储很多任意类型数据且有序存储。当然也可以读取、修改、添加数据。

数组里面元素可以通过枚举法获取到。
枚举法：数组后面紧随一个中括号，中括号里面放置的是获取元素对应的索引值||下角标。
元素的索引值是从数字0开始的。
数组枚举元素的时候，下角标越界程序不会报错，默认返回的是undefined

数组：可以修改已有的元素数值、添加新的元素。

二、数组常用属性与方法

2.1length属性

概述:数组拥有length属性，它主要的作用是可以获取到数组元素个数。

数组length属性，主要的作用是可以获取到元素的总个数。
数组里面元素可以是任意类型数值，出现数组嵌套数组情况（二维数组）

<script>
    var arr =["学习","工作",1,5,6,[1,2,3]];
    for(var i=0;i<=arr.length;i++){
        console.log(arr[i]);
    }
</script>

2.2push和pop

概述:他们两者都是数组方法。它主要的作用分别是：

push:可以向数组尾处添加一个或者多个元素
pop:可以在数组的尾处移除一个元素（pop一次只能移除一个元素）

2.3unshift和shift方法

概述：他们两者也是数组的方法，主要的作用分别是：

unshift：可以向数组头部添加一个或者是多个元素
shift:可以向数组的头部移除一个元素（一次只能移除一个元素）

2.4 join和reverse方法

概述：他们两者也属于数组方法，他们的作用分别是：

join：主要的作用是可以通过某一个字符将数组拼接转换为字符串。
reverse:可以把当前的数组的元素进行倒置。

数组的join方法：可以通过某一个字符串将数组转换为一个字符串。【对起始数组没有任何影响】
数组的reverse方法：可以将当前的数组的元素进行倒置。

2.5 indexOf和includes方法

概述:他们两者也是数组的方法。他们两者作用分别是

indexOf:它可以获取数组当中某一个元素的索引值【下脚标】
includes:它主要的作用是检测某一个元素是不是当前这个数组的。如果是【返回布尔值真】，否则【返回布尔值假的】

2.6slice和splice方法

概述:他们两者也是数组方法，他们主要的作用是：

slice：从起始数组当中切割出一个新的子数组
splice:可以对数组进行切割、插入、替换。

<script>
    //alice
    var arr=["hello","deca","and","queen",1,2,3,4];
    //slice主要作用是切割某一个属数组并且返回一个新的数组
    //这个方法传参至少是一个参数【都是数组的索引值】
    var newarr=arr.slice(2);
    var newarr1=arr.slice(2,5);
    console.log(newarr);
    console.log(newarr1);
    console.log(arr);
    //splice
    //splice可以对当前数组进行切割、插入、替换元素操作
    //切割：第一个参数切割起始位置索引值，第二个参数是切割长度
    var arr2=arr.splice(5);
    var arr3=arr.splice(1,5);
    console.log(arr2);
    console.log(arr3);
    console.log(arr);
</script>

slice方法：数组通过这个方法可以切割出一个新的数组【slice对于起始数组没有任何影响】
slice方法：传递参数至少一个、最多两个参数。【起始索引值、结束索引值）
splice:可以对于起始数组进行切割，返回一个新数组【对于起始数组是有影响的】
第一个参数：切割的起始位置索引值，第二个参数：切割元素的长度

<script>
   //splice插入 
  var arr=["hello","deca","and","queen",1,2,3,4];  
  //替换:代表从起始数组索引值2切割出两个元素，使用mama,haha进行替换。
  var arr1=arr.splice(2,2,"mama","haha");
  console.log(arr1);
  console.log(arr);
  //splice:可以对于当前数组进行切割、插入、替换元素操
  //插入：代表从索引值为2的地方切割出零个元素，插入进一个元素lili
  var arr2=arr.splice(2,0,"lili");
  console.log(arr2);
  console.log(arr);
</script>

三、数组的练习

3.1练习1：

问题:请你设计一个程序，需要声明一个函数rev(arr,n)。

比如：【1,2,3,4,5】 1 当前rev函数返回一个数组【5,1,2,3,4】

【1,2,3,4,5】 2 当前rev函数返回一个数组【4,5,1,2,3】

<script>
    function rev(arr,n){
        for(i=1;i<=n;i++){
            var result=arr.pop();
            arr.unshift(result)
        }
        return arr;
    }
    var newarr=rev([1,2,3,4,5],2);
    console.log(newarr);
</script>

数组的pop方法：可以将数组尾处一项元素移除。【这个方法可以将移除掉元素返回】
数组的unshift方法：可以在数组头部添加元素【一个||多个】

3.2练习2

问题：请你设计一个程序，需要你封装一个函数Max(arr),需要将数组中最大的数值返回。

比如：【1,2,3,4,9,6】返回结果 9

<script>
    function max(arr){
        var m=0;
        for(var i=0;i<arr.length;i++){
            if (arr[i]>m){
                m=arr[i];
            }
        }
        return m;
    }
    var max_num =max([1,2,1,5,9]);
    console.log(max_num);
</script>

3.3练习3

问题：请你编写一个程序，需要封装一个函数uniq(arr),这个函数功能是可以将数组中重复元素去除。

比如: [1,2,2,3,4,4,5,6] 返回结果【1,2,3,4,5,6】

<script>
    function uniq(arr){
        var result=[];
        for(var i=0;i<arr.length;i++){
            if (result.indexOf(arr[i])==-1){
                result.push(arr[i]);
            }
        }
        return result;
    }
    var result1=uniq([1,1,2,5,5,3,8]);
    console.log(result1);
</script>

四、数据类型相等判断

概述：基本类型数据：数字、字符串、布尔、未定义类型、空对象

引用类型数据【Object】：函数、数组

注意：我们在书写代码的时候，代码存储计算机内存当中。计算机内存中分：五大区域。

常用区域：堆空间、栈空间

基本数据类型：依据的是数值是否一样。

这两个数值100，存储于内存当中栈空间。
而且num1与num2这两个变量，存储的就是‘房间’中主人公100

引用类型的变量

引用类型数据存储于内存当中堆空间。
而当前变量a与变量b，存储不是房间里面‘主人公’，存储的是‘门牌号’，由于‘门牌号’不同，因此这两个数据不相等。

门牌号：即为内存中地址

字符串属性与方法

一、字符串属性与方法

1.1length

概述：字符串拥有length属性，它主要的作用是可以获取到字符串中字符的个数（空格也会计入在内）

字符串的length属性，主要的作用是可以获取到字符个数。
length属性也经常结合循环语句一起使用，遍历字符串中每一个字符

1.2indexOf和lastIndexOf

概述：他们两者是字符串的方法，主要的作用是分别是：

indexOf:获取到第一个匹配到的字符的索引值。
lastIndexOf:获取到的最后一个匹配到的字符的索引值。

如果字符在字符串中没有出现，返回的是数字-1

1.3toLowerCase与toUpperCase

概述：他们两者也是字符串方法，他们两者主要的作用是分别是：

toLowerCase：将字符串中英文字符变为小写
toUpperCase:将字符串中英文字符变为大写

他们两者属于字符串方法：是将字符串英文字符变为大小写。【都是返回一个新的字符串，对于起始字符串没有影响】

1.4 search与split

概述：他们两者是字符串方法，他们主要的作用是：

search:它的作用是可以获取到某一个字符的索引值。
split:它的作用是可以将字符串通过某一个字符切割为数组。

1.5substring和substr方法

概述:他们两者也是字符串方法，他们主要的作用是：

substring:它是字符串方法，主要的作用是在父串当中切割出一个子串；str.substring(起始索引值，结束索引值) 包含起始索引值、不包含结束索引值

substr:它也是字符串方法，它主要的作用也是从父串当中切割出一个子串；str.substr(起始索引值，切割长度)

1.6replace与match方法

概述:他们两者也是字符串方法，主要的作用分别是：

replace:可以替换某一个字符串中复合条件的字符进行替换。
match:可以进行将某一个字符串中符合条件的第一个字符匹配出来，返回的是一个数组。

二、字符串的实战练习

2.1练习一

问题:请你设计一个程序，需要声明一个函数rev(str),这个函数功能如下：

比如：rev(“我爱你北京天安门”) 功能：返回一个结果是一个字符串门安...爱我

方法一：

<script>
    function rev(str){
        var result="";
        for(var i=str.length-1;i>=0;i--){
            result +=str[i];
        }
        return result;
    }
    var result_end=rev("我爱你塞北的雪");
    console.log(result_end);
</script>

方法二：

<script>
    function rev(str){
        var arr =str.split("");
        arr.reverse();
        var result=arr.join("")
        return result;
    }
    var newstr=rev("我爱你塞北的雪!");
    console.log(newstr);
</script>

字符串→数组：split
数组→字符串：join

2.2练习2

问题:请你设计一个程序，封装一个函数changeString(str),功能是将字符串中英文进行大小写转换返回结果。

比如:’ILikeBeiJing’ 返回结果：大小变为小写，小写变为大写返回。

<script>
    //练习二
    function string(str){
        var result='';
        for(var i=0;i<str.length;i++){
            if (str[i]<'a'){
                result +=str[i].toLowerCase();
            }else{
                result +=str[i].toUpperCase();
            }
        }
        return result;
    }
    var end=string("Tom");
    console.log(end);
</script>

2.3练习3

问题:请你编写一个程序，需要你设计一个函数fun（str），这个函数功能是将每一个英文单词的首个字母变为大写。

<script>
    //练习三
    function fun(str){
        var result='';
        var wd=str.split(" ");
        for (i=0;i<wd.length;i++){
            result +=wd[i][0].toUpperCase()+wd[i].substr(1)+' ';
        }
        return result;
    }
    var newstr=fun("i love you");
    console.log(newstr);
</script>

三、JSON数据格式

概述：JSON【JavaScript Object Nonation】 JS对象一种标记法。

在JS当中是有JSON数据格式，JSON数据格式是由一个大的花括号表，JSON数据格式在JS当中是引用类型数据。JSON数据格式作用如下：

l 前端工程师可以和后台工程师进行数据交换

l JSON数据格式可以通过KV对存储数据、读取、修改、添加数据。

语法格式：

{
   “name”: “小明”，
    “age”:12
}

JSON数据格式经常用存储、读取、修改、新增数据操作。
JSON数据格式是通过K V对进行存储数据。
JSON数据格式K务必需要加上双引号。

3.1存储数据

JSON数据格式常用功能即为存储数据
JSON存储数据的时候K-V键值对对存储（K：务必加上双引号）
JSON存储的时候右侧v可以是任意类型的数值

3.2读取数据

概述:JSON数据格式可以通过点语法||枚举法读取数据。

3.3修改已有数据

概述：我们也可以通过点语法||枚举法修改JSON数据格式里面的V；

3.4添加新的KV键值对

点语法||枚举法在没有当前这个K的时候，给JSON数据格式在添加新的KV
点语法||枚举法在有K情况，在修改JSON中KV

正则表达式

正则表达式（regular expression）是用于匹配字符串的一种模式、方法；

正则表达式定义最常用的方法是字面量，写法//，将规则写在//中间，不用加双引号。这两个反斜杠经常被称之为定界符

正则表达式在js当中属于引用数据类型。

一、字符串方法结合正则

split：根据匹配字符串切割父字符串
match：使用正则表达式与字符串相比较，返回一个包含匹配结果的数组
search：使用正则表达式或指定字符串进行搜索，返回第一个出现的匹配项的下角标
replace：使用正则表达式和字符串比较，然后使用新的字符串来替换被匹配的字符串

正则表达式方法：

exec：在目标字符串中执行一次正则匹配操作
test：测试当前正则是否能匹配目标字符串

1.1字符串split

如上图中用空格切割字符串，由于字符串之间的空格数量是不等的，如果只是用空格切割会切割出很多空格出来，所以此处用正则的、s+来进行切割；
\s:在JS中\s表示一个空格
+:在正则中+代表量词，表示连续出现的次数大于等于1

1.2字符串match

match字符串是获取到第一个符合条件的字符串，并返回数组
在正则中，g即global：他的主要作用是可以将全部符合条件的字符匹配出来
修饰符：只能放在右侧边界符后面

<script>
    var str1="aaaa o o bbb o    o aaa";
    var arr2 =str1.match(/o\s+o/g);
    console.log(arr2);
</script>

1.3search字符串

值得注意的是，修饰符g对search是没有用的，他只能返回第一个符合条件的字符的索引值

1.4replace结合正则使用

上图中题目不用正则也可以办到，但是若是需要替换很多个相同字符就需要用到正则，如下：

<script>
    var str="aa   b    c  d e    f   ";
    var str2=str.replace(/\s+/g,'');
    console.log(str2);
</script>

1.5 exec方法

exec是属于正则表达式的方法，作用是在目标字符串中进行一次匹配

exec是一个正则的方法，是要给正则打点且传递的参数是字符串
exec只能进行一次匹配，加g是没有用的

<script>
    var str="ooooo  0 0  ooooooooooo";
    var reg=/o\s+0\s+0\s+o/;
    var arr=reg.exec(str);
    console.log(arr);
</script>

1.6正则方法test

test是正则表达式的方法，主要作用是检测正则表达式当中的数据，是否在目标字符串中出现，如果出现返回布尔值true否则返回布尔值false

二、字符集

2.1简单类：就是任意多个字符进行集合书写，多个字符连续书写

比如：[abc]

简单类就是把多个字符聚集在一起进行匹配，只能匹配某一个符合条件的字符
如上图需要匹配abc和bbc，后面两个字母是一样的，前面两个字母可以用简单类进行书写[ab]里面选择一个匹配。

2.2 范围类

有时匹配的东西过多，而且类型有相同，全部输入太麻烦，可以使用范围类，中间加一个横杠

比如：[0-9] [A-Z] [a-z]

范围类表示的是匹配的是一个字符，所以此处要在匹配数据的后面跟一个加号，表示连续一个或多个

2.3组合类

允许用中括号匹配不同类型的单个字符，或者是一类及多类，或者一些单一的符号

比如：[0-9a-z]

注意两个类型之间没有分隔符

三、修饰符和边界符

修饰符：

g 修饰符用于执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
i 修饰符用于执行对大小写不敏感的匹配

边界符：

^ 开头表示字符串必须以^后面的内容作为开头
$ 结尾表示$前面匹配的结果必须位于字符串最后

要分清字符串在边界符的前面还是后面
^：一定要出现在第一个定界符的后面
$：一定要出现在第二个定界符的前面
而且边界符二者可以同时出现

四、预定义类

\d [0-9] \d可以匹配一个任意的数字字符

\D [^0-9] \D 匹配任意一个不是数字的字符

\s 可以匹配任意的空白。

\S 可以匹配任意的不是空白的字符。

\w 可以匹配任意的字母、数字或下划线。

\W 可以匹配任意的字母、数字、下划线以外的内容。

五、量词

如果需要将正则的某个符号连续匹配多次，可以使用量词对符号进行修饰。量词的写法：{}，内部书写对应的数字，表示量词是多少。

{n}	硬性量词	对应零次或者n次
{n,m}	软性量词	至少出现n次但不超过m次（中间不能有空格）
{n,}	软性量词	至少出现n次
?	软性量词	出现零次或者一次
*	软性量词	出现零次或多次（任意次）
+	软性量词	出现一次或多次（至少一次）

n代表一个数字，表示匹配数据连续出现的次数为N次

六、分组和中文匹配

分组：

正则中使用()表示分组，内部的内容会作为一个整体进行操作。后期如果小括号后面有量词，表示小括号内部整体重复匹配多少次。

中文匹配：

固定字符集写法：[\u4e00-\u9fa5]，可以匹配一个任意的中文汉字。

JS基础语法进阶

1.1三元运算符

概述:三元运算符是由三部分组成，使用语法如下：

注意：三元运算符在实战当中，经常给变量进行赋值。

A？B:C

三元运算符A：它需要的是一个布尔值（其他类型数值也可以，但是需要隐士转换为布尔值）
如果A部分为布尔值真，返回结果即为B。如果布尔值为假的，返回结果即为C
与C：可以是任意类型数值、或者是一些表达式

三元运算符：在实际工作中常用来给变量赋值

var age = true ? 16 : NaN;

1.2类数组对象-arguments

概述:函数体中拥有一个引用类型数据arguments。类数组存在意义，在函数没有形参情况下，在函数体中可以获取到传递给函数实参。

【类数组对象:类数组对象不是数组，类似数组，因为只能使用数组的length属性，不能使用数组的方法】

<script type="text/javascript">
   //函数的函数体中才有类数组对象
   function fun (){
      //类数组对象:是引用类型数据
      //类数组对象存在意义：可以在没有形参情况下，获取函数实参
      var sum = 0;
      for(var i = 0 ; i < arguments.length;i++){
              sum += arguments[i];
      }
      console.log(sum);
      //类数组：arguments类数组对象（用中括号表示），因为只能使用数组length属性值
      //数组的方法都不能使用
      //arguments.pop();  这种写法即为错误的，因为类数组没有length属性值
   }
   fun(1,2,3,4,5,6,7,8,9,10);
</script>

1.3闭包

概述:闭包:闭包即为一个可以访问其他作用域中的变量，这样的一个函数即为闭包。

<script type="text/javascript">
   //全局变量num = 100
   var num = 100;
   //声明一个函数
   function fun (){
         num++;
        console.log(num);
   }
   //调用函数
   fun();
   fun();
   fun();
</script>

当函数fun第一次调用时候:在函数作用域中没有变量num，因此会沿着作用域链向上（全局）查询
当函数fun第一次执行的时候，将全局变量num由100变为101
当函数fun第二次执行的时候，将全局变量num由101变为102
当函数fun第三次执行的时候，将全局变量num由102变为103

1.3.1闭包经典面试题

<script type="text/javascript">
    //声明的第一个函数[外层函数]
   function outer(x){
     console.log("我是outer函数体，执行一次");
     //声明第二个函数【内层函数】
     function inner(y){
         console.log(x + y);
     }
     inner(200);
   }
   outer(100);
</script>

当inner函数执行的时候，inner作用域中没有局部变量x，因此沿着作用域链向上查询借用
x=100，y=200,因此打印的结果300

1.3.2闭包经典习题2

<script>
    function outer(){
        a=100;
        function inner(){
            a+=10;
            console.log(a);
        }
        return inner;
    }
    var result=outer();
        result();
        result();
    var result1=outer();
        result1();
        result1();
</script>

当outer函数第一次执行的时候，声明了一个局部变量a = 100；以及声明了第一个inner函数声明部分并且把inner函数声明部分返回。
当后面部分执行的时候，在自身作用域中没有变量a，因此沿着作用域链向上查询【outer】，
而且每一次调用a数值在100基础上加上10

DOM

一、DOM认知

问题:JavaScript是由几部分组成的呀？

ECMAScript：简称【ES】，它是欧洲计算机协会，大概每年的六月中旬定制语法规范。
DOM：全称【document object model】即为文档对象模型
BOM：全称【browser object model】即为浏览器对象模型

1.1节点树

概述:节点即为标签。节点之间这种关系，我们称之为‘节点树’。

DOM【document object model】:文档对象模型，可以理解为是整个节点树最外层‘根元素’。

DOM其实就是JS语言中内置引用类型document对象，DOM对象经常用来操作节点（标签）

比如：操作节点样式、属性、文本等等。

1.2DOM属性

概述:DOM【document object model】：它在JS当中，是引用类型数据，官方给我们提供很多属性、方法进行操作。

<script>
    //DOC常用属性
    //documentElement:获取节点树html标签
    console.log(document.documengtElement);
    //head：获取节点树的head标签
    console.log(document.head);
    //title：获取节点数的title标签
    console.log(document.title);
    //body:获取节点树中的body标签
    console.log(document.body);
</script>

1.3DOM方法

概述:DOM对象，官方也给我们提供很多方法用来操作节点树上的标签。

getElementById:它是DOM对象方法，可以通过标签ID选择器，在JS当中获取标签

getElementById方法：可以通过标签ID选择获取对应的节点
一般我们将script标签放在程序最底部
不管节点（标签）在网页中嵌套关系如何让复杂，都可以通过这个方法获取到，即可以获取任意位置的标签
注意：标签（节点）在JS当中属于引用类型数据

1.4操作节点的属性

概述：我们可以通过DOM方法获取到节点树上的任意节点（标签），通过点语法来操作节点属性、文本和样式等

<div id="box" class="cur">你好哇</div>
//其中id和class是属性，你好哇是文本

<script>
    var div=document.getElementById("box");
    //获取节点属性
    console.log(div.id);
    //获取class属性需要用className
    console.log(div.className);
    //设置节点属性值
    console.log(div.id="nn");
</script>

可以通过DOM方法获取节点，进而操作节点属性
通过节点名字利用点语法【属性名字】，可以获取节点某一个属性的属性值，也可以通过JS动态设置新的属性值
class属性值需要通过className获取

1.5操作节点文本

概述：可以通过点语法操作节点的文本

注意：操作节点本文有两种情况

操作表单元素文本，需要通过value属性操作
操作非表单元素文本，需要通过innerHTML属性操作

<script>
    //操作非表单元素
    var p=document.getElementById("no1");
    //获取文本
    console.log(p.innerHTML);
    //修改文本
    p.innerHTML="芜湖";
    //操作非表单元素
    var input_dom=document.getElementById("no2");
    //获取文本
    console.log(input_dom.value);
    //修改文本
    input_dom.value="改一下";
    console.log(input_dom.value);

</script>

可以通过Js动态操作节点文本
表单元素需要通过value属性进行操作文本
非表单元素需要通过innerHTML属性操作文本

1.6操作节点样式

概述：可以利用DOM方法获取节点，操作节点行内样式

样式：层叠样式表，样式可以美化网页，可以让元素通过浮动、定位改变他们在网页中的位置

样式分为三种写法：行内样式、内部样式、外部样式

行内样式

<div style=width:100px;height:100px;color:red;background-color:aquamarine>你好哇 </div>

内部样式

<style>
        .container{
            color: red;
            width: 200px;
            font-size: 30px;
        }
    </style>
//写在head里面，title下面，可以使用标签筛选器，类筛选器等等，选择单个标签指定样式

外链标签

//外链标签需要新建一个css文件，在文件中直接书写样式内容，通过link标签在需要使用的文件中引入css文件样式
<link rel="stylesheet" href="css1.css">

操作节点样式：

<script>
    var div = document.getElementById("no1");
    //获取行内样式
    console.log(div.style);
    console.log(div.style.color);
    //设置行内样式
    div.style.color="blue";
    div.style.width="200px";
</script>

在JS当中点语法操作的是行内样式
通过JS代码可以获取和设置行内样式（设置时需要用字符串且部分需要带单位px）
节点样式：background-color,font-size等等（中间带有横线的），变为驼峰写法

二、事件绑定

概述：在网站中，用户经常用鼠标移上某个元素，单击某一元素，这个元素可以对用户这个行为进行响应。这种现象称为“事件绑定”，是人和机器的交互

注意：在JS中只有标签才可以绑定事件。数组、JSON、函数、变量、循环语句这些都不能绑定事件的。

语法格式：

element.onxxxx=function(){
}

onxxxx:这些事件名字都是小写的
右侧部分是一个函数（事件处理函数）：当用户触发事件的时候才会执行一次

2.1onclick和ondbclick

概述：我们可以使用onclick和ondbclick进行单击或双击事件

<script>
    //给元素绑定单击（双击事件只要换onclick即可）事件
    var div=document.getElementById("box");
    div.onclick=function(){
        //修改背景颜色
        div.style.backgroundColor="red";
        //修改文字大小
        div.style.fontSize="40px";
    }
</script>

右侧函数（事件处理函数）：当用户触发事件的时候才会执行
可以给任意一个元素绑定单击事件，一般给非表单元素绑定事件

2.2信号量思想

信号量：就是一个全局变量，可以左右程序的走向

例如：单击元素每单击一次字体大小增加1，信号量即为i

<script>
    //获取节点
    var p=document.getElementById("p");
    //声明一个全局变量为字号默认值12px
    var i=12;
    //绑定单击事件
    p.onclick=function(){
        //需要信号量雷加
        i++;
       
        //进行条件判断
        if(i>20){
            i=20;
        }
         //修改标签的字体大小
         p.style.fontSize=i+"px"; 
    }
</script>

案例二：轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            position: relative;
            width: 400px;
            height: 200px;
            margin:100px auto;
            border:1px solid black; 
        }
        img{
            width: 400px;
            height: 200px;
        }
        #lbtn{
            position: absolute;
            width: 40px;
            height: 20px;
            left:0px;
            top:40%;

        } 
        #rbtn{
            position: absolute;
            width: 40px;
            height: 20px;
            right:0px;
            top:40%;

        }
    </style>
</head>
<body>
    <div>
        <!-- &lt为小于号,&gt为大于号 -->
        <button id="lbtn">&lt;</button>
        <img id="cur" src="./0.jpeg">
        <button id="rbtn">&gt;</button>
    </div>
</body>
</html>
<script>
    //获取节点
    var rbtn=document.getElementById("rbtn");
    var lbtn=document.getElementById("lbtn");
    //获取图片节点
    var img=document.getElementById("cur");
    //定义信号量
    var idx=0;
    //绑定单击事件
    rbtn.onclick=function(){
        idx++;
        idx=idx>3 ? 0:idx;
        img.src="./" + idx +".jpeg";
    }
    lbtn.onclick=function(){
        idx--;
        idx=idx<0 ? 3:idx;
        img.src="./" + idx +".jpeg";
    }
</script>

2.3onmouseenter和onmouseleave

概述：任意节点，都可以给他们添加鼠标上移和移除事件

鼠标进入：onmouseenter或onmouseover

鼠标移除：onmouseleave或onmouseout

<script>
    //获取节点
    var img=document.getElementById("box");
    //绑定鼠标进入事件
    img.onmouseenter=function(){
        img.src="./1.jpeg";
    }
    //绑定鼠标移出事件
    img.onmouseleave=function(){
        img.src="./0.jpeg";
    }
</script>

任意一个节点可以同时绑定多个事件

2.3.1淘宝商品特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
           margin: 0;
           padding: 0; 
        }
        div{
            width: 400px;
            height: 200px; 
            border: 1px solid blue;
        }
        img{
            width: 300px ;
            height: 150px;
        }
        .money{
            color: red;
            font-size: 20px;
            font-weight: bold;

        }
    </style>
</head>
<body>
    <div id="no1">
        <p><img src="./0.jpeg" alt=""></p>
        <p class="money" id="cur">$100000</p>
    </div>
</body>
</html>
<script>
    //获取节点
    var div=document.getElementById('no1');
    //添加事件
    div.onmouseenter=function(){
        div.style.border="1px solid red";
    }
    div.onmouseleave=function(){
        div.style.border="1px solid blue";
    }
</script>

2.4onfouse和onblur

概述：可以给任意元素绑定，但是一般与表单元素input使用

<body>
    <p>
        请您输入您的手机号：<input type="text" id="cur">
        <span id="phone"></span>
    </p>
</body>
</html>
<script>
    //获取节点
    var input=document.getElementById("cur");
    var span=document.getElementById("phone");
    //绑定聚焦事件
    input.onfocus=function(){
        //文字颜色为绿色
        input.style.color="green";
    }
    input.onblur=function(){
        //获取文本框中的文本
        var txt=input.value;
        //正则表达：验证字符串是不是手机格式
        if(/^1[3456789]\d{9}/.test(txt)){
            span.innerHTML="是手机格式";
        }else{
            span.innerHTML="不是手机格式";
        }
    }
</script>

2.5鼠标系列的事件

概述：我们可以给任意节点绑定鼠标系列事件

onmousedown:鼠标按下事件
onmousemove:鼠标移动事件
onmouseup:鼠标抬起事件

<script>
    //鼠标按下
    document.onmousedown=function(){
    document.body.style.background="red";
    }
    //鼠标移动事件
    document.onmousemove=function(){
        var R=parseInt(Math.random()*255);
        var G=parseInt(Math.random()*255);
        var B=parseInt(Math.random()*255);
        document.body.style.background="rgb("+R+","+G+","+B+")";
    }
    //鼠标抬起事件
    document.onmouseup=function(){
        document.body.style.background="white";
    }
</script>

三、获取节点的其他方法

概述：DOM对象给我们提供了很多方法来获取节点，方法如下：

getElementById:通过节点的ID属性值获取节点
getElementsByTagName:通过标签名字获取节点，此方法返回的是一个数组，数组里面就是节点
getElementsByClassName:通过标签的class属性值获取相应的节点，返回的是数组，数组里面是节点
querySelector：通过任意的选择S器获取某一个节点

示例1：通过getElementsByTagName获取节点，将偶数个li标签中的内容变为蓝色

<script>
    var arr=document.getElementsByTagName("li");
    for(var i=0;i<=arr.length;i++){
        if (i%2 == 0){
            arr[i].style.color="blue";
        }
    }
</script>

getElementsByTagName和方法通过标签名字获取全部节点
getElementsByClassName和getElementsByTagName这两个方法返回的是一个类数组（类数组只能使用length方法）【数组里面的元素才是节点】
标签才可以设置样式，数组不能设置
不管节点嵌套多复杂都可以获取节点
querySelector可以通过热议选择器【标签、id、类、并集、交集等】只能获取页面从上往下的第一个符合的节点

3.1批量添加事件

概述：在一些特定的场景下，有很多相同的节点，需要添加相同的事件

示例：单击文字变为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width:100%;
            /* 去除每行的项目符号 */
            list-style: none;
            height:60px;
            background:#eee;
        }
        li{
            /* 浮动 */
            float:left;
            /* 页边距 */
            padding:20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>学习</li>
        <li>娱乐</li>
        <li>歌曲</li>
        <li>文化</li>
        <li>历史</li>
    </ul>
</body>
</html>
<script>
    //批量添加事件：1、获取全部节点；2、循环语句遍历数组，给数组里面每一个元素绑定事件
    var liArr =document.getElementsByTagName("li");
    for(var i=0;i<liArr.length;i++){
        +function(index){
            //在每一个IIFE作用域里面给元素绑定单击事件
            liArr[index].onclick=function(){
                //单击的时候触发事件处理函数
                liArr[index].style.color="red";
            }
        }(i);
    }
</script>

IIFE在声明表达式形式的函数的同时执行一次
上面代码中，若不加IIFE直接在循环语句里面嵌套事件处理函数的话，因为我们的元素绑定事件里面的函数需要触发才会执行，但是外层的循环是要进行完的，所以执行完循环语句代码之后，i就等于5了，相当于全局变量i等于5，而此时触发事件的话，事件处理函数会沿着作用域链去找i的值，而此时i等于5，且一直都等于5
所以，需要在for循环里面添加一个IIFE（套在事件处理函数的外层），且每次循环都创建一个IIFE，此时事件处理函数执行的时候，i传递的就不是全局变量的i，找到的是每一个独立的IIFE的作用域中的i

3.2函数的上下文this

概述：在函数的函数体中是有函数的上下文this概念。当用户触发了元素事件的时候，函数的上下文即触发的元素

例如上节中批量添加事件的案例：

<script>
    var liArr=document.getElementsByTagName("li");
    for(var i=0;i<liArr.length;i++){
        liArr[i].onclick=function(){
            this.style.color="red";
        }
    }
</script>

3.3网易云音乐效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width:100% ;
            height: 60px;
            background:#c20c0c   ;
        }
        ul{
            width:50%;
            list-style: none;
            height: 60%;
            margin: 0 auto;
        }
        ul li{
            float:left;
            color:white;
            font-size: 12px;
            width: 60px;
            height: 20px;
            text-align:center;
            margin:20px;
        }

    </style>
</head>
<body>
    <div class="container">
    <ul>
        <li>推荐</li>
        <li>排行榜</li>
        <li>歌单</li>
        <li>主播电台</li>
        <li>歌手</li>
        <li>新碟上架</li>
    </ul>
    </div>
</body>
</html>
<script>
    //获取全部节点
    var arr=document.getElementsByTagName("li");
    //批量添加事件
    for (var i=0;i<arr.length;i++){
        +function(index){
            //每一个节点绑定鼠标移上事件
            arr[index].onmouseenter=function(){
                //当鼠标移上某一个节点得时候
                //将全部li节点样式恢复成起始状态一致
                for(var j=0;j<arr.length;j++){
                    arr[j].style.background="#c20c0c";
                    arr[j].style.borderRadius="none";
                }
                //当前鼠标移上得节点样式进行修改
            arr[index].style.background="rgb(0,0,0,0.3)" ;
            arr[index].style.borderRadius="10px 10px 10px 10px";
            }
            arr[index].onmouseleave=function(){
                //当鼠标移下某一个节点得时候，将全部li节点样式恢复成和起始样式一致
                for(var j=0;j<arr.length;j++){
                    arr[j].style.background="#c20c0c";
                    arr[j].style.borderRadius="npne"
                }
            }
        }(i)
    }
</script>

3.4淘宝二级菜单样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 80%;
            height: 400px;
            margin: 30px auto;
            border:1px solid black;
        }
        .container div{
            float:left;
        }
        #left{
            width: 20%;
            height: 100%;
        }
        #right{
            width: 79%;
            height: 100%;
            border-left: 1px solid black;
        }
        #left ul{
            width: 100%;
            list-style: none;
        }
        #left ul li{
            text-align: center;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="left">
            <ul>
                <li>女装</li>
                <li>男装</li>
                <li>童装</li>
                <li>玩具</li>
                <li>用品</li>
            </ul>
        </div>
        <div id="right">
            购买得物品
        </div>
    </div>
</body>
</html>
<script>
    //获取所有li节点
    var liarr=document.getElementsByTagName('li');
    var rt=document.getElementById("right");
    for(var i=0;i<liarr.length;i++){
        //为每一个li添加事件
        +function(index){
            //添加鼠标移上事件
            liarr[index].onmouseenter=function(){
                for(var j=0;j<liarr.length;j++){
                    liarr[j].style.background="white"
                }
                liarr[index].style.background="pink";
                rt.style.display="block";
                rt.innerHTML="购买得商品是"+index;
            }
            //鼠标以下事件
            liarr[index].onmouseleave=function(){
                for(var j=0;j<liarr.length;j++){
                    rt.style.display="none";
                }
            }    
        }(i)
    }
</script>

事件对象

一、事件对象

概述：任意节点树上得节点（标签）。都可以绑定一个或多个事件。当用户触发事件得时候，系统会自动给事件处理函数传递实参，而这个参数就是事件对象，可以传递很多信息

<script>
  //获取节点
  var div = document.querySelector("div");
  div.onclick = function(event){
     //对于高级浏览器：谷歌、IE8以上的浏览器---->event
     //对于低级浏览器：IE8以下的，事件对象作为BOM对象属性
      var e = event||window.event;
      console.log(e);
  }
</script>

当事件处理函数执行得时候，系统会自动注入实参，我们用形参接收即事件对象
在不同浏览器中事件对象是有兼容性问题得，使用短路语句进行兼容

1.1获取鼠标位置

概述：当用户触发时间的时候，系统会自动给事件处理函数注入实参，他可以给我们提供鼠标得位置信息

1.1.1screenX||screenY

概述：他们两者是事件对象属性，主要可以获取鼠标位置。获取鼠标位置零零点在电脑屏幕左上角。

1.1.2pageX||pageY

概述：他们两者也是事件对象属性，主要作用也是获取鼠标位置。是网页主题部分左上角为零零点

1.1.3clientX||clientY

概述：他们两者也是事件对象属性，主要作用是获取鼠标位置。但他得零零点是按照可视区域左上角为零零点

1.1.4offsetX||offsetY

概述：他们两者也是事件对象属性，他们两者主要的作用也是获取鼠标位置。

获取数据类似pageX||pageY。但是这个获取数据零零点，会收到子元素坐标体系影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 10000px;
        }
        .outer{
            position: fixed;
            width: 600px;
            height: 300px;
            background: skyblue;
            left: 30%;
            top: 30px;
        }
        .inner{
            width: 300px;
            height: 150px;
            background: red;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    //获取节点
    var inn = document.querySelector('.inner');
    //鼠标在整个网页当中移动
    document.onmousemove = function(event){
            //短路语法进行兼容
            var e = event||window.event;
            inn.innerHTML  = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";
            inn.innerHTML  += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>";
            inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >";
            inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY;
    }
 </script>

1.2原生JS实现拖拽效果

概述:在前端领域当中拖拽是一个非常常见效果。拖拽三板斧鼠标按下=>鼠标移动=>鼠标抬起。

<script type="text/javascript">
  //移除事情
  var div = document.querySelector('.cur');
  //鼠标按下
  div.onmousedown = function(event){
      //短路语法兼容事件对象
      var e = event||window.event;
      //获取鼠标距离元素左侧顶部数据
      var startX = e.offsetX;
      var startY = e.offsetY;
      //鼠标在整个网页中移动
      document.onmousemove = function(event1){
          //短路语法兼容事件对象
          var e1 = event1||window.event;
          //元素进行拖拽
          div.style.left  = e1.clientX - startX +"px";
          div.style.top = e1.clientY - startY +"px";
      }
  }
  //鼠标抬起事情----将鼠标移动事件移除
  document.onmouseup =function(){
       document.onmousemove = null;
  }
</script>

可以将元素事件移除：就是给这个元素绑定多次事件。让后者覆盖前者。

二

posted @ 2022-11-03 12:33 mykoala 阅读(394) 评论(0) 收藏举报

刷新页面返回顶部

基础语法

alert 警告框 | prompt 提示框 | console 控制台

整数字面量 | 浮点数 | 科学计数法 | 特殊值 | Indinity | NaN

变量的基本使用 | 变量使用注意事项 | 其他声明方式 | 命名标识符规范 | 变量声明提升

数字转换为字符串 | 字符串转换为数字

Number类型数值参与 | 其他类型数据参与（不包含字符串类型） | string类型参与

Number类型的数值参与 | 其他类型数据参与（不包含字符串类型）| 字符串类型参与

布尔类型数值参与运算 | 其他类型数据参与

流程控制语句

if条件语句的基本使用 | else关键字 | 多分支if条件语句 | if条件语句嵌套使用

for循环语句的使用 | for循环语句其他书写方式 | 穷举思想 | 循环语句嵌套使用

关键字break | 关键字continue

函数

函数简介 | 关键字形式函数 | 形参和实参 | 变量认知 | 作用域 | 关键字return | 函数综合练习 | 表达式形式函数 | 关键字形式函数与表达式形式函数区别 | 回调函数 | 递归 | IIFE | IIFE其他写法

数组

length属性 | push和pop | unshift和shift方法 | join和reverse方法 | indexOf和includes方法 | slice和splice方法

字符串属性与方法

length | indexOf和lastIndexOf | toLowerCase与toUpperCase | search与split | substring和substr方法 | replace与match方法

正则表达式

字符串split | 字符串match | search字符串 | replace结合正则使用 | exec方法 | 正则方法test

JS基础语法进阶

三元运算符 | 类数组对象-arguments | 闭包

DOM

节点树 | DOM属性 | DOM方法 | 操作节点的属性 | 操作节点文本 | 操作节点样式

onclick和ondbclick | 信号量思想 | onmouseenter和onmouseleave | onfouse和onblur | 鼠标系列的事件

批量添加事件 | 函数的上下文this | 网易云音乐效果 | 淘宝二级菜单样式设置

事件对象

获取鼠标位置 | screenX||screenY | pageX||pageY | clientX||clientY | offsetX||offsetY | 原生JS实现拖拽效果

JS

流程控制语句

函数

数组

字符串属性与方法

正则表达式

三、修饰符和边界符

JS基础语法进阶

DOM

事件对象

公告