JavaScript第一天

原创已于 2024-07-21 17:46:35 修改 · 359 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-07-20 23:20:41 首次发布

变量的基本使用

更新变量

    let age = 18
    age = 19

用户名输入案例：

let uname = prompt('请输入姓名')
document.write(uname)

这样在提示框中输入姓名之后，就会在网页中显示出来

当输入之后不在网页中显示的时候，可能是变量名写错了，这时候打开console：

就会发现未定义变量。

交换变量的值

    let num1 = 10
    let num2 = 20
    let temp
    temp = num1
    num1 = num2
    num2 = temp

变量命名规范

不用关键字：let、var、if、for

只能用下划线、字母、数字、$组成，数字不能开头

字母区分大小写

小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写，如：userName

let和var区别

var可以先使用，再声明，重复声明，

数组

    let arr = [10, 20, 30]
    console.log(arr)
    document.write(arr[0])
    document.write(arr.length)

在控制台显示arr[3]，刷新后显示具体的内容，在网页显示10，arr.length 返回数组长度

常量

const 定义

    const PI = 3.14
    console.log(PI);

数据类型

基本数据类型

number数字型

string字符串型

boolean布尔型

null空

undefined未定义

引用数据类型

object对象

js的数据为弱数据类型，js中所有的数字都称为number型（学完c++狂喜）

字符串：

    let str = 'pink'
    let str1 = "pink"
    let str2 = `pink`

    console.log('pink讲课有'激情'')//报错
    console.log('pink讲课有"激情"')
    console.log("pink讲课有'激情'")
    console.log('pink讲课有\'激情\'')//转义符，不报错

加号：

    console.log(1 + 1);
    console.log('pink' + '老师');

数字相加，字符相连

    let age2 = prompt("请输入年龄")
    document.write("我今年" + age2)

有点可以操控的感觉了

模版字符串

用于拼接字符串和变量，如果不用它，拼接比较麻烦，如：

 document.write('大家好我是'+name+"我今年" + age2+'岁')

语法：反引号``，${ }

    document.write(`大家好我是${name},我今年${age2}岁`)

布尔类型

    let isCool = true
    console.log(isCool)

输出为true

还有false

未定义类型

只声明，不定义，是undefined，

    let num
    console.log(num);

空类型：null

undefined表示没有赋值，null表示赋空值

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

第一行运行为NaN：not a number

第二行运行为：1

检测数据类型

    let age
    let b = 10
    let c = 'gggg'
    let d = false
    console.log(typeof age);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);

特殊的是：

    let obj = null
    console.log(typeof obj);

输出类型为：object

null一般用于要创建对象，先占位。类似 a href="#"

类型转换

首先：控制台中黑色为字符串，蓝色为数字类型

为什么需要转换：

使用表单，promp获取的数据默认是字符串类型，如：

请输入基本工资：10000

请输入提成：2000

您的工资为：100002000

类型转换有隐式转换和显示转换：

隐式转换

+号两边只要有一个字符串，就会把另一个转化为字符串，

除了+号以外的字符串，- * / 都会转化为number类型

    console.log('pink' + 1);
    console.log(2 + '2');
    console.log('2' - 1);
    console.log('2' * 2);
    console.log('pink' / 2);

+号还一个作用，是转换类型

    console.log(+'123');

在控制台上是蓝色数字类型123，

-号也可以，输出-123

显式转换

    let str = '123'
    console.log(Number(str));
    console.log(Number('123'));
    console.log(Number('pink'));//报错

    let num = prompt('输入年薪')
    console.log(Number(num));

    let num2 = Number(prompt('输入年薪'))
    console.log(num2);

    let num3 = +prompt('输入年薪')
    console.log(num3);

parseInt：保留整数

parseFloat：保留浮点数

    console.log(parseInt('120px'));
    console.log(parseInt('12.34px'));
    console.log(parseInt('120px333'));

    console.log(parseFloat('12px'));
    console.log(parseFloat('12.34px'));
    console.log(parseFloat('120.6px333'));

实践：两数之和

    let num1 = +prompt('请输入第一个数字')
    let num2 = +prompt('请输入第二个数字')

    alert(`两数之和为${num1 + num2}`)

综合实例

<!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>
    h1 {
      text-align: center;
    }

    table {
      border: 1px solid #000;
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
    }

    th {
      border: 1px solid #000;
      padding: 10px 30px;
    }

    td {
      border: 1px solid #000;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>订单确认</h1>


  <script>
    //输入
    let num = +prompt('请输入商品数量')
    let address = prompt('请输入收货地址')
    //计算
    let total = num * 299
    //打印
    document.write(`
        <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
          </tr>
    
          <tr>
            <td>小米手环9NFC版</td>
            <td>299元</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
    
          </tr>
    
        </table>
    
    
    `)

  </script>
</body>

</html>