JavaScript第1天

认识JavaScript

前端三大块

HTML => 超文本标记语言
CSS => 层叠样式表
JS(JavaScript) => 网页的行为

三大核心

BOM(Browser Object Model) 浏览器对象模型私人: 提供了一套操作浏览器的属性与方法
DOM(Document Object Model) 文档对象模式私人: 提供了一套操作文档的属性与方法
ECMAScript => JS的语法规则私人: 告诉我们JS应该怎么去写,以哪一种规范去写

JS基础语法

一.JS里面的注释

给编程人员看的

单行注释 => 就是两个斜杠

// 这就是JS里面的一个单行注释

多行注释

/** 
 * 这是一个多行注释
 * 注释第二行
 *  */
/* 
    这也是一个多行注释
    注释第二行
 */

二.JS的书写

行内式(一般不推荐) 就是直接将JS代码写在HTML标签的身上

非a标签

<div onclick="JS代码"></div>

a标签

<a href="javascript:JS代码;"></a>

<!-- 
    注意点: 
        当我们输出一个字符串的时候,如果使用到引号的嵌套
        如果外面使用双引号,那么里面就使用单引号
        如果外面使用单引号,那么里面就使用双引号
-->
<!-- a标签的形式 -->
<a href="javascript:alert('世上只有妈妈好!');">这是一个A标签</a>
<!-- 非a标签的形式 -->
<div onclick='alert("我是一只小小鸟")'>这是给div</div>

内嵌式(推荐) 将JS代码写在script双标签里面,一般写在body的尾标签前面

<html>
</html>
<body>
    ....
    ....
    <script>
        //写JS代码 => 这种方式就是内嵌式,将JS代码写在Script双标签里面
    </script>
</body>

外链式(强烈推荐) 一般情况在外部定义一个名为js文件夹,在文件夹里面写*.js文件
- 写一个名为js文件夹
- 在js这个文件夹里面写一个 wy.js,utils.js,xxx.js JS文件
- 在HTML网页当中使用script双标签里面有src属性引入外部的js路径
- 具体看代码

补充第一句JS代码 alert("弹出")

三.变量

在我们以前学过数学,数学里面有一个未知数在我们的JS定义变量也是这么写的

//数学 => x是一个未知数,这个未知数里面存储了一个数字,数字是10
x = 10;
//JS => y是一个变量,这个变量里面存储了一个数字,数字是20
y = 20;

但是我们在JS定义变量不仅仅存储数字,还可以存储其他的,比如姓名,年龄,性别,所以在JS里面需要定义一个关键字 var,使用var关键字来声明变量

//在JS里面定义变量
var x = 10;
var y = 20;
var name = "张三"
var age = 18;
var gender = "男"

//定义变量
var name = "👲🏼"
var age = 18;
var gender = "男"

//可以输出出来
alert(name) //在页面当中弹出来
alert(age)
alert(gender)

四.检测变量的数据类型

我们在定义变量的时候可以定义数字 => var age = 18 => 这个数据类型Number 可以定义一个字符串 => var gender = '男'; var name = "张三" => 这个数据类型String 可以定义真假 => var b1 = true;var b2 = false => 这个数据类型Boolean 可以定义空 => var n1 = null => 这个数据类型就是Null 可以定义空 => var n2 = undefined => 这个数据类型就是 Undefined

数据类型的分类

基本数据类型
- Number,String,Boolean,Null,Undefined
复杂数据类型(引用数据类型)
- Object,Function,Array

//定义String类型
var a = "张三"
var b = '李四'
//定义一个undefined类型
var c = undefined
//定义null类型
var d = null
//定义boolean类型
var e = true
var f = false
//定义number类型
var g = 10

像这种可以直接可以使用肉眼能看出来这个数据类型,但是我们在后面会有很多种情况,用肉眼看不出来使用typeof去检测数据类型

//定义String类型
var a = "张三"
var b = '李四'
//定义一个undefined类型
var c = undefined
//定义null类型
var d = null
//定义boolean类型
var e = true
var f = false
//定义number类型
var g = 10

// 输出
alert(typeof a)
alert(typeof b)
alert(typeof c)
alert(typeof d)
alert(typeof e)
alert(typeof f)
alert(typeof g)

typeof的语法

typeof 变量

var name = "张三"
alert(typeof name)

typeof (变量)

var name = "李四"
alert(typeof (name))

var name = "张三"
//typeof 变量
// alert(typeof name)

//typeof (变量)
// alert(typeof 1+2) //number2
// alert(typeof (1+2))

//注意: 使用单引号或者是双引号包裹起来的都是字符串
alert(typeof ('111+222')) //检测出来是一个什么类型?

五.变量的交换

var a = 10;
var b = 20;
//将a和b进行交换 => 交换之后 a 的值是20, b 的值的是10
var c = a; //c 10
a = b //a 20        //注意: a 在这个变量已经使用var声明过一次了,当第二次使用a的时候就不需要再使用var声明
b = c //b 10        //b在定义的时候,已经声明过了,再次使用的时候就不需要使用var关键字声明b这个变量了
alert(a)
alert(b)

六.三个输出语句

alert() => 弹出

alert("弹出")

document.write() => 直接输出在页面当中

document.write("直接打印在页面当中")

console.log() => 打印在控制台上面

console.log("打印在控制台上")
/* 
    控制台
        1. 右键打开页面
        2. 按F12 或者是 检查
        3. 找到并点击Console
        4. 就可以看到输出的地方了
*/

//弹出
alert("弹出")
alert("你好!","我好!") //只能输出第一个

//直接输出在页面当中
document.write("直接输出在页面当中")
document.write("他好!","才是真的好!","千锋好滴") //可以输出多个

//打印在控制台当中
console.log("打印在控制台上面")
console.log("张三","李四","王五") //可以输出多个

七.变量的命名规则

规定必须要遵守,不遵守就会报错

JS里面的变量必须以数字,字母,下划线,$组成
JS里面的变量不能以数字开头
JS里面的变量不能使用关键字

/* 
    规定
        1. 必须以数字,字母,下划线,$组成
        2. 不能以数字开头
        3. 不能使用关键字
*/
// 必须以数字,字母,下划线,$组成
var a = 10; //可以的
// var @ = 20; //不可以 => 在JS里面,代码出现红色就是报错,代码出现黄色就是警告
// var a% = 30; //不可以
var a$ = 20;  //可以

// 不能以数字开头
// var 1OK = "OK" //不能以数字开头

//不能使用关键字 => 常见的关键字 有 default,break,var....
// var var = 20; //var是关键字
// var default = 30; //关键字...

规则建议遵守,但是可以不需要遵守

当我们在定义变量的时候,如果变量的名字由多个单词组成,那么需要使用到驼峰命名法(所谓的驼峰命名一般情况下是指小驼峰)
- 小驼峰 => 当由多个单词组成的时候,第一个单词首字母小写,后面的每一个单词首字母大写
比如
```
var userName = "张三"
```
- 大驼峰 => 当由多个单词组成的时候,所有的单词首字母大写
比如
```
var UserName = "李四"
```
在定义变量的时候,碰到多个单词也可以使用下划线_连接起来

var user_name = "张三"
var person_age = "李四"

八.数据类型的转换

将其他数据类型转换成Number

parseInt
parseFloat
Number

/* 
    拓展: NaN => not a number => 不是一个数字,他的数据类型是一个Number

    将其他数据类型转换成数值类型
    parseInt
        从第一位开始进行转换,如果可以转换,那么就进行转换,如果不能转换,那么就NaN 
        第二位继续开始转换,如果可以转换,那么就进行转换,如果不能转换,那么就停止转换
        后面的与第二位一样,依次类推
    parseFloat
        与第一个一样,将其他数据类型转换成数值类型,转换的规律也一样,但是parseFloat多认识一个小数点
    Number
    +
        当Boolean类型的true转换成Number类型的时候=>为1,false转换过来就是0,null转换过来就是0,其他的能转就转,不能转就是NaN
*/
var n1 = "998"  //就是Number类型的998
var n2 = '99.8' //就是一个Number类型的99
var n3 = "张三" //NaN
var n4 = true   //NaN
var n5 = false  //NaN
var n6 = null   //NaN
var n7 = undefined//NaN

//parseInt
// console.log(parseInt(n1),parseInt(n2),parseInt(n3),parseInt(n4),parseInt(n5),parseInt(n6),parseInt(n7))

//parseFloat
// console.log(parseFloat(n1),parseFloat(n2),parseFloat(n3),parseFloat(n4),parseFloat(n5),parseFloat(n6),parseFloat(n7))

//Number转换
// console.log(Number(n1),Number(n2),Number(n3),Number(n4),Number(n5),Number(n6),Number(n7))
// console.log(Number("123🍉"))

//+可以将其他数据类型转换成Number类型
console.log(+n1,+n2,+n3,+n4,+n5,+n6,+n7)

将其他数据类型转换成字符串类型

使用toString

var a = 10;
var b = null;
var c = undefined;
var d = true
var e = false;

直接使用+号

/* 
    使用toString转换成字符串类型
*/
// var a = 10;
// // var b = null;   //不能能使用toString转换
// // var c = undefined; //不能使用toString转换
// var d = true
// var e = false;

// console.log(typeof (a.toString()),typeof (d.toString()),typeof (e.toString()));

var a = 10;
var b = null;   //不能能使用toString转换
var c = undefined; //不能使用toString转换
var d = true
var e = false;

/* 可以使用+进行拼接 */
console.log(typeof (a+'1'),typeof (b+'🌏'),typeof (c+'🏓'),typeof (d+'🏸'),typeof (e+'🏀⚽'),typeof (1+''));

String() 所有的数据类型都可以转换成字符串

/* 
    使用toString转换成字符串类型
*/
// var a = 10;
// // var b = null;   //不能能使用toString转换
// // var c = undefined; //不能使用toString转换
// var d = true
// var e = false;

// console.log(typeof (a.toString()),typeof (d.toString()),typeof (e.toString()));


// var a = 10;
// var b = null;   //不能能使用toString转换
// var c = undefined; //不能使用toString转换
// var d = true
// var e = false;




/* 
    可以使用+进行拼接 
*/
// console.log(typeof (a+'1'),typeof (b+'🌏'),typeof (c+'🏓'),typeof (d+'🏸'),typeof (e+'🏀⚽'));



/* 
    String 将String后面括号里面的内容转换成字符串,赋值给前面的变量
*/
var s1 = String(123)
var s2 = String(true)
var s3 = String(false)
var s4 = String(null)
var s5 = String(undefined)
var s6 = String(NaN)
console.log(typeof s1,typeof s2,typeof s3,typeof s4,typeof s5,typeof s6);
console.log(s1,s2,s3,s4,s5,s6);

拓展+号
- 当+号的两边都没有字符串类型出现的时候,那么就是相加
- 当+号的两边但凡有一边出现字符串的时候,那么结果就是拼接
- 当+号单独出现在变量的前面的时候,那么就是将某一个数据类型转换成Number类型

/* 
    1. 当+号的两边都没有字符串出现,那么结果就是相加
    2. 当+号的两边但凡有一边出现字符串,那么结果就是拼接
    3. 当+号单独出现在变量的前面的时候,那么就是将其他数据类型转换成Number
*/
// 当+号的两边都没有字符串出现,那么结果就是相加
// console.log(1+2,3+2,true+1,false+1,null+998,undefined+2); //3,5,2,1,998

// 当+号的两边但凡有一边出现字符串,那么结果就是拼接
// console.log(1+'2','3'+2,true+'1','undefined'+2);//12,32,true1,undefined2
// console.log('1'+2+3+'4'+(5+6));//👋1234567 123411 👋6411

// 当+号单独出现在变量的前面的时候,那么就是将其他数据类型转换成Number
console.log(+'899',+true,+false,+null,+undefined,+'123张三');

将其他数据类型的转换成Boolean 记住5个false => 数字0,空字符串'',null,undefined,NaN,剩下都是true

console.log(Boolean(0));//数字0转换boolean是false
console.log(Boolean(''));//空字符串转换boolean是false
console.log(Boolean(null));//null转换boolean是false
console.log(Boolean(undefined));//undefined转换boolean是false
console.log(Boolean(NaN));//NaN转换boolean是false

//剩下的都是true
console.log(Boolean(1));
console.log(Boolean(-1));
console.log(Boolean(' '));

拓展null和undefined的区别 null为空,表示我们在定义变量的时候,赋值为空 undefined为空,表示我们在定义变量的时候,没有赋值

/* 
    null 相当于空气,空气虽然是看不见,摸不着的,但是确实存在空气
    undefined 相当于真空,真空真的空
*/
var n1 = null;//我们在定义变量的时候赋值为null => 为空
var n2; //我们在定义变量的是没有赋值 undefined => 为空
var n3 = undefined;
console.log(n1, n2 , n3);

类型转换(了解)

强制类型转换 => 我们人为的通过一些手段将一种数据类型转换成另外一种数据类型比如: parseInt,parseFloat,Number,Boolean,String...
隐式类型的转换 => 我们在做一些运算的过程当中,程序会自己的将一种数据类型转换成另外一种数据类型比如: + 1+2 true+false

九.算术运算符

+
-
*
/
%(模余)

var a = 10;
var b = 3;
var c = true
var d = false
var e = null
var f = undefined;
console.log(a+b);//13
console.log(a-b);//7
console.log(b-c);//2
console.log(b-d);//3
console.log(b-f);//NaN

console.log(a*d);//0
console.log(a*c);//10

console.log(1/0);//在JS里面将0作为作为分母,会看做无限接近于0,而不等于0 Infinity=> 无穷大
console.log(-1/0);//-Infinity 无穷小

console.log(3%2);//余数

十.赋值运算符

=
+=
-=
*=
/=
%=

// = 其实就是一个赋值运算符
// 作用: 就是将等号右边的值赋值给等号左边的变量
var a = 10;
console.log(a);


// +=
// a += b   => a = a + b;
var b = 20;
console.log(a+=b); //a = a + b => 30


// -= 
// a -= b   => a = a - b
console.log(a-=b); // a = a - b => 10


// *= 
// a *= b => a = a * b
console.log(a *= b); // a = a * b;


// /= 
// a /= b   => a = a / b
console.log(a /= b); //a = a / b =>


// %/
// a %/ b  => a = a % b
console.log(a %= 3); //a = a % 3

十一.比较运算符

比较运算符得到的结果都是boolean

>
<
>=
<=
!=
==
===
!==

// 比较运算符
// - > 
// - < 
// - >= 
// - <=
// - !=
// - ==
// - ===
// - !==

console.log(1>2);
console.log(1<2);
console.log(1>=2);
console.log(1<=2);

console.log('998' == 998);//true => == 在比较内容的时候会发生隐式类型的转换
console.log('998' === 998);//false => === 不会发生隐式类型的转换

console.log('123' != 123); //false => 发生隐式类型的转换
console.log('123' !== 123); //true => 不发生类型的转换,字符串类型和数值类型不一样

十二.一元运算符(自增自减)

如果运算符在前,那么就先运算,后赋值如果运算符在后,那么就先赋值,后运算

++ 给变量加上一个值1
-- 给变量减上一个值1

//自增自减(一元运算符)
var a = 10;
var b = a ++  //运算符号在后面,那么后运算,先赋值,将a的值赋值一份给b,然a再进行自增(+1)
console.log(a,b); //11,10

var x = 20;
var y = --x; //运算符在前,那么先运算,后赋值,将x先-1,然后将运算之后的x赋值给y
console.log(x,y);//19,19

var n = 10;
console.log(n);  //10

var n1 = n++;   //n1 = 10,再运算,n=11
console.log(n1);//10
console.log(n); //11

var n2 = ++n; //n=12,n2=12
console.log(n2);//12
console.log(n); //12

var n3 = n--    //n3=12,n=11
console.log(n3);//12
console.log(n); //11

var n4 = --n //n4=10,n=10
console.log(n4);//10
console.log(n); // 10

var k = -2;
/* 
    var n1 = ++k    => k=-1,n1=-1
    var n2 = k++    => n2=-1,k=0
    var n3 = ++k    => n3=1,k=1
*/
//    -1  +  -1 + 1   + 1
alert(++k + k++ + ++k + k);

