JavaScript

输出语句

   

    输出语句:用于在浏览器中弹出警告框。

        alert("未满18岁禁止访问")

        输出语句：用于在控制台中输出信息。

        console.log("123");

       

 输出语句：用于在网页中输出内容。

       document.write("3月请对我好一点")

        输入语句

     

  输入语句：在网页弹出一个输入框，让用户输入数据

        prompt('请输入姓名')

   

    输入语句：在网页弹出一个确认框，让用户输入确认

        confirm('你今年18岁?')

<!-- js行内写法 -->

    <!--onclick点击事件  -->

    <button οnclick="window.alert('别点了')">请点我</button>

    <!-- 内部样式 -->

    <script>window.alert("内部样式")</script>

    <!-- 外链式 -->

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

变量

变量声明与赋值

 先声明后赋值

     

   var boy;

        var girl;




        console.log(boy);  //undefined(未定义的)

        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);

   var   let  const声明变量

使用var声明变量，可以多次赋值，但是其结果只与最后一次赋值有关

        var boyFriend ="魏"

        var boyFriend ="白"

        var boyFriend ="李"

        console.log(boyFriend);

let不允在一个代码块里有变量和他取一样的名字，但允许修改同一个变量

 一个花括号{}就是一个代码块

        let girlFirend ="杜"

         girlFirend ="李"

         console.log(grilFriend);

let和var声明的变量可以改变

  const声明的变量不能改变，即常量

   

 错误写法

    const a =3.14;

    /a =3.15

    console .log(a);

   

正确写法

    const a =3.14;

    console .log(a);

    //const必须要在声明的时候就赋值   

错误写法

    const b;

    正确写法

    const b =3

变量声明的区别

    (1)初始化要求不同，

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

    (2)重复声明不同，

    使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，而使用const声明的变量,在整个运行过程中不能修改初值.

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

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

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

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

数据类型

数据类型分类

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

         复杂数据类型存储在堆内存中，地址存储在栈内存中

基本数据类型

 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("abc"));//ttrue

        console.log(isNaN("false"));//ttrue

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

       

String-字符串

        let demo1 ="字符串";

        let demo2 ="字符串";

        let demo3 ="字符串";

        let demo4 ="老师说'今天晚上不上晚自习'";



        console.log("111\'222")

     

   undefined-未定义型

        表示声明的变量还未赋值

        let grade =undefined;

        console.log(grade);// undefined

     

   undefined-未定义型

        表示声明的变量还未赋值

        let grade =undefined;

        console.log(grade);// undefined

数据类型检测

       

        布尔类型true,会在运算中转化为数字1

        布尔类型false,会在运算中转化为数字0



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

        console.log(typeof(2-true));//unmber

数据类型转换

将数据类型转换为布尔类型

Boolean()

        字符串类型和数字类型都会转换为布尔类型的true

        空字符串转换为的false，空格字符串转换为true

        数字0转换为布尔类型的false

 

       

       

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);//数字类型1

       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

算数运算

运算符

       

 let a =10;

        let b =20;



        加法运算

        console.log(a+b);//30




        减法运算

        let c=b-a

        console.log(c);//10



        乘法运算

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



        除法运算

        b =b/a

        console.log(b);//2



        取模运算 取余数

        console.log(26%5);//1



        幂运算

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

       自增运算       

m=5;

       n=++m;

       console.log(m);//6

       console.log(n);//6

       m=5;

       n=m++;

       console.log(m);//6

       console.log(n);//5



       var x=1; y =2;

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

       console.log(x);//2

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

       console.log(y);//3

       

   自减运算     

 q =2;

       p =--q;

       console.log(q);//1

       console.log(p);//1




       q =2;

       p =q--;

       console.log(q);//1

       console.log(p);//2




       var d=10;

       console.log(++d);//11

       console.log(d);//11

       console.log(d--);//11

       console.log(d);//10

字符串运算符与隐式转换

     

 隐式转换:当两个数据类型不同时，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(undefined*null);//NaN

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



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

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

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

赋值运算符

 赋值

        let a =10;

        let b =20;

        let c =a+b;

        加等于/加并赋值 +=

     

   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);



        a/=b;//a=a/b

        console.log(a);

        a%=b;//a=a%b

        console.log(a);

        a**=b;//a=a**b

        console.log(a);

比较运算符

 !=  不等于       

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

        console.log(4!=4);//false

       

        ==等于

       

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

        ===全等于

     

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

逻辑运算符

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

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

        !  逻辑非运算符  真作假来假做真

     

       

   console.log(true && true);//true

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

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

        console.log(false && false);//false

   

   console.log(true && true);//true

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

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

        console.log(false && false);//false

     

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

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

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

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

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

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

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

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

       

 console.log(!true);//false

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

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

       

 闰年判断

        能被400或者4整除，但不能被100整除的年份

 var year =2024

        var run=(year%4==0||year%400==0 && year%100!=0)

        var result = run ? "闰年":"平年"

        console.log(result);

三元运算符

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

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

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

 

        var age =prompt("请输入你的年龄")

        console.log(age);

        var res =age >=18 ? "你已经是一名优秀的成年人":"你还是个宝宝"

       运算符优先级

 一元运算符>逻辑运算符>赋值运算符   

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

流程控制

选择结构

 1.if语句(单分支)

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



      let age =prompt("请输入你的年龄")

      if (age>=18){

       document.write("你可以进入本网站")

      }



      2.if...else(双分支)

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

       let age =prompt("请输入你的年龄")

      if (age>=18){

        document.write("你可以进入本网站")

      }else{

        document.write("非法访问")

     /}



     3.if...else if..else(多分枝)

     let num=prompt("输入你的分数")

     if(num=100){

        document.write("拿奖学金")



     }else if(num>=80 && num<90){

        document.write("成绩优秀")



     }else if(num>=60 && nun<80){

        document.write("成绩合格")



     }else if(num>=40 &&num<60){

        document.write("有补考机会")

     } else if(num>=20 && num<40){

        document.write("挂科")

     }else {

        document.write("留级")

     }