前端页面 JavaScript数据交互

前言：学习JavaScript为前端设置动态效果，实现交互。JavaScript是一种广泛应用于网页开发的脚本语言，它能够使网页变得更加动态和交互性。作为一种客户端脚本语言，JavaScript可以被嵌入到HTML中，并且可以被所有现代的网页浏览器支持。

JavaScript,HTML,CSS共同构成网页

HTML:用来定义网页内容,例如:标题,正文,图像等(HTML是网页制作的基础语言---->跳转学习:HTML);
CSS:用来修饰网页组件得外观,例如:颜色,大小,位置,背景等等(CSS是网页制作的修饰语言--->跳转学习:CSS)
JavaScript:用来实时更新网页内容,例如:从服务器中获取数据并更新到网页中,修改某些标签的样式内容,可以让网页变得生动.

Javascript的使用方式

HTML 页面内嵌式：

这是最简单的 JavaScript 书写方式，直接在 HTML 页面中使用 <script> 标签嵌入 JavaScript 代码。
优点是简单易用，适合小型项目或快速验证代码效果。
缺点是代码维护性差，不便于大型项目的组织和管理。

<!DOCTYPE html>
<html>
<head>
    <title>内嵌式 JavaScript</title>
</head>
<body>
    <h1 id="demo">Hello, JavaScript!</h1>
    <button onclick="changeText()">点我改变</button>

    <script>
        function changeText() {
            document.getElementById("demo").innerHTML = "我是内嵌式!";
        }
    </script>
</body>
</html>

HTML 页面内联式：

将 JavaScript 代码直接嵌入在 HTML 元素的事件属性中，如 onclick、onmouseover 等。
优点是操作简单，可以快速绑定事件。

缺点是代码可读性差，且不便于维护和扩展。

<!DOCTYPE html>
<html>
<head>
    <title>内联式 JavaScript</title>
</head>
<body>
    <h1 id="demo">Hello, JavaScript!</h1>
    <button onclick="document.getElementById('demo').innerHTML = '我是内联式!'">点我改变</button>
</body>
</html>

外部 JavaScript 文件：

将 JavaScript 代码写在一个单独的 .js 文件中，然后通过 HTML 的 <script> 标签引用该文件。
优点是代码组织更清晰，便于维护和复用。
缺点是需要额外的文件管理，开发初期可能会增加一些复杂度。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>外部 JavaScript 文件</title>
</head>
<body>
    <h1 id="demo">Hello, JavaScript!</h1>
    <button onclick="changeText()">点我改变</button>

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

JS文件：

function changeText() {
    document.getElementById("demo").innerHTML = "Text changed!";
}

JS文件的代码执行顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS文件的代码执行顺序</title>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			alert("写在<head>标签中");
		</script>
	</head>
	<body>
		<script>
			alert("写在<body>标签中");
		</script>
	</body>
</html>

使用模块化方式书写（ES6 模块）

随着 ES6 的引入，JavaScript 支持模块化开发。通过 import 和 export 关键字，可以将代码分割成多个模块，便于组织大型项目。
优点是提供了更好的代码组织和复用机制，适合大型项目。
缺点是需要一定的学习成本，并且需要额外的构建工具支持。

Javascript的基本语法

变量：

变量的命名规则

变量名必须以字母、下划线（_）、美元符号（$）开头。

后续字符可以是字母、下划线、美元符号或数字（0 - 9）。

变量名区分大小写。

不能使用 JavaScript 的保留字作为变量名，如 if、for、class 等。

使用 var 声明变量

var 是 JavaScript 中最早用于声明变量的关键字，具有函数作用域（在函数内声明时）或全局作用域（在全局范围内声明时）。它允许重复声明同一个变量。

var x = 10;
var x = 20; // 可以重复声明
console.log(x); // 输出 20

使用 let 声明变量