JavaScript第2天

回顾

注释

单行注释

// 单行

多行注释

/** 多行注释 */
/* 多行注释 */

变量

需要使用var关键字声明变量
变量名
- 规定
  - 必须要以数字,字母,下划线,$组成
  - 不能以数字开头
  - 不能使用关键字
- 规范
  - 当定义变量的时候,使用到多个单词,一般使用小驼峰(第一个单词首字母小写,后面的每一个单词首字母大写)
  - 多个单词使用下划线进行连接
数据类型
- 基本数据类型
  - number,string,null,undefined,boolean
- 复杂数据类型(引用数据类型)
  - object,function,array
- 可以使用typeof检测数据类型 typeof 变量 typeof (表达式)
其他数据类型转换成number类型
- parseInt => 先看第一位,如果第一位可以转,那么就进行转换,如果第一位不能转换,那么直接NaN(NaN是一个Number,全称 not a number) 再看第二位,如果第二位可以转换,那么就进行转换,如果不能转换,那么直接停止转换,后面的依次类推
- parseFloat => 转换规则与parseInt一样,但是比parseInt多认识一个小数点
- number => boolean的true转换成number为1,false为0,null为0,其他的能转就转,不能转为NaN
- + => 触发隐式类型的转换
其他数据类型转换成string类型
- String() => 所有的数据类型都可以转换成字符串
- toString => null和undefined不能转换成字符串
- + => 但凡+号两边有一边是字符串,那么结果一定是拼接
其他数据类型转换成boolean类型
- boolean => 需要记住5个为false(数字0,空的字符串,null,undefined,NaN)
算术运算符
- +,-,*,/,%
比较运算符
- >,>=,<,<=,==,===,!=,!==
赋值运算符
- =,+=,-=,*=,/=,%=
一元运算符
- ++,-- => 看运算符在前或者在后,如果运算符在前,那么就是前运算后赋值,如果运算符在后,那么就先赋值,后运算

知识点

一.三元运算符(三目运算符)

语法一

//定义一个变量
var a = 998
//语法规则: boolean类型?表达式1:表达式2
//当boolean类型为true的时候,那么就执行表达式1里面的内容,当boolean类型为false的时候,那么就执行表达式2里面的内容
a == '998' ? console.log("他们是相等的"):console.log("他们是不相等的")

语法二

var a = 998
//语法: var 变量 = boolean ? 表达式1 : 表达式2
// 当boolean类型为true的时候,就将表达式1的结果返回给变量
// 当boolean类型为false的时候,就将表达式2的结果返回给变量
var s = a == '998' ? '你好!' : '我好!'

/* 
    语法一
        boolean?前面:后面
            当boolean为true的时候,就执行前面的代码
            当boolean为false的时候,就执行后面的代码
*/
var a = 998
a === '998' ? console.log("我是前面") : console.log("我是后面")

// 举例
a < 777 ? a = 10 : a = 20;
console.log(a);


/* 
    语法二
        var 变量 = boolean ? 前面:后面
            当boolean为true的时候,那么就将前面的结果返回给变量
            当boolean为false的时候,那么就将后面的结果返回给变量
*/
var s = a === '20' ? 'a是20' : 'a不是20'
console.log(s);

var n = 0
/* 
    boolean类型的n++ -> 结果是0,n的结果是1
        注意: 触发隐式类型的转换,0转换成boolean类型为false,所以走后面的代码
    --n => 先运算,后赋值
        --1 => 0 => 后赋值,将值赋值给s
    所以s的值是0
*/
var s = n++ ? n++ : --n
console.log(s); //0,1

二.逻辑运算符

&& 并且相当于一把锁,但是需要两个钥匙才能打开 true && true => true true && false => false false && true => false false && false => false

计算机为了提高代码的运行效率,如果左边的内容为false,右边将不再执行
|| 或者相当于一把锁,有两把钥匙,其中一把钥匙就可以开锁 true || true => true true || false => true false || true => true false || false => false

计算机为了提高代码的运行效率,如果左边的内容为true,那么右边也不再执行
! 非真既假,非假既真 !true => false !false => true

三.if语句

if分支 if相当于如果的意思

//如果boolean类型为true,那么就执行if后面大括号里面的代码
//如果boolean类型为false,那么直接跳转if后面大括号里面代码
if(boolean){

}

/* 
    if后面boolean类型为true,就执行if后面大括号里面的内容
    if后面boolean类型为false,就直接跳过if后面大括号里面的内容
*/
var a = 10;
if (a === '10') {
    console.log("boolean是为true")
}

console.log("程序结束");

ifelse分支 else相当否则

var a = 10;
//当boolean类型为true到时候,那么就执行大括号里面的内容
//当boolean类型为false的时候,那么就执行else后面大括号里面的内容
if(boolean){

}else{

}

/* 
    if分支
        if后面boolean类型为true,就执行if后面大括号里面的内容
        if后面boolean类型为false,就直接跳过if后面大括号里面的内容
*/
var a = 10;
if (a === '10') {
    console.log("boolean是为true")
}

console.log("程序结束");


/* 
    ifelse分支
        当boolean为true,执行if后面大括号里面的内容
        当boolean为false,就执行else后面大括号里面的内容
*/
if(a === '10'){
    console.log("a 等于 10");
}else{
    console.log("a 不等于10");
}

/* 
    案例一
        小名今年期末考试,如果语法和数学都超过80分,妈妈再也不用担心我的学习了
        如果有一门没有超过80分,那么妈妈又开始担心我的学习了
*/
var yuwen = 66;
var shuxue = 77;
if(yuwen > 80 && shuxue >80){
    console.log("妈妈再也不用担心我学习了");
}else{
    console.log("又开始担心我的学习了");
}


/* 
    案例二
        a-- => 1,a=0
        a++ -> 0,a=1
*/
var a = 1;
if(a-- && a++){
    console.log("上面1",a);
}else{
    console.log("下面1",a);
}


/* 
    案例三
        在JS里面,&&运算符是当两边都为true的时候,结果为true,如果有一边的结果不为true,那么最终的结果就是false
        计算机为了提高的运行的效率
            先运算左边的内容,如果左边的内容为true,那么就执行后面的内容
            如果左边的内容为false,那么右边无论是true还是false,都没有意思,所以不执行
        在本案例当中,a--的值为0,a为-1,a--的值为0,隐式类型的转换为false,右边不管是true还是false都不执行
*/
var a = 0;
if(a-- && a++){
    console.log("上面2",a);
}else{
    console.log("下面2",a);
}



/* 
    案例四
        在JS里面,||运算符如果有一边的结果为true,那么终止的结果一定是true
        计算机为了提高代码运行效率
            先运行左边的内容,如果左边的内容为true,那么后面的代码将不执行
            如果左边的内容为false,那么就会执行后面的内容
        本案例当中
            --a => -1,a = -1
            左边的内容为true,后面的不执行
*/
var a = 0;
if(--a || a++){
    console.log("上面3",a);
}else{
    console.log("下面3",a);
}

多重if分支

if(bool1){//如果bool1成立,那么就走bool1后面的大括号里面的语句

}else if(bool2){//如果bool2 成立,那么就走bool2后面大括号里面的语句

}else if(bool3){//如果bool3 成立,那么就走bool3后面大括号里面内容

}...{

}else{//当以上的所有if语句(包裹else if)都不成立的时候,那么就走else后面大括号里面内容

}

/* 
    小名参考考试
        如果考试的分数 >= 90 分   秀儿
        如果考试的分数 => 80 分   好儿
        如果考试的分数 => 70 分   中儿
        如果考试的分数 => 60 分   及儿
        如果考试的分组 < 60 分    完儿
    细节一
        一般情况下,考试的分数应该是在0~100分之间
    细节二
        在多重if语句当中,存在一个隐式的条件,这个条件是与上一个if语句(else if)相反的条件
*/
var score = 100; //表示小名考试考了79分
//用多重if语句进行书写
if (score < 0 || score > 100) {
    //分数出现错误
    console.log("分数出现异常!")
} else {
    //分数在正常的范围之内
    if (score >= 90) {
        console.log("秀儿")
        //在多重if语句当中,elseif存在一个隐式的条件,这个条件是与上一个if语句的条件相反
    } else if (score >= 80) {// score>=80 && score<90
        console.log("好儿");
    } else if (score >= 70) {
        console.log("中儿");
    } else if (score >= 60) {
        console.log("及儿");
    } else {
        console.log("完儿");
    }
}

四:三个浏览器的弹出

alert() => 提示框
prompt() => 输入框
confirm() => 确认框
注意

三个弹出框有一个共同的特点,会阻止代码往后执行
输入框里面点击确认之后,将我们返回的内容当做返回值返回给接收的变量接收的变量是一个字符串类型输入框里面点击取消之后,得到是null

//alert() => 提示框
alert("浏览器给我们一个提示")

console.log("程序结束1");

//confirm() => 确认框
    //存在着一个确认和取消两个按钮
    //当我们点击确认按钮之后 => 会返回一个返回值 -> true
    //当我们点击取消按钮之后 => 会返回一个返回值 -> false
var result = confirm("你确定要进行删除吗?") //使用result来接收变量
console.log(result);

console.log("程序结束2");

//prompt() => 输入框
//可以在输入框里面输入一些内容
//点击确定的情况下 => 我们输入的内容在prompt里面会当中一个返回值给返回出去
//点击取消的情况下 => 会返回一个null
var res = prompt("请输入你购买商品的价格")
console.log(res);
console.log("程序结束3");


/* 
    1. 三个弹出框有一个共同的特点,会阻止代码往后执行
    2. 输入框里面点击确认之后,将我们返回的内容当做返回值返回给接收的变量
       接收的变量是一个字符串类型
       输入框里面点击取消之后,得到是null
*/

var score = prompt("请输入你考试的分数");
/* 
    细节一
        当我们点击取消的按钮之后,score的值为null,null与0和100进行比较,会触发隐式类型的转换,比较的结果是 false
        然后就会走else后面的那一个if语句 
*/
// console.log(score < 0);
console.log(typeof score);
console.log(score < 0 );
if (score < 0 || score > 100) {
    console.log("分数出现异常!")
} else {
    if (score >= 90) {
        console.log("秀儿")
    } else if (score >= 80) {
        console.log("好儿");
    } else if (score >= 70) {
        console.log("中儿");
    } else if (score >= 60) {
        console.log("及儿");
    } else {
        console.log("完儿");
    }
}

五.判断数字

isNaN => is not a number => 判断不是一个数字

/* 
    案例
*/
var score = prompt("请输入一个分数")
//第一层if语句判断输入是不是一个数字
if (isNaN(score)) {
    console.log("这不是一个数字");
} else {
    //第二层if语句判断是分数是不是一个合法的分数
    if (score < 0 || score > 100) {
        console.log("分数出现异常!")
    } else {
        //第三层if语句判断的是分数的级别
        if (score >= 90) {
            console.log("秀儿")
        } else if (score >= 80) {
            console.log("好儿");
        } else if (score >= 70) {
            console.log("中儿");
        } else if (score >= 60) {
            console.log("及儿");
        } else {
            console.log("完儿");
        }
    }
}

六.Switch分支

switch里面的case和default是可以调换位置的
switch里面的break作用是阻止代码往后运行

// 定义一个变量
switch(变量){
    case 变量1:
        //当变量等于变量1的时候,那么就执行这个代码
        break;
    case 变量2:
        //当变量等于变量2的时候,那么就执行这个代码
        break;
    case 变量3:
        //当变量等于变量3的时候,那么就执行这个代码
        break;
    default:
        //当以上条件都不满足的时候,那么就是这个代码
        break;
}

/* 
    switch案例
        星期一
            钓鱼
        星期二
            敲代码
        星期三
            敲代码
        星期四
            敲代码
        星期五
            打篮球
        周末
            植发

    思路:
        1.使用prompt输入一个星期几?
        2.判断别人输入的是不是一个数字
        3.星期的范围是在1~7之间
        4.使用switch写一星期的事情
*/
var week = prompt("请输入一个星期几")
//先判断输入的是不是一个数字
if (isNaN(week)) {
    console.log("请输入一个数字")
} else {
    //判断这个数字的范围是不是在1~7之间
    if (week >= 1 && week <= 7) {
        //使用switch写一星期的事情
        switch (week) { //week 就是星期几的变量
            case '1':
                console.log("钓鱼")
                break;
            case '2':
                console.log("敲代码");
                break;
            case '3':
                console.log("敲代码");
                break;
            case '4':
                console.log("敲代码");
                break;
            case '5':
                console.log("打篮球");
                break;
            default:
                console.log("植发");
                break;
        }
    } else {
        console.log("没有这个星期")
    }
}

/* 
    注意:
        一.在switch语句当中,break会阻止代码往后运行
        二.在switch语句当中,case和default是可以调换位置的
*/
var week = prompt("请输入一个星期几")
if (isNaN(week)) {
    console.log("请输入一个数字")
} else {
    if (week >= 1 && week <= 7) {
        switch (week) { //week 就是星期几的变量
            case '5':
                console.log("打篮球");
                break;
            default:
                console.log("植发");
                break;
            case '1':
                console.log("钓鱼")
                break;
            case '2':
            case '3':
            case '4':
                console.log("敲代码");
                break;
        }
    } else {
        console.log("没有这个星期")
    }
}

switch与多重if语句的区别一般情况下switch适用于等值判断,而多重if语句适用于区间(指一段范围)判断

七.循环

循环遵守四个条件

初始化条件
循环条件
迭代条件
循环体

while循环

//初始化条件
var a = 10;
while(循环条件){//当循环条件成立的时候,那么就走循环体(循环后面的大括号里面的代码)
    //循环体
    
    //迭代条件
    a ++
}

//我要让张三去操场跑5圈
// console.log("张三跑了第1圈")
// console.log("张三跑了第2圈")
// console.log("张三跑了第3圈")
// console.log("张三跑了第4圈")
// console.log("张三跑了第5圈")

//对于重复代码,我们有一种解决方案 => 循环
//1. 初始化条件
var i = 1;
while(i<=5){ //2. 循环条件
    //3. 循环体 -> 循环的代码
    console.log("张三跑了第"+i+"圈");
    //4. 迭代条件 , 张三跑了一圈,i++一下
    i++
}

debug调试代码

作用: 就是当我们以后写代码的时候,如果写代码过多了,但是我们又找不到代码报错地方,那么此时,我们需要使用debug来对代码进行一步一步的调试,一直找到异常代码位置
步骤
- 写完代码
- 打开浏览器
- 按F12 或右键检查
- 找到Sources地方
- 点击源代码
- 对代码进行断点处理(点击代码之前的行数)
- 刷新页面
- 按下一步下一步进行调试代码

循环练习

/* 
    1.求0~100以内所有奇数和
        思路:使用循环来实现
            1. 初始化条件 => 0
            2. 循环条件 => 在100以内,所以就是小于等于100
            3. 循环体
                - 先输出100以内所有的数字
                - 使用if语句 将100以内所有的数字 %2 = 1 => 把所有的奇数给过滤出来了
                - 定义一个求和的变量sum => 累加所有过滤出来的奇数
            4. 迭代条件 => 每循环一次,变量++
*/

// 定义一个求和的变量
var sum = 0;

//初始化条件
var i = 0;
while (i <= 100) {//循环条件
    //循环体
    // console.log(i); //先输出100以内所有的数字
    if (i % 2 === 1) {
        // console.log(i); //使用if语句 将100以内所有的数字 %2 = 1 => 把所有的奇数给过滤出来了

        //累加所有 奇数
        // sum = sum + i;
        sum += i;
    }

    //迭代条件 
    i++
}

//输出这个和
console.log(sum);






/* 
    2.累加0~100之内的所有偶数和,当和累加超过300就停止累加
        思路:
            初始化条件 => 0
            循环条件 => <=100
            循环体
                先循环出100以内所有的数字
                使用if语句过滤出所有的偶数 => % 2 = 0
                累加所有的偶数
                判断累加的偶数和是否超过20,超过20就停止循环 => 在循环语句里面可以使用break终止循环
            迭代条件 => 每循环一次,就++一下
    */
