JS基础学习

一.

JS基本用法

1.1  输入输出语句

 <script>
        // [输出语句]
        // 用于在浏览器中弹出警告框
        // alert('未满18岁禁止访问!')
        // 用于控制台输出信息
        // console.log("111")
        // 用于在网页中输出内容
        // document.write("三月请对我好一点")
        // 输入语句
        // 在网页中弹出一个输入框
        // prompt("请输入姓名")
        // 在网页中弹出一个确认框
        // confirm("你真的满18岁了吗?")
</script>
eg:
<script>
    alert('未满24岁禁止访问!')
    console.log('Not Found!')
    prompt("请输入你的年龄")
    confirm("是否满24岁")
    document.write("404错误")
</script>

1.2  JS代码引入方式

 <!-- js行内写法 -->
    <!-- onclick点击事件 -->
  <button onclick="window.alert('别点了,再点人就傻了')">请点我</button>  

  <!-- 嵌入式 -->
  <scrip>window.alert("内部样式")</script>

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

这个则是教你怎么将代码代入到我们所需要的地方,所以需要新建一个.js以代入代码

二.

JS基本语法

2.1    变量

2.1.1  变量的声明与赋值

 <script>
        // [先声明后赋值]
        var boy;
        var girl;
        console.log(boy); //underfined(未定义的)
        console.log(girl);
        // 为变量赋值
        boy = "jack";
        girl = "lily";
        console.log(boy);  //jack
        console.log(girl); //lily
        // 声明并赋值
        var myAge = 16;
        var myHeight = 188;
        console.log(myAge);
        console.log(myHeight);
</script>
这是变量的声明与赋值的方法,当然也是一个十分基础且简单的方式
Eg:
<script>
        var name = prompt("请输入你的名字")
        console.log(name);
        alert(name + '欢迎来到js的世界')
        document.write('希望你成为前端开发的高手')
    </script>

2.1.2       let声明变量

<script>
        // let是ES6新引入的关键字,用来替代var关键字.
        // (ES6指2015推出的ECMAScript语法)
        
        // 使用var声明的变量,可以多次赋值,但是其结果只与最后一次赋值有关
        var boyFriend ="暗区突围"
        var boyFriend ="Flead"
        console.log(boyFriend);

        // let不允许在一个代码块里有变量和他取一样的名字,但是允许修改同一个变量值
        // 一个花括号{}就是一个代码块
        let girlFriend ="林正英"
        console.log(girlFriend);
     </script>

由此可见let语句具有唯一性

                                                                                                                            

2.1.3    变量声明区别

 (1)初始化要求不同，

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

    （2）重复声明不同，

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

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

   

    （3）对块级作用域的支持不同。

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

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

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

      

2.2  数据类型                                                                                                       

2.2.1  数据类型分类 

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

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

2.2.2  基本数据类型

 <script>
        // [Boolean-布尔型]
        let flag1 = true;
        let flag2 = false;

        // True,False,TRUE,FALSE这些写法都是错的

        console.log(flag1);

        let flag3 ="true"
        console.log(flag3); 

        // [number-数字型]
        let age =18;
        let date ="0306";
        console.log(age);
        console.log(date);

        console.log(Number.MAX_VALUE);     //最大值
        console.log(Number.MAX_VALUE*2);   //Infinity(无穷大)

        var a =3-"b"
        console.log(a);  //NaN (Not a Number)  NaN也属于数字类型

        // isNaN判断是否是一个非数字.
        // 如果是数字类型则为false
        // 如果是非数字类型则为true
        console.log(isNaN(a));  //true
        console.log(isNaN(111));  //false
        console.log(isNaN(Infinity));  //false
        console.log(isNaN("false"));  //true

        // [string-字符串]
        let demo1 = "字符串";
        let demo2 = '字符串';
        let demo3 =`字符串`;
        let demo4 = "老师说`今天晚上不上晚自习`";

        // [undefined-未定义的]
        // 表示声明的变量还未赋值
        let grade;
        console.log(grade); //undefined

        // [null-空]
        var a=null;
        console.log(a);  //null
    </script>

2.2.3   数据类型检测 

