【JavaScript】练气期功法——基础知识-CSDN博客

本文链接：https://blog.csdn.net/m0_72516377/article/details/146505770

JavaScript 介绍

JavaScript 是什么

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

JavaScript 的作用：

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

JavaScript 的组成：

ECMAScript：规定了 JavaScript 基础语法核心知识，比如：变量、分支语句、循环语句、对象等
Web APIs：
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

点击MDN前往前端最权威网站可学习 JavaScript 相关内容

JavaScript 书写位置

内部 JavaScript

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

规范：script 标签写在 </body> 上面

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

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>alert('你好，js')</script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：将<script>放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 代码期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在页面的底部附近通常是最好的策略

外部 JavaScript

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

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

代码示例：

js 文件

alert('外部JS文件');

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script src="./my.js"></script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

script 标签中间无需写代码，否则会被忽略
外部 JavaScript 会使代码更加有序，更容易复用，且没有了脚本的混合，HTML 也会更加易读

内联 JavaScript

代码写在标签内部

语法：写在 html 标签内部

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <button onclick="alert('hello')">内联JavaScript</button>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：此处作为了解即可，但是在 vue 框架中会用到

JavaScript 注释

单行注释

符号：//

作用：// 右边这一行的代码会被忽略

快捷键：ctrl + /

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        // 这是一个注释
    </script>
</body>
</html>

块注释

符号：/* */

作用：/* 和 */之间的所有内容都会被忽略

快捷键：shift + alt + a

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        /*
        这是一个注释
        */
    </script>
</body>
</html>

JavaScript 结束符

作用：使用英文的 ; 代表语句的结束

实际情况：实际开发中，可写可不写，浏览器可以自动推断语句的结束位置

现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

约定：为了风格统一，结束符要么每句都写，要么每句都不写

JavaScript 输入输出

输出语法

语法 1：

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

作用：向 body 内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        document.write('Hello World!')
        document.write('<h1>Hello World!</h1>')
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

语法 2：

alert('要输出的内容')

作用：页面弹出警告对话框

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>alert('你好，js')</script>
</body>
</html>

结果如下：

在这里插入图片描述

语法 3：

console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        console.log("hello world");
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

输入语法

语法：

prompt('提示信息')

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

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        prompt("请输入一个数:")
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

JavaScript 代码执行顺序

按 HTML 文档流顺序执行 JavaScript 代码

alert() 和 prompt() 会跳过页面渲染先被执行

字面量

在计算机科学中，字面量是在计算机中描述事/物

比如：1000 是数字字面量、‘abcd’ 是字符串字面量、[] 是数组字面量、{} 是对象字面量

变量

变量是什么

变量是计算机存放数据的“容器”，简单来讲就是一个装数据的盒子

变量的基本使用

声明变量

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：

let 变量名

声明变量由两部分构成：声明关键字和变量名（标识）
let 关键字是系统提供的专门用来声明变量的词语

代码示例：

let age

变量赋值

定义一个变量后，就能够初始化它的值（赋值），在变量名后面跟上一个 “=”，然后再跟上数值

语法：

变量名 = 数值

代码示例：

age = 18

使用变量

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let age = 18 // 可以声明的时候同时赋值
        console.log(age)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

更新变量

重新赋值，用新的值覆盖旧的值即可完成变量更新

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let age = 18
        age = 20
        console.log(age)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

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

声明多个变量

语法：

let 变量1,变量2...

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let age = 18,name = '张三'
        // 输出
        console.log('我叫'+name+'今年'+age+'岁')
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

使用案例

输入内容并将内容输出

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let name = prompt('请输入你的名字')
        document.write(`你好，` + name)
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-24 220800

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量本质：是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

命名规则：

不能用关键字
只能用下划线、字母、数字、$ 组成，且数字不能是开头
字母严格区分大小写，如 Age 和 age 是两个不同的变量

命名规范：

起名要有意义
遵循小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写，如：userName

数组

数组是将一组数据存储在单个变量名下

声明数组

声明语法：

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

代码示例：

let names = ['张三','李四','王五','赵六']

数组的基本使用

获取数组元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let names = ['张三','李四','王五','赵六']
        document.write(names)
        document.write(names[0]) // 张三
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从 0 开始，所以张三的编号为 0，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

获取数组的长度

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let names = ['张三','李四','王五','赵六']
        document.write('数组的长度为' + names.length)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

常量

概念：使用 const 声明的变量称为“常量”

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是 let

命名规范：和变量一致

常量使用：

// 声明一个常量
const PI = 3.14
// 输出这个常量
document.write(PI)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

数据类型

