JavaScript基础笔记

第一章 初识JavaScript

01-JavaScript初体验

 <script>
        //浏览器对象模型
        alert("hello world")
 </script>

02-输入输出语句

1.输出语句

1-1 用于在浏览器中弹出警告框

<script>
    window.alert('未满十八岁禁止访问')
</script>

1-2 用于在网页中输出内容

<script>
    document.write('我刚满18岁')
</script>

1-3 用于在控制台中输出信息

<script>
    console.log("123456");
</script>

2.输入语句

2-1 在浏览器中弹出输入框，用户可以输入内容

<script>
    prompt("请输入你的年龄")
</script>

2-2 在浏览器中弹出确认框

<script>
    confirm('你真的16岁吗?')
</script>

03-JS代码引入方式

1 行内式

<button onclick="window.alert('别点了')">点我呀</button>

2 嵌入式

<script>
        document.write('就要点你')
</script>

3 外链式

<script src="./03-外链式.js"></script>

console.log("12345")

第二章 JS基本语法

01-变量

1-1 变量的声明与赋值

1-1-1 先声明再赋值

    var tom;  // 声明了一个叫tom的变量

    var jack,jacks;  // 同时声明了2个变量

    tom = 'boy';  // 为变量赋值

    console.log(tom); // 输出变量的值

1-1-2 声明的同时进行赋值

    var height = 188; // 声明了一个叫height的变量并赋值为188

    console.log(height); // 输出变量的值

1-2 let声明变量

// let用于声明变量，是ES6新语法。

// ES6语法是指2015年推出的ECMASprict新规范。

// let在声明变量时，在一个代码块内，不允许有变量取一样的名字。

// 以一个花括号{}括起来的，为一个代码块。

    let boyFriend ="魏大勋";

    boyFriend ="蔡徐坤";

    //变量值可以被更改，以最后一次为准。

    console.log(boyFriend);// "蔡徐坤"

   

    {let boyFriend = "徐良"

      console.log(boyFriend);}//“徐良”

1-3 const声明变量

// const和let一样，也是es6新语法。

// const一般声明的是不能改变的变量，也就是常量。

// const既不允许将一个变量名反复声明。

// 也不允许在运行过程中变量的值。

1-4 变量声明区别

(1)初始化要求不同，

    使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

(2)重复声明不同，

    使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致，

    而使用const声明的变量，在整个运行过程中不能修改初值。

(3)对块级作用域的支持不同，

   (使用一对花括号括起来的代码称为一个代码块所谓块级作用域，

     就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了，

     使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。)

02-数据类型

2-1 数据类型分类

    简单数据类型存储在栈内存中。

    复杂数据类型的内容存储在堆内存中。

    地址存储在栈内存中。

2-2 基本数据类型

2-2-1 boolean-布尔型

true-成功或成立；false-失败或者不成立

2-2-2 number-数字型

// 最大值

    console.log(Number.MAX_VALUE); //1.7976931348623157e+308

// Infinity表示无穷大，也属于数字型

    console.log(Number.MAX_VALUE*2);// Infinity

    console.log(3-2); //1

    console.log("a"-2); //nan

 // NaN表示not a number，不是一个数

 // 但是NaN属于数字类型

---

 // 用isNaN()做判断，会得到true/false结果

 // 当判断的数据是正常的数字，isNaN的结果为false。

 // 当判断的数据不是正常的数字，isNaN的结果为true。

     console.log(isNaN());

     console.log(isNaN(123));// false

     console.log(isNaN("123"));// true

     console.log(("aaa"));//true

2-2-3 string-字符串类型

     let e = " \" 辅导员说 \' 昨天不上晚自习 \' \" ";    //" 辅导员说 ' 昨天不上晚自习 ' "

 // \'是单引号的转义符   \ "是双引号的转义符

2-2-4 undefined-未定义类型

        let baby;

        console.log(baby);  // undefined

// 表明变量还未被赋值。

2-2-5 null-空型

// 空型只有一个一个特殊的null值，表示变量没有指向任何对象。

2-3 数据类型检测

        //当不确定一个变量或值是什么类型的数据时，

        //就用typeof操作符进行数据类型检测。

        // typeof 数据

        // typeof (数据)

        let a =typeof(111)

        console.log(a);//number

        console.log(typeof"111");//string

        console.log(typeof NsN);//number

        console.log(typeof -Infinity);//number

        console.log(typeof true);//boolean

        console.log(typeof"false");//string

        console.log(typeof undefined);//undefined

        console.log(typeof null);//object

2-4 数据类型转换

2-4-1 将数据转换为布尔型数据

          转换时，代表空或者否定的值(空字符串、数字0、NaN、null和unfined)会转换成false，

          其他的值会转换为true。

        let a = Boolean("")

        console.log(a);//false

        console.log(Boolean(""));//false

        console.log(Boolean("false"));//true

        console.log(Boolean(0));//false

        console.log(Boolean(undefined));//false

        console.log(Boolean(null));//false

        console.log(Boolean("null"));//true

        console.log(Boolean(Infinity));//true

        console.log(Boolean(2));//true 

2-4-2 将数据转换为数字类型

        //Number()

        console.log(Number(true));//1

        console.log(Number(false));//0

        console.log(Number(undefined));//NaN

        console.log(Number(null));//0

        console.log(Number("123"));//123

        console.log(Number("123.a"));//NaN

        console.log(Number(""));//0

        console.log(Number("  "));//0

        console.log(Number("true"));//NaN

2-4-3 将数据转换为字符串类型

        let b = false;

        console.log(typeof b);//boolean

        var c = toString(b)

        console.log(typeof c);//string

03-运算符

