当前位置： 首页 > backend >正文

前端页面 JavaScript数据交互

backend 2025/5/20 7:50:06

前言：学习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。
symbolES6 引入，表示唯一的、不可变的值，常用于创建对象的唯一属性名。使用 Symbol() 函数创建。const sym1 = Symbol("description");，const sym2 = Symbol("description");，console.log(sym1 === sym2); 输出 false。
bigintES2020 引入，用于表示任意精度的整数，可安全存储和操作非常大的整数值。在数字后添加 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。
MapES6 引入，用于存储键值对，键可以是任何数据类型，并且可以获取键值对的数量。使用 new Map()。const map = new Map();，map.set("name", "John");，map.set(1, "one");，console.log(map.get("name")); 输出 "John"。
SetES6 引入，用于存储唯一的值，可以是任何数据类型。使用 new Set()。const set = new Set();，set.add(1);，set.add("two");，console.log(set.size); 输出 2。
WeakMapES6 引入，是一种键弱引用的对象集合，键必须是对象。使用 new WeakMap()。const weakMap = new WeakMap();，const obj = {};，weakMap.set(obj, "value");，console.log(weakMap.get(obj)); 输出 "value"。
WeakSetES6 引入，是一个弱引用的值的集合，值必须是对象。使用 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的前篇基础就先到这里啦！

http://www.xdnf.cn/news/7402.html

相关文章：

  • 鸿蒙 系统-安全-程序访问控制-应用权限管控
  • ES6详解
  • Linux中的DNS的安装与配置
  • flow-两种SharingStarted策略的区别示例
  • kotlin Flow的技术范畴
  • 解决软件连接RabbitMQ突发System.IO.IOException: 无法从传输连接中读取数据: 远程主机强迫关闭了一个现有的连接异常
  • RabbitMQ-高级
  • nginx 漏洞修复 CVE-2024-7347 CVE-2025-23419
  • 深入理解蒙特卡洛树搜索（MCTS）：python从零实现
  • SQL：多列匹配（Multiple-column Matching）
  • Mybatis操作数据库（2）
  • 看之前熟悉双亲委派加载机制，看之后了解双亲委派加载机制
  • HarmonyOS实战：自定义时间选择器
  • 仿微钙化结石体模的详细讲解
  • 学习源码？
  • 详解受约束的强化学习(一、入门学习)
  • 【深度学习新浪潮】什么是多模态大模型？
  • 什么是Monorepo（单体仓库）(monolithic repository)
  • 隨筆 20250519 基于MAUI Blazor整合SQLite数据库与Star打印机的详细步骤
  • 【机器学习】线性回归和损失函数
  • WebSphere Application Server（WAS）8.5.5教程第五讲
  • Python网络爬虫入门指南
  • Git初始化本地已有项目,并推送到远端Git仓库完整操作指南
  • ebpf简介
  • Visual Studio解决方案构建三剑客：生成/重新生成/清理完全指南（实战经验总结）
  • 60天python训练计划----day30
  • GloVe 模型讲解与实战
  • 淘宝商品详情PAI接口可以获取哪些信息？
  • 人工智能重塑医疗健康：从辅助诊断到个性化治疗的全方位变革
  • React 个人笔记 Hooks编程