【JavaScript】变量，数据类型

MorleyOlsen

已于 2023-01-13 17:18:49 修改

阅读量473

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2023-01-12 18:49:31 首次发布

本文链接：https://blog.csdn.net/m0_65787507/article/details/128664773

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS Day 1

JS介绍

JS是什么

一种运行在客户端/浏览器的编程语言，实现人机交互效果。

作用：

1-网页特效

2-表单验证

3-数据交互

4-服务端编程

组成：

1-ECMAScript （基础语法）

2- Web APIs（DOM操作文档，BOM操作浏览器）

JS书写位置

1-内联

<button onclick="alert('hello js')">CLICK ME</button>

2-内部

<script>
    alert('hello js')
</script>

3-外部

<body>
    <script scr="my.js"></script>
</body>

PS：外部js中间的代码会被忽略

JS注释

1-单行注释：//

control+/

2-块注释：/* */

shift+alt+A

JS结束符

1-分号

2-换行

JS输出

1-body内输出，可识别标签

document.write('xxx')

2-页面弹出警告对话框

alert('xxx')

3-控制台输出，供调试

console.log('xxx')

JS输入

1-显示对话框，对话框中包含一条提示

prompt('xxx')

JS字面量

字面量：计算机中描述事/物

eg. 数字字面量，字符串字面量，数组字面量，对象字面量

变量

变量定义

计算机存储数据的容器

变量不是数据本身

变量基本使用

1-声明变量

关键字+变量名

2-变量赋值

3-更新变量

4-声明多个变量

变量本质

程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

规则：

1-不用关键字

2-只能用下划线、字母、数字、$，且数字不能开头

3-字母区分大小写

规范：

1-起名有意义

2-遵守小驼峰命名法

let和var的区别

var声明：

1-可以先使用、再声明

2-var声明过的变量可以重复声明

3-变量提升、全局变量、没有块级作用域

变量拓展-数组

let arr=[]

保存多个数据

数据类型

基本数据类型+引用数据类型

基本数据类型

数字number

弱数据类型

字符串string

单引号/双引号/反引号包裹的数据

单双规则：外双内单或外单内双

转义字符：\，可输出单引号或双引号

模板字符串：连接字符串和变量

document.write('my name is'+name+', my age is'+age)
document.write('my name is${name}, my age is ${age}')

布尔boolean

true=1，false=0

未定义undefined

只声明变量，不赋值

let age;
console.log(age)

空null

let obj=null

与undefined的区别：

1-undefined表示没有赋值

2-null表示赋值了，但内容为空

检测数据类型

1-控制台输出语句

2-typeof关键字

引用数据类型

object对象

function函数

array数组

类型转换

WHY

把一种数据类型的变量转换成需要的数据类型

隐式转换

规则：

1- +号两边只要有一个是字符串，统一为字符串

2- 除+外的算数运算符，统一为数字

显式转换

1-转数字

number(数据)：字符串中有非数字得到NaN

parseInt(数据：只保留正数

parseFloat(数据)：可保留小数

2-转字符串

String(数据)

变量.toString(进制)

Day 1 EXAMPLE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      margin: 0 auto;
      text-align: center;
      border-collapse: collapse;
    }

    table th,
    td {
      border: 1px solid #000;
      padding: 15px;

    }

    table caption {
      margin: 15px 0;
    }
  </style>
</head>

<body>

  <script>
    // 1. 输入 price num  address 三个变量
    let price = +prompt('请输入商品价格:')
    let num = +prompt('请输入购买的数量:')
    let address = prompt('请输入收货的地址:')
    let total = price * num
    // 2. 渲染表格 填充数据
    document.write(`
      <table>
      <caption>
        <h2>订单确认</h2>
      </caption>
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>小米手机青春PLUS</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
    </table>
    `)
  </script>
</body>

</html>