let 是 ES6 引入的用于声明变量的关键字，具有块级作用域（在代码块 {} 内声明），不能在同一个作用域内重复声明同一个变量。

let y = 10;
// let y = 20; // 会报错，不能重复声明
{
    let y = 30;
    console.log(y); // 输出 30
}
console.log(y); // 输出 10

使用 const 声明变量

const 也是 ES6 引入的，用于声明常量。它声明的变量必须初始化，并且不能重新赋值，同样具有块级作用域。

const z = 10;
// z = 20; // 会报错，不能重新赋值
const obj = { a: 1 };
obj.a = 2; // 可以修改对象的属性
console.log(obj); // 输出 { a: 2 }

变量的作用域

全局作用域

在全局范围内声明的变量具有全局作用域，可以在任何地方访问。

var globalVar = "I'm global";
function checkScope() {
    console.log(globalVar); // 可以访问
}
checkScope();

函数作用域（var）

使用 var 在函数内声明的变量具有函数作用域，只能在函数内部访问。

function func() {
    var funcVar = "I'm in function";
    console.log(funcVar); // 可以访问
}
func();
// console.log(funcVar); // 会报错，无法访问

块级作用域（let 和 const）

使用 let 和 const 在代码块 {} 内声明的变量具有块级作用域，只能在代码块内部访问。

if (true) {
    let blockVar = "I'm in block";
    console.log(blockVar); // 可以访问
}
// console.log(blockVar); // 会报错，无法访问

基本数据类型：

基本数据类型是不可变的数据类型，也称为原始数据类型。JavaScript 有 7 种基本数据类型：

数据类型	特点描述	常见定义方式	示例及说明
`string`	用于表示文本数据，不可变。使用单引号、双引号或反引号定义。	单引号、双引号或反引号包裹的文本。	`const str1 = 'Hello';`，`const str2 = "World";`，`const str3 = 'JavaScript';`。
`number`	用于表示整数和浮点数，以及特殊值 `Infinity`、`-Infinity` 和 `NaN`。	直接赋值数字。	`const num1 = 10;`，`const num2 = 3.14;`，`const num3 = Infinity;`。
`boolean`	表示逻辑值，只有两个值：`true` 和 `false`。	直接赋值 `true` 或 `false`。	`const isTrue = true;`，`const isFalse = false;`。
`null`	表示空值或不存在的值，只有一个值 `null`。	直接赋值 `null`。	`let nullable = null;`。
`undefined`	表示变量已声明但未赋值，或对象属性、函数参数不存在。	未赋值的变量或未定义的属性。	`let undeclared;`，未定义的对象属性会返回 `undefined`。
`symbol`	ES6 引入，表示唯一的、不可变的值，常用于创建对象的唯一属性名。	使用 `Symbol()` 函数创建。	`const sym1 = Symbol("description");`，`const sym2 = Symbol("description");`，`console.log(sym1 === sym2);` 输出 `false`。
`bigint`	ES2020 引入，用于表示任意精度的整数，可安全存储和操作非常大的整数值。	在数字后添加 `n` 后缀。	`const bigInt1 = 123456789012345678901234567890n;`。

string（字符串）

用于表示文本数据，使用单引号（'）、双引号（"）或反引号（`）定义。字符串是字符的序列，一旦创建，内容就不能改变。

const str1 = 'Hello';
const str2 = "World";
const str3 = `JavaScript`;
console.log(str1); // 输出 "Hello"
console.log(str2); // 输出 "World"
console.log(str3); // 输出 "JavaScript"

number（数字）

用于表示整数和浮点数。JavaScript 中的数字是双精度 64 位浮点数。此外，还有特殊的数字值，如 Infinity（无穷大）、-Infinity（负无穷大）和 NaN（非数字）。