3-1 算术运算符

        //加号运算符

        let a = 10;

        let b = 20;

        let c = a+b;

        console.log(c);//30

        //减法运算符

        console.log(c-a);//20

        //乘法运算符

        console.log(a * b);//200

        //除法运算符

        console.log(b/a);//2

        //取模运算

        console.log(c%b);//10

        //幂运算

        console.log(2**10);//1024

        //自增运算（前自增）

        let m = 10;

        let n = 20;

        m = ++n;

        console.log(m);//21

        console.log(n);//21

        //自增运算（后自增）

        m = n++;

        console.log(m);//21

        console.log(n);//22

        //自减运算（前自减）

        m = --n;

        console.log(m);//21

        console.log(n);//21

        //自减运算（后自减）

        m = n--;

        console.log(m);//21

        console.log(n);//20

        var x=3;

        console.log(x);//3

        console.log(++x);//4

        console.log(x++);//4

        console.log(x);//5

        console.log(--x);//4

        console.log(x);//4

        console.log(x--);//4

        console.log(x);//3

3-2 字符串运算符

        隐式转换：

        当两个数据类型不同时，JS会按照既定的规则进行转换。

        字符串运算符：

        当加号遇见字符串，加号做拼接使用

        console.log(1+1);//2

        console.log(1+null);//1

        console.log(1+true);//2

        console.log(1+false);//1

        console.log("12"-0);//12

        console.log(Infinity ++);//Infinity

        console.log(null*999);//0

        console.log(null * undefined);//NaN

        console.log(12+"0");//120

        console.log(1+"1");//11

        console.log(null+"999");//null999

        var name ="tom";

        var age = 18;

        console.log(name+"的年龄是"+age);

3-3 赋值运算符

        var a=10;

        var b=20;

        //加并赋值

        a+=b;

        //a=a+b

        console.log(a);//30

        console.log(b);//20

        //减并赋值

        a-=b;

        //a=a-b

        console.log(a);//10

        console.log(b);//20

        //乘并赋值

        a*=b;

        //a=a*b

        console.log(a);//200

        console.log(b);//20

        //除并赋值

        a/=b;

        //a=a/b

        console.log(a);//10

        console.log(b);//20

        //取模并赋值

        b%=a;

        //b=b%a

        console.log(a);//10

        console.log(b);//0

3-4 比较运算符

        //==相等运算符

        console.log(5=="5");//true

        //全等运算符

        console.log(5==="5");//false

        //!= 不相等

        console.log(5!="5");//false

        //!== 不全等

        console.log(5!=="5");//true

        // ==和!=在比较不同数据类型时，会将比较的数据转换为同一类型。

        // ===和!==则不会转换。

3-5 逻辑运算符

        && 逻辑与运算符 一假则假

        || 逻辑或运算符 一真则真

        !  逻辑非运算符 真就是假 假就是真

        使用案例

        var year = prompt("请输入一个年份");

        var res= year%400==0 || year%4==0 && year%100!=0

        //满足为true，是闰年   不满足为false，是平年

        console.log(res);

        //三元表达式

        //如果res的值是false，就会执行冒号前面的语句

        //如果res的值是true，就会执行冒号后面的语句

        res?document.write("闰年"):document.write("平年")

3-6 三元运算符

        //条件表达式 ? 表达式1 :表达式2

        //如果条件表达式的值为true,则返回表达式1的执行结果

        //如果条件表达式的值为false,则返回表达式2的执行结果

        // var nl=prompt("输入年龄");

        // var res= nl>=18

        // res?document.write("成年"):document.write("未成年")

        var num1=prompt("请输入数字");

        var num2=prompt("请输入数字");

        nmu1>num2?document.write(num1):document.write(num2);

        var num=prompt("输入一个数字");

        num>=10?document.write(num):document.write("0"+num);

3-7 运算符优先级

    //比较运算符>逻辑运算符(逻辑与>逻辑或)>赋值运算符

    let a = 3 > 5 && 2 < 7 && 3 == 4

    console.log(a);//false

    let b= 2 == "2"

    console.log(b);//true

    let c = !b || a && b

    console.log(c);//false

    let d = a && (c||b);

    console.log(d);//false

04-流程控制

4-1 选择结构

4-1-1 if语句（单分支语句）

         if(条件表达式){代码段}

案例

        let age=prompt("输入年龄");

        console.log(age);

        if (age>=18) {

            document.write("恭喜你成年了")

        }

---

4-1-2 if...else语句（双分支语句）

         if(条件表达式){代码段1}else{代码段2}

案例

        let score=prompt("输入分数")

        if (score>=60) {

            document.write("及格")

        } else {

            document.write("补考")

        }

---

4-1-3  if...else if...else语句

          if (条件表达式1) {

            代码段1

        } else if (条件表达式2){

            代码段2

        } else if (条件表达式3){

            代码段3

        } else if (条件表达式4){

            代码段4

        } else {

            代码段n

        }

案例

        let ck=prompt("输入存款")

        if (ck<=3000) {

            document.write("1")

        } else if (ck<=4000){

            document.write("2")

        } else if (ck<=5000){

            document.write("3")

        } else {

            document.write("4")

        }

---

4-1-4 switch语句

        let subject = +prompt("输入专业。1-区块链专业,2-UI专业,3-土木专业,4-农林专业")

        switch (subject) {

            case 1:

                document.write("好");

                break;

       

            case 2:

                document.write("很好");

                break;

           

            case 3:

                document.write("非常好");

                break;

            case 4:

                document.write("不好");

                break;

            default:

                document.write("重新")

        }

4-2 循环结构

4-2-1 for语句

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

案例

        var sum = 0;

        for (let i=0; i<=100; i++){

        if(i%2==0){

            sum+=i

            }

        }

        console.log(sum); // 1到100的偶数和2550

4-2-2 while语句

        while(条件表达式){循环体}

案例

        var i=0;

        while(i<+100){

            console.log(i);

            i++;

        }

        let res=confirm("我喜欢你,我们在一起好吗")

        console.log(res);//确定键为true，取消键为false。

        while (!res){

            confirm("我喜欢你,我们在一起好吗")

        }

        confirm("那我们什么时候结婚")

4-2-3 do...while语句

        do{循环体}while()

        var i=0;

        do{

            console.log(i);

            i++

        }while(

            i<=100

        )

4-3 跳转语句

 4-3-1.break

          break语句用于跳出整个循环

<script>
        for (var i=1 ;i<=5;i++) {
        if(i==3){
            console.log("白雪公主吃到了毒苹果");
            break;
        }
        console.log("白雪公主吃了第"+i+"个苹果");
        }