var sum = 0;
//初始化条件
var i = 0;
while (i <= 100) {//循环条件
    //循环体
    // console.log(i);// 先循环出100以内所有的数字
    if (i % 2 == 0) { //过滤出所有偶数
        // console.log(i);
        sum += i;//累加所有的偶数

        //如果偶数和超过20,那么就停止累加  0+2+4+6+8+10
        if(sum>20){
            break;
        }
    }

    //迭代条件
    i++
}

console.log(sum);

JavaScript第3天

回顾

三元运算符

bool?表达式1:表达式2 => 当bool为true的时候,那么就执行表达式1,当bool为false的时候,那么就执行表达式2

var result = bool?表达式1:表达式2 => 当bool为true的时候,那么就将表达式1里面的结果返回给result,当bool为false的时候,那么就将表达式2里面的内容返回一个result

逻辑运算符

&& true && true => true true && false => false false && true => false false && false => false 注意: 当&&运算符如果他的左边为false的时候,计算机为了提供代码的运行效率,他将不执行右边的代码
|| true || true => true true || false => true false || true => true false || false => false 注意: 当||的运算符如果的左边为true的时候,计算机为了提高代码的运行效率,他将不执行右边的代码
! !true => false !false => true

if分支

if(bool){//当小括号里面的bool为true时候,那么就执行大括号里面的内容

}

if_else

if(bool){//当小括号里面的bool为true时候,那么就执行if后面大括号里面的内容

}else{//当bool类型为false的时候,那么就执行else后面大括号里面的内容

}

多重if语句

if(bool1){  //当bool1 为true,那么就执行bool1后面大括号里面的内容

}else if(bool2){//当bool2为true到时候,那么就执行bool2后面大括号里面的内容(注意: else if与上一个if或者是else if存在一个相反的隐式条件)

}else if(bool3){//当bool3为true到时候,那么就执行bool3后面大括号里面的内容(注意: else if与上一个if或者是else if存在一个相反的隐式条件)

}...{

}else{//当以上所有的条件都不满足的时候,那么就执行else后面大括号里面的内容

}

isNaN 判断不是一个数字

var res = isNaN(变量) => 当变量为非数字的时候,那么返回一个true给res,如果是一个数字,那么就返回一个false给res

三个弹出语句

alert => 提示框
confirm => 确认框当用户点击确定按钮的时候,那么就会返回一个true,当用户点击取消按钮的时候,那么就会返回一个false
prompt => 输入框当用户点击确认按钮的到时候,那么就会将用户输入的内容返回一个接收的变量,该变量是一个字符串类型,当用户点击取消按钮的时候,那么就回返回一个null
共同点 => 都会阻止代码的执行

switch分支

/* 
    注意:
        1. break在switch语句里面是可以阻止代码往后运行的
        2. case和default可以任意交换位置
*/
switch(变量){
    case 1:
        //当变量和1相等的时候,那么就执行这里的代码
        break;
    case 2:
        //当变量和2相等的时候,那么就执行这里的代码
        break;
    case 3:
        //当变量和3相等的时候,那么就执行这里的代码
        break;
    default:
        //当变量与上面所有都不相等的时候,那么就执行default后面的内容
        break;
}

while循环循环具备四个条件

初始化条件
循环条件
循环体
迭代条件

//初始化条件
var i = 0;
while(循环条件){//当循环条件为true时候,那么就执行循环,当循环条件为false的时候,那么就停止循环
    //循环体

    //迭代提交
}

debug调试

写代码
打开浏览器
按F12 或者检查
找到 Sources
点击源代码
给代码断点(在代码的前面行号点击一下)
刷新页面
点击下一步调试

知识点

do_while循环

do_while循环

//初始化条件
var i = 0;
//循环
do{
    //循环体

    //迭代条件
}while(循环条件) //当循环条件为true的时候,那么就执行循环体,当循环条件为false的时候,那么就停止循环

/* 
    //初始化条件
    var i = 0;
    //do_while循环
    do{
        //循环体

        //迭代条件
    }while(循环条件)//当循环条件为true的时候,那么就执行循环体,当循环条件Wiefalse的时候,那么就停止循环
*/

/* 
    案例一
        求1~100之间的偶数和 => 2550
*/
//定义一个变量,专门用于求和
var sum = 0;
//初始化条件
var i = 1;
//do_while循环
do {
    //循环体
    //1. 输出1~100所有的数字
    // console.log(i);
    //2. 获取1~100之间所有的偶数
    if (i % 2 == 0) {
        // console.log(i);
        sum += i;
    }

    //迭代条件
    i++
} while (i <= 100); //循环条件

//输出1~100之间所有的偶数和
console.log("1~100之间所有的偶数和" + sum);



/* 
    案例二
        求1~100之间的奇数和,当和大于20的时候,那么就停止循环
*/
//定义一个变量 sum => 用于类型
var sum = 0;
//初始化条件
var i = 1;
do {
    //循环体
    //1. 先输出1~100之间所有的数字
    // console.log(i);
    //2. 获取1~100之间所有的奇数 
    if (i % 2 == 1) {
        // console.log(i);
        //累加
        sum += i;
        //当累加和超过20的时候,那么就停止类型
        if (sum > 20) {
            break; //break在循环里面是可以终止当前循环的
        }
    }

    //迭代条件
    i++
} while (i <= 100);//循环条件 => 当循环条件满足(true)的时候,那么就执行循环体,当循环条件不满足(false),停止循环

console.log("1~100之间的奇数和,当和大于20的那个数", sum);

dowhile与while循环的区别 while循环先判断循环条件,然后再执行循环体 do_while先执行一次循环体,然后再判断循环条件,当循环条件为true的时候继续循环当第一次循环都满足的情况下,while循环和do_while循环是没有区别的

//初始化条件
var i = 100;
//while循环语句
while(i<0){//循环条件
    console.log("我是while循环");//循环体
    i++//迭代条件
}
console.log("while循环结束");


//初始化条件
var j = 100;
do {
    console.log("我是do_while循环"); //循环体
    j++ //迭代条件
} while (j<0);
console.log("do_while循环结束");

死循环死循环就是当循环当中循环条件一直为true,就会一直循环=>死循环

//while循环的死循环
while(true){
    console.log("这就是一个while的死循环");
}


//do_while循环的死循环
do{
    console.log("这就是do_while循环的死循环");
}while(true)

for循环

//JS里面的分号相当于语文里面的句号,表示一行代码写完
for(初始化条件;循环条件;迭代条件){
    //循环体
}

/* 
    for(初始化条件;循环条件;迭代条件){
        //循环体
    }
*/

/* 求1~100之间的所有偶数和 */
var sum = 0;
//for循环格式
for (var i = 1; i <= 100; i++) {
    //打印1~100之间的所有数字
    // console.log(i);

    //获取1~100所有的偶数
    if (i % 2 == 0) {
        sum += i
    }
}
console.log(sum);

三个输出的换行

//alert() => \n
alert("123 \n 789")

//document.write() => br
document.write("123 <br> 789")

// console.log()
console.log("123\n789")

流程控制语句

break => 在循环里面终止当前循环

//break => 在循环里面可以终止当前循环
for(var i = 0 ; i < 10 ; i++){
    //当i为5的时候,停止循环
    if(i == 5){
        break;
    }
    //输出i
    console.log("输出i",i);
}

// 只能终止当前循环,并不是终止所有的循环
// 嵌套循环 => 一定是外循环循环一次,内训循环一轮
//外循环
for(var i = 0 ; i < 10 ; i++){
    //内循环
    var j = 0;
    while(j<3){
        console.log(i);
        if(j==1){
            break;
        }
        j++
    }
}

continue => 停止本次循环,继续下一次循环

/* 
    continue => 停止本次循环(碰到continue的时候,那么后面的代码就不会走了),继续下一次循环
*/
/* 输出1~100之间里面所有的数字,不包含10~20 */
for(var i = 0 ; i < 100 ; i++){
    //如果是10~20之间,代码就不要往后面走
    if(i>=10 && i <=20){
        //代码就不要往后面走,终止本次循环
        continue;
    }
    console.log("输出i",i);
}


//continue和break都只能针对于当前循环
for(var i = 0 ; i < 4 ; i++){
    for(var j = 0; j < 3 ; j++){
        //当内循环的值为2的时候,停止本次循环,继续下一次循环
        if(j == 2){
            continue;
        }
        console.log("continue后面的代码");
    }
}

函数

函数->就是将一段重复的代码用一个盒子给包裹起来,方便后续重复使用函数的关键function

具名函数

//function是一个声明函数的关键字,类似定义变量的var关键字一样
//fn => fn就是函数的名字
//() => 函数的参数
//{} => 函数体
//return => 返回值
function fn(){
    //写一个登录
}
//直接使用函数的名字来进行调用函数
fn();

//声明一个函数
/* 
    function是声明函数的关键字
    fn就是函数的名字
    () => 就是函数的参数,当括号没有内容的时候,那么表示无参,如果有内容表示有参
    {} => 函数体
*/
function fn(a,b){
    console.log(a,b);
    console.log("我是一个无参的函数");
}
//调用函数
fn('admin',123456);

无参无返回值

//定义一个函数
function fn1(){//括号里面没有参数,表示无参,函数体里面没有return,表示没有返回值
    //这个函数就是一个无参无返回值的函数
}
fn1();

无参有返回值

//无参就是函数名后面的小括号里面没有内容,有返回值表示在函数体里面有一个return关键字 并且带一个内容,该内容就是返回出去的内容
//定义一个函数
function fn2(){
    return '👲🏼'  //写一个return,并且需要带一个内容(注意:是一个)
}
//调用函数
var result = fn2(); //注意: 这是一个有返回值的函数,那么在调用这个函数的时候,需要使用一个变量来接收这个返回值

有参无返回值

//有参就是函数名后面的小括号里面有参数,这个参数的值就是调用的时候,传入过来的值
function fn3(a,b,c){
    
}
fn3(1,'张三',18);

有参有返回值

//有参就是函数名后面有参数,有返回值就是在函数体当中有return关键字并且带一个内容
function fn4(a,b){
    return a+b;//返回一个内容
}
var result = fn4(1,2);

函数在项目当中运用

新建一个js文件夹
在js文件夹里面新建一个*.js文件
在*.js文件里面封装函数=>写业务代码
在HTML页面使用script的src的方式导入进来
调用*.js文件

匿名函数(函数表达式) 匿名函数就是没有名字的函数

//将一个没有名字的函数存储到一个变量当中
//无参无返回
var fn1 = function(){
    console.log("我是一个无参无返回值的");
}
fn1();


//无参有返回
var fn2 = function(){
    return '我是张三' //只能返回一个
}
var res2 = fn2();
console.log(res2);


//有参无返
var fn3 = function(a,b){
    console.log(a+b);
}
fn3(1,2)


//有参有返回
var fn4 = function(a,b,c){
    return a+b+c
}
var result = fn4(2,3,4)
console.log(result);

函数的返回值return

在函数当中如果return带一个数据,表示返回值某一个值
如果函数当中单独存在的return关键字,表示打断函数

//如果在函数里面,如果带一个数据,表示将这个数据返回出去
//如果在函数里面,return关键字单独,表示打断函数

function fn(){
    console.log("11111111111111");
    return;//return单独存在,表示打断函数,阻止函数内部代码往后执行
    console.log("33333333333333");
}
fn();

函数参数问题在函数当中,参数分为两种一个是形参,一个是实参

实参就是在调用的时候,传的参数
形参就是在定义函数的时候,函数名后面小括号里面的参数

function fn(a,b,c){//a,b,c 这种参数 => 形参

}
fn(1,2,3);//1,2,3 这种参数 => 实参

参数对应问题

//参数的对应问题 => 实参与形参的个数不一样多
//第一种形式 => 实参多于形参
//从参数的左边开始往右边数,对应不上的忽略
function fn1(a,b,c){//形参
    console.log(a,b,c);
}
fn1(1,2,3,4,5,6,7) //实参


//第二种形式 => 实参少于形参
//从参数左边往后边开始数,对应不上,多余的相当于定义变量的时候,没有赋值,所以是一个undefined
function fn2(a,b,c){
    console.log(a,b,c);
}
fn2(1)

使用arguments来接收参数我们在定义一个函数的时候,无参,但是我们实参传入了数据,在函数当中应该要使用arguments来接收

// arguments接收参数
function fn(){//是一个无参的来接收调用这的参数
    //直接输出arguments
    /* 
        arguments接收到的数据是一个伪数组
            伪数组
                有数据,有下标
            数组的下标从0开始,以后操作数组(伪数组),90%都是操作下标
    */
    console.log(arguments);
    console.log(arguments[0]);//获取伪数组当中下标为0的数据
    console.log(arguments[1]);//获取伪数组当中下标为1的数据
    console.log(arguments[2]);//获取伪数组当中下标为2的数据
    console.log(arguments[3]);//获取伪数组当中下标为3的数据
    console.log(arguments[4]);//获取伪数组当中下标为4的数据
}
fn("🍉","🍎","🍌","🍐","🍇");

函数与事件的结合

<button id="btn">点我</button>

btn.onclick = function(){
    //点击btn按钮触发匿名函数
}

拓展

获取标签身上文本 id名.innerHTML
获取表单身上内容 id名.value 注意: 不管是id名.innerHTML还是id名.value获取到的内容都是字符串类型

<div>
    <!-- 表单 -->
    <input type="text" value="我们能看到value值" id="i1"><br>
    <input type="password" value="很费劲多快好省" id="i2"><br>  
    <!-- 按钮 -->
    <button id="btn">点我输出文本框value值</button>
</div>

/* 
    如果是表单获取value=> id名.value
    如果是其他的获取文本=>id名.innerHTML
*/
//点击按钮 => 将上面两个表单的文本值获取到
btn.onclick = function(){
    //获取id为i1的表单的value值
    console.log(i1.value);
    //获取id为i2的表单的value值
    console.log(i2.value);
    //获取标签身上文本值
    console.log(btn.innerHTML);
}

<input type="text" id="i1">
<button>+</button>
<input type="text" id="i2">
<button id="dd">=</button>
<p id="p">结果:</p>

/* 当我点击等号的时候,将第一个文本框里面的value加上第二个文本框里面的value的结果赋值给p标签 */
/* 
    思路:
        1. 给有等号的button按钮绑定一个点击事件,触发一个匿名函数
        2. 在匿名函数内部获取第一个文本框value值,获取第二个文本框的value值
        3. 将两个value相加 => 注意: 将字符串类型转换成number类型
        4. 将加出来的结果显示在p标签身上 
            获取value => id.value
            获取文本 => id.innerHTML

            赋值value => id.value = 内容
            赋值文本 => id.innerHTML = 内容

*/
// 给有等号的button按钮绑定一个点击事件,触发一个匿名函数
dd.onclick = function(){
    // 在匿名函数内部获取第一个文本框value值,获取第二个文本框的value值
    // console.log(+i1.value + parseInt(i2.value));

    //赋值 value
    // i1.value = "我是👲🏼"
    //赋值 文本
    // p.innerHTML = "放了一个p标签"

    // 将加出来的结果显示在p标签身上 
    p.innerHTML = +i1.value + +i2.value;
}

JavaScript第4天

回顾

dowhile

语法

//初始化条件
var i = 0;
//do_while循环的语法
do{
    //循环体

    //迭代条件
}while(循环条件);

doWhile与while循环的区别
doWhile循环先执行一次,再判断,while循环先判断循环条件,再执行循环体
当第一次执行循环的时候,如果条件满足,doWhile与while一样
死循环当循环条件永远为true,一直的循环下去

for循环

语法

for(初始化条件;循环条件;迭代条件){
    //循环体
}

在循环的里面可以再套一个循环
- 外循环控制行
- 内循环控制列
流程控制语句
- break => 终止当前循环
- continue => 停止本次循环,继续下一次循环

三种输出语句的换行

alert => \n
document.write =>  
console.log => \n

函数

