JavaScript基础（一）

原创已于 2025-11-16 11:02:45 修改 · 481 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2025-11-16 10:57:58 首次发布

一，JS介绍

1,1 JS 是什么

1.2 JavaScript 书写位置

1. 内部JavaScript

2. 外部JavaScript

3.内联JavaScript

练习

内部:

外部：

1.2 JavaScript 怎么写

1.5 JavaScript 输入输出语法

练习

代码执行顺序

1.6 字面量

二、变量

2.1 变量是什么

2.2 变量的基本使用

2,3 变量的本质

2,4 变量命名规则与规范

二、变量拓展-let和var的区别

二、变量拓展-数组

1.1 数组的基本使用

三，常量

常量的基本使用

四.数据类型

4.1 数据类型

1，数据类型-数字类型

2，数据类型-字符串类型

模版字符串

3，数据类型-布尔类型

4，数据类型-未定义类型

5，数据类型-null类型（空类型）

4,2检测数据类型

1，数据台控制语句和监测数据类型

2，通过typeof关键字检测数据类型

五，类型转换

5.1 为什么要类型转换

5.2隐式转换

5.3显式转换

六、实战案例

案例

答案

<!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>
      /* 合并相邻边框 */
      table {
        border-collapse: collapse;
        height: 80px;
        text-align: center;
        margin: 0 auto;
      }
      table,
      th,
      tr {
        border: 1px solid #000;
      }
      th {
        padding: 5px, 30px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        <h2>订单确认</h2>
      </caption>
      
    <script>
      let price = +prompt('请输入商品价格:')
      let num = +prompt('请输入商品数量：')
      let adress = prompt('请输入收货地址:')
      let total = price * num
      document.write(`<thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <th>小米手机青春PLUS</th>
          <th>${price}元</th>
          <th>${num}</th>
          <th>${total}</th>
          <th>${adress}</th>
        </tr>
      </thead>
    </table>`)
    </script>
  </body>
</html>

常见错误

课后练习：

1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = prompt('请输入您的名字:')
      let age = prompt('请输入您的年龄:')
      let ganner = prompt('请输入您的性别:')
      console.log(`用户的姓名:${name}`)
      console.log(`用户的年龄：${age}`)
      console.log(`用户的性别：${ganner}`)
    </script>
  </body>
</html>

2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = +prompt('你现在多少岁了？')
      alert(`据我估计，五年后，你可能${5 + name}岁了`)
    </script>
  </body>
</html>

3.

<!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>
      table {
        border-collapse: collapse;
        height: 80px;
        margin: 0 auto;
      }
      td {
        text-align: center;
      }
      table,
      th,
      td {
        border: 1px solid #000;
      }
      th {
        padding: 10px 30px;
      }
    </style>
  </head>
  <body>
    <script>
      let bank = prompt('请输入总的银行卡金额：')
      let ele = prompt('请输入电费:')
      let water = prompt('请输入：水费')
      let internet = prompt('请输入网费：')
      document.write(`
      <table>
      
        <caption>
          <h2>本月银行卡余额</h2>
        </caption>
        <tr>
          <th>银行卡金额</th>
          <th>电费</th>
          <th>水费</th>
          <th>网费</th>
          <th>余额</th>
        </tr>
        <tr>
          <td>${bank}</td>
          <td>${ele}</td>
          <td>${water}</td>
          <td>${internet}</td>
          <td>${bank - ele - water - internet}</td>
        </tr>
      </table>`)
    </script>
  </body>
</html>