JavaScript 02 【基础语法学习】

imabmer

1019人浏览 · 2025-10-16 14:54:54

imabmer · 2025-10-16 14:54:54 发布

1 JavaScript 表单

JavaScript 表单 | 菜鸟教程https://www.runoob.com/js/js-validation.html

2 JavaScript 验证 API

JavaScript 验证 API | 菜鸟教程https://www.runoob.com/js/js-validation-api.html

DOM

DOM 即 Document Object Model（文档对象模型），它是 HTML 和 XML 文档的编程接口。以下为你详细介绍：

定义与本质

DOM 将文档呈现为带有元素、属性和文本的树状结构。比如一个 HTML 文档，在 DOM 模型里，会把整个 HTML 页面看作是一个由不同节点（Node）组成的树，这些节点包括文档节点（代表整个文档）、元素节点（比如<html>、<body>、<p> 等 HTML 标签对应的节点）、属性节点（元素的属性，像 <a href="https://example.com"> 里的 href 属性）以及文本节点（标签内的文本内容）。

作用

访问和操作文档内容：通过 DOM，JavaScript 等脚本语言可以获取、修改 HTML 或 XML 文档中的元素、属性和文本内容。例如，想要修改一个 <p> 标签里显示的文字，就可以先通过 DOM 找到这个 <p> 元素对应的节点，然后修改其文本节点的内容。
动态创建内容：开发者可以利用 DOM 动态创建新的元素节点，并将它们添加到文档树中。比如，点击一个按钮后，动态创建一个新的 <li> 元素并添加到 <ul> 列表里，实现列表项的动态添加。
响应用户交互：DOM 与事件机制紧密结合，能够监听用户的操作，如点击、鼠标移动、键盘输入等事件。当用户执行这些操作时，通过 DOM 可以指定相应的 JavaScript 代码来进行处理。例如，给一个按钮添加点击事件监听器，当用户点击按钮时，触发特定的函数执行。

在 JavaScript 中的应用

在 JavaScript 中，通过 document 对象来访问 DOM。比如 document.getElementById('elementId') 可以获取指定 id 的元素节点；document.querySelectorAll('selector') 可以通过 CSS 选择器获取一组元素节点。结合上述提到的 JavaScript 验证 API 中的 DOM 方法，就是利用 DOM 来操作表单相关的 input 元素，对用户输入的数据进行合法性验证和错误提示设置。

总之，DOM 是 Web 开发中非常重要的概念，它为网页的动态交互和内容修改提供了强大的支持。

3 保留关键字

JavaScript 保留关键字 | 菜鸟教程https://www.runoob.com/js/js-reserved.html

【我就记得一个class,className，防止触发关键字】

你提到的 class 和 className 确实是一个典型例子，很好地体现了 JavaScript 中如何处理关键字冲突的问题。

在 HTML 中，元素有 class 属性用于指定样式类，比如 <div class="container"></div>。但在 JavaScript 中，class 是保留关键字（用于定义类），如果直接用 element.class 访问会触发语法错误。

因此，DOM 规范特别规定：在 JavaScript 中操作 HTML 元素的 class 属性时，必须使用 className 替代，例如：

// 正确写法：修改元素的class属性
const div = document.querySelector('div');
div.className = 'new-class'; // 相当于设置HTML中的class属性

// 错误写法：会导致语法错误
// div.class = 'new-class'; // Uncaught SyntaxError

类似的关键字冲突处理还有：

HTML 中的 for 属性（如 <label for="input1">），在 JavaScript 中用 htmlFor 访问
HTML 中的 aria-* 属性，在 JavaScript 中用 aria* 驼峰式命名（如 ariaLabel 对应 aria-label）

这种 "驼峰式命名替代关键字" 的模式，是 JavaScript 处理 HTML 属性与自身关键字冲突的通用解决方案，既避免了语法错误，又保持了语义关联。

4 严格模式

JavaScript 严格模式(use strict) | 菜鸟教程https://www.runoob.com/js/js-strict.html

【严格模式use strict是不是就是变成强类型的语法？】

use strict 开启的严格模式不是将 JavaScript 变成强类型语法。下面从严格模式的特点和强类型语言的特性来详细说明：

严格模式的特点

增强错误检测：在正常模式下，一些可能是错误的操作会被 JavaScript 引擎容忍并继续执行，但在严格模式下会抛出错误。例如，使用未声明的变量会报错，而不是隐式地创建全局变量：