具名函数 => 有名字的函数
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
函数在项目的使用
- 新建一个js文件夹
- 在js文件夹里面建一个*.js文件
- 在*.js里面封装函数
- 在HTML里面使用script的src的方式引入外部*.js文件
- 调用外部函数
匿名函数 => 没有名字的函数
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
函数的返回值 => return
- 在函数里面如果有一个数据,那么表示将这个数据返回给调用这
- 在函数里面如果return单独使用,那么表示打断函数,阻止后续的代码往后运行
参数
- 形参 => 定义函数的时候,接收的参数
- 实参 => 调用的时候,传过去的参数
函数的参数问题从左边往右边进行匹配,如果形参少了,多余的忽略掉,如果形参多了,多余的形参值是undefined
函数的形参为空可以使用arguments来接收 arguments是一个伪数组 => 有下标,一个下标对应着一个数据,有长度
函数与事件的结合

<button id="btn">按钮</button>

btn.onclick = function(){
    //当我们点击按钮标签之后,触发(运行)的匿名函数
}

拓展
- 如果是表单
  - 获取表单的value => id.value
  - 给表单的value赋值 => id.value = 给id的value赋值的内容
- 如果是普通标签
  - 获取标签的文本值 => id.innerHTML
  - 给标签的文本值赋值 => id.innerHTML = 给id的文本赋值的内容

知识点

一:split

可以将一个字符串拆分成一个数组

"我爱javascript" => 对a进行拆分
var s = ["我爱j","v","script"]
          // 0    1    2
          //s[0]  s[1]  s[2]

二.预解析

预解析就是当我们写完代码的时候,浏览器在运行我们代码之前,会现对我们的代码进行一个扫描

对var关键字声明的进行变量提升(注意:提升的变量名,而不是变量值)
对function关键字声明的函数进行提升(注意:提升的是整个函数)

/* 
    我们的代码是从上往下进行执行的
    预解析:
        对var关键字声明的变量进行提升
        对function关键字声明的这个函数进行提升
        在var关键字提升和function提升的过程当中,如果出现function 的函数名与var的变量一样,那么函数的优先级高于变量,变量的提升会忽略
        在函数的内部也要提升
*/
/*
    案例一 
        预解析:
            var a;
            console.log(a)
            a = 0;
*/
// console.log(a);
// var a = 0;




/*  
    案例二
        预解析
            没有提升
*/
// console.log(a); //a 没有定义
// a = 0;





/* 
    案例三
        预解析
            var a;
            console.log(a)
            a = 0
            console.log(a)
*/
// console.log(a);//undefined
// var a = 0;
// console.log(a);//0



/* 
    案例四
        预解析
            var a
            function a(){console.log("我是函数")}
            console.log(a)
            a = "我是变量"
            console.log(a)
*/
// console.log(a);//undefined
// var a = '我是变量';
// function a() {
//     console.log('我是函数')
// }
// console.log(a);//我是变量



/* 
    案例五
        预解析
            function a(){}
            console.log(a); //函数
            a++;
            console.log(a); //NaN
            a = '我是变量'
            console.log(a)  //我是变量
*/
// console.log(a);
// a++;
// console.log(a);
// var a = '我是变量';
// function a() {
//     console.log('我是函数')
// }
// console.log(a)




/* 
    案例六
        var a;
        function fn(){
            var a;
            console.log(a);
            a = 1;
            console.log(a);
        }
        console.log(a);         //undefined
        a = 0;
        console.log(a);         //0
        fn()                    //undefined  1
        console.log(a);         0
*/
// console.log(a);
// var a = 0;
// console.log(a);
// function fn() {
//     console.log(a);
//     var a = 1;
//     console.log(a);
// }
// fn()
// console.log(a);



/* 
    案例七
        预解析
            var fn
            function fun() {
                console.log("我是fun函数");     //1. 我是fun函数
            }
            fun();
            fn = function () {
                console.log("我是fn函数");      //2. 我是fn函数
            }
            fn();
            fn = 100;                          
            fn();                              //3. 报错 fn is not a function
*/
// fun();
// var fn = function () {
//     console.log("我是fn函数");
// }
// function fun() {
//     console.log("我是fun函数");
// }
// fn();
// fn = 100;
// fn();




/* 
    案例八
        预解析
            function fn(){
                console.log("我是fn函数");
            }
            fn();               //我是fn函数
            fn();               //我是fn函数
            fn = 100    
            fn();               //fn is not a function
*/
// fn();
// function fn() {
//     console.log("我是一个fn函数");
// }
// fn();
// var fn = 100;
// fn();



/* 
    案例九
        预解析
            var fun
            var fun
            fun = 200;         
            fun();                                              //fun is not a function
            fun = function(){console.log(我是一个fun函数);}      
            fun()                                               //当前面的代码出现错误之后,后续的代码不会执行                      
*/
// var fun = 200;
// fun();
// var fun = function () {
//     console.log("我是一个fun函数");
// }
// fun();



/* 
    案例十
        预解析
            var fun
            var fun 
            fun = 200
            fun = function () {
                console.log("我是一个fun函数");    //我是一个fun函数
            }
            fun();
*/
// var fun = 200;
// var fun = function () {
//     console.log("我是一个fun函数");
// }
// fun();




/* 
    案例十一
        预解析
            var fun
            var fun
            fun = 200
            fun()
            fun = function(){}
            fun()
*/
// var fun = 200;
// fun();
// var fun = function () {
//     console.log("我是一个fun函数");
// }
// fun();



/* 
    案例十二
        预解析
            var fun
            function fun(){}
            fun = 200
            fun()
*/
// var fun = 200;
// function fun() {
//     console.log("我是一个fun函数");
// }
// fun();



/* 
    案例十三 
        预解析
            var num
            console.log(num)
            if(false){
                num = 20;
            }
*/
// console.log(num);
// if (true) {
//     var num = 20;
// }




/* 
    案例十四
*/
// function fn() {
//     console.log(num);
//     return;
//     var num = 10;
// }
// fn();




/* 
    案例十五
        var a
        a = b
        console.log(我是一个函数);
*/
// var a = b
// console.log("我是一个函数");

变量的作用域范围

全局作用域

全局作用域在函数的外部,在script里面
在全局作用域里面定义的变量,全局变量,在script里面都有效果
全局作用域当中的this执行的window

//全局变量 => 在全局作用域当中定义的变量 => 全局变量
var a = 10; //a 作用的范围 => 在当前的script里面的他都有效果
console.log(a); //可以访问的a

//在全局作用域下的this=>window
console.log(this); //输出一个this,在控制台上面输出的结果就是window


function fn() {
    console.log(a); //也可以访问到a

    function inner() {
        console.log(a); //也可以访问到
    }
    inner();
}
fn();

局部作用域(函数作用域)

在函数的内部
如果使用var关键字声明的变量在局部作用域(函数作用域),局部变量=>只在当前作用域有效果

/* 
    局部作用域
        - 定义在函数的内容
        - 使用var关键字声明的变量在函数作用域中,只对当前作用域有效果
*/
function outer(){
    //局部变量 => 在outer这个作用域的范围内有效
    // var b = 20;
    b = 20;
    console.log(b);
}
outer();

console.log(b);

作用域链从内部外部一直往外部函数进行访问,如果优先在当前作用域当中进行查找,如果找到了,那么就使用当前作用域的变量,如果找不到,那么就往外部作用域进行查找,找到了就是使用,找不到继续往外部作用域进行查找,一直要查到到全局作用域为止.

/* 
    从内部外部一直往外部函数进行访问,如果优先在当前作用域当中进行查找,
    如果找到了,那么就使用当前作用域的变量,如果找不到,那么就往外部
    作用域进行查找,找到了就是使用,找不到继续往外部作用域进行查找,
    一直要查到到全局作用域为止.
*/
//定义一个全局变量
var a = 10;
//定义一个函数
function outer() {
    function content() {
        var a = 887
        function inner() {
            var a = 998;
            console.log(a);
        }
        inner();
    }
    content();
}
outer();

对象

创建对象

//使用内置构造函数创建对象
var obj = new Object();
//属性
obj.name = "文雯"
obj.age = 18
obj.gender = "男"
//行为
obj.eat = function(){
    console.log("文雯在吃饭");
}

//使用字面量创建对象
var obj = {
    //属性
    name:"文雯",
    age:18,
    gender:"男"
    //行为
    eat:function(){
        console.log("文雯在吃饭");
    }
}

点语法的增删改查操作对象的属性对象在应用场景当中,与变量类似,都是用来存储数据的

//创建一个对象
var obj = {
    //属性
    name:"张三",
    age:18,
    gender:"男",
    //行为
    eat:function(){
        console.log("张三吃");
    }
}

/*
    获取点语法操作对象的数
        对象名.属性
*/
console.log(obj.name,obj.age,obj.gender);
// obj.eat();//获取对象

/* 
    通过点语法给对象添加属性
        对象名.属性 = 属性值
*/
obj.phone = "13712341234"
obj.a = "aaa"
// console.log(obj);


/* 
    通过点语法删除对象的属性
        delete 对象名.属性
*/
delete obj.name
delete obj.a
console.log(obj);


/* 
    通过点语法修改对象的属性
        对象名.属性 = 属性值
        记住: 操作对象的属性的时候,对象名.属性 如果这个属性在对象里面已经存在了,那么表示修改,如果没有存在,那么表示添加
        有则修改,无则添加
*/
obj.age = 998;
obj.phone = "收集好"
console.log(obj);

对象的存储结构对象的存储结构 => 键值对的形式 => key:value

//字面量
var obj = {
    key:value
}
//内置构造函数
var obj = new Object()
obj.key1 = value1;
obj.key2 = value2;

中括号操作对象的属性

对象名[key] = value
中括号里面写变量名或者是变量的值

var obj = new Object();
//属性
obj.name = "张三"
obj.age = 18
obj.gender = "男"
//方法
obj.eat = function () {
    console.log("张三吃");
}

/* 
    增修
        obj[属性] = 属性值
        同样遵守有则修改,无则添加
    可以写变量的名或者变量的值
*/
var p = "phone";
var n = "name"
//写的是变量的名
obj[p] = "13712341234"
obj[n] = "王二麻子"

obj["a"] = "啊啊啊啊"
obj['b'] = '别别别'
console.log(obj);


/* 
    删除
        delete 对象[key]
*/
delete obj['a']
console.log(obj);


/* 
    查
        对象[key]
*/
console.log(obj['b']);

点语法和中括号语法的区别

点语法的属性命名需要遵守变量的名字规则
中括号语法任意书写
使用点语法获取对象的属性值(value),属性(key)必须要在对象里面已经存在,不存在点出来的就是undefined

var obj = {
    name:"张三",
    age:18,
    gender:"男"
}
//点语法需要遵守变量的命名规则
// obj.1 = "18"
// obj.break = "你好!"
// obj.@ = "不行"
// obj.name abc = "你好"

//中括号语法
obj["1"] = "18"
obj["@"] = "@_@"
obj["name abc"] ="你好!"
console.log(obj);

对象的循环(遍历)

for in => 适合对象的遍历

/*  创建一个对象 */
var obj = {
    //属性
    name: "张三",
    age: 18,
    gender: "男",
    //行为
    eat: function () {
        console.log("吃");
    }
}
//使用forin遍历对象
/* 
    对象.属性
    obj.key
*/
for (var kkk in obj) {
    //循环第一次 => var kkk = name
    //循环第二次 => var kkk = age
    //循环第三次 => var kkk = gender
    //循环第四次 => var kkk = eat
    // console.log(kkk);

    /* 要就是变量名 要不就是写变量值 */
    console.log(kkk,obj.kkk);
}

控制台输出的形式

console.log() => 直接将内容输出在控制台上面
console.dir() => 打印对象的属性和行为
console.group => 将输出的内容进行分组

//console.log() -> 直接在控制台上面输出内容
console.log("1111111111111111");



//console.dir() -> 打印对象的属性和方法
var obj = {
    name:"张三",
    age:18,
    gender:"男"
}
console.dir(obj);


//group分组
console.group("我是第一组")
console.log(1111111111111111111);
console.log(2222222222222222222);
console.log(3333333333333333333);
console.groupEnd();

console.group("我是第二组")
console.log(1111111111111111111);
console.log(2222222222222222222);
console.log(3333333333333333333);
console.groupEnd();

深入理解对象在我们以前所学习过的HTML里面的每一个标签其实都是一个对象

<button id="btn"></button> //在JS里面也是一个对象
<p id="p"></p> //在JS里面也是一个对象

// console.log(btn);

// 打印对象的属性和方法(行为)
// console.dir(btn)


btn.onclick = function(){
    alert("111111111")
}



//遍历对象的属性 for in
/* 
    html标签身上属性太多了,有300多个
    但是我们在使用的过程当中用到不多
    所以我们在实际开发过程当中,很少使用原生JS
    用框架(VMDOM)=>虚拟DOM
*/

for(var key in btn){
    console.log(key,btn[key])
}

对象访问方法

/* 
    给函数添加一个() => 可以调用函数
*/
var obj = {
    name: "张三",
    age: 18,
    gender: "男",
    eat: function () {
        console.log("我是一个方法");
    }
}
//访问属性 
console.log(obj.name);
//访问方法 => 添加括号可以调用
// obj.eat => 得到就是一个函数

console.log(obj.eat);
obj.eat();//访问对象里面的方法




/* 定义一个函数 */
function fn(){
    console.log("我是一个普通的函数");
}
console.log(fn);
fn();

this

this在全局作用域下面执行window
在函数当中,谁调用某一个函数,那么this执行的就是谁

<button id="btn">点我</button>

//this=>window
console.log(this);

//谁调用这个fn这个函数,this=>谁
function fn(){
    console.log(this); //=>window
}
window.fn();

//谁调用这个fn这个函数,this=>谁
btn.onclick = function(){
    console.log(this);
}

window(窗口)

window是浏览器的顶级对象
在全局作用域下面this=>window
我们在全局作用域当中写一个变量=>就是window的属性,我们在全局作用域当中写一个函数,就是window的方法(行为)

//window是浏览器里面的顶级对象
//在全局作用域当中定义一个变量 => 这个变量就是window的属性
//在全局作用域当中定义一个函数 => 这个函数就是window的行为

// 在全局作用域当中定义一个变量 => 这个变量就是window的属性
var aaaa = 10111;
console.log(this);
console.log(window);

console.log(window.aaaa);
window.alert("1111111");


//在全局作用域当中定义一个函数 => 这个函数就是window的行为
function a1111(){
    console.log("11111111111111");
}