<script>
        //  isNaN 检测是否是一个非数字

        // typeof()

        console.log(typeof("123"));  //string
        console.log(typeof(false)); //boolean
        console.log(typeof(NaN));  //number
        console.log(typeof(Infinity));  //number
        console.log(typeof("true"));  //string
        console.log(typeof(undefined)); //undefined
        console.log(typeof(null));  //object

        console.log(typeof('aaa'*2)); //Number
        console.log("aaa"*2); //NaN

        console.log(2-"true"); //NaN
        console.log(typeof(2-"true")); //Number

        // 布尔类型true,会在运算中转化为数字1
        // 布尔类型false,会在运算中转化为数字0
        console.log(2-true);  //1
        console.log(typeof(2-true));  //Number

        // 加号遇上字符串,做拼接使用
        console.log(2+"true");  //2true
        console.log(typeof(2+"true"));  //string

        console.log(2+true);  //3
        console.log(typeof(2+true));  //number
    </script>

2.2.4  数据类型转换 

<script>
        // 将数据类型转换为布尔类型
        // 字符串类型和数字类型都会转化为布尔类型的true
        // 空字符串转为布尔类型的false,空格字符串转为true
        // 数字0转为布尔类型的false

        // Boolean()


        var a =Boolean("a")
        console.log(a);//true

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

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

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

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

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

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

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

        // [将数据转化为字符串]
        // 使用String()或toString()进行转换

        let num =1;

        console.log(num); 

        let num2=String(num); //数字类型的

        console.log(num2); //1字符串类型1

        // [将数据转化为数字类型数据]
        // Number(用于将数据转化为数字型数据)
        console.log(Number(123)); //123
        console.log(Number("123")); //123
        console.log(Number("")); //0
        console.log(Number(" ")); //0
        console.log(Number(null)); //0
        console.log(Number(undefined)) //NaN
        console.log(Number(false)); //0
        console.log(Number(true)); //1
        console.log(Number("true")); //NaN
        console.log(Number("123.1")); //123.1
        console.log(Number("123.a")); //NaN
    </script>

2.3   运算符 

2.3.1  算术运算符

 <script>
        let a =10;
        let b =70;
        
        // 加法运算
        console.log(a+b); //80

        // 减法运算
        let c =b-a;
        console.log(c); //60

        // 乘法运算
        console.log(c*b) //420

        // 除法运算
        b=b/a;
        console.log(b); //7

        // 取模运算 取余数
        console.log(26%5); //1

        // 幂运算
        console.log(2**10); //1024
        // 2*2*2*2*2*2*2*2*2*2
        
    </script>

2.3.2    字符串运算符&隐式转换 

<script>
        console.log(1+1); //2
        console.log(1+null); //1
        console.log(1+true); //2
        console.log(1+false); //1

        console.log("12"-0);
        console.log(undefined *null) //NaN
        console.log(Infinity++);  //Infinity


        console.log(1+"1"); //11
        console.log(1+"null"); //1null
        console.log(null+"undefined"); //nullundefined

        var name ="张三";
        var age =18;
        console.log(name+"的年龄是"+age)

    </script>
    <!-- 隐式转换:当两个数据类型不同时,JS会按照既定的规则进行转换
    
    字符串运算符:加号遇上字符串,做拼接使用
    -->

2.3.3    赋值运算符 

  <script>
        // 赋值
        let a=10;
        let b=20;
        let c=b-a;

        // 加等于/加并赋值 +=
        a +=b;
        // a=a+b
        console.log(a); //30
        console.log(b); //20

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

        a+=b; //30
        a/=b; //0.5
        a%=b; //10
        a**=b; //
        console.log(a);

        let m=4;
        let n=6;
        // m*=n;
        console.log(m); //24
        console.log(n); //6

        m%=n;
        console.log(m); //4
        console.log(n); //6
        
    </script>

2.3.4    比较运算符

 <script>
        // != 不等于
        console.log(41!=5); //true
        console.log(4!=4); //false

        // !== 不全等
        console.log(5 !==5); //false

        // == 等等于
        console.log(4=="4"); //true
        
        // === 全等于
        console.log(4==="4");//false
    </script>

2.3.5  逻辑运算符 

 <!-- 
        && 逻辑运算符  一假则假
        || 逻辑或运算符 一真则真
     -->

     <script>
        console.log(true && true); //true
        console.log(false && true); //false
        console.log(true &&false); //false
        console.log(false &&false); //false

        console.log(3>2 && 2>1); //true
        console.log(3<2 && 2>1); //false
        console.log(3<2 && 2<1); //false

        console.log(true || true); //true
        console.log(true ||false); //true
        console.log(false ||true); //true
        console.log(false || false); //false

        console.log(3>2 || 2>1); //true
        console.log(3<2 || 2>1); //true
        console.log(3<2 || 2<1); //false

        console.log(0 || null); //null
        console.log(null || undefined); //undefined
        
        console.log(0 || 4<3); //false

        console.log(!(2>1)); //false
        console.log(!(2<1)); //true

        // 闰年判断
        // 能被400或者4整出 但是不能被100整除的年份
        var year =2023;
        var run=(year%400==0 ||year%4==0 ||year%100!=0)
        var result=run ? "闰年" : "平年" //三元表达式
       console.log(result);

     </script>