</script>

4-3-2.continue

         continue结束当前循环

<script>
       for (var i=1;i<=5;i++){
            if(i==3){
                console.log("吃到了虫苹果");
                continue;
            }
            console.log("吃到了第"+i+"个苹果");
        }
</script>

4-4 循环嵌套

<script>
        var str="";
       for (let i = 1; i <= 4;i++) {
        for (let j = 1; j <= 4;j++){
            str+="♥" 
        }
        //"\n"换行转义符
        str+="\n"
         }
         console.log(str);    

    var str ="";
    for(let i=0; i<=4;i++){
        for(let j=0;j<=i;j++){
            document.write("♥")
        }
        document.write("<br/>")
    }
    console.log(str);
</script>

---

<script>
    var str="";
    var n=prompt("输入行数")
    n = Number(n)&&parseInt(n)
    //使用number()一级parseINT方法可以确保n是一个纯数字
    if (
        isNaN(n)
    ) {
        n=prompt("输入行数")
    }
    for(let i=1;i<=n;i++){
        //循环列数
        for(let a=0;a<=n-i;a++){
            document.write("&nbsp&nbsp")
            //循环每一行♥前的空格
        }
        for(let j=0;j<2*i-1;j++){
            document.write("♥")
            //循环♥的个数
        }
        document.write("<br/>")
    }
    console.log(str);
</script>

第三章 数组

01-数组的基本操作

    <script>
        //[创建数组]
        // 1.以数组字面量创建数组
        var array = [1,2,3,4,5]
        console.log(array);//[1,2,3,4,5]
        // 2.以new Array()方式创建数组
        var array1= new Array(1,2,3,4,5)
        console.log(array1);//[1,2,3,4,5]

        // [数组构成]
        var array2=['string',123,null,undefined,NaN,array]
        console.log(array2);//['string',123,null,undefined,NaN,Array(5)]

        //[数组长度]
        //数组名.length获取数组长度
        console.log(array2.length);//6
        console.log(array.length);//5

        //[访问数组]
        //“数组的索引”也称为“数组的下标”，以数字表示，默认是以0开始以此递增
        console.log(array[3]);//4
        console.log(array[4]);//5

        //[更改数组] 通过下标更改
        var array4 = [1,2,3,4,5]
        array4[0] = 0
        console.log(array4);//[0,2,3,4,5]
        
        //[新增数组] 通过下标新增
        array4[7] = 10
        console.log(array4);//[0,2,3,4,5,empty,empty,10]
        console.log(array4.length);//8

        //[删除数组值] 利用delete关键字+下标删除
        delete array4[7]
        console.log(array4);//[0,2,3,4,5,empty,empty,empty]
        console.log(array4.length);//8

        //[修改元素长度] 通过.length修改
        array4.length = 5
        console.log(array4);//[0,2,3,4,5]
        array4.length = 20
        console.log(array4);//[0, 2, 3, 4, 5, empty×15]

        //[数组方法]
        //在数组前新增元素unshift
        var arr1 = [4,5,6]
        arr1.unshift(1,2,3)
        console.log(arr1);//[1,2,3,4,5,6]
        //在数组后新增元素push
        arr1.push(7,8,9)
        console.log(arr1);//[1,2,3,4,5,6,7,8,9]

    </script>

02-遍历数组

使用for循环语句

for (var i=0;i<=array.length;i++)

03-二维数组

<script>
        //一维数组
        var arr1 = [1,2,3,4,5]
        //二维数组
        var arr2 = [
            [1,2,3],
            [4,5,6],
            [7,8,9],
        ]

        //访问二维数组
        console.log(arr2[0]);//[1,2,3]
        console.log(arr2[0][1]);//2
</script>

04-数组迭代方法

4.1 map数组遍历器

        // map:使用某种规则映射得到一个数组

        // 遍历数组中的每一个元素，并对每个元素进行相应的处理，并返回新的数组

        // 回调函数一定要有返回值

        // 语法：

        // 数组.map((元素，下标 )=>{return 映射规则})

4.2 filter数组过滤器

        // filter:用于筛选数组中满足条件的新数组并返回

        // 形成的新数组长度！==原数组长度

        // 回调函数的执行次数== 数组长度

4.3 forEach数组遍历器

        // forEach也是用于遍历数组

        // forEACH没有返回值，不用写return

4.4 some

// some:判断数组中是否有元素满足条件

        let res=arr.some(function(val){
            return val<0
        })

4.5 every

        // every:判断数组中是否所有元素满足条件

        // 返回一个布尔类型的值

        // 当所有元素符合条件，则返回true

4.6 findIndex

        //findIndex用于返回第一个符合条件的元素下标

        //需要return返回

4.7 reduce求和

<script>
    let arr = [10,20,50,11,20,33]
    const array=arr.reduce((item,sum)=>item+sum, 0)
    document.write(array/arr.length)
</script>

第四章 函数