/* 
    拓展:
        函数和方法有什么区别?
    如果一个函数是在写对象当中 => 方法
    如果一个函数没有写在对象里面 => 函数

回顾

str.split("a") 对str这个字符串里面的字符a进行切割,切割完毕之后是一个数组
预解析

浏览器执行JS代码的时候,会现对象JS代码进行一个扫描,对var关键字声明的变量进行提升(只提升变量)
浏览器执行JS代码的时候,会现对象JS代码进行一个扫描,对function声明函数进行提升,提升整个函数
函数的内部也会进行预解析
当function关键字声明函数与var关键字声明变量命名相同的是,函数的优先级高于变量

作用域

全局作用域
- this=>window
- 定义在script里面function函数的外面
- 定义在全局作用域里面的变量属于全局变量,整个script文件里面都可以进行访问
- 在函数的内部没有使用var关键字声明的变量属于全局变量
局部作用域
- 定义函数的内部
- 局部作用域里面的var关键字声明的变量属于局部变量
变量的访问机制
- 在当前作用域当中进行查找,如果找到了,就使用,如果没有找到就去外部作用域找
- 在外部作用域找到了,就使用,找不到就再去外部作用域找,依次类推,一直找到全局作用域
- 在全局作用域还找不到,xx is not defined

对象

创建对象两种方式
- 使用内置构造函数创建对象
```
var obj = new Object()
//属性
obj.key = value
//方法
obj.key = function(){

}
```
- 使用字面量创建对象
```
var obj = {
    //属性
    key:value,
    //方法
    key:function(){

    }
}
```
- 操作对象的属性
  - 点语法
```
添加或者修改 => 对象名.key = value (注意:有则修改,无则添加)
删除对象的属性 => delete 对象名.key
获取对象的属性 => 对象名.key (注意:获取对象的属性值的时候,点击属性名(key)需要在对象当中存在)
```
  - 中括号语法里面写的是变量或者变量的值
```
添加或者修改 => 对象名[变量名或者变量值] = value (同样遵守有则修改,无则添加)
删除对象的属性 => delete 对象名[变量名或者变量值]
获取对象的属性 => 对象名[变量名或者变量值]
```
  - 使用forin遍历对象
- 中括号和点语法的区别
  - 中括号语法可以写任意类型,点语法是需要遵守变量的命名规则
  - 中括号语法里面可以写变量名或者变量的值,点语法是有则修改,无则添加,获取属性必须要在对象里面存在
- 控制台输出的形式 console.log() => 普通 console.dir() => 打印对象的属性和方法 console.group(),console.groupEnd() => 分组打印
- 深入理解对象 HTML标签其实也是一个对象
- window
  - 全局作用域this=>window
  - window是浏览器的顶级对象
  - 在全局作用域当中变量是window的属性,全局作用域的函数是window的方法
  - window是可以省略不写
- 对象访问方法对象访问方法的时候,点自己身上的属性加上一个小括号,小括号的作用就是调用意思

this

在全局作用域执行window
谁调用这个函数,this=>谁
JavaScript第5天

回顾

split 将一个字符串切割成一个数组
预解析浏览器在对我们代码执行之前,将我们的代码进行扫描,对var关键字声明变量进行提升,function声明的函数进行提升,函数的内部也会提升,当函数名与与变量重名的时候,函数的优先级高于变量
作用域

全局作用域
- 全局作用域里面变量叫做全局变量,整个script都可以访问
- 全局作用域是在script里面,function函数的外面
- 全局作用域this=>window
- 全局作用域下的变量是window的属性,全局作用域下面的函数是window的方法
局部作用域
- 在function函数的内部
- 在函数的内容使用var关键字声明的变量是局部变量
- 局部变量只能在当前作用域当中进行访问,外部作用域无法访问
变量的查找机制(作用域链) 先有当前作用域进行查找变量,找到了就使用,找不到就往外找,一直找到全局作用域为止,全局作用域还找不到 xxx is not defined

对象

对象是一个复杂数据类型

创建对象

字面量创建对象

var obj = {
    //属性
    key1:value,
    //方法
    key2:function(){

    }
}

内置构造函数

var obj = new Object();
//属性
obj.key1 = value
//方法
obj.key2 = function(){

}

操作对象的属性
- 点语法
```
增修 => obj.属性名=属性值 (有则修改,无则添加)
删除 => delete obj.属性名
查 => obj.属性名(在获取对象的属性的时候,obj.属性,这个属性需要在对象当中存在)
```
- 中括号语法
```
增修 => obj[变量名或者变量值] => 属性值 (有则修改,无则添加)
删除 => delete obj[变量名或者变量值]
查 => obj[变量名或者变量值]
```
- 点语法和中括号语法的区别
  - 点语法的命名规则需要遵守变量的命名规则,中括号语法可以任意写
  - 在获取对象的属性的时候,obj.属性,这个属性需要在对象当中存在
- 对象的深入理解 HTML标签也是一个对象,我们在使用的JS标签身上属性比较多,占用的内存空间,我们到第三阶段有一个内容虚拟DOM(VMDOM),本质还是JS文件
- 对象访问方法对象.方法() => 小括号表示调用 => 对象.方法,这个方法必须在对象当中存在,或者在原型当中
三种console
- console.log() => 普通输出
- console.dir() => 打印对象的属性和方法
- console.group() => 分组打印,让打印出啦结构清晰
window,this
- window是浏览器的顶级对象
- 全局作用域下的变量是window的属性,全局作用域下面的函数是window的方法
- 全局this=>window
- 谁调用这个函数,那么这个this就是指向的是谁

知识点

拓展函数

递归函数(电影盗梦空间说的就是一个递归函数),递归函数就是函数自己调用自己递归函数慎用

//递归函数
function dream(){
    //在函数自己调用自己 => 递归函数
    var bool = confirm("陀螺停止转动了吗?")
    if(bool == true){ //陀螺停止的转动,回到的现实当中
        return;
    }else{//陀螺一直在转动,还在梦境里面
        alert("当前还在梦境里面")
        dream()
    }
}
dream()

数组

数组和对象一样,也是一个复杂的数据类型(引用数据类型),和变量与对象类型,都是存储数据的, 变量存储的数据只能是一个,在数组里面是存储多个数据,这多个数据呈一个有规律的排列,规律就是下标(索引) 在数组当中的元素是可以是不同的数据类型

创建数组

内置构造函数的创建数组

/* 
    1. 内置构造函数创建数组
*/
var arr1 = new Array()  //创建的是长度为0的数组
var arr2 = new Array(5) //写的是一个数字,这个数字表示就是数组的长度
var arr3 = new Array(1,2,3,4,5) //写的不是一个数字,那么表示就是数组里面的元素(内容)
console.log(arr1);
console.log(arr2);
console.log(arr3);

字面量创建数组

/* 
    2. 使用字面量创建数组
*/
var arr4 = [] //空数组
var arr5 = ["张三","李四","王五"] //有内容的数组
console.log(arr4);
console.log(arr5);

数组的属性

length 数组的长度是一个可读写的属性

var arr = ['🍉','🍎','🍐','🍇','🍌']
//获取数组的长度
console.log(arr.length);
//修改数组的长度
arr.length = 6;
console.log(arr)

根据下标(索引),获取数组里面的元素

/* 
    2. 根据下标(索引),获取数组里面的元素
        数组里面的下标都是从0开始的
        获取数组里面的某一个元素 arr[下标]
*/
var arr1 = ['🍉', '🍎', '🍐', '🍇', '🍌']
//           0      1     2      3     4
var result1 = arr1[1]
var result2 = arr1[4]
var result5 = arr1[5]
console.log(result1);
console.log(result2);
console.log(result5);

遍历数组

/* 
    3. 获取数组里面的所有元素
    for循环
    ['🍉', '🍎', '🍐', '🍇', '🍌']
    arr[0] arr[1] arr[2] arr[3] arr[4]
*/
var arr2 = ['🍉', '🍎', '🍐', '🍇', '🍌'];//arr2.length = 5;
// console.log(arr2[0]);
// console.log(arr2[1]);
// console.log(arr2[2]);
// console.log(arr2[3]);
// console.log(arr2[4]);

// 批量获取
for(var i = 0; i < arr2.length ; i++){
    //获取数组里面的元素
    console.log(arr2[i]);
}

数组练习

练习一

//定义一个数组,求数组里面的若干数字的和
var arr1 = [1,3,5,7,9]
//          0 1 2 3 4
// var sum = arr1[0]+arr1[1]+arr1[2]+arr1[3]+arr1[4]
// 可以使用循环将数组里面的每一个元素都给遍历出来,
// 再定义一个变量sum,将这些数字累加起来
var sum = 0;
for(var i = 0 ; i < arr1.length ; i++){
    sum += arr1[i]
}
console.log(sum);

练习二

//定义一个数组,求数组里面的最大值
/* 
    思路:
        1. 默认第一个值为最大值
            var max = arr[0]
        2. 将第一个值(默认最大值)与后面的每一个值都进行比较,如果后面的值比最大值要大,那么后面的值为最大值
*/
var arr = [1, 2, 9, 3]
var max = arr[0]
// if (max < arr[1]) {
//     max = arr[1]
// }
// if(max < arr[2]){
//     max = arr[2]
// }
// if(max < arr[3]){
//     max = arr[3]
// }
for (var i = 1; i < arr.length; i++) {
    if(max < arr[i]){
        max = arr[i]
    }
}

console.log(max);

练习三

//定义一个数组,求数组里面的最大值的下标(索引)
/* 
    思路:
        1. 默认第一个值的下标为最大值
            var maxIndex = 0
        2. 将默认的最大值与后面的每一个值都进行比较,如果后面的值大于最大值,后面的值就是最大值
*/
var arr = [1,2,9,4,10]
var maxIndex = 0; //默认第一个值的下标为最大值
for(var i = 1; i < arr.length ; i++){
    if(arr[maxIndex] < arr[i]){
        //最大值的索引(下标)
        maxIndex = i;
    }
}
console.log("最大值的索引为",maxIndex);

练习四

//将本班的学生信息录入到数组里面去,录入5个信息
var arr = [] //定义一个空的数组

for(var i = 0 ; i < 5 ; i++){
    arr[i] = prompt("请输入学生的姓名")
}

console.log(arr);

冒泡排序

冒泡排序是排序算法一种,其实就是一种比较算法

//定义一个数组
var arr = [1, 5, 6, 2, 9]
//冒泡排序最终结果
for (var j = 0; j < arr.length - 1; j++) {
    for (var i = 0; i < arr.length - j - 1; i++) {
        if (arr[i] < arr[i+1]) {
            var temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp;
        }
    }
}

选择排序

选择排序也是排序算法里面的一种,也是一个比较算法

//选择排序 => 比较的就是下标
var arr = [1, 4, 5, 6, 2]

for (var j = 0; j < arr.length - 1; j++) {
    //默认第一个(下标为0)数为最小数
    var maxIndex = j;
    for (var i = j+1; i < arr.length; i++) { //1,2,3,4
        if (arr[maxIndex] < arr[i]) {
            //别人的下标才是最大的
            maxIndex = i;
        }
    }
    //将第一个数与最大的那个数交换位置
    var temp = arr[j]
    arr[j] = arr[maxIndex]
    arr[maxIndex] = temp;
}

练习

生成一个数组 => 要求: 数组内存储的数据是从 2 开始的所有偶数 => 要求: 数组长度为 30

// 1. 生成一个数组
//     => 要求: 数组内存储的数据是从 2 开始的所有 偶数
//     => 要求: 数组长度为 30
//先定义一个数组
var arr = new Array(30)
//往数组里面添加元素
/* 
    arr[0] = "张三1"
    arr[1] = "张三2"
    arr[2] = "张三3"
    arr[3] = "张三4"
    arr[4] = "张三5"
    .....
    arr[30] = "张三30"
    
    可以利用循环来实现 初始化条件 i = 0; 循环条件 i < arr.length
*/
for(var i = 0 ; i < arr.length ; i++){
    // console.log(i);
    // arr[0] = 2
    // arr[1] = 4
    // arr[2] = 6
    // arr[3] = 8
    arr[i] = 2*i+2
}
// console.log(arr);

求平均值 => 利用作业1生成的数组, 每五个数字求一个平均值, 放在新数组内 => 例子: -> 作业1: [ 2, 4, 6, 8, 10, ..., 60 ] -> code run here ... -> 结果: [ 6, 16, 26, 36, 46, 56 ]

// 2. 求平均值
//     => 利用作业1生成的数组, 每五个数字求一个平均值, 放在新数组内
//     => 例子:
//         -> 作业1: [ 2, 4, 6, 8, 10, ..., 60 ]
//         -> code run here ...
//         -> 结果: [ 6, 16, 26, 36, 46, 56 ]
/* 
    2 4 6 8 10     12 14 16 18 20     22 24 26 28 30 .... 60
            6               16               26

    思路:
        1. 遍历数组里面所有的元素
        2. 累加循环5次,求平均值,将平均值添加到一个新的数组里面去
*/

var newArr = []  //新数组
var index = 0;  //就是新数组的下标

var sum = 0;
for(var i = 0 ; i < arr.length ; i++){
    //累加所有的和
    sum+=arr[i]
    if(arr[i] % 5 == 0){
        // console.log(sum / 5);

        newArr[index++] = sum/5;

        //还原sum变量
        sum = 0;
    }
}

console.log(newArr);

数组的核心方法

push

var arr = ["🍉",'🍎','🍊']
//往数组的末尾添加一个🍇
var res = arr.push('🍇')
// 返回的就是新数组的长度, arr就是添加元素之后的数组
console.log(res,arr);

var arr = ["🍉",'🍎','🍊']
var res = arr.pop();
//返回结束被删除的元素,arr就是删除之后的数组
console.log(res,arr);

unshift

var arr = ["🍉",'🍎','🍊']
var res = arr.unshift("🍇")
//返回就是新数组的长度,arr就是添加元素之后的数组
console.log(res,arr);

shift

var arr = ["🍉",'🍎','🍊']
var res = arr.shift()
//返回就是被删除的元素,arr就是新数组
console.log(res,arr);


reverse
var arr = ["🍉",'🍎','🍊']
var res = arr.reverse()
//返回就是翻转之后的数组,arr也是翻转之后的数组
console.log(res,arr);

sort

//sort

// 情况一
var arr = [4,2,6,3,5]
var res = arr.sort()
//返回就是排序之后的数组,从小到大,arr也是排序之后的数组
console.log(res,arr);

// 情况二
// 语法:  
// 从小到大 => arr.soft(function(a,b){return a - b})
// 从大到小 => arr.soft(function(a,b){return b - a})
var arr = [9, 12, 5, 7, 21, 13, 122, 121]
// var res = arr.sort(function(a,b){return a - b})  
var res = arr.sort(function (a, b) { return b - a })
//返回就是排序之后的数组,从小到大,arr也是排序之后的数组
console.log(res, arr);

reverse

var arr = ["🍉",'🍎','🍊']
var res = arr.reverse()
//返回就是翻转之后的数组,arr也是翻转之后的数组
console.log(res,arr);

splice

/* 
    参数一  => 操作的下标
    参数二  => 指定下标,删除数组的元素的个数
    参数三往后  => 指定下标,添加数组的元素
*/
var arr = ["🏓",'⚽','🏸','🏀','⚾','🌏']
var res = arr.splice(1,3)
//返回值就是被删除的元素,arr就是删除之后的数组

var res = arr.splice(2,0,'👲🏼','🐵')
//返回值就是被删除的元素,arr就是操作之后的数组

var res = arr.splice(2,1,'👲🏼') 
console.log(res,arr);

JavaScript第6天

回顾

递归函数所谓的递归函数就是函数自己调用自己递归函数慎用
数组有长度由下标的数据的集合

创建数组的两种方式
- 字母量 var arr = []
- 内置构造函数 var arr = new Array() //空数组
- 内置构造函数 var arr = new Array(n) //n数字,表示数组的长度
- 内置构造函数 var arr = new Array(n,m) //表示数组的元素
冒泡排序
选择排序
数组的核心方法
- push
- pop
- unshift
- shift
- reverse
- sort
- splice

知识点

数组的常规方法

concat
join
indexOf
lastIndexOf
slice

/* 
    ### 数组的常规方法
        1. concat       将多个数组合并成一个数组
        2. join         将数组转换成字符串
        3. indexOf      找数组里面的元素,返回对应的下标,如果找不到那么就-1
        4. lastIndexOf  找数组里面的元素,从后面往前面找,返回的是数组对应的下标,如果找不到就返回-1
        5. slice        截取数组(开始截取的下标,结束截取的索引)
*/
//concat 
var arr1 = [1,2,3]
var arr2 = ['张三','李四','王五']
//将多个数组合并成一个数组
var res = arr1.concat(arr2)
console.log(res,arr1,arr2);

//join
/* 
    如果没有写参数,那么数组转换成字符串,里面的元素默认使用,逗号隔开,如果写了字符,那么就使用字符隔开
*/
var arr1 = [1,2,3]
var res = arr1.join() //没有写,默认使用,逗号隔开
var res = arr1.join('^_^!')//如果括号里面写了字符,那么就是字符将数组里面的元素隔开
console.log(res);

//indexOf   菠萝,哈密瓜,
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
//          0    1     2     3     4    5     6
var res = arr.indexOf('🍎') //返回的就是苹果对应的下标
var res = arr.indexOf('🌏') //找不到就返回-1
console.log(res);

//lastIndexOf
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
var res = arr.lastIndexOf('🍎')  //找到了就返回对应的下标,从后面往前面找
var res = arr.lastIndexOf('👲🏼')
console.log(res);

/* 
    slice(参数一,参数二)
        参数一 截取的开始索引
        参数二 截取的结束索引
            在截取的时候,包头不包尾(左闭右开)
*/
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
//           0    1     2    3     4    5     6
var res = arr.slice(2,5) //返回的是一个数组
console.log(res);

注意点: 数组的核心方法和数组的常规方法语法都是数组名.xxx(),核心数组方法修改原数组,常规数组方法不修改原数组

高阶数组方法

forEach
map
filter
some
every
find
findIndex

