JavaScript笔记

文章发布时间:

最后更新时间:

JavaScript笔记

JS基础

打印输出

1
2
3
4
5
6
7
8
9
<script>
        // 文档输出内容
        document.write("Hello World")
        document.write('<h1>一级标题</h1>')
        // 页面弹出警告对话框
        alert("弹出的内容")
        // 控制台打印输出
        console.log("Hello World");
</script>

变量

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        // 声明变量
        let age
        // 赋值
        age = 18
        // 打印输出
        console.log(age);
        document.write(age)
        // 直接声明+赋值
        let age2 = 19
        document.write(age2)
    </script>

键入

1
2
3
4
5
6
7
<script>
        // 用户输入
        // prompt("请输入用户名")
        let name = prompt("请输入用户名")
        // 打印键入值
        document.write(name)    
    </script>

变量交换

1
2
3
4
5
6
7
8
9
10
<script>
        let num1 = 1
        let num2 = 2
        let temp

        temp = num1
        num1 = num2
        num2 = temp
        document.write(num1,num2)
    </script>

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
        // 声明数组
        let  list = [1,2,3,4,5]

        // 全部打印
        // document.write(list)
       
        // 打印3
        document.write(list[2])

        // 数组元素的个数
        document.write(list.length)
    </script>

常量

1
2
3
4
5
6
<script>
        // 常量的声明
        const PI =3.14

        document.write(PI)
    </script>

数据类型与检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
        // 检测数据类型 typeof

        //基本数字类型
        //1.数字类型 Number 包括整数 小数 正负数
        // let num =10
        // document.write(num)
        // + - * 除 / 取余 %
        // console.log(1+1);

        // 例 算圆的面积
        // let r = prompt("请输入圆的半径")
        // let re = 3.14*r*r
        // document.write(re)

        // 2.字符串类型string
        // let str = "Alax"
        // console.log(str);

        // 模板字符串 拼接字符串和变量 ``+{}
        // let age =18
        // document.write(`我今年${age}岁了`)

        // 例
        // let name = prompt("请输入您的姓名")
        // let age = prompt("请输入您的年龄")
        // document.write(`我叫${name},今年${age}岁了`)

        //3.布尔 boolean
        // let isCool = true
        // console.log(isCool);

        // 例子
        // console.log(3>4);

        // 4.未定义 undefined
        // 声明一个变量未赋值即使undefined 
        // let num
        // console.log(typeof num);
        // console.log(num);

        // 5.空 null
        // let a = null
        // console.log(a);
        
        // null的数据类型是object
        // console.log(typeof a);
    </script>

数据类型转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
        // 1.隐式转换
        //console.log(1+1); //2
        // console.log("Alax"+1); //Alax1

        //console.log(2-2); //0
        //console.log(2-'2'); //0

        //console.log(+12);
        //console.log(+'123'); //+有转换成数字型的作用
        
        // 2.显示转换
        // let str = '123'
        // console.log(Number(str)); //字符转数字
        // console.log(Number('AlaxEleven')); //无法转换

        // let num = prompt('输入年纪') //num为字符串
        // console.log(Number(num)); //字符串转数字
        // let num2 = Number(prompt("请输入年纪")) //字符串转数字
        // let num3 = +prompt("请输入年纪") //字符串转数字

        // parseInt 取整数部分
        // console.log(parseInt('12px')); //12
        // console.log(parseInt('12.34px'));  //12
        //console.log(parseInt('12.94')); //12
        
        // parseFloat 保留小数
        // console.log(parseFloat('12px')); //12
        // console.log(parseFloat('12.34px')); //12.34
        // console.log(parseFloat('12.94')); //12.94
    </script>

综合案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <h2>订单确认</h2>
    <script>
        // 用户输入
        let price = +prompt("请输入商品价格")
        let num = +prompt("请输入商品数量")
        let address = prompt("请输入收货地址")
        // 2.计算价格
        let total = price * num
        // 3.页面打印
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>
        <tr>
            <td>小米13Ultra</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
        </tr>
    </table>
        `)
    </script>

运算符

赋值运算符

1
2
3
4
5
<script>
        let num =1
        num=num +1
        console.log(num)  //2
    </script>

一元运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
        // let num =10
        // num = num +1
        // num+=1
        
        // 前置自增
        // let i = 1
        // ++i
        // console.log(i);

        // 后置自增
        // let j = 1
        // j++
        // console.log(j);
    </script>

自增运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
        // let num =10
        // num = num +1
        // num+=1
        
        // 前置自增
        // let i = 1
        // ++i
        // console.log(i);

        // 后置自增
        // let j = 1
        // j++
        // console.log(j);
    </script>

比较运算符

1
2
3
4
5
6
7
8
9
10
11
<script>
      /*
      > 左边是否大于右边
      < 左边是否小于右边
      >= 左边是否大于或等于右边
      <= 左边是否小于或等于右边
      == 左右两边值是否相等
      === 左右两边是否类型和值都相等
      !== 左右两边是否不全等
      */        
  </script>

逻辑运算符

1
2
3
4
5
&&与 

||或 

! 非

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – ！
3 算术运算符 先*/% 后+-
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&& 后||
7 赋值运算符 =
8 逗号运算符 ，

表达式和语句

if单分支语句

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        //if单分支语句
        /*
        if(条件){
            
        }*/
        // 除了0所有的数字都为真
        // 除了''所有的字符串都为真
        if(true){
            console.log("语句执行");
        }
    </script>

if双分支语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
      // if双分支语句
      /*if(条件){
          满足则执行
      }
      else{
          不满足则执行
      }*/

      // 例子
      // 1.用户输入
      /*
      let name = prompt("请输入用户名:")
      let pwd = prompt("请输入密码:")
      // 2.判断输出
      if(name === 'Alax' && pwd === '123456')
      {
          alert("登陆成功")
      }
      else{
          alert("用户或密码错误")
      } */

      // 2. 判断闰年
      // 能被4整除但不能被100整除，或者被400整除
      // 用户输入
      /*
      let year = +prompt("请输入年份")
      // 判断输出
      if(year % 4 ===0 && year % 100 !==0 || year%400 ===0)
      {
          alert(`"${year}年是闰年"`)
      }else{
          alert(`"${year}年是平年"`)
      }*/
  </script>

if多分支语句

1
2
3
4
5
6
7
8
9
<script>
        if(条件){
            代码1
        }else if(条件2){
            代码2
        }else if(条件3){
            代码3
        }
    </script>

三元运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
       // 条件 ? 满足条件执行 : 不满足执行
       3 < 5 ? alert("真的") : alert("假的")

       // 案例 数字补0
       // 输入1个数 小于10 前面补0 
       // 输入
       let num = prompt("请输入一个数字")

       // 输出
       num = num <10 ? 0 +num :num
       alert(num)
   </script>

Switch分支语句

1

打赏
支付宝 | Alipay
微信 | Wechat
≡