01-初识函数

    <script>
        // [函数定义]
        // 函数用于封装完成一段特定功能的代码。
        // 相当于将一条或多条语句组成的代码块封装起来。
        // 用户在使用时只需要关心参数和返回值，就能完成特定的功能。

        // [内置函数]
        // isNaN()判断内容是否为数字类型
        console.log(isNaN("number"));//true
        // parseInt()将小数点前面的内容转化为数字类型
        console.log(parseInt("15.99"));//15

        // [自定义函数]
        // 提高代码的复用性，降低程序维护的难度

        // [函数格式]
        // function name(params) {    
        // }
        // function指这是一个函数语句
        // name是函数名
        // params是函数参数
        // {}内放函数的具体功能

        // [无参函数]
        // 封装函数
        function demo() {
            console.log("我是一个函数");
        }
        // 使用函数
        demo()
        demo()

        // [有参函数]
        function sum(a,b) {
            console.log(a+b);
            return c=a+b
        }
        sum(1,2)
        sum(111,222)

        function total(price,num) {
            console.log(price*num);
        }
        total(5,10)
        total(10,55)

        // [函数的返回值]
        // 函数的返回值是指在函数调用后获得的数据
        // 这个数据需要通过return关键字返回，让函数外可以拿到
        function total1(price,num) {
            return price * num
        }
        console.log(total1(10,10));

        // 函数total是在函数内部打印乘积
        // 每次调用total函数就会执行一次打印命令

        // 函数total1是在函数内部生成一个新的数值并通过return返回
        // 在函数外拿到return返回的数据并打印

        function maxNum(x,y) {
            if (x>y) {
                console.log(x);
            }
            else{
                console.log(y);
            }
        }
        maxNum(6,26)

        function getSum(arr) {
            var sum=0;
            for (var i=0;i<arr.length;i++){
                sum+=arr[i]
            }
            console.log(sum);
        }
        getSum([1,2,3,4,5])
        getSum([1,2,3,4,5,6,7,8,9])

        function isAlltrue(arr1) {
            let res=true;
            for (var i=0;i<arr1.length;i++){
                if (arr1[i]<0) {
                    res=false;
                    break
                }
            }
            return res
        }
        console.log(isAlltrue([1,2,3,4,5])); 

        function getIndex(arr2) {
            let x=-1;
            for(var i=0;i<arr2.length;i++){
                if (arr2[i]===10) {
                    x=i;
                    
                }
            }
            return x
        }
        console.log(getIndex([2,4,6,8,10,12])); 
        console.log(getIndex([1,3,5,7,9,11])); 

        //[获取函数调用时传递的所有实参]
        function num (a,b){
            console.log(a,b);
        }
        num(1,2)//1 2
        num(1,2,3,4,5,6)//1 2 3 4 5 6
        num(1)//1 undefind

        //扩展运算符...
        function num1(...nums){
            console.log(nums);
        }
        num1(1)//[1]
        num(1,2,3,4,5,6)//[1 2 3 4 5 6]

        // argument对象
        // 在开发时，如果不确定行参的个数，可以不设置形参
        // 在函数体中直接通过argument对象获取函数调用时传递的形参
        function num2(){
            console.log(arguments);
            console.log(arguments.length);//5   //3
        }
        num2(1,2,3,4,5)//[1,2,3,4,5]
        num2(1,2,3)//[1 2 3]

        function sum1() {
            console.log(arguments);
            var he=0;
            for (var i=0;i<arguments.length;i++){
                he+=arguments[i]
            }
            console.log(he);
        }
        sum1(1,2,3,4,5,6)
    </script>

02-函数进阶

    <script>
        // [函数表达式]
        // 函数表达式是指将函数值赋给变量的表达式

        let num=1;
        console.log(num);//1

        let fun = function sum(num1,num2) {
            console.log(num1+num2);// 3
        }
        //定义了函数表达式之后，不能再通过函数名调用函数
        //sum(1,2)
        //需要通过变量名调用函数
        fun(1,2)//3

        //[匿名函数]
        //当使用函数表达式时，可以删除函数的名字
        let fun1 = function (num1,num2) {
            console.log(num1+num2);// 3
        }
        fun(1,2)
        let fun2 = function(num1,num2){
            return num1+num2
        }
        console.log(fun2(1,2));

        //[箭头函数]
        //删除function关键字
        //在参数()和函数体{}之间放上=>
        let fun3 = (num1,num2) =>{
            return num1+num2
        }
        console.log(fun3(1,2));

        //当函数体只有一句话时，可以省略return返回值和大括号
        let fun4 = (nmu1,num2) =>num1+num2
        console.log(fun4(1,2));

        //当函数只有一个参数时，可以省略小括号
        let demo = a => a+a
        console.log(demo(1));

        
    </script>

03-回调函数

    <script>
        function demo(a,b) {
            console.log(a+b);
        }
        demo(1,2)
        demo(11,22)
        demo(111,222)

        //回调函数，就是在a中，传入一个函数b作为参数，参数函数b就是回调函数。

        function cal(num1,num2,fn) {
            return fn(num1,num2)
        }

        var num = cal(10,20,function(num1,num2){
            return num1+num2;
        })
        console.log(num);//30

        console.log(cal(30,40,function(num1,num2){return num1+num2;}));//70

        var num1 = cal(30,40,function(num1,num2){
            return num1*num2//1200
        })
        console.log(num1);

        console.log(cal(30,40,function(num1,num2){return num1*num2}));//1200

        console.log(cal(40,10,function(num1,num2){return num1/num2}));

        console.log(cal(40,9,function(num1,num2){return num1%num2}));
    </script>

04-函数作用域

    <script>
        // 全局作用域：全局变量拥有全局作用域
        // 全局变量：在函数体外声明的变量或在函数体内省略var关键字声明的变量。
        var name = "张三";
        let age = 18;
        function fun(){
            console.log(name);
            console.log(age);
        }
        fun()
        console.log(name);
        console.log(age);

        // 局部作用域：局部变量/函数变量拥有局部作用域
        // 局部变量：在函数体内利用var关键字声明的变量
        function fun() {
            var sex = "men"
            console.log(sex);//"men"

            sex1="women"//sex1是省略var声明的变量，属于全局变量。
        }
        fun1()
        // console.log(sex);//not defined
        console.log(sex1);

        // 块级作用域：被块级变量所拥有，在分支语句或循环大括号中定义的变量。
        //            一般一个花括号{}为一个代码块
        //块级变量：let关键字声明的变量。
        for(let i=0;i<=5;i++){
            console.log("循环内部"+i);
        }
        console.log("循环内部"+i);//not defined
    </script>

    <script>
        var i=10// i是全局变量，全局变量可以在函数内外被访问到

        var n=30;// n是全局变量

        function fn1(){
            console.log(i);//函数内可以访问到全局变量i

            let n=20;//n被声明在函数内部，属于函数变量

            console.log(n);//n是函数变量，在函数作用域里可以拿到n的值。
        }

        console.log(i);//函数外也可以访问到全局变量i

        // console.log(n);//函数外部拿不到函数内部声明的变量

        console.log(n);//函数外可以取得全局变量n的值

        fn1()

        function fn2(){
            let n=40;

            console.log(n);//当既有全局变量n，又有局部变量n，就近取值。

            // console.log(n);//在函数内部可以拿到12行n的值
        }
        fn2()
    </script>

