• JavaScript变量、数据类型、类型转换

    一、JavaScript介绍

    1. JavaScript是什么

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

    2. 作用

    • 网页特效（监听用户的一些行为让网页做出对应的反馈）
    • 表单验证（针对表单数据的合法性进行判断）
    • 数据交互（获取后台的数据，渲染到前端）
    • 服务端开发（Node.js）

    3. JavaScript的组成

    3.1 ECMAScript

    ECMAScript规定了JS的编程语法和基础核心知识。

    比如：变量、分支语句、循环语句、对象等等

    3.2 Web APIs

    文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

    BOM（Browser Object Model，简称BOM），是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

    DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作

    BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

    ps：权威网站：MDN

    4. JS书写位置

    4.1 内部JS

    直接写在html文件里，用script标签包住

    规范：script标签写在上面

    拓展：alert(‘你好，js’)页面弹出警示对话框

    <body>
    <h1>123h1>
    
    <script>
        alert('你好，js')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    4.2 外部JS

    代码写在以.js结尾的文件里

    语法：通过script标签，引入到html页面中

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

    • 1
    • 2
    • 3
    • 4

    注意：script标签中间无需写代码，否则会被忽略！

    外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读。

    4.3 内联JS

    代码写在标签内部

    语法：了解即可，但后面Vue框架会用这种模式

    <body>
    <button onclick="alert('月薪过万')">点击我button>
body>

    • 1
    • 2
    • 3

    5. JS注释

    单行注释：Ctrl+/

    块注释：shift+alt+A

    6. JS结束符

    • 代表语句结束
    • 英文分号 ;
    • 可写可不写
    • 换行符（回车）会被识别成结束符，所以一个完整的语句，不需要手动换行
    • 在实际开发中很多人主张书写JavaScript代码时省略结束符
    • 为了风格统一，要么每句都写结束符，要么都不写

    7. JS输入输出语法

    7.1 输出语法
    document.write('要输出的内容')

    • 1
    • 向body内输出内容
    • 如果输出的内容写的是标签，也会被解析成网页元素
    alert('要输出的内容')

    • 1
    • 页面弹出警告对话框
    console.log('控制台打印')

    • 1
    • 控制台输出语法，程序员调试使用
    7.2 输入语法
    prompt('请输入您的姓名：')

    • 1
    • 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

    二、变量

    变量是计算机用来存储数据的容器。

    1. 变量的基本使用

    1.1 变量的初始化
    let age = 18

    • 1

    注意：let不允许多次声明一个变量。

    1.2 同时声明多个变量

    同时声明多个变量时，多个变量名之间使用英文逗号隔开。

    let age = 10, name = 'hs', sez = 2;

    • 1

    2. 变量命名规则与规范

    规则：必须遵守，不遵守报错

    规范：建议，不遵守不会报错，但不符合业内通识

    2.1 规则

    不能用关键字：有特殊含义的字符，JavaScript内置的一些词汇，例如：let、var、if、for等

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

    字母严格区分大小写，如Age和age是不同的变量

    2.2 规范

    起名要有意义

    遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写，例：userName、myFirstName

    3. 变量拓展-let和var的区别

    let为了解决var的一些问题

    var声明：

    • 可以先使用在声明（不合理）

    • var声明过的变量可以重复声明（不合理）

    • 比如变量提升、全局变量、没有块级作用域等等

    以后声明变量统一用let

    4. 变量拓展-数组

    数组（Array）是一种可以按顺序保存多个数据

    let 数组名 = [数据1, 数据2, ..., 数据n]

    • 1

    三、数据类型

    1. 基本数据类型

    1.1 number数字型

    整数、正数、负数、小数统一称为数字类型

    JS是弱数据类型，变量到底属于哪种类型，只有赋值之后才能确认

    Java是强数据类型，例如int a=3必须是整数

    1.2 string字符串型

    通过单引号、双引号或反引号包裹的数据都叫字符串，单引号和双引号本质上没有区别，推荐使用单引号。

    // 外单内双，外双内单，转义符