JavaScript 的数据类型分为：

基本数据类型：number、string、boolean、undefined、null
引用数据类型

基本数据类型

数字类型（Number）

整数、小数、正数、负数都是数字类型

let age = 18
let price = 99.99

注意事项：JavaScript 是弱数据类型，变量属于哪种数据类型只有在赋值之后才能确认

算术运算符

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）；开发中经常作为某个数字是否被整除

算术运算符优先级

同时使用多个运算符编写程序时，会按着某种顺序先后执行，称为优先级
JavaScript 中优先级越高越先被执行，优先级相同时以从左向右执行

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面的

特殊值

NaN 代表一个计算错误，它是一个不确定的或者一个未定义的数学操作所得到的结果，NaN 是粘性的，任何对 NaN 的操作都会返回 NaN

字符串类型（string）

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

let name = '雷军' //单引号
let age = "30" //双引号
let sex = `男` //反引号

注意事项：

数字用引号包裹就不再是数字类型而是字符串类型
‘’ 这种引号里没有内容的情况叫空字符串
无论单引号或是双引号必须成对使用
单引号和双引号可以互相嵌套，但不可以嵌套自己
必要时使用转义符 \ 输出单引号或双引号

字符串拼接

场景：+ 运算符可以实现字符串的拼接

原理：数字相加，字符相连

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let str = '我叫'
        let name = '吴彦祖'
        let age = 18
        document.write(str + name + '今年' + age + '岁' )
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

模板字符串

使用场景：

拼接字符串和变量
用 + 拼接变量比较麻烦

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let str = '我叫'
        let name = '吴彦祖'
        let age = 18
        document.write(str + name + `今年${age}岁`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

布尔类型（boolean）

表示真或假时在计算机中对应的是布尔数据类型，它有两个固定的值 true 和 false，表示真用 true，表示假用 false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        document.write(`3>4吗？${3>4}<br>`)
        let isCool = true
        document.write(`JavaScript 好玩吗？${isCool}`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

未定义类型（undefined）

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

什么情况出现未定义类型？只声明变量不赋值的情况下，变量的默认值为 undefined，一般很少为某个变量赋值为 undefined

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

工作中的使用场景：

开发中经常声明一个变量，等待传送过来的数据。如果不知道这个数据是否传递过来，此时可以通过检测这个变量是不是 undefined，就判断用户是否有数据传递过来

空类型（null）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

let obj = null
document.write(obj) // null

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个 null

检测数据类型

通过 typeof 关键字检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符：typeof x（常用的写法）
函数形式：typeof (x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let num = 10
        console.log(typeof num)
        let str = "hello world"
        console.log(typeof str)
        let bool = true
        console.log(typeof bool)
        let un
        console.log(typeof un)
        let nul = null
        console.log(typeof nul)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

类型转换

为什么要类型转换

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

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

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

此时就需要转换变量的数据类型，将一种数据类型转换成需要的数据类型

隐式转换

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

规则：

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

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

小技巧：

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        console.log(1+1,typeof(1+1))
        console.log(1+'1',typeof(1+'1'))
        console.log('abc'+1,typeof('abc'+1))
        console.log(1-1,typeof(1-1))
        console.log(1-'1',typeof(1-'1'))
        console.log(+123,typeof(+123))
        console.log(+'123',typeof(+'123'))
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

显示转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律，为了避免因隐式转换带来的问题，通常根据逻辑需要对数据进行显示转换

概念：写代码告诉系统该转成什么类型

转换为数字型

Number (数据)
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number，即不是一个数字）
- NaN 也是 number 类型的数据，代表非数字
parseInt (数据)
- 只保留整数
parseFloat (数据)
- 可以保留小数

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let str = '123456789'
        console.log(Number(str),typeof Number(str))
        console.log(parseInt('12.34px'),typeof parseInt('12.34px'))
        console.log(parseFloat('12.34px'),typeof parseFloat('12.34px'))
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

小案例：弹窗加法计算器

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let num1=Number(prompt('请输入第一个数'))
        let num2=Number(prompt('请输入第二个数'))
        let num3=num1+num2
        alert(`两个数字的和为：${num3}`)
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 152709

案例：渲染表格

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
    <style>
        h2{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center; 
        }
        th{
            padding: 5px 30px;
        }
        table,th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h2>订单信息</h2>  
    <script>
        let brand = prompt('请输入商品名称')
        let price = +prompt('请输入商品价格')
        let num = +prompt('请输入商品数量')
        let address = prompt('请输入收货地址')
        let total = price*num
        document.write(`
                <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>${brand}</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
    </table>  `)
    </script>
</body>
</html>