05-定时器函数

    <script>
        setTimeout(() => {
            console.log("要抢票了");
        }, 3000);

        // setIimeout(()=>{},timeout);
        // 用来设置某个函数在多少毫秒之后执行

        setInterval(() => {
            console.log("要抢票了");
        }, 3000);

        // setInterval(()=>{},timeout);
        // 用来设置某个函数在多少时间间隔后反复执行

        console.log(1);
        console.log(2);
        console.log(3);
        setTimeout(()=>{
            console.log(4);
        },0);
        console.log(5);
        //1 2 3 5 4 

        //定时器代码是异步代码，需要等全部同步代码执行完成任务
    </script>

06-函数嵌套与作用域链

    <script>
        let demo = "111"

        function func(){

            // let demo = "222" 

            function fun1(){

                // let demo = "333"

                console.log(demo);
            }

            console.log(demo);

            fum1()
        }

        func()

        //变量访问规则:就近原则
        //当在一个作用域中访问变量时，首先看当前作用域有没有声明。
        //如果有则访问，没有则往上级作用域查找。
        //直到达到顶端作用域没有时，程序报错。
    </script>

07-闭包函数

    <script>
        // 闭包(close)函数：是一种代码形式、内部函数访问外部函数的局部变量。

        // 举例：js函数outer中有一个函数inner，
        //函数inner访问了函数outer定义的局部变量demo，此时就产生了闭包。
        //变量所在的函数就是闭包函数，在这里，outer是闭包函数。

        function outer(){
            let demo = 123
            function inner(){
                console.log(demo);
            }
        }

        // 闭包的作用：将变量以函数的形式保护起来，解决变量污染问题。

        // let count = 0
        // setInterval(function(){
        //     console.log(count++);
        // },1000)

        function fn(){
            let count = 0
            setInterval(function(){
                console.log(count++);
        },1000)
    }
    </script>

08-网页计算器

<body>
    <p>整数1：<input type="text" id="num1"></p>
    <p>整数2：<input type="text" id="num2"></p>

    <p>
        <!-- onclick="function"
             onclick表示按钮点击事件，当点击按钮时，就会执行function函数内容 -->
        <input type="button" value="相加" onclick="cal(add)">
        <input type="button" value="相减" onclick="cal(sub)">
        <input type="button" value="相乘" onclick="cal(mul)">
        <input type="button" value="相除" onclick="cal(div)">
    </p>
    <p>结果：<input type="text" id="result"></p>

    <script>
        // 在函数cal中，需要传入一个参数函数func
        function cal(func){
            // document.getElementById：在JS中通过id获取HTML中的元素
            // var num1 = document.getElementById("num1").value
            var num1 = parseInt(document.getElementById("num1").value)
            // var num2 = document.getElementById("num2").value
            var num2 = parseInt(document.getElementById("num2").value)
            var result = document.getElementById("result")
            result.value = func(num1,num2)
        }

        function add(num1,num2){
            return num1+num2
        }
        function sub(num1,num2){
            return num1-num2
        }
        function mul(num1,num2){
            return num1*num2
        }
        function div(num1,num2){
            if(num2 === 0){
                alert("被除数不能为零")
            }
            return num1/num2
        }
    </script>
</body>

09-递归函数

    <script>
        // var n=7
        // var sum=0
        // for (let i=0;i<=n;i++){
        //     sum+=i
        // }
        // console.log(sum);

        function getSum(n){
            var sum=0
            for(let i=0;i<=n;i++){
                sum+=i
            }
            return sum
        }
        console.log(getSum(7));

        function getSum1(n){
            var sum=0
            for(var n ;n>=1;n--){
                sum+=n
            }
            return sum
        }
        console.log(getSum1(7));

        function getSum2(n){
            if(n==1){
                return 1
            }
            return n+getSum(n-1)
        }
        console.log(getSum2(7));
    </script>

第五章 对象

1.介绍对象

    <script>
        // 对象:(object)是一种复杂数据类型。
        // (简单数据类型存储在栈中。复杂数据类型的内容存储在堆中，地址存储在栈中。)
        // 对象形式:以键值对的形式存储多个数据

        //1.使用简单数据类型存储数据
        let name ='张三';
        let age = 18;
        let sex = "man";
        // 弊端:冗余。 好处:阅读性高。

        // 2.数组
        let people =["张三",18,"man"]
        // 弊端:阅读性不高。

        // 3.对象
        let obj = {
            name :"张三",
            sex :"man",
            age : 18,
            gfs :["小美","小丽","小爱"],
            func:function(){
                console.log("见一个爱三个");
            }
        }

        // 3.1 对象查询
        console.log(obj);
        console.log(obj.name);
        console.log(obj.sex);
        console.log(obj.age);
        console.log(obj.gfs);
        console.log(obj.func);//查询函数
        console.log(obj.func());//执行函数

        // 3.2 对象新增
        obj.bf = "李四"
        console.log(obj);

        // 3.3 对象修改
        // 如果对象原有属性名是修改，没有则是新增。
        obj.bf ="王五"
        console.log(obj);

        // 3.4 对象删除
        delete obj.gfs
        console.log(obj);

        // 3.5 对象遍历
        // for(let key in 对象名){对象名[key]}
        for(let key in obj){
            console.log(key); // 打印属性名
            console.log(obj[key]); // 打印属性值
        }
    </script>

2.Math对象

    <script>
        // 内置对象：由JS作者提交编写好的对象，直接使用即可。
        
        const r = 5;

        // a.圆周率：Math.PI
        console.log(Math.PI);
        const c = 2*Math.PI*r;
        console.log(c);

        // b.绝对值：Math.abs()
        console.log(Math.abs(3));//3
        console.log(Math.abs(-3));//3

        // c.求最大/最小值：Math.max() / Math.min()
        console.log(Math.max(2,5,4,8,9,6,4,9,5));//9
        console.log(Math.min(5,2,5894,5,9,55,5,5));//2

        // d.四舍五入：Math.round()
        console.log(Math.round(3.3));//3
        console.log(Math.round(-3.3));//-3
        console.log(Math.round(-3.6));//-4
    
        // e.向上取整：Math.ceil()
        console.log(Math.ceil(1.4));//2
        console.log(Math.ceil(-1.4));//-1

        // f.向下取整：Math.floor()
        console.log(Math.floor(1.4));//1
        console.log(Math.floor(-1.4));//-2

        // g.生成一个0-1之间的随机小数：Math.random()
        console.log(Math.random());
        console.log(Math.random());
        //生成一个0-100之间的整数
        console.log(Math.round(Math.random()*100));

    </script>