console.log("我是'迪士尼在陶公主'吗？")
console.log('我是"迪士尼在陶公主"吗？')
console.log('我是\'迪士尼在陶公主\'吗？')

    • 1
    • 2
    • 3
    • 4
    字符串拼接
        <script>
        // 利用 + 拼接
        console.log('我是' + '米奇')

        console.log('我今年年龄是:' + 18)

        let age = 20
        console.log('我今年年龄是:' + age)

        // 用户输入名字
        // 页面输出的是：我的名字是xxx
        let uname = prompt('请输入你的名字')
        document.write('我的名字是：' + uname)
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
        <script>
        // 1. 用户输入年龄
        // 2. 页面输出 我今年xx岁啦
        let age = prompt('请输入你的年龄：')
        document.write('我今年' + age + '岁啦')
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    模板字符串
    • 拼接字符串和变量
    • ``
    • 内容拼接变量时，用${}包住变量
    document.write(`大家好，我叫${name}，我今年${age}岁了`)

    • 1
    1.3 boolean布尔型

    表示肯定或否定时在计算机中对应的是布尔类型数据。

    它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。

    1.4 undefined未定义型

    未定义是比较特殊的类型，只有一个值undefined。

    只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined。

    let age    // 声明变量但是未赋值
document.write(age)  // 输出undefined

    • 1
    • 2
    1.5 null空类型

    null表示值为空

    null和undefined的区别：

    1. undefined表示没有赋值
    2. null表示赋值了，但是内容为空
    情况说明结果
    let age;console.log(age);只声明不赋值undefined
    console.log(age);不声明不赋值，直接使用报错
    age = 10;console.log(age);不声明只赋值10(不提倡)

    2. 引用数据类型

    object对象

    function函数

    array数组

    3. 检测数据类型

    3.1 控制台输出语句

    控制台语句经常用于测试结果来使用

    可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

    3.2 通过typeof关键字检测数据类型
    let age = 18
let uname = '米奇'
let flag = false
let buy
console.log(typeof age)    //number
console.log(typeof uname)  //string
console.log(typeof flag)   //boolean
console.log(typeof buy)    //undefined

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    四、类型转换

    JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

    使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

    console.log('10000' + '2000')   //输出结果  100002000

    • 1

    此时需要转换变量的数据类型。

    通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

    1. 隐式转换

    某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

    规则：

    • + 号两边只要有一个是字符串，都会把另外一个转成字符串
    • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

    转换类型不明确，靠经验才能总结

    +号作为正号解析可以转换成Number

    2. 显式转换

    2.1 转换为数字型

    Number(数据)

    • 转换成数字类型
    • 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
    • NaN也是number类型的数据，代表非数字

    parseInt(数据)

    • 只保留整数

    parseFloat(数据)

    • 可以保留小数
            // Number(数据)
        console.log(Number('10'))
        // 转换为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999'))
        // 转换为数字型，会保留小数
        console.log(parseFloat('10.999'))
        // 区别：
        // Number(数据) 只能放数字类型的字符，不能放abc这种类型
        // 否则返回的是 NaN  not A number
        console.log(Number('10.01abc'))
        // parseFloat常用于过滤单位
        console.log(parseFloat('10.01abc'))
        console.log(parseFloat('100px'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    2.2 转换为字符型

    String(数据)

    变量.toString(进制)

            console.log(String(10))
        let age = 10
        console.log(age.toString())
        // 括号里面如果是2，转换为二进制
        console.log(age.toString(2))

    • 1
    • 2
    • 3
    • 4
    • 5

    五、实战案例

    商品订单信息

    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>综合案例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 name = prompt('请输入商品名称')
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        let total = price * num
        // 2. 渲染表格 填充数据
        document.write(`
        
    
            
                
    订单付款确认
    
                
            
    
                商品名称
                商品价格
                商品数量
                总价
                收货地址
            
    
            
    
                ${name}
                ${price}元
                ${num}
                ${total}元
                ${address}
            
    
        
    
            `    )
        script>
body>
html>

    • 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
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    2022/11/23 Caroline finish

  • 相关阅读:
    Ubuntu手机和电脑安装其他终端Terminal Emulator
    【数据结构】第二章课后练习题——线性结构
    springboot监控
    SolidWorks 2021 SP5软件下载及安装教程
    Mysql 45讲学习笔记（三十一）误删数据
    exe4j使用笔记(jar包转exe工具)
    工作流审批平台，可迁移，可快速开发审批单（源码）
    云服务器安装 redis
    【HarmonyOS】【JAVA UI】自定义通知的实现
    什么是内存泄漏？JavaScript 垃圾回收机制原理及方式有哪些？哪些操作会造成内存泄漏？
  • 原文地址：https://blog.csdn.net/hs_2017112123/article/details/127996159