2.3.6    三元表达式 

 <script>
        // 条件表达式 ? 表达式 : 表达式2
        // 如果条件表达式的值为true,则返回表达式1的执行结果
        // 如果条件表达式的值为false,则返回表达式2的执行结果

        // var age=prompt("请输入你的年龄")
        // console.log(age);
        // var res =age >=18 ? "你已经是一名优秀的成年人了" : "你还是个宝宝"
        // document.write(res)

        // var num1=prompt("输入数字");
        // var num2=prompt("输入数字");
        // var res =num1>num2? num1:num2
        // document.write(res)

        var num1=prompt("输入数字");
        var res=num1>10 ? num1:"0"+num1
        document.write(res)
 
 </script>

2.3.7   运算优先级 

 <script>
        // 一元运算符>比较运算符>逻辑运算符(逻辑与>逻辑或) > 赋值运算符

        let a =3>5 && 2<7 && 3==4
        console.log(a); //false

        let b =3>5 || 2<7 && 3==="3"
        console.log(b); //false

        let c =2 == "2"
        console.log(c); //true

        let d =!c && (b||a) 
            console.log(d); //false
    </script>

4.1   流程控制 

4.1.1   选择结构

 <script>
        // 1.if语句
        // if (条件表达式) {代码段}

        // let age =prompt("请输入你的年龄")
        // if (age>=18) {
        //     document.write("你可以进入本网站")
        // } else{
        //     document.write("非法访问")
        // }
        
        //3.if..else  if..else语句(多分支)
        // if(条件表达式1){
        //     条件表达式1的结果
        // } else if(条件表达式2){
        //     条件表达式2的结果
        //  } else if (条件表达式3) {
        //         条件表达式3的结果
        //     } else  (除去123的结果)
        
            let grade=prompt("请输入你的成绩")
            if(grade==100){
              document.write("奖励试卷10套") 
        } else if(grade<=90 && grade>=80){
            document.write("成绩优秀")
                }else if (grade>=60 && grade<80) {
                    document.write("成绩合格")
     } else if (grade>=40 && grade<60){
           document.write("补考啦")
     } else if (grade>=20 &&grade<40){
        document.write(挂科)
     } else{
        document.write("劝退处理")
    }
    

    </script>

 

4.1.2 循环结构

1.  for语句

         for(初始变化量;条件表达式;操作表达式){

            循环体

         }  

 //  需求:在控制台输入1~100的整数
         for(var i = 1; i<=100  ; i++){
             console.log(i);
         }


        // 需求:在控制台输入0~100之间的偶数
         for(var i = 1; i<=100  ; i++){
            if (i%2==0){
            console.log(i);
            }
        }

        // 需求:计算0~100所有偶数的和
         var b=0;
         for(var i = 1; i<=100  ; i++){
            if (i%2==0){
                 b += i;
            console.log(i);
             }
         }
         console.log(b);

2.while语句

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

// 需求:输入1~100的整数
        // 初始变化量
         var i =1;
         while (i<=100){
             console.log(i);
             i++
         }

// 需求:
        // 弹出一个确认框:"我喜欢你,我们在一起好吗?"
        // 如果对方点击确定,弹出"那我们什么时候结婚?"
        // 如果点击否定,弹出"那我明天再问一遍"
       let yes=confirm("我喜欢你,我们在一起好吗?")
         console.log(yes);
            while (!yes){
           document.write("那我明天再问一遍");
           
         }
       document.write("那我们什么时候结婚?")

    //   需求:打印0~100之间所有偶数的和

     let num=0;var i=0;
     while (i<=100){
         i++
         if(i%2==0){
             console.log(i);
            
             num +=i;
         }
     }
         console.log(num);

        // 需求:
        // (1)让用户输入  用户名  和  密码(password)
        // (2)如果 用户为admin 并且 密码为123456,则跳出循环弹窗提示登录成功,
        // 否则让用户继续登录

         var name = prompt("请输入你的用户名")
         var password = prompt("请输入你的密码")
             while(name != 'admin' || password !='123456'){
               alert("重新输入")
                var name = prompt("请输入你的用户名")
         var password = prompt("请输入你的密码")
             }
             alert('登录成功')


   