3.Date对象

   <script>
        // 时间戳：1970年1月1日0点到现在的毫秒数
        console.log(new Date().getTime);

        // 获取年份
        console.log(new Date().getFullYear());
        // 获取月份
        console.log(new Date().getMonth());
        // 获取日期
        console.log(new Date().getDate());
        // 获取星期
        console.log(new Date().getDay());
        // 获取小时
        console.log(new Date().getHours());
        // 获取分钟
        console.log(new Date().getMinutes());
        
        var year=new Date().getFullYear();
        var month=new Date().getMonth()+1;
        var date=new Date().getDate()
        var day=new Date().getDay()
        alert("今天是"+year+"年"+month+"月"+date+"日"+",星期"+day)

        var date = new Date()
        // 设置年份
        date.setFullYear(2005)
        // 设置月份
        date.setMonth(6)
        date.setDate(26)
        // 打印月份
        console.log(date.getFullYear());

        alert(date.getFullYear()+"年"+date.getMonth(6)+"月"+date.getDate(26)+"日，我出生了")
    </script>

4.Array对象

    <script>
        var course = ["web","java"]

        // push(element):在数组末尾添加元素
        course.push("js");
        console.log(course);

        // unshift(element):在数组前面添加元素
        course.unshift("计算机应用基础")
        console.log(course);

        // pop():删除数组中最后一个元素
        course.pop()
        console.log(course);

        // shift():删除数组中第一个元素
        course.shift()
        console.log(course);

        var arr=[1,2,3,4,5,6,7,8,9]
        // splice(startIndex,deleteCount) splice(起始下标、删除的数目)
        arr.splice(3,3)
        console.log(arr);
        // splice(startIndex,deleteCount,addItem1,addItem2)
        arr.splice(3,0,4,5,6)
        console.log(arr);

        course.splice(1,1,"JS","Vue","Node")
        console.log(course);

        // reverse():颠倒数组中元素的索引
        arr.reverse()
        console.log(arr);

        var demo=[5,59,5,4,5,2,161,6,]
        // sort() 对数组进行排序
        // 升序排序
        demo.sort(function(a,b){
            return a-b
        })
        console.log(demo);

        // 降序排序
        demo.sort(function(a,b){
            return b-a
        })
        console.log(demo);

        // 获取数组元素的索引的方法
        var student=["张三","李四","王五","甲","张三"]
        // indexOf(element):返回指定第一个元素的下标，没有则返回-1
        console.log(student.indexOf("李四"));//1
        console.log(student.indexOf("乙"));//-1
        // lastIndexOf(element):返回指定元素在数组中最后一次出现的下标，没有则返回-1
        console.log(student.lastIndexOf("张三"));//4

        // 将数组转化为字符串
        // toString() 用逗号分隔数组中的每一个元素，不会改变原数组
        // join() 将数组中所有元素连接成一个字符串，默认用逗号隔开
        console.log(student.toString());//张三,李四,王五,甲,张三
        console.log(student);//['张三', '李四', '王五', '甲', '张三']
        console.log(student.join());//张三,李四,王五,甲,张三
        console.log(student.join(""));//张三李四王五甲张三
        console.log(student.join("-"));//张三-李四-王五-甲-张三
        console.log(student.join("/"));//张三/李四/王五/甲/张三
        console.log(student.join("a"));//张三a李四a王五a甲a张三

        //数组类型检测
        console.log(Array.isArray(student));//true
        var obj = {
            name:"张三"
        }
        console.log(Array.isArray(obj));//false
        
    </script>

5.String对象

    <script>
        var str="helloworld"

        // 访问字符串长度
        console.log(str.length);//1

        // 根据字符串返回下标（索引）
        // indexOf() 返回元素在字符串中第一次出现的下标，没有则是-1，
        // lastIndexOf()返回元素在字符串中最后一次出现的下标，没有则是-1
        console.log(str.indexOf("o"));//4
        console.log(str.lastIndexOf("o"));//10
        console.log(str.lastIndexOf("q"));//-1

        // 根据索引(下标)返回字符串
        // chatAt(number)
        console.log(str.charAt(7));//r

        // 字符串截取，不改变原字符串
        // slice(startIndex)
        console.log(str.slice(5));//world
        console.log(str);
        // slice(startIndex,EndIndex) //从第一个参数(下标)，截取到end的下标前的元素。
        console.log(str.slice(4,7));//owo

        var str1 = "hello"
        var str2 = "world"
        // 字符串连接：concat()
        console.log(str1.concat(str2));//helloworld

        // 大小写转化
        // toUpperCase()小写转大写
        // toLowerCase()大写转小写
        console.log(str1.toUpperCase());//HELLO
        console.log("HLLO".toLowerCase());//hello

        // 字符串的替换
        // replace(str1,str2) 将str1替换成str2
        console.log(str);
        console.log(str.replace("world","JS"));//helloJS

        // 字符串的分隔（将字符串转化为数组）
        // split（分隔符）
        console.log(str.split());//['helloworld']
        console.log(str.split(""));//['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
        console.log(str.split("o"));//['hell', 'w', 'rld']
    </script>  

第六章 DOM

01-隔行变色

