HTML、CSS 层叠样式表、TypeScript、HTTP(S)协议

JS都是单线程，性能有上限，无须担心资源争夺

网站开发的代码：
https://github.com/GZhonghui/Web101

吴悠讲编程 https://www.youtube.com/@wuyou66

禁止使用 var
还是应该直接禁止（手写）JavaScript，使用TypeScript代替

JavaScript 主要通过 ECMAScript（ES） 规范进行版本划分。ECMAScript 是 JavaScript 的标准

1. ES1 - ES5 早期版本，我们不关心，不考虑兼容，本文也不会涉及相关内容
2. ES6 比较重要的一个版本，引入了很多重要概念
3. 此后的版本保持每年更新，ES7 (对应2016) ES8 (对应2017)…

语言标准和具体实现是不一样的概念，各种浏览器也好，node也好，其他的“编译器”也好，对js语法的支持程度可以不同。可以参考这张表：https://compat-table.github.io/compat-table/es2016plus/

浏览器中的JavaScript包含的3部分：

1. ECMAScript（核心）：JavaScript 语言基础，也就是JS语法；
2. DOM（文档对象模型）：规定了访问HTML和XML的接口；
3. BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

理所当然的，在浏览器之外运行的JS就没有DOM和BOM接口可用。DOM 和 BOM 有需求看文档吧，只是一些接口而已，我也不常用

数据类型的基础概念

首先明确以下要点：

1. 可以认为，JS代码都在<script>标签中，不管是直接写在标签内的，还是通过外部文件引入的，二者一样
2. <script>标签有前后顺序，这也决定了它们的运行顺序，这个顺序是有影响的：先声明，再访问（变量、函数、类，都是如此）
3. 重新加载 HTML 页面时，JS 全局空间会被清空
4. JS 的全局空间是一个叫作 window 的变量，可以显式访问、显式将变量挂载到上面
5. 在<script>内
   1. var 变量自动挂载到 window，可以跨 <script> 访问
   2. function 自动挂载到 window（class应该也是），可以跨 <script> 访问
   3. let, const 不会自动挂载，作用域限定在当前 <script> 标签内部
6. 在<script type=“module”>内
   1. 默认是运行在模块作用域中，而不是全局作用域，这意味着模块内定义的变量、函数不会自动暴露到 window
   2. 不同 <script type=“module”> 不能直接共享变量，除非使用 import/export

我不喜欢使用全局变量（特别是全部变量都在全局，所以不建议使用 var），所以建议使用<script type=“module”>，需要使用全局变量的时候，可以显式访问 window。那么如何在<script>之间传递内容呢？使用 import/export，也就是JS的模块

前端数据存储

基础语法

可以使用 var let const，首先给出我的实践：禁止使用 var

首先解释一下 var 的迷惑之处
js的变量等级：
1. 完全无定义，访问报错
2. undefined
3. 值类型 number之类的，null也算

var 的迷惑之处
首先，作用域是整个函数，所以可能出现“先访问后声明”的情况
然后，可以重复声明

正确使用 let 和 const
简单而言，把 let 当作 cpp 的 auto
要求一致：访问前先声明，不可重复声明，作用域规则一致
然而记得：即使是看起来“严格”的声明语法，变量仍然是弱类型的

const 类似常量版的 let
和CPP不同之处是，JS 的 const 指的是：不能更换绑定（但可以修改内部数据）

let arr = [1, 2, 3]
let obj = {
    x: 1,
    y: "str",
    c: [1, 2]
}
// 他们都有一些内置方法，用于实现常见操作

数组和对象

`string ${ID}`
 
let [a, b] = [1, 2] // 解组
let { in_x: out_x, ...rest } = {
    in_x: 9,
    in_y: 8
}
 
let arr = [...[1, 2, 3], 4] // 解组
let obj = { ...{ x: 1 } }
 
Array.from(<arg>) // 伪数组转换为数组
 
Object.assign({}, {x: 1}, {y: 2})
 
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
me = new Person('X', 1)
class Man extends Person {
    constructor(name, age, wife) {
        super(name, age); // 需要手动调用父类的构造函数
        this.wife = wife;
    }
}
 
// 箭头函数
const f = n => n + 1;
const sum = (a, b) => a + b;
const max = (a, b) => {
    return a > b ? a : b;
}

1. 异步
2. 代理
3. 模块

以下内容整理自AI的输出

从客户端浏览器的视角来看，它始终维护的是一个 HTML 文档。不管服务器返回的是什么，浏览器的 document 对象（DOM 结构）在内存中始终代表当前页面的 HTML 结构。

页面更新的时候：

1. 如果是 普通网页（非 SPA），每次用户跳转新页面时，浏览器会 清空现有 HTML 文档，重新加载服务器返回的新 HTML 文件。
2. 如果是 单页应用（SPA），浏览器不会重新请求 HTML，而是 JavaScript 修改现有的 DOM 结构，但 document 仍然是同一个。

以下是一些常见的在DOM中选择元素的方式

let element = document.getElementById("a");
let elements = document.getElementsByClassName("b");
 
// CSS选择器的逻辑
let firstB = document.querySelector("#a .b");
let allB = document.querySelectorAll("#a .b");
 
// 转为数组
let elements = Array.from(document.getElementsByClassName("b"));
let elements = [...document.querySelectorAll("#a .b")];

BOM（浏览器对象模型） 是指 JavaScript 提供的一套 与浏览器交互 的 API，它允许开发者访问和操作浏览器窗口、地址栏、历史记录等功能。

1. BOM 主要处理浏览器相关功能（窗口、地址、历史、设备信息等）。
2. DOM 主要处理页面内容（HTML 元素、CSS、事件等）。

基础知识：HTTP(S)协议

curl -X POST http://localhost:8080/chat -H "Content-Type: application/json" -d '{"message":"Hello"}'

网络请求

JavaScript代码文件的后缀是js，在浏览器之外可以使用以下指令运行：

node Hello.js

其他参照：

• 使用Node.js运行Js脚本：NodeJs & nvm
• Google的V8引擎

一个同名的变量可以重复声明很多次，一个从未声明过的变量也可以直接赋值，那这声明有什么用？至少和C++的声明机制是不一样的。

没有数组类型吗？

> var cars=new Array;
undefined
> typeof cars
'object'

类型转换

String(some)
Number(some)

判断是否是一个类的对象

arr = [1,2,3];
if(arr instanceof Array){
    document.write("arr 是一个数组");
} else {
    document.write("arr 不是一个数组");
}

1. 异常处理
2. 严格模式
3. 作为String和Object的字符串有什么区别
4. 类就是Object吗？这两者的概念是完全相同的吗
5. 声明提升，但是初始化不会提升
6. “a”.constructor返回object的构造函数