/*
    - forEach           遍历数组里面的每一个元素,没有返回值
    - map               对数组里面元素按照一定的规律进行加工处理,加工完毕是一种映射关系,返回的就是加工之后的数组
    - filter            对数组里面的元素进行过滤,返回的满足要求的元素
    - some              判断数组里面包含是否满足的元素,包含就是返回true,不包含就返回false
    - every             判断数组里面的所有元素是否都满足要求,都满足要求返回true,不满足要求返回false
    - find              找数组里面的元素,找到了就返回该元素,找不到就返回undefined
    - findIndex         找数组里面的元素,找到了就返回对象的下标,找不到就返回-1
        参数一  数组里面的每一个元素
        参数二  数组里面的元素对象的索引(下标)
        参数三  原数组

        arr.xxx(function(item,index,arr){

        })
        注意: 上面7个高阶数组方法,除了forEach以外,其他的都有返回值
*/

//forEach
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
//遍历数组里面的每一个元素,一般用于取代for循环
arr.forEach(function(item,index,arr){
    console.log(item,index,arr);
})



// map
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
//map => 对数组里面的每一个元素按照一定的规律进行加工处理,返回的就是加工之后的新数组
var res = arr.map(function(item,index,arr){
    //返回的是一个加工之后的新数组
    return item+'👲🏼'
})

var arr = [1,2,3]
var res = arr.map(function(item,index,arr){
    //将数组里面的每一个元素都 * 3
    return item * 3;
})



//filter 过滤
var arr = [1,2,3,4,5,6,7,8,9]
var res = arr.filter(function(item,index,arr){
    //将小于5的数字过滤出来
    // return item < 5;

    //将偶数给过滤出来
    return item % 2 == 0;
})



//some
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
var res = arr.some(function(item,index,arr){
    return item == '🍎1' //数组里面有满足要求的就返回true,没有满足要求的返回false
})



//every 
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
var res = arr.every(function(item,index,arr){
    return item === '🍎' //判断数组里面的所有元素是否都等于🍎
})

var arr = [1,3,5,7,8]
var res = arr.every(function(item,index,arr){
    //判断数组里面的所有元素是否都是奇数,但凡有一个不满足就返回false
    return item % 2 == 1
})



//find
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
var res = arr.find(function(item,index,arr){
    //看数组里面有没有苹果,有就返回,没有就返回undefined
    return item === '🍎1'
})



//findIndex
var arr = ['🍉','🍌','🍇','🍊','🍎','🥝','🍎']
var res = arr.findIndex(function(item,index,arr){
    //看数组里面有没有苹果,有就返回苹果对应的下标,没有就返回-1
    return item === '🍎'
})
console.log(res);

练习

给数组去重

//数组去重方式一
var arr = [1,2,2,2,3,3,3,4,4]
/* 
    思路:
        1. 遍历数组
        2. 如果数组的前面和后面的元素一样,那么就删除前面的元素
            删除使用
                splice
                    参数一执行的下标
                    参数二删除的长度
*/
// for(var i = 0 ; i < arr.length ; i++){
//     // console.log(arr[i]);
//     // 如果数组的前面和后面的元素一样,那么就删除前面的元素
//     if(arr[i] == arr[i+1]){
//         arr.splice(i,1)
//     }
// }
/* 
    数组的塌陷      
        [1,2,2,2,3,3,3,4,4]
            0 1 2 3 4 5 6 7 8 9 0 1 2
           下标         前面与后面             是否删除                                删除之后的数组      
            0           1==2                  不相等,就是不删除数组里面的元素           [1,2,2,2,3,3,3,4,4]
            1           2==2                  相等,那么就删除前面的2                   [1,2,2,3,3,3,4,4]
            2           2==3                  不相等,那么就是不删除数组里面的元素       [1,2,2,3,3,3,4,4]
            3           3==3                  相等,那么就删除前面的3                   [1,2,2,3,3,4,4]
            4           3==4                  不相等,那么就是不删除数组里面的元素       [1,2,2,3,3,4,4]
            5           4==4                  相等,那么就删除前面的4                   [1,2,2,3,3,4]
    解决
        当删除数组里面的某一个元素的时候,删除前面的元素,那么下标还是从删除之前的下标开始 i--

*/
for(var i = 0 ; i < arr.length ; i++){
    //如果前面与后面的元素一样,那么就删除前面的
    if(arr[i] == arr[i+1]){
        arr.splice(i,1)
        //防止数组塌陷
        i--
    }
}
console.log(arr);

//数组去重方式二
var arr = [1, 2, 2, 2, 3, 3, 3, 4, 4]
/* 
    倒循环
        将数组里面的元素倒循环数组
        arr[arr.length-1] => arr[0]
        4,4,3,3,3,2,2,2,1
        8 7 6 5 4 3 2 1 0
    如果前面的元素与后面的元素一样,那么就删除后面的
        4,4,3,3,3,2,2,2,1       i=8
        8 7 6 5 4 3 2 1 0
        4,3,3,3,2,2,2,1         i=7
        7 6 5 4 3 2 1 0
        4,3,3,2,2,2,1           i=6
        6 5 4 3 2 1 0
        4,3,2,2,2,1             i=5
        5 4 3 2 1 0
        4,3,2,2,2,1             i=4
        5 4 3 2 1 0
        4,3,2,2,1               i=3
        4 3 2 1 0   
        4,3,2,1                 i=2
        3 2 1 0   
    倒循环给数组去重没有数组的塌陷问题
*/
for (var i = arr.length - 1; i >= 0; i--) {
    //将前面与后面的进行比较,如果前面的与后面的一样,那么就删除前面的,后面的i-1
    if(arr[i] == arr[i-1]){
        //删除数组里面前面的元素
        arr.splice(i,1)
    }
}
console.log(arr);

//数组去重方式三
var arr = [1, 2, 2, 2, 3, 3, 3, 4, 4]
/* 
    思路:
        1. 创建一个新的空数组
        2. 遍历数组
        3. 在遍历数组的时候,如果数组里面的元素在新的数组已经存在,那么不管,如果遍历的元素在新的数组里面没有存在,那么就将这个元素添加的新的数组里面去
            indexOf => 存在就返回那个下标,不存在就返回-1
*/
var newArr = [] //创建一个新的空数组
arr.forEach(function(item){
    //在新的数组里面找不到item这个元素,那么就将这个元素添加到新数组里面
    if(newArr.indexOf(item) == -1){
        //将item添加到newArr
        newArr.push(item)
    }
})
console.log(newArr);

//数组去重方式四
var arr = [1, 2, 2, 2, 3, 3, 3, 4, 4]
/* 
    我们以前在将对象的时候,操作对象的属性的时候,有则修改,无则添加
    var obj = {
        name:"张三"
    }
    obj.name = '李四'  //有则修改
    obj.a = 1 //无则添加
    分析: 对象的key
        1. 一个对象当中的key有不可能会重复的出现
        2. 对象的key不符合变量的命名规则的时候,需要使用中括号


    思路:
        利用对象的key是唯一的特点给数组去重
        1. 创建一个空的对象
        2. 遍历数组,将数组里面的每一个元素都赋值给对象的key,对象的value无所谓
        {
            1:'无所谓',
            2:'无所谓',
            3:"无所谓",
            4:'无所谓'
        }
        3. 遍历对象,将对象的key存储到一个新的数组里面去
*/
var obj = {} //创建一个空的对象
var newArr = [] //存储的是去重之后的数组
arr.forEach(function(item){
    //将数组里面的每一个元素都赋值给对象的key,对象的value无所谓
    obj[item] = '无所谓'
})
// console.log(obj);

//遍历对象,将对象的key存储到一个新的数组里面去
for(var key in obj){
    newArr.push(+key)
}
console.log(newArr);

/* 
    Set 是ES6新增的新容器语法
        他的作用一般就是为了给数组去重
        语法:var s = new Set(数组)
*/
/* 
    ...运算符
        可以将数组或者对象展开
*/
// var arr = [1,2,3,4,5,6]
// console.log([...arr]); //将数组里面的每一个都给个展开



//数组去重方式五
var arr = [1, 2, 2, 2, 3, 3, 3, 4, 4]
// var s = new Set(arr)
//将s展开,然后变成一个数组 [...s]
// console.log([...s]);

console.log([...new Set(arr)]);

数字

了解进制二进制,逢二进一八进制逢八进一逢十进一逢十六进一二进制八进制十进制十六进制 0 0 0 0 1 1 1 1 10 2 2 2 11 3 3 3 100 4 4 4 101 5 5 5 110 6 6 6 111 7 7 7 1000 10 8 8 1001 11 9 9 1010 12 10 A 1011 13 11 B 1100 14 12 C 1101 15 13 D 1110 16 14 E 1111 17 15 F 10000 20 16 10
进制的转换

//语法 => 十进制的数字.toString(你要转换的进制)

var s = 12; //表示的是十进制的20
//将十进制转换成二进制
var res1 = s.toString(2) //1100
//将十进制转换成八进制
var res2 = s.toString(8) //14
//将十进制转换成十六进制
var res3 = s.toString(16) //C
console.log(res1,res2,res3);

保留小数位

var s = 199.444
//将199.999保留2位小数,会对小数点需要保留位数后面的数进行四舍五入
var res = s.toFixed(1)
console.log(res);

数学函数

/* 
    数学函数
        Math.xxx
*/
//获取一个随机数,随机数的范围是0~1,不等于0,不等于1
console.log(Math.random());
//将一个数字进行四射五入
console.log(Math.round(3.15));
console.log(Math.round(3.55));
//将一个数字进行向上取整
console.log(Math.ceil(4.15));
console.log(Math.ceil(4.0001));
//将一个数字进行向下取整
console.log(Math.floor(4.9999));
console.log(Math.floor(-4.999));
//求π
console.log(Math.PI);
//求一个数字的开方
console.log(Math.sqrt(9));//3
console.log(Math.sqrt(16));//4
//求一个数字的幂次方
console.log(Math.pow(2,3));//求2的3次方
//求一个数的绝对值
console.log(Math.abs(-9));
//求多个数字之间的最大值
console.log(Math.max(1,2,3,4,5,6,7));
//求多个数字之间的最小值
console.log(Math.min(1,2,3,4,5,6,7));

练习

//求0~10之间的随机数
// console.log(Math.random()); //0~1之间,0.00000000000001~0.999999999999999
// console.log(Math.random()*10); //0~10之间,0.000000000001~9.99999999999999
//将Math.random()*10进行向下取整 
// console.log(Math.floor(Math.random()*10));//0~9之间


//注意:乘以11
console.log(Math.random()*11); //0.00000000000001~10.999999999999999
//对这个数字进行向下取整
console.log(Math.floor(Math.random()*11)); //0~10


//求0~10之间的随机数 Math.floor(Math.random()*11) => 0~10

//求10~20之间的随机数 Math.floor(Math.random()*11)+10 => 10~20

//求10~30之间的随机数 => 先求0~20之间的随机数,然后将范围加上10 => 10~30之间的随机数
// console.log(Math.floor(Math.random()*21)+10);

//获取2到5之间的一个随机数 => 先求0~3之间的随机数,然后将范围加上2 => 2~5之间的随机数
console.log(Math.floor(Math.random()*4)+2);

// 12~28 => 先求0~16之间的随机数,然后再加上12 
console.log(Math.floor(Math.random()*17)+12);



//规律
/* 
    求n,m之间的随机数 => 规律
    Math.floor(Math.random()*(max-min+1)+min)
*/
// function fn(n,m){
//     var max = Math.max(n,m)
//     var min = Math.min(n,m)
//     return Math.floor(Math.random()*(max-min+1)+min)
// }

function fn(n,m){
    // var max = Math.max(n,m)
    // var min = Math.min(n,m)
    return Math.floor(Math.random()*((Math.max(n,m))-(Math.min(n,m))+1)+(Math.min(n,m)))
}

//随机的十六进制颜色
// #000000~#FFFFFF => 颜色的数字范围都是在0~16进制
/*
    思路:
        1. 获取六个0~15的随机数
        2. 将六个随机数转换成十六进制
        3. 使用字符串进行拼接

        导入script:src => 调用封装随机数
        十进制的数字.toString(16)
*/
var res1 = fn(0,15).toString(16)
var res2 = fn(0,15).toString(16)
var res3 = fn(0,15).toString(16)
var res4 = fn(0,15).toString(16)
var res5 = fn(0,15).toString(16)
var res6 = fn(0,15).toString(16)
var res = "#"+res1+res2+res3+res4+res5+res6;
var res = "#"+res4+res5+res6;
//DOM
document.body.style.background = res

字符串

是基本数据类型
创建字符串有两种方式

字母量创建字符串 var str = ''
内置构造函数创建字符串 var str = new String('abc')

var str1 = '我是字面量的方式创建字符串'
var str2 = new String("我是内置构造函数创建字符串")

字符串属性

length -> 字符串的长度字符串的长度是一个只读的(数组的长度可读可写的)

var str = "我是一个字符串"
console.log(str.length); //可以度
str.length = 2; //修改字符串的长度,字符串的长度是一个只读的属性,不能修改
console.log(str);


/* 
    回顾一下 数组的长度
        可读可写
*/
var arr = [1,2,3,4,5,6]
console.log(arr.length);
arr.length = 2;
console.log(arr);

下标字符串的下标是从0开始的,字符串不能根据下标去修改字符

var str = "我爱JavaScript"
console.log(str[0]); //输出字符串下标为0的字符
console.log(str[3]); //根据字符串的下标获取里面的字符

//将字符串下标为0的元素修改成你,不能根据字符串的下标修改字符串里面的字符
str[0] = '你'
console.log(str);

/* 
    回顾数组
*/
var arr = [1,2,3,4,5]
arr[2] = "我是二"
console.log(arr);

遍历字符串

var str = '我爱JavaScript'
//遍历字符串
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

JavaScript第7天

回顾

核心数组方法

push
pop
unshift
shift
sort
reverse
splice

常规数组方法

concat
join
slice
indexOf
lastIndexOf

高阶数组方法

forEach
map
filter
every
some
find
findIndex

数字

进行转换 => 十进制的数字.toString(你好转换进制)
保留小数位 => 数字.toFixed(n) //保留n位小数
数学方法
- Math.random
- Math.round
- Math.ceil
- Math.floor
- Math.PI
- Math.abs
- Math.max
- Math.min
- Math.sqrt
- Math.pow

字符串

创建字符串
- 字母量 var str = ''
- 内置构造 var str = new String()
字符串的属性
- length => 只读
- 下标 => 不能根据下标修改字符串的字符
- 遍历

知识点

字符串方法

//定义一个字符串
var str = "   我爱   JavaScript   "
//         0 1 2345678901
//根据下标找字符串的对应的字符
console.log(str.charAt(3));
/* 
    ASCII编码 => 存储的是二进制
    Unicode编码 => 万国码
    GBK => 汉字的编码
*/
//根据下标获取字符串对应的字符串的Unicode编码
console.log(str.charCodeAt(3));
//将字符串的所有字母转换成大写
console.log(str.toUpperCase());
//将字符串的所有字母转换成小写
console.log(str.toLowerCase());
//截取字符串里面的某一段字符串
// 参数一 开始截取的下标        参数二:截取的长度
console.log(str.substr(1,3));
//截取
//参数一 开始截取的下标         参数二:结束截取的下标(包头不包尾,左闭右开)
console.log(str.substring(3,5));
//截取
//参数一 开始截取的下标         参数二:结束截取的下标(包头不包尾,左闭右开)
// 注意: slice的截取可以写负数,如果写负数,表示从后面开始数
console.log(str.slice(3,-1));
//合并字符串 字符串.concat(字符串1,字符串2)
console.log(str.concat('你好','我好'));
//根据字符获取在字符串里面对应的下标
console.log(str.indexOf('a'));
//根据字符串获取在字符串里面对应的下标(从后面往前面数)
console.log(str.lastIndexOf('a'));
//将字符串拆分成数组
console.log(str.split('a'));
console.log(str.split(''));
//将数组里面的字符给替换掉 参数一 换下字符串        参数二换上字符
console.log(str.replace('a','👲🏼'));
//批量替换字符串
console.log(str.replaceAll('a','👲🏼'));
//判断字符串里面是否存在某一个字符,存在就返回true,不存在就返回false
console.log(str.includes('爱'));
//去除字符串的两边去空格
console.log(str.trim());
//去除字符串左边的空格
console.log(str.trimLeft());
//去除字符串开头的空额
console.log(str.trimStart());
//去除字符串右边的空格
console.log(str.trimRight());
//去除字符串结尾的空格
console.log(str.trimEnd());
//判断字符串是否以某某小字符串开头
console.log(str.startsWith('   我爱'));
//判断字符串是否以某某小字符串结尾
console.log(str.endsWith('你好'));
//将字符串重复多少遍
console.log(str.repeat(3));