const intNum = 10; // 整数
const floatNum = 3.14; // 浮点数
const bigNum = 123456789012345678901234567890; // 大整数（在 ES2020 之前可能会丢失精度）
const infinity = Infinity;
const notANumber = NaN;
console.log(typeof intNum); // 输出 "number"
console.log(typeof floatNum); // 输出 "number"
console.log(typeof bigNum); // 输出 "number"
console.log(typeof infinity); // 输出 "number"
console.log(typeof notANumber); // 输出 "number"

boolean（布尔值）

用于表示逻辑值，只有两个值：true（真）和 false（假）。常用于条件判断。

const isTrue = true;
const isFalse = false;
console.log(isTrue); // 输出 true
console.log(isFalse); // 输出 false

null（空值）

表示一个空值或不存在的值。它是一个独立的数据类型，只有一个值 null。通常用于表示变量没有指向任何对象。

let nullable = null;
console.log(nullable); // 输出 null
console.log(typeof nullable); // 输出 "object"（这是一个历史遗留问题，实际上 null 是一个独立的类型）

undefined（未定义）

表示变量已被声明，但尚未赋值。或者表示对象属性或函数参数不存在。

let undeclared;
console.log(undeclared); // 输出 undefined
console.log(typeof undeclared); // 输出 "undefined"

symbol（符号）

ES6 引入的一种新的原始数据类型，用于表示唯一的、不可变的值。常用于创建对象的唯一属性名。

const sym1 = Symbol("description");
const sym2 = Symbol("description");
console.log(sym1 === sym2); // 输出 false，因为每个 Symbol 都是唯一的

bigint（大整数）

ES2020 引入的一种新的原始数据类型，用于表示任意精度的整数。它可以安全地存储和操作非常大的整数值。

const bigInt1 = 123456789012345678901234567890n;
const bigInt2 = 98765432109876543210987654321n;
console.log(bigInt1 + bigInt2); // 输出 123456789012345678901234567890n + 98765432109876543210987654321n 的结果

引用数据类型:

引用数据类型是复杂的数据类型，用于存储对象。变量存储的是对象在内存中的引用，而不是对象本身。JavaScript 中的引用数据类型包括：

引用数据类型	特点描述	常见定义方式	示例及说明
`Object`	用于表示一组无序的键值对集合，键是字符串或符号，值可以是任何数据类型。	使用对象字面量 `{}` 或 `new Object()`。	`const person = { name: "John", age: 30, isStudent: false };`。
`Array`	用于存储多个值的有序集合，元素可以是任何数据类型，通过索引访问。	使用数组字面量 `[]` 或 `new Array()`。	`const numbers = [1, 2, 3, 4, 5];`，`const mixed = [1, "two", true, { name: "John" }];`。
`Function`	用于定义可执行的代码块，可以有参数和返回值，并且可以被调用。	使用函数声明或函数表达式。	`function add(a, b) { return a + b; }`，`const result = add(5, 3);`。
`Date`	用于表示日期和时间。	使用 `new Date()`。	`const now = new Date();`，`console.log(now);` 输出当前日期和时间。
`RegExp`	用于描述字符串模式，用于搜索、替换等操作。	使用正则表达式字面量 `/pattern/` 或 `new RegExp()`。	`const pattern = /javascript/i;`，`const str = "I love JavaScript!";`，`console.log(pattern.test(str));` 输出 `true`。
`Map`	ES6 引入，用于存储键值对，键可以是任何数据类型，并且可以获取键值对的数量。	使用 `new Map()`。	`const map = new Map();`，`map.set("name", "John");`，`map.set(1, "one");`，`console.log(map.get("name"));` 输出 `"John"`。
`Set`	ES6 引入，用于存储唯一的值，可以是任何数据类型。	使用 `new Set()`。	`const set = new Set();`，`set.add(1);`，`set.add("two");`，`console.log(set.size);` 输出 `2`。
`WeakMap`	ES6 引入，是一种键弱引用的对象集合，键必须是对象。	使用 `new WeakMap()`。	`const weakMap = new WeakMap();`，`const obj = {};`，`weakMap.set(obj, "value");`，`console.log(weakMap.get(obj));` 输出 `"value"`。
`WeakSet`	ES6 引入，是一个弱引用的值的集合，值必须是对象。	使用 `new WeakSet()`。	`const weakSet = new WeakSet();`，`const obj = {};`，`weakSet.add(obj);`，`console.log(weakSet.has(obj));` 输出 `true`。