<body>
    <!-- HTML部分 -->
    <button id="btn">点我啊，给你点颜色看看</button>
    <ul>
        <li>给你点黄色看看</li>
        <li>给你点绿色看看</li>
        <li>给你点黄色看看</li>
        <li>给你点绿色看看</li>
        <li>给你点黄色看看</li>
        <li>给你点绿色看看</li>
        <li>给你点黄色看看</li>
        <li>给你点绿色看看</li>
    </ul>

    <!-- JS部分 -->
    <script>
        // 1.获取元素
        let btn = document.getElementById("btn")
        console.log(btn);
        let liList = document.getElementsByTagName("li")
        console.log(liList);

        // 获取元素
        // document.getElementById("id属性值") 根据ID属性获取元素

        // 2.注册事件
        btn.onclick = function(){
            //3.事件处理
            for(let i=0;i<liList.length;i++){
                if(i%2==0){
                    console.log("黄色");
                    liList[i].style.backgroundColor = "yellow"
                }else{
                    console.log("绿色");
                    liList[i].style.backgroundColor = "green"
                }
            }
        }

        // 元素对象.事件属性 = 事件处理函数
        // element.onclick(单击事件) = 事件处理函数

        // 元素样式操作
        // element.style.样式属性名 = “样式属性值”
        // backgroundColor 设置背景颜色
    </script>
</body>

02-微博评论框

<body>
    <div class="box">
        <!-- textarea 多行文本框 -->
        <!-- placeholder 占位符 -->
        <!-- maxlength 最大字符容量 -->
        <textarea name="" id="area" placeholder="说点什么吧" cols="40" rows="10" maxlength="140"></textarea>
    </div>
    <span class="count">0</span>
    <span>/</span>
    <span>140</span>

    <script>
        // 1.获取元素
        let area = document.querySelector("#area")
        console.log(area);
        let count = document.querySelector(".count")
        console.log(count);

        // 根据css选择器获取元素
        // document.querySelector('#id选择器名")根据id选择器获取元素
        // document.querySelector(".class类选择器")根据class类选择器获取元素

        // 2.设置事件
        area.oninput = function(){
            // console.log(this.value);// 打印输入框的内容
            // console.log(this.value.length);// 打印输入框内容的长度

            count.innerHTML = this.value.length

        }

        // 元素对象.事件属性 = 事件处理函数
        // element.oninput(输入事件)=事件处理函数

        // 设置内容
        // element.innerHTML =“HTML内容”
    </script>
</body>

03-开关灯

<body>
    <input type="button" value="关灯" id="btn">

    <script>
        //1.获取元素
        let btn=document.getElementById("btn")
        console.log(btn);
        // 获取元素
        // document.getElementById("id属性值") 根据ID属性获取元素

        //2.事件处理
        // 元素对象.事件属性 = 事件处理函数
        // element.onclick(单击事件) = 事件处理函数
        btn.onclick = function(){
        
            // document.body 获取文档中的body标签
            let body = document.body

            if(this.value == "关灯"){
                this.value="开灯"
                // this.style.backgroundColor="black"
                body.style.backgroundColor="black"
            }else if(this.value == "开灯"){
                this.value="关灯"
                // this.style.backgroundColor="white"
                body.style.backgroundColor="white"
            }
        }
    </script>
</body>

 04-点击变形

<body>
    <p id="area">abc</p>
    <input type="button" value="变" id="btn">

    <script>
        let btn=document.getElementById("btn")
        let area = document.getElementById("area")
        btn.onclick = function(){
            area.innerHTML="ABC"
        }
    </script>
</body>

 05-显示实时时间

<body>
    <p>现在是 <span id="clock">00:00:00</span></p>
    <!-- <input type="button" value="测试按钮" onclick="showTime()"> -->
    <script>
        function showTime(){
            var date = new Date()

            console.log(date.getHours()); 
            console.log(date.getMinutes()); 
            console.log(date.getSeconds());

            // var text = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
            // console.log(text);

            // document.getElementById("clock").innerHTML=text

            var text2 = time(date.getHours()) + ":" + time(date.getMinutes()) + ":" + time(date.getSeconds())
            document.getElementById("clock").innerHTML = text2
        }
        function time(t){
            if(t<10)
            t = "0"+t;
            return t
        }

        setInterval(showTime,1000);
    </script>
</body>

06-改变盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 50px auto;
            /* margin是设置盒子外边距，
            第一个值为上下外边距，第二个值为左右外边距，
            当第二个值设置为auto时，元素左右居中 */
        }
    </style>
</head>
<body>
    <div class="box" id="box">小</div>

    <script>
        // 1.获取元素
        let box = document.getElementById("box")

        // 定义一个变量，存储用户的点击数
        var i = 0;

        // 2.注册事件
        box.onclick = function(){
            ++i;
            console.log(i);

            // 单击次数为奇数，变大
            if(i%2){
                this.style.width = "500px"
                this.style.height = "500px"
                this.innerHTML = "大"
            }else {
                // 单击次数为偶数，变小
                this.style.width = "50px"
                this.style.height = "50px"
                this.innerHTML = "小"
            }
        }
    </script>
</body>
</html>

07-点击按钮变色

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <button>按钮四</button>
    <button>按钮五</button>
    <button>按钮六</button>

    <script>
        // getElementsByTagName("button")获得页面中所有标签名为button的数组。
        var btns = document.getElementsByTagName("button")
        console.log(btns);

        // 遍历btns数组，为数组中的每一个元素设置点击事件
        for(let i = 0;i<btns.length;i++){
            console.log(i);
            btns[i].onclick = changeColor
        }

        function changeColor(){
            for(let j=0;j<btns.length;j++){
                // this为正在点击的按钮
                if (btns[j] == this){
                    console.log(this);
                    console.log(btns[j]);
                    this.style.backgroundColor = "pink"
                } else {
                    console.log(btns[j]);
                    btns[j].style.backgroundColor = "gray"
                }
            }
        }
    </script>
</body>

08-一闪一闪亮晶晶

<body>
    <img src="./star.JPG" alt="" id="star">

    <script>
        // 1.获取元素
        let star = document.getElementById("star")

        // onmouseover鼠标移入事件
        star.onmouseover = function(){
            // display = "none" 设置元素隐藏
            star.style.display = "none"
        }

        // onmouseout 鼠标移出事件
        star.onmouseout = function(){
            // display = "block" 设置元素显示 
            star.style.display = "block"
        }
    </script>
</body>

鼠标移出图片消失

09-我方了