练习

替换敏感字符串

var str = "我是王者,你是青铜,我是大神,你是CJ,我是神神,你是CJ";
var arr = ['青铜','CJ']
/* 
    思路:
        1. 遍历数组,青铜,菜鸡
        2. 在遍历数组的时候,字符串里面有与数组里面的某一项是一样,那么就替换(replace)成**
*/
arr.forEach(function(item){
    //当我们替换完了之后,需要将之前的字符串保留下标
    // 循环第一次 我是王者,你是**,我是大神,你是CJ
    // 循环第二次 我是王者,你是**,我是大神,你是**
    str = str.replaceAll(item,"**")
    console.log(str);
})

//"我是王者,你是**,我是大神,你是**"

翻转字符串

var str = "abcdefg"

//"gfedcba"

统计字符串出现的次数

var str = "abcabcabd"
/* 
    我们存储内容的时候
        对象key值是唯一的
        1. 定义一个对象,专门用于存储字符串的字符
        2. 遍历字符串
        3. 将字符串里面的每一个字符当做对象的KEY进行存储
            如果在对象里面,key不存在,那么value为1
            如果在对象里面,key已经存在,那么value++
        {
            a:3,
            b:3,
            c:2,
            d:1
        }
        4. 遍历对象,输出对象的key_value即可
*/
// 专门用于存储字符串的字符
var obj = {}
// 遍历字符串
for (var i = 0; i < str.length; i++) {
    //获取字符串里面的每一个字符串
    var item = str[i]
    //在遍历字符串的时候,判断遍历出来的字符在对象的KEY里面是否存在,如果存在,那么value++,如果不存在那么value=1
    // if(obj[item] == undefined){ //隐式类型的转换 obj[item]有值,那么结果为true,如果为undefined,null,0,'',NaN那么结果false
    //     obj[item] = 1;//对象的key是a,value是0
    // }else{
    //     obj[item]++
    // }

    //简化
    // if(obj[item]){
    //     obj[item]++
    // }else{
    //     obj[item]=1;
    // }

    //简化
    obj[item] ? obj[item]++ : obj[item] = 1
}

for(var key in obj){
    console.log(key+"出现了"+obj[key]+"次");
}

字符串的分类

纯数字的字符串 => 123456789
HTML字符串 => 我是一个标签
模板字符串 => 可以换行,可以写变量

/*
语法:
    var str = `
        ${变量}
    `
*/ 
var s = "宾利姐"

var str = `
你好!
${s}
富婆
`
console.log(str);

查询字符串

<!-- 
    action => 找服务器URL的
    name => 传送给服务器字段

        https://www.baidu.com/ => 找到的服务器
        username=admin&password=123456  =>  传送给服务器账号密码(查询字符串)
    -->
<form action="http://www.baidu.com">
    账号: <input type="text" placeholder="请输入账号" name="username"><br>
    密码: <input type="password" placeholder="请输入密码" name="password"><br>
    <input type="submit" value="登录">
</form>

JSON字符串 JSON字符串和对象比较相似,但是也有区别,他们的区别是 JSON字符串的KEY需要使用引号引用起来将JSON字符串转换成对象 => JSON.parse(json字符串) 将对象转换成JSON字符串 => JSON.stringify(对象)

var obj = {
    name:"张三",
    age:18,
    gender:"男"
}
//将对象转换成JSON字符串
// 语法 => JSON.stringify(对象)
var jsonstr = JSON.stringify(obj)
console.log(jsonstr);


//将JSON字符串转换成对象
//JSON.parse(json字符串)
var obj = JSON.parse(jsonstr)
console.log(obj);

练习

将 username=admin&password=123456 转换成 {username:'admin',password:'123456'}

// 将 `username=admin&password=123456` 转换成 `{username:'admin',password:'123456'}`
var str = "username=admin&password=123456";
/* 
    思路:
        1. 使用split切割,对&进行切割 => ["username=admin","password=123456"]
        2. 遍历数组,对=进行切割
                ['username', 'admin']
                ['password', '123456']
        3. 定义一个对象,存储的key_value
*/
//定义一个对象
var obj = {}

var arr = str.split("&")
// console.log(arr);
//遍历数组
arr.forEach(function(item){
    // console.log(item);
    var  res = item.split("=")
    // console.log(res[0],res[1]);
    var key = res[0]
    var value = res[1]

    //将keyvalue添加到对象里面去,用点语法,还是中括号语法
    obj[key] = value
})
console.log(obj);

将 {username:'admin',password:'123456'} 转换成 username=admin&password=123456

// 将 `{username:'admin',password:'123456'}` 转换成 `username=admin&password=123456`
var obj = {username:'admin',password:'123456',age:18,gender:'男'}
/* 
    思路:
        1. 遍历对象
        2. 定义一个字符串,用于拼接对象的key和value -> 用等号进行拼接对象的key和value值
*/
var str = ''
for(var key in obj){
    // console.log(key,obj[key]);
    /* 
        循环第一次      username=admin          username=admin
        循环第二次      password=123456         username=admin&password=123456&
    */
    str += `${key}=${obj[key]}&`
}
//参数一 开始的索引(下标)  参数二 结束的索引(下标),参数二如果写负数那就是倒着数
str = str.slice(0,-1)

console.log(str);

时间

使用内置构造函数创建时间对象 var d = new Date()
操作时间

获取事件 => get 比如

//使用内置构造函数创建时间对象
var d = new Date();
//获取年
var yea = d.getFullYear()
//获取月 => 需要+1,原因是获取到的月份是0~11,其中0对应的1月份,11对应的是12月份
var mon = d.getMonth()+1
//获取日
var dat = d.getDate();
//获取时
var hou = d.getHours();
//获取分
var min = d.getMinutes();
//获取秒
var sec = d.getSeconds();
//获取周
var wee = d.getDay();

//使用模板字符串进行拼接
var time = `${yea}年${mon}月${dat}日 ${hou}时${min}分${sec}秒`

document.write(time)

设置时间 => set

//设置年
d.setFullYear(2020)
//设置月=显示的月-1
d.setMonth(8-1) //15=12+3
//设置时
d.setHours(8)

时间戳 1970是计算机告诉发展的一年,所以一般以1970年1月1日0点0分00秒作为计算机的开始时间以格林威治时间为准时间戳的单位一般是毫秒

获取时间戳
- var d = +new Date()
- var d = new Date(); var res = d.getTime()
- var d = new Date(); var res = d.valueOf()

//获取时间对象
var d = new Date();
//获取当前的时间戳 方式一
var d1 = +new Date();
//获取当前的时间戳 方式二
var d2 = d.getTime()
//获取当前的时间戳 方式三
var d3 = d.valueOf();

console.log(d1);
console.log(d2);
console.log(d3);

计算距离2022年12月21日已经过去多少天了

// 计算距离2022年12月31日已经过去多少天了
/* 
    思路:
        1. 获取2022年12月31日的时间戳
        2. 获取当前的时间戳
        3. 将当前的时间-2022年12月31日时间戳 => 时间,单位毫秒值
        4. 将毫秒值转换成天
*/
//获取2022年12月21日的时间戳
var d1 = +new Date('2022-12-31')
//获取当前的时间戳
var d2 = +new Date();
// 将当前的时间-2022年12月31日时间戳 => 时间,单位毫秒值
var res = d2 - d1;
// 将毫秒值转换成天
console.log(parseInt(res / 1000 / 60 / 60 / 24));

定时器

一次性定时器

setTimeout(function(){

},时间)//毫秒=>当过了时间之后,触发匿名函数里面的代码

永久定时器(循环定时器)

setInterval(function(){

},时间)//毫秒=>每过一段时间之后,就会触发匿名函数里面的代码

//一次性定时器
var timer1 = setTimeout(function(){
    console.log("2秒钟之后就执行JS代码");
},2000) //函数里面的代码2秒钟之后就执行


//循环定时器
var timer2 = setInterval(function(){
    console.log("每过1秒钟就是匿名函数里面的代码");
},1000)

清除定时器

清除一次性定时器 clearTimeOut(定时器的名字)
清除循环定时器 clearInterval(定时器的名字)

<button id="one">清除一次性定时器</button>
<button id="two">清除循环定时器</button>
<script>
    //清除一次性定时器
    // clearTimeout(定时器的名字)
    // //清除循环定时器
    // clearInterval(定时器的名字)

    //设置一个一次性定时器
    var timer = setTimeout(function(){
        console.log("我是一次性定时器");
    },3000)

    setTimeout(function(){
        console.log("我是另外一个一次性定时器");
    },2000)

    //点击清除一次性定时器的按钮,给按钮绑定一个点击事件
    one.onclick = function(){
        //清除一次性定时器
        clearTimeout(timer)
    }



    //设置一个循环定时器
    var timer2 = setInterval(function(){
        console.log("我是循环定时器");
    },1000)
    //给清除循环定时器的按钮绑定一个点击事件,清除循环定时器
    two.onclick = function(){
        clearInterval(timer2)
    }
</script>

使用开关思想解决

<button id="ks">开始</button>
<button id="tz">停止</button>
<button id="cz">重置</button>
<p id='p'>100</p>
<script>
    //默认的时候,门应该要处于打开的状态
    var flag = true; //flag=true表示们是处于打开的状态

    var timer = null;
    function fn() {
        /* 
            1. 先看门有没有打开,如果门关闭 return
            2. 进去之后,关门 => flag = false
        */
        if(flag === false){
            return;
        }
        //如果进来了,关门
        flag = false;



        timer = setInterval(function () {
            //获取p标签上面的文本值,将文本值进行--
            p.innerHTML--
        }, 1000)
    }
    //一打开页面的时候就要执行函数,让循环定时器后往后走
    fn();

    //点击停止按钮,绑定点击事件
    tz.onclick = function () {
        //停止循环定时器
        clearInterval(timer);

        //停止定时器的时候,开门
        flag = true;
    }

    //点击开始按钮的时候,绑定点击事件
    ks.onclick = function () {
        //运行定时器,直接调用fn函数
        fn();
    }

    //点击重置按钮
    cz.onclick = function () {
        //让p标签的文本回到100
        p.innerHTML = 100;
    }
</script>

JavaScript第8天

回顾

字符串方法

chartAt -> 根据下标找字符串里面的字符
charCodeAt -> 根据下标找字符串里面的字符对应的Unicode编码
toUpperCase -> 将字母转换成大写
toLowerCase -> 将字母转换成小写
substring -> 截取(参数一,开始的下标,参数二,结束的下标),包头不包尾
substr -> 截取(参数一,开始的下标,参数二,截取的长度)
slice -> 截取(参数一,开始的下标,参数二,结束的下标),包头不包尾
indexOf -> 根据字符找下标
lastIndexOf -> 倒着根据字符找下标
concat -> 合并字符串
repeat(n) -> 重复字符串n遍
trim -> 去重两边的空格
trimLeft -> 去除左边的空格
trimRight -> 去除右边的空格
trimStart -> 去除开始的空格
trimEnd -> 去除结束的空格
includes -> 看字符串里面是否包含某一个字符
startsWith -> 判断字符串是否以某某字符开头
endsWith -> 判断字符串是否以某某字符结尾
replace -> 替换
replaceAll -> 批量替换
split -> 切割字符串

字符串的分类

纯数字字符串 -> 123456789
HTML字符串 -> 标签存在
模板字符串 -> 可以换行,可以写${str}变量
查询字符串 -> username=admin&password=123456
JSON字符串 -> var obj = {'name':'张三','age':18}

时间对象
时间戳

+
valueOf
getTime

定时器

一次性定时器 setTimeOut(function(){}),clearTimeOut(定时器的名子)
循环定时器 setInterval(function(){}),clearInterval(定时器的名字)

开关思想

定义一个开关,存储的是一个boolean的值,默认开关是处于打开的状态
进入到某一个业务的时候,先判断开关,然后进入页面,将开关给关闭
业务完毕,打开开关

知识点

BOM(Browser Object Model) 浏览器对象模型

BOM就是浏览器给我们提供一套操作浏览器的属性和方法浏览器当中的顶级老大就是Window 在BOM里面,window都是可以省略不写的,比如 window.alert(),window就可以省略不写

BOM操作浏览器的属性和方法

浏览器的可视窗口

/* 
    注意: 使用window.innerWidth和window.innerHeight是包含浏览器的滚动条宽或者高
*/
//获取浏览器的可视宽度
console.log(window.innerWidth);
//获取浏览器的可视高度
console.log(innerHeight);

浏览器的事件在JS里面,事件完整的写法 => on+事件名比如: onclick,onresize,onload

resize => 当浏览器的窗口发生改变的时候,就触发这个事件
load => 当浏览器的资源(HTML,CSS,JS,视频,音频,图片...)加载完毕的时候,执行这个函数
scorll => 当浏览器的滚动条发生改变的时候,那么就触发这个事件

//resize => 当浏览器的可视窗口发生改变的时候,就触发这个事件
//当浏览器的窗口发生该边的时候,输出下面这一句话,并且输出浏览器的可视宽高
window.onresize = function(){
    console.log("当浏览器的窗口发生改变的时候,触发这个事件");
    console.log(innerWidth,innerHeight);
}


//load事件 => 当页面当中资源(HTML,CSS,JS,视频,音频,...)加载完毕的时候,那么就触发load事件
window.onload = function(){
    //图片太小,加载太快,可以将网络修改成3G=> F12或者检查->network->点击no throttle->3G
    console.log("当资源加载完毕执行这个函数");
}


//scroll事件 -> 当浏览器的滚动条发生改变的时候,那么就执行这个函数
window.onscroll = function(){
    console.log("滚动条动了");
}

浏览器的弹出层

window.alert() -> 提示框
window.confirm() -> 确认框
window.prompt() -> 输入框

//提示框,没有返回值,阻止代码的往后运行
window.alert("弹出")

//确认框,有返回值,当点击确认按钮的时候,返回的是true,点击取消按钮的时候,返回false,阻止代码往后运行
var res = window.confirm("你确定要删除吗?")
console.log(res);

//输入框,有返回值,当点击确认按钮的时候,返回就是我们输入的内容,是一个string类型,当点击取消按钮的时候,返回null,阻止代码往后运行
var res = window.prompt("请输入您的名字")
console.log(typeof res,res);
console.log(11111111111);

浏览器的标签页

window.open("URL地址") -> 打开某一个标签页
window.close() -> 关闭当前标签页

<button id="kai">去百度</button>
<button id="guan">关闭标签页</button>
<script>
    //点击打开的时候,打开一个标签页,标签页的地址百度
    kai.onclick = function(){
        //打开一个标签页,去百度
        window.open("https://www.baidu.com")
    }
    //点击关闭的时候,关闭当前页面d
    guan.onclick = function(){
        window.close();
    }
</script>

浏览器的历史记录

window.history.forward() => 前进
window.history.back() => 后退
window.history.go() => 前进后退都行
- go(1) => 前进一页
- go(-1) => 后退一页
- go(0) => 刷新页面参考 history 文件夹

浏览器location对象

window.location.href => 输入某一个网址
window.location.reload => 刷新

<button id="qf">去千锋</button>
<button id="sx">刷新</button>
<script>
    //location对象
    // window.location.href => 输入某一个网址
    qf.onclick = function(){
        //输入千锋URL
        window.location.href = "http://1000phone.com"
    }
    // window.location.reload => 刷新
    sx.onclick = function(){
        //刷新
        window.location.reload();
    }
</script>

获取浏览器的卷出高度

//兼容性的写法
//上下卷出
var scollH = document.documentElement.scrollTop || document.body.scrollTop
//左右卷
var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(scrollL);

浏览器卷到

//语法一
//参数一 X坐标
//参数二 Y坐标
window.scrollTo(200,300)