Object（对象）

用于表示一组无序的键值对集合。每个键是一个字符串或符号，值可以是任何数据类型。

const person = {
    name: "John",
    age: 30,
    isStudent: false
};
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30
console.log(person.isStudent); // 输出 false

Array（数组）

用于存储多个值的有序集合。数组中的元素可以是任何数据类型，并且可以通过索引访问。

const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "two", true, { name: "John" }];
console.log(numbers[0]); // 输出 1
console.log(mixed[3].name); // 输出 "John"

Function（函数）

用于定义可执行的代码块。函数可以有参数和返回值，并且可以被调用。

function add(a, b) {
    return a + b;
}
const result = add(5, 3);
console.log(result); // 输出 8

Date（日期）

用于表示日期和时间。

const now = new Date();
console.log(now); // 输出当前日期和时间

RegExp（正则表达式）

用于描述字符串模式，用于搜索、替换等操作。

const pattern = /javascript/i;
const str = "I love JavaScript!";
console.log(pattern.test(str)); // 输出 true
console.log(str.match(pattern)); // 输出 ["JavaScript"]

Map（ES6 引入）

用于存储键值对，键可以是任何数据类型，并且可以获取键值对的数量。

const map = new Map();
map.set("name", "John");
map.set(1, "one");
console.log(map.get("name")); // 输出 "John"
console.log(map.size); // 输出 2

Set（ES6 引入）

用于存储唯一的值，可以是任何数据类型。

const set = new Set();
set.add(1);
set.add("two");
set.add(1); // 重复添加无效
console.log(set.size); // 输出 2
console.log(set.has(1)); // 输出 true

获取变量数据类型

使用 `typeof` 运算符

typeof 运算符返回一个字符串，表示未经计算的操作数的类型。

基本数据类型

对于基本数据类型，typeof 返回以下字符串：
- "string"：字符串类型。
- "number"：数字类型。
- "boolean"：布尔类型。
- "undefined"：未定义类型。
- "symbol"：符号类型（ES6 引入）。
- "bigint"：大整数类型（ES2020 引入）。

const str = "Hello";
const num = 10;
const bool = true;
let und;
const sym = Symbol("description");
const big = 123456789012345678901234567890n;

console.log(typeof str); // 输出 "string"
console.log(typeof num); // 输出 "number"
console.log(typeof bool); // 输出 "boolean"
console.log(typeof und); // 输出 "undefined"
console.log(typeof sym); // 输出 "symbol"
console.log(typeof big); // 输出 "bigint"

null 的特殊情况

对于 null，typeof 返回 "object"。这是一个历史遗留问题，因为早期的 JavaScript 将 null 视为对象类型的空值。

const nullable = null;
console.log(typeof nullable); // 输出 "object"

使用 `instanceof` 运算符

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。它通常用于检测引用数据类型的实例。

const obj = new Object();
const arr = new Array();
const date = new Date();
const regex = new RegExp();
const map = new Map();
const set = new Set();
const weakMap = new WeakMap();
const weakSet = new WeakSet();

console.log(obj instanceof Object); // 输出 true
console.log(arr instanceof Array); // 输出 true
console.log(date instanceof Date); // 输出 true
console.log(regex instanceof RegExp); // 输出 true
console.log(map instanceof Map); // 输出 true
console.log(set instanceof Set); // 输出 true
console.log(weakMap instanceof WeakMap); // 输出 true
console.log(weakSet instanceof WeakSet); // 输出 true

使用 `Object.prototype.toString.call()`