<body>
    <!-- 当给box盒子增加.changeBox类名时，圆角弧度的类名就也被添加给了这个盒子 -->
    <!-- 需要设置点击事件，自动的完成changeBox类名的移除和添加。 -->
    <div class="box"></div>
    <!-- <div class="box changeBox"></div>  -->

    <button class="btn">我圆了</button>
    <button class="btn">我方了</button>

    <script>
        // 1.获取元素
        // getElementsByClassName("类名") 通过类名获取元素，得到所有这个类名的数组。
        var box = document.getElementsByClassName("box")
        var btns = document.getElementsByClassName("btn") 
        console.log(box);
        console.log(btns);

        // 2.设置点击事件
        // btns[0]指向btns数组中下标为0的元素，也就是第一个按钮，“我圆了”
        btns[0].onclick = function(){
            console.log(box[0].classList);//['box',value:'box']
            box[0].classList.add("changeBox")
            console.log(box[0].classList);//['box', 'changeBox', value: 'box changeBox']
        }

        btns[1].onclick = function(){
            console.log(box[0].classList);//['box', 'changeBox', value: 'box changeBox']
            box[0].classList.remove("changeBox")
            console.log(box[0].classList);//['box',value:'box']
        }

        // element.classList:获取元素的类名列表
        // element.classList.add("类名"):为元素添加类名
        // element.classList.remove(“类名”):为元素移除类名
    </script>
</body>

10-我哭了

<body>
    <img src="./我哭了.jpg" alt="" width="400px" height="300px" id="pic">

    <script>
        // 1.获取图片元素
        var pic = document.getElementById("pic")
        console.log(pic);

        // 2.为元素设置事件
        // onmouseenter 鼠标移入事件
        pic.onmouseenter = function(){
            this.src = "./我装的.jpg.jpg"
        }

        // onmouseleave 鼠标移出事件
        pic.onmouseleave = function(){
            this.src = "./我哭了.jpg"
        }
    </script>
</body>

鼠标移入后

11-404

<body>
    <input type="text" placeholder="请输入内容" value>
    <button>搜索</button>

    <script>
        // 1.获取元素
        let input = document.querySelector("input")
        let btn = document.querySelector("button")

        // 2.设置事件
        btn.onclick = function () {

            // 修改input标签的value属性
            input.value = "404NotFound"

            // 修改button标签的diasbled，开启禁用模式
            this.disabled = true
        }
    </script>
</body>

12-显示和隐藏密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 20px;
            height: 20px;
            /* 设置左边距 */
            margin-left: 10px;
        }
        .box {
            /* 设置弹性布局 */
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" id="input">
        <img src="./close.jpg" alt="" id="img">
    </div>

    <!-- 当input标签的type属性为password时，为密码框
    <input type="password">
    -->

    <script>
        // 1.获取元素
        let input = document.getElementById("input")
        let img = document.getElementById("img")
        // 2.注册事件
        img.onclick = function(){
            if(input.type == "text"){
                input.type = "password"
                img.src = "./open.jpg"
            } else {
                input.type = "text"
                img.src="./close.jpg"
            }
        }
    </script>
</body>
</html>

13-节点操作案例-删除水平线

<body>
    <h1>JavaScript程序设计</h1>
    <hr />
    <h2>什么是JavaScript</h2>
    <p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p>
    <hr />
    <h2>第一部分 JavaScript概述</h2>
    <p>JavaScript的发展历史</p>

    <input type="button" value="删除水平线" onclick="delhr()">

    <script>
        function delhr(){
            // 1.获取元素
            let hrs = document.querySelectorAll("hr")
            console.log(hrs);// [hr,hr]

            // 2.遍历元素数组
            for(let i=0;i<hrs.length;i++){
                var hr = hrs[i]
                console.log(hr);

                // parentNode 获取父节点
                console.log(hr.parentNode);
                // previousSiblling 获取上一个兄弟节点
                console.log(hr.previousSibling);
                // previousElementSibling 获取上一个兄弟节点元素
                console.log(hr.previousElementSibling);
                // nextSibling 获取下一个兄弟节点
                console.log(hr.nextSibling);
                // nextElementSibling 获取下一个兄弟节点元素
                console.log(hr.nextElementSibling);

                // 移除节点
                // node.removeChild(child)
                // node表示父节点,child表示node中需要被移除的子节点
                hr.parentNode.removeChild(hr)
            }
        }
    </script>
</body>

14-节点操作案例-简易留言板

<body>
    <div>
        <h1>留言板</h1>
        <ul></ul>
        <textarea name="" id="" placeholder="请输入你的留言"></textarea>
        <button class="sub">发布</button>
    </div>

    <script>
        // 1.获取元素
        let btn = document.querySelector(".sub")
        let text = document.querySelector("textarea")
        let ul = document.querySelector("ul")

        // 2.注册事件
        btn.onclick = function(){
            // textarea标签的value属性，指在文本框输入的内容
            console.log(text.value);

            // 3.非空判断
            if(text.value == ""){
                alert("您没有输入任何内容")
                return false
            } else{

                // 4.创建节点
                // document.createElement("标签名")
                var li = document.createElement("li")

                // 5.将text多行文本框的内容赋值给li元素
                li.innerHTML = text.value

                // 6.添加节点
                // insertBefore() 将一个节点添加到父节点的指定节点的前面
                // 第一个参数是要添加的节点
                // 第二个参数是父节点中指定的子节点
                ul.insertBefore(li,ul.children[0]);
                
                // 7.将文本框内容情况
                text.value = ""
  
                // 8.删除按钮
                // 8.1 创建一个删除按钮(createElement)
                var button = document.createElement("button");
                // 8.2 给button按钮设置类名，从而拥有这个类名所设置的样式
                button.className = "remove";
                // 8.3 为删除按钮增加内容(innerHTML)
                button.innerHTML = "删除"
                // 8.4 为删除按钮增加点击事件(onclick = function(){})
                button.onclick = function(){
                    // 8.5 点击删除按钮，移除父元素(removeChild)
                    ul.removeChild(this.parentNode);
                };
                // 8.6 把删除按钮添加到li元素中(li.appendchild(button))
                // appendchild()将一个节点添加到父节点的所有子节点未尾
                li.appendChild(button);
            }
        }
    </script>
</body>