//语法二
//参数一个对象
window.scrollTo({
    top:500,//往上面卷
    left:500,//往左边卷
    behavior:"smooth" //丝滑
})

DOM(Document Object Model) 文档对象模型

操作标签的文本

浏览器给我们提供了一套操作文档的属性与方法

获取页面的标签元素

<ul>
    <li id="i1">1</li>
    <li>2</li>
    <li class="c1">3</li>
    <li class="c1">4</li>
</ul>
<ol>
    <li>1</li>
    <li class="c1">2</li>
    <li>3</li>
    <li>4</li>
</ol>
<script>
    //获取页面的标签元素
    //1. ID直接写
    console.log(i1);
    //2. 使用document.getELementById("id")
    console.log(document.getElementById('i1'));
    //3. 使用document.getELementsByClassName("类名")
    // 注意: ID是唯一的,只能后去一个,但是类名不是唯一的,可以获取到的是一个伪数组(有长度,有下标)
    console.log(document.getElementsByClassName("c1"));
    //4. 使用document.getElementsByTagName("标签名"),可以获取到的是一个伪数组(有长度,有下标)
    console.log(document.getElementsByTagName("li"));
    //5. 使用选择器 document.querySelector("CSS选择器"),只能获取到第一个
    console.log(document.querySelector("li"));
    console.log(document.querySelector("ol>li.c1"));
    console.log(document.querySelector("li:nth-child(3)"));
    //6. 使用获取多个的选择器 document.querySelectorAll("选择器"),可以批量获取,获取到的是一个伪数组(有长度,有下标)
    console.log(document.querySelectorAll(".c1"));
    console.log(document.querySelectorAll("ul>li.c1"));
</script>

获取页面的文本值

innerHTML
- 获取标签身上的HTML文本值 => 标签.innerHTML
- 设置标签身上的HTML文本值 => 标签.innerHTML = '张三'

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    //将第二个li的文本值修改的👲🏼
    /* 
        1. 获取第二个li标签
        2. 使用innerHTML进行修改文本值
    */
    var li = document.querySelector("li:nth-child(2)")
    li.innerHTML = "👲🏼"

    //获取第三个li标签的文本值
    var li3 = document.querySelector("li:nth-child(3)")
    console.log(li3.innerHTML);
</script>

innerText
- 获取标签身上的文本值 => 标签.innerText
- 设置标签身上的文本值 => 标签.innerText = "李四"

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    //获取元素(标签)
    var li3 = document.querySelector("li:nth-child(3)")
    // console.log(li3);
    //获取标签身上的文本值
    console.log(li3.innerText);
    //设置标签身上的文本值
    li3.innerText = "🍉"
</script>

innerHTML与innerText的区别

<h1>富婆</h1>
<p id="p1">年少不知富婆好</p>
<p>错把少女当成宝</p>
<p id="p2">要是当年能回头</p>
<p>子孙三代不用愁</p>
<script>
    //1. 获取p1标签
    var p1 = document.querySelector("#p1")
    // innerHTML可以识别 HTML 标签
    p1.innerHTML = "<h1>年少不知爱意好</h1>"


    //1. 获取p2的标签
    var p2 = document.querySelector("#p2")
    // innerText 不可以识别HTML 镖旗
    p2.innerText = "<h1>现在如果能回头</h1>"
</script>

value
- 获取表单身上的value值 => 标签.value
- 设置表单身上的value值 => 标签.value = 你好!

<label>
    账号: <input type="text" placeholder="请输入账号" value="你好!">
</label><br>
<script>
    //1. 获取账号后面的文本框,只能获取多个input文本框里面第一个
    var inp1 = document.querySelector("input")
    //修改value值
    inp1.value = "我好!"
    //获取value值
    console.log(inp1.value);
</script>

操作标签的属性

获取标签的属性 标签.getAttribute(key)
设置标签的属性 标签.setAttribute(key,value)
删除标签的属性 标签.removeAttribute(key)

<div name="👲🏼">我是div</div>
<script>
    //1. 先获取div这个标签
    var div = document.querySelector("div")
    //2. 获取标签的属性
    console.log(div.getAttribute("name"));
    //3. 修改标签的属性
    div.setAttribute("name","文渊")
    //4. 删除标签的属性
    div.removeAttribute("name")
</script>

JavaScript第9天

回顾

操作浏览器的可视窗口大小 window.innerHeight window.innerWidth
操作浏览器的事件

resize => window.onresize
load => window.onload
scroll => window.onscroll

操作浏览器弹出层

window.alert()
window.confirm()
window.prompt()

操作浏览器的标签页

window.open(url)
window.close()

操作浏览器的历史记录

window.history.forward();
window.history.back();
window.history.go()

操作浏览器的location

window.location.href
window.location.reload()

操作浏览器的卷出的高度

document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollLeft || document.body.scrollLeft

操作浏览器的卷动到

window.scrollTo(x轴,y轴)
window.scrollTo({ top:yyy, left:xxx, behavior:'smooth' })

获取元素

ID直接写 => 获取一个
document.getELementById => 获取一个
document.getElementsByClassName => 获取伪数组
document.getElementsByTagName => 获取伪数组
document.querySelector => 获取一个
document.querySelectorAll => 获取伪数组

操作元素的文本值

innerHTML
- 获取 => console.log(元素.innerHTML)
- 设置 => 元素.innerHTML = "value值"
innerText
- 获取 => console.log(元素.innerText)
- 设置 => 元素.innerText = "value值"
value
- 获取 => console.log(元素.value)
- 设置 => 元素.value = "value值"

操作元素的属性

获取属性 => 元素.getAttribute("key")
设置属性 => 元素.setAttribute("key","value")
删除属性 => 元素.removeAttribute("key")

知识点

操作元素的样式

设置样式 => 标签.style.样式名 = 样式属性
获取样式
- 行内样式 => 标签.style.样式名
- 非行内样式 => window.getComputedStyle(样式名)[样式属性]

* {
    margin: 0;
    padding: 0;
}
div {
    color: red;
    background-color: springgreen;
}

<div style="font-size: 30px;">我是一个div</div>
<script>
    /* 
        设置元素的样式 => 元素.style.样式名 = 样式值
        获取行内样式 => console.log(元素.style.样式名);
        获取非样内样式 => console.log(window.getComputedStyle(元素)['样式名'])
    */
    //操作元素的样式
    //获取元素
    var div = document.querySelector("div")
    //设置元素的样式
    div.style.width = "40px"
    div.style.height = "40px"
    div.style["font-size"] = "12px"
    //获取元素的样式
    // var res1 = div.style.color
    var res1 = window.getComputedStyle(div)['color']
    //获取行内样式
    var res2 = div.style.height 
    var res3 = div.style['font-size']
    console.log(res1,res2,res3);
</script>

操作元素的属性

原生属性

<!-- 操作原生属性 -->
<div id="i1"></div>
<script>
    //1. 获取元素
    var box = document.querySelector("div")
    //操作原生属性
    box.id = "zhangsan"
    box.style.color = "red"
    // box.class = "c1"        //class是一个关键字,会单独操作
    //操作自定义属性
    // box.username = "👲🏼" //不行,自定义属性不能使用原生进行点


    //2. 获取元素
    console.log(box.id);
    console.log(box.style.color)
</script>

自定义属性

<div>我是一个div</div>
<script>
    //获取元素
    var box = document.querySelector("div")
    //设置属性
    box.setAttribute("username","wenyuan")
    box.setAttribute("password","123456")
    //获取
    console.log(box.getAttribute("username"))
    //删除
    box.removeAttribute("password")
</script>

H5自定义属性(核心)

<div>我是一个div</div>
<script>
    //1. 获取div标签
    var box = document.querySelector("div")
    //设置元素的自定义属性
    box.dataset.username = "wenyuan"  //会以data-开头,将驼峰命名的属性使用-进行对单词进行隔开
    box.dataset.userName = "xiaoliu"
    //获取
    console.log(box.dataset.username); 
    console.log(box.dataset.userName);
    //删除
    delete box.dataset.userName 
    delete box.dataset.username
</script>

注意: 三个比较特殊的选择如果选中,那么就是true,如果没有选中,那么就false,他们的选中状态是用boolean来进行表示的

<!-- 
    selected => 默认选中
    checked => 多选框的默认选中
    disabled => 禁用
    -->
<input type="checkbox" >
<script>
    //获取文本框的选中状态
    var inp = document.querySelector("input")
    console.log(inp.checked);
    console.log(inp.disabled);
</script>

练习

<label>
    全选: <input type="checkbox" id="all">
</label>
<hr>
兴趣爱好!<br>
<label>
    🏀: <input type="checkbox" class="one">
</label><br>
<label>
    ⚽: <input type="checkbox" class="one">
</label><br>
<label>
    🏓: <input type="checkbox" class="one">
</label><br>
<label>
    🏸: <input type="checkbox" class="one">
</label><br>
<label>
    ⚾: <input type="checkbox" class="one">
</label><br>
<script>
    /* 
        1. 获取单选和多选按钮
        2. 点击多选按钮
            A. 获取全选的选中状态
            B. 如果全选为true,那么几个单选都为都选中,反之几个单选都不选中
        3. 点击几个单选
            A. 遍历所有的单选
            B. 点击一次单选,需要统计单选选中的个数
            C. 如果单选选中的个数与伪数组的长度一样,多选选中,否则多选不选
    */
    // 1. 获取单选和多选按钮
    var all = document.querySelector("#all")
    var ones = document.querySelectorAll(".one")
    // 2. 点击多选按钮
    all.onclick = function(){
        // 获取全选的选中状态
        // console.log(this.checked);
        // if(this.checked){
        //     // 那么几个单选都为都选中
        //     for(var i = 0 ; i < ones.length ; i++){
        //         ones[i].checked = this.checked
        //     }
        // }else{
        //     // 反之几个单选都不选中
        //     for(var i = 0 ; i < ones.length ; i++){
        //         ones[i].checked = this.checked
        //     }
        // }

        //简化
        for(var i = 0 ; i < ones.length ; i++){
            ones[i].checked = this.checked;
        }
    }

    // 遍历所有的单选
    for(var i = 0 ; i < ones.length ; i++){
        // 点击一次单选,需要统计单选选中的个数
        ones[i].onclick = function(){
            //统计单选选中的个数
            var sum = 0;
            for(var j = 0 ; j < ones.length ; j++){
                if(ones[j].checked){
                    sum++
                }
            }
            //输出一下选中的个数
            // console.log(sum);
            // 如果单选选中的个数与伪数组的长度一样,多选选中,否则多选不选
            // if(sum == ones.length){
            //     all.checked = true;
            // }else{
            //     all.checked = false;
            // }

            //简化
            // sum == ones.length ? all.checked = true : all.checked = false;

            //再次简化
            all.checked = sum == ones.length
        }
    }
</script>

操作元素的类名

className

获取 => 元素.className
设置 => 元素.className = 类名
追加 => 元素.className += 类名 => 注意类名之前需要有一个空格

.red{
    color: red;
}
.blue{
    color: blue;
}
.fs{
    font-size: 30px;
}

<div class="red">我是一个div</div>
<script>
    //操作元素的类名
    //先获取这个标签
    var box = document.querySelector("div")
    //设置元素的类名
    // box.className = "blue"
    // box.className = 'fs'
    box.className = "blue"
    //追加
    box.className += " fs"
    //获取元素身上的类名
    console.log(box.className);
</script>

classList

添加 => 元素.classList.add(类名)
删除 => 元素.classList.remove(类名)
切换 => 元素.classList.toggle(类名) 有则删除,无则添加

<style>
    .red{
        color: red;
    }
    .fs{
        font-size: 30px;
    }
</style>

<div class="red">我是一个div</div><br>
<button id="btn">切换</button>
<script>
    //先获取元素
    var box = document.querySelector("div")
    //添加一个类名
    box.classList.add("blue")
    box.classList.add("fs")
    //删除一个类名
    box.classList.remove("red")
    // box.classList.remove("fs")
    //获取
    console.log(box.classList[1]);
    //切换
    btn.onclick = function(){
        //点击按钮的时候,切换div的blue,切换就是有就删除,没有就添加
        box.classList.toggle('red')
    }
</script>

练习

排他思想先把公共的事情处理完毕,然后再单独处理自己的事情

<ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

/* 
    排他思想:
        就是先把公共的事情给处理了,然后再单独处理自己的事情
    需求:
        当我点击某一个小圆点的时候,这个小圆点处于红色,其他的小圆点都是绿色
    思路:
        1. 获取所有的小圆点
        2. 遍历所有小圆点
        3. 点击其中的某一个小圆点,这个小圆点处于激活的状态(红色),其他的小圆点都处于绿色
            排他思想: 
                点击某一个小圆点,先将所有的小圆点的激活样式失活,删除active
                再将点击的这个小圆点给一个激活的状态
*/
//1. 获取所有的小圆点
var lis = document.querySelectorAll("li")
//2. 遍历所有小圆点
for(var i = 0 ; i < lis.length ; i++){
    // console.log(lis[i]);
    // 点击某一个小圆点
    lis[i].onclick = function(){
        //让所有的小圆点都失去active激活样式
        for(var j = 0 ; j < lis.length ; j++){
            //使用classList进行删除操作
            lis[j].classList.remove("active")
        }
        //你点击的是哪一个,就让哪一个有激活的样式
        this.classList.add("active");
    }
}

同步异步

在JS里面代码的执行时机分两种(同步代码,异步代码),JS会优先执行同步代码,当同步代码执行完毕之后,再执行异步代码

同步代码
异步代码

DOM回调
定时器
Ajax 看图

tab栏的切换

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 600px;
    height: 400px;
    border: 2px solid red;
    margin: 50px auto 0;
}

ul,
ol,
li {
    list-style: none;
}

.box>ul {
    height: 100px;
    width: 600px;
    background-color: pink;
    display: flex;
}

.box>ul>li {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    color: #fff;
}

.box>ul>li.active {
    background-color: springgreen;
}

.box>ol {
    width: 600px;
    height: 300px;
    background-color: pink;
}

.box>ol>li {
    display: none;
    line-height: 300px;
    text-align: center;
    font-size: 42px;
    color: rgb(59, 59, 184);
}

.box>ol>li.active {
    display: block;
}

<div class="box">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li class="active">A</li>
        <li>B</li>
        <li>C</li>
    </ol>
</div>

<script>
//操作UL和OL,那么一定是先要获取UL和OL
var oLis = document.querySelectorAll(".box>ol>li")
var uLis = document.querySelectorAll(".box>ul>li")
/* 
    上面的思路:
        1. 遍历所有的ul下面的li
        2. 给ul下面的li添加一个点击事件
        3. 在点击事件当中用到排他思想
            先将所有的ul>li给清除active样式,然后再给点击的那个li添加active样式
*/
// 1. 遍历所有的ul下面的li
for (var i = 0; i < uLis.length; i++) {
    //给ul下面所有li都绑定自己的下标
    uLis[i].dataset.index = i;
    // 2. 给ul下面的li添加一个点击事件
    uLis[i].onclick = function () {
        // 3. 排他思想
        for (var j = 0; j < uLis.length; j++) {
            //删除所有的样式
            uLis[j].classList.remove("active")
        }
        //给点击的那个标签添加激活样式
        this.classList.add("active")

        /* 
            思路:
                上面的1,2,3和下面的A,B,C只有一个下标是一样的
                    1和A是对应的,下标为0
                    2和B是对应的,下标为1
                    3和C是对应的,下标为2
                点击1的时候,隐藏A,B,C,然后让A激活,所以我们再点击1的时候获取1的下标0,将下标使用H5自定属性绑定在li的标签上面
            步骤:
                1. 先给所有的ul下面的所有li绑定自己的下标
                2. 点击的时候,获取自己的下标 index
                3. 触发排他思想,将A,B,C都隐藏起来
                4. 触发ol下面对应的li[index]激活
        */
        //点击的时候,获取自己的下标 index
        // console.log(this.dataset.index);
        var index = this.dataset.index;
        for (var j = 0; j < oLis.length; j++) {
            oLis[j].classList.remove("active")
        }
        oLis[index].classList.add("active")
    }
}
</script>

二阶段1