3. do...while语句]
     while语句先判断条件表达式的值,在根据条件表达式的值是否执行循环体
     do...while语句会无条件执行1次循环体,然后再判断条件表达式的值
     再根据判断的值是否绝对继续进行循环

do {循环体}while (表达式)

 // 需求:在控制台输出1-100的整数
     var i=1;
     do{
         console.log(i)
         i++
     }
     while (i<=100)
    
    var i=0; var num=0;
     do{
        if(i%2==0){
         num+=i;
        }
         i++;
     }
     while (i<=100)
     console.log(num);
    do{
       i+=2;
        num+=i;
    
    }
    while (i<=100)
    console.log(num);

4.1.3  跳转语句

         1.break语句

 for(var i=1;i<=5;i++){

            if(i==3){
                console.log("吃到了一颗花生米")

                break;// 跳出了整个循环
            }
            console.log("我不吃牛肉"+i+"个古乐天")
        }
        // 我不吃牛肉1个古乐天
        // 我不吃牛肉2个古乐天
        // 吃到了一颗花生米

       2.continue语句

 for(var n=1;n<=5;n++){

            if(n==3){
                console.log("吃到了花生米");
                continue;
            }
            console.log("我吃到了第"+n+"颗花生米");
        }
        // 我吃到了第1颗花生米
        // 我吃到了第2颗花生米
        // 吃到了花生米
        // 我吃到了第4颗花生米
        // 我吃到了第5颗花生米

   break语句会立即跳出整个循环,也就是循环结束

        continue语句用来立即跳出本次循环,也就是跳过continue语句后面的代码,继续下一次循环