// 正常模式
function test() {
    undeclaredVariable = 10;
    console.log(undeclaredVariable); // 10，隐式创建全局变量
}
test();

// 严格模式
function strictTest() {
    'use strict';
    undeclaredVariable = 10; 
    // Uncaught ReferenceError: undeclaredVariable is not defined
}
strictTest();

禁止一些危险操作：像使用 with 语句、对只读属性赋值等操作在严格模式下会抛出错误。例如：

const obj = {
    name: 'Alice',
    get age() {
        return 30;
    }
};
// 正常模式，对只读属性赋值不会报错，只是不生效
obj.age = 35;
console.log(obj.age); // 30

// 严格模式
function strictAssignment() {
    'use strict';
    obj.age = 35; 
    // Uncaught TypeError: Cannot assign to read only property 'age' of object '#<Object>'
}
strictAssignment();

函数参数行为变更：在严格模式下，函数参数不能重名，否则会报错。比如：

// 正常模式，函数参数重名不会报错，后面的参数会覆盖前面的
function normalParams(a, a) {
    console.log(a); // 第二个a的值
}
normalParams(10, 20); // 20

// 严格模式
function strictParams() {
    'use strict';
    function inner(a, a) { 
        // Uncaught SyntaxError: Duplicate parameter name not allowed in this context
    }
    inner(10, 20);
}
strictParams();

强类型语言的特性

强类型语言有着严格的类型定义，变量一旦被声明为某种类型，就不能随意改变其类型，而且在不同类型之间进行操作时，需要显式地进行类型转换，否则会报错。

例如在 Java 中：

int num = 10;
// num = "hello"; // 会报错，不能将字符串类型赋值给int类型变量
num = (int) 10.5; // 需要显式类型转换，将double类型转换为int类型

而 JavaScript 是一种弱类型（动态类型）语言，变量的类型在运行时可以改变，不需要预先声明类型，在进行不同类型的操作时，引擎会自动进行类型转换，比如：

let num = 10;
num = "hello"; // 可以直接将字符串赋值给之前存储数字的变量
console.log(10 + "5"); // 输出 "105"，数字10被隐式转换为字符串后进行拼接

开启严格模式只是让 JavaScript 的语法和运行时检查更加严格，避免一些可能导致错误和意外行为的操作，但并没有改变 JavaScript 弱类型语言的本质。

【我的意思是类似于强类型的语法？】

即使在严格模式下，JavaScript 也不会变成类似 Java、C# 等强类型语言的语法，两者的核心差异依然存在。

严格模式主要是增强语法约束（比如禁止隐式全局变量、限制 this 指向等），但不会引入类型检查机制。例如：

'use strict';

// 依然可以随意改变变量类型（弱类型特性）
let x = 10;
x = "hello"; // 完全合法，不会报错

// 不同类型依然会自动转换（弱类型特性）
console.log(5 + "5"); // 输出 "55"（数字转字符串）
console.log("10" - 3); // 输出 7（字符串转数字）

如果希望 JavaScript 拥有类似强类型的特性，需要借助额外工具：

TypeScript：在 JavaScript 基础上添加了静态类型系统，强制类型声明和检查

let x: number = 10;
x = "hello"; // 编译时报错：类型"string"不能赋值给类型"number"

Flow：JavaScript 的静态类型检查器，通过注释标记类型
```
// @flow
let x: number = 10;
x = "hello"; // 检查时报错
```

简单说：严格模式是 "语法更严格的弱类型"，而 TypeScript 这类工具才是 "接近强类型的 JavaScript 变体"。

5 JavaScript let 和 const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

JavaScript let 和 const | 菜鸟教程https://www.runoob.com/js/js-let-const.html

块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

在 ES6 之前，是没有块级作用域的概念的。

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

6 JSON

JavaScript JSON | 菜鸟教程https://www.runoob.com/js/js-json.html

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据。

7 javascript:void(0) 含义

javascript:void(0) 含义 | 菜鸟教程https://www.runoob.com/js/js-void.html我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

8 异步编程

JavaScript 异步编程 | 菜鸟教程https://www.runoob.com/js/js-async.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>回调函数等待 3 秒后执行。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";  // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";      // 主线程先执行
</script>

</body>
</html>