Object.prototype.toString.call() 方法可以更准确地检测数据类型，包括 null 和 undefined。

const str = "Hello";
const num = 10;
const bool = true;
let und;
const sym = Symbol("description");
const big = 123456789012345678901234567890n;
const nullable = null;

console.log(Object.prototype.toString.call(str)); // 输出 "[object String]"
console.log(Object.prototype.toString.call(num)); // 输出 "[object Number]"
console.log(Object.prototype.toString.call(bool)); // 输出 "[object Boolean]"
console.log(Object.prototype.toString.call(und)); // 输出 "[object Undefined]"
console.log(Object.prototype.toString.call(sym)); // 输出 "[object Symbol]"
console.log(Object.prototype.toString.call(big)); // 输出 "[object BigInt]"
console.log(Object.prototype.toString.call(nullable)); // 输出 "[object Null]"

获取变量数据类型的方法如下：

使用 typeof 运算符可以快速判断基本数据类型和函数类型。

使用 instanceof 运算符可以检测引用数据类型的实例。

使用 Object.prototype.toString.call() 方法可以更准确地检测所有数据类型，包括 null 和 undefined。

数据类型转换：

隐式转换（类型 coercion）自动转换

JavaScript 会在某些操作中自动将一个数据类型转换为另一个数据类型。例如，将数字与字符串拼接时，数字会被转换为字符串。

`+` 运算符

字符串拼接：当 + 运算符的一个操作数是字符串时，另一个操作数会被隐式转换为字符串，然后进行拼接。

const num = 10;
const str = "20";
console.log(num + str); // 输出 "1020"（数字 10 被转换为字符串）

数值相加：当两个操作数都是数字时，+ 运算符会进行数值相加。

const num1 = 10;
const num2 = 20;
console.log(num1 + num2); // 输出 30

**其他运算符（`-`、`*`、`/`）**

当使用 -、*、/ 运算符时，操作数会被隐式转换为数字，然后再进行相应的数值运算。

const strNum1 = "10";
const strNum2 = "20";
console.log(strNum1 - strNum2); // 输出 -10（字符串被转换为数字）
console.log(strNum1 * strNum2); // 输出 200
console.log(strNum1 / strNum2); // 输出 0.5

布尔值的隐式转换

在条件判断中，JavaScript 会将非布尔值转换为布尔值。以下是会被转换为 false 的值（称为 “假值”）：

undefined
null
0
NaN
""（空字符串）
false

其他值都会被转换为 true（称为 “真值”）。

注意事项

隐式转换可能导致意外行为：由于 JavaScript 的自动类型转换，有时会导致意外的结果。例如，"0" 在条件判断中会被转换为 true，因为它是非空字符串，而不是数字 0。

显式转换（类型转换）强制转换

可以使用特定的方法进行数据类型转换，如 Number()、String()、Boolean() 等。

转换为字符串

使用 String() 函数可以将任何数据类型转换为字符串。

const num = 10;
const bool = true;
const obj = { name: "John" };
console.log(String(num)); // 输出 "10"
console.log(String(bool)); // 输出 "true"
console.log(String(obj)); // 输出 "[object Object]"

转换为数字

使用 Number() 函数可以将字符串或其他值转换为数字。

const strNum = "123";
const strNotNum = "abc";
console.log(Number(strNum)); // 输出 123
console.log(Number(strNotNum)); // 输出 NaN（不是数字）
console.log(Number(true)); // 输出 1
console.log(Number(false)); // 输出 0

转换为布尔值

使用 Boolean() 函数可以将任何值转换为布尔值。

console.log(Boolean(0)); // 输出 false
console.log(Boolean("Hello")); // 输出 true
console.log(Boolean("")); // 输出 false
console.log(Boolean(null)); // 输出 false
console.log(Boolean({})); // 输出 true（空对象被视为 true）

JavaScript的前篇基础就先到这里啦！