4.1.4  循环嵌套 

 // 需求:在控制台输出4列4行的"⭐"
         var str='';
        // 成列
         for(var i=1;i<=4;i++){
             // 成行
             for(var j=0;j<=4;j++){
                 str +="⭐"
             }

             // "\n"是换行的转义符
             str +="\n"
         }
         console.log(str);
             var a='';
         for(var i=1;i<=5;i++){
            for(var j=1;j<=i;j++){
             document.write("❤️")
            }  
        // (br/)换行标签                  
         document.write("<br/>")
        
            // 需求:输出金字塔
            var n = prompt("你想要造多少层金字塔")

            // 如果输入的不是数字,就转化为nan
            n = Number(n) && parseInt(n)

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

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

 逻辑与符号必须均满足Number和parseInt的效果

             如果有一方不满足,n的结果就是NaN

             那么isNaN(n)的值就为true

 if(isNaN(n)){
                alert("请输入一个数字")
            }
        var str=""
        // 循环行数
        for( i=1;i<=n;i++){

            // 循环空格
            var black=n-i;
            for(var k=0;k<black;k++){
                str +="  "
            }
            
            // 循环爱心
            var star=i*2-1
            for(var j=0;j<star;j++){
                str +="❤️"
            }
           
            str +="\n"
        }
        console.log(str);

第三章

数组

5.1初识数组

 数组是一种复杂数据类型

        用于讲一组数组集合在一起

        通过一个变量就可以访问一组数据

        数组之间通过逗号分隔

      数组中的"索引/下标",是从0开始计算的

  // 声明数组
        let class02 = ["tom",'lily','tony']
        // 打印数组
        console.log(class02);
        
        // 打印数组长度
        console.log(class02.length); //3

        // 打印数组下标为X的元素
        console.log(class02[0]); //'tom'
        console.log(class02[1]); //'lily'

        // 数组可以是任意类型的元素,例如字符串,数字,数组
        let arr1= [1,2,3,4,5,6]
        let arr2 = ['string',NaN,null,undefined,arr1]
        console.log(arr2);

5.2  创建数组

  // 1.以new Array()方式创建数组
        var arr = new Array();
        console.log(arr); //Array(0)
        var arr = new Array(5);
        console.log(arr); // [empty*5]
        arr = new Array("tom",'tony','bob')
        console.log(arr); // ["tom",'tony','bob']

        // 2. 使用数组字面量创建数组
        var mood = ['sad',,,,,,'happy']
        console.log(mood.length); //8
        console.log(mood[7]); //happy
        console.log(mood[6]);  // undefined
        console.log(mood[0]);  // 'sad'

1.获取元素长度

        数组名.length

         2.修改数组长度

        数组名.length = number

  var arr = [0,1,2,3]
        console.log(arr.length); // 4
        arr.length = 5
        console.log(arr); // [0,1,2,3,empty]
        arr.length = 3
        console.log(arr); // [0,1,2]

  3.添加数组元素

  arr[4] = 3
        console.log(arr); // [0,1,2,empty,3]

4.修改数组元素

   arr[0] = 1
        console.log(arr); // [1,1,2,empty,3]

5.删除数组元素

delete arr[3] 
        console.log(arr); // [1,empty,2,empty,3]

6.遍历数组

 let arr1 = [10,20,30,40,50,60]
        var sum =0;
        for (var i=0; i<arr.length; i++){
            sum += arr[i]
            // arr[0] 10     sum+10=0+10=10
            // arr[1] 20     sum+20=10+20=30
            // arr[2] 30     sum+30=30+30=60
            // arr[3] 40
            // arr[4] 50
            // arr[5] 60
            // arr[6]
        }
        console.log(sum); // 210


  // 需求:
        let score = [97,65,43,99,60,58,36,72,85,77]
        let max =0;
        let min =100;
        for(var j=0;j<score.length;j++){
            if(score[j]>max){
                max=score[j]
            }
            if(score[j]<min){
                min =score[j]

            }
        }
        console.log(max);
        console.log(min);

7.新增数组元素

 // push在数组后添加元素
        let arr3 = [1,2,3,4]
        arr3.push(5,6)
        console.log(arr3); //[1,2,3,4,5,6]

        // unshift在数组前添加元素
        arr3.unshift(-2,-1,0)
        console.log(arr3); //[-2,-1,0,1,2,3,4,5,6]

        // 需求:把数组中大于10的元素筛选出来
        var arr4 =[4,5,8,9,11,30,39,20,19]
        var arr5 = []
        for(let i=0;i<arr4.length;i++){
            console.log(arr4[i]);
            if(arr4[i]>10){
              arr5.push(arr4[i])
            } 
        }
        console.log(arr5);
          // 需求:数组去0,形成一个新数组
          var arr6 = []
        for(let i=0;i<arr6.length;i++){
            if(arr4[i]!=0){
                arr6.push(arr4[i])
            }
        }
        console.log(arr6);

        // 需求: 将数组['一','二','三','四','五']反转
        // 反转后的数组为[]
        var arr7=[1,2,3,4,5]
        var arr8 = []
        // for(let i=0;i<arr7.length;i++){
        //    arr8.unshift(arr7[i])
        // }
        // console.log(arr8);

          for(let i=0;i<arr7.length;i++){
            for (let b=4;b>=0;b--){
                arr8.push(arr7[b])
            }
           
        }
            console.log(arr8);

5.3  二维数组

 // 二维数组指的是数组元素的值是一个一维数组
        var arr = [80,100,75]
        var arr1 = [
        [80,100,75],
        [50,60,70],
        [30,44,56],
        ]

        // 访问二维数组
        console.log(arr1[0]); // [80,100,75]
        console.log(arr1[0][0]); //80

        // 需求:遍历二维数组arr1
        // 
        for(let i =0;i<arr1.length;i++){
            for(let j=0;j<arr1[i].length;j++){
                console.log(arr1[i][j]);
            }
        }

        // 二维数组倒置
        var a = [
        ['a','b','c',],
        ['d','e','f',],
        ['h','i','j',],
        ['l','m','n',],
        ]
        var b = [];
        for(var i =0;i<a[0].length;i++){
            // 根据原数组的行,设置新数组的列
            b[i]=[];
            // 遍历原数组的列
            for(var j=0;j<a.length;j++){
                b[i][j]=a[j][i]
                // j是原数组的列 i是原数组的行
                // 颠倒位置
            }
        }
        
        console.log(b);

        // 需求: 计算出每一位同学的总成绩
        var stu = [
            [88,90,60,89],
            [58,45,78,80],
            [48,68,96,54],
        ]
        var sum;
        // 遍历行
        for(var i=0;i<stu.length;i++){
            console.log(i); // 0,1,2
            sum =0; //会得到3个sum值
            // 遍历列
            for(var j=0;j<stu[0].length;j++){
                console.log(stu[i][j]);
                sum+=stu[i][j]
            }
            console.log('第'+(i+1)+'为学生的总成绩是'+sum);
        }