JS Study Notes(1) CN

study note. study from: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript

一、什么是JS

高层定义：

有了JS，网页展示的信息不再是简单的静态信息，而是实时的内容更新（i.e. 交互式的地图，滚动播放的视频）
HTML/CSS/JS的层次结构

HTML 会将文本标记，赋予结构和目的
CSS用来装饰，让文本变得更好看
JS用来实现动态行为

二、它到底可以做什么

2.1 可以做到普通的编程特性

在变量中储存有用的值e.g. 请求客户输入一个变量名，将这个名字输入到name变量中
操作一段文本，e.g.将两个字符串结合起来
运行代码以响应网页中发生的特定事件。

2.2 令人兴奋的功能

应用程序接口 API-Application Programming Interface

API分为两类：

- 浏览器API：
1. ！！文档对象模型DOM(document obj model) e.g. 某个页面出现了一个弹窗，或者显示了一些新内容
2. 地理位置API： 获取地理信息
3. 影音类API： 利用多媒体，在网页中直接播放音乐和影片
- 第三方API- 没有默认嵌入浏览器，一般要从网上获取他们的信息：
1. 推特API： 可以在网站上展示最新推文
2. 谷歌地图API： 可以在网站嵌入定制的API

# 三、 JS在页面上做了什么/JS运行时，背后发生的事情

### 3.1 过程

浏览器在读取一个网页时，代码(HTML/CSS/JS)将在一个运行环境(浏览器标签页)中得到执行。

- 注意！： 网页文档的代码需要按照其在页面上出现的顺序加载和执行。e.g. 如果JS先于要修改的HTML和CSS加载和运行，则可能发生错误。
- 每个标签页中的代码独立运行。一个标签页的代码不影响另一个。

### 3.2 JS运行次序

- 引用对象前，必须确保对象已经存在：

```jsx
const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("输入一个新的名字：");
  para.textContent = `玩家 1：${name}`;
}
```

比如调用第三行代码的时候，必须确保第一行代码已经存在。

## 3.3 编译代码(Compile) vs解释代码(Interpret)

### 1. 区别：

解释型语言

- 在解释型语言中，代码自上而下运行，且实时返回运行结果。
- 代码由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式被接收和处理。

编译型语言

- 代码需要转化/编译成另一种形式才能运行
- 比如C/C++先被编译成机器码，然后再由计算机运行。
- 程序将以二进制（由程序的源代码产生）的格式运行

### 2. JS是什么

- JS是轻量级解释型语言。
- 浏览器接收到JS代码，并以代码自身的文本格式运行。所有的JS转换器，都运用了一种叫做即时编译(just-in-time compiling)的技术.
- JS会被编译成二进制格式。但是因为编译过程在代码运行中，而不是之前，所以JS仍然是一门解释型语言

### 3. 服务器代码 vs客户端代码（取决于代码在哪里运行）

JS既可以作为服务器端代码，也可以作为客户端代码

- 客户端代码是在用户的电脑上运行的代码。i.e. 在浏览一个网页时，网页的客户端代码会被下载，然后由浏览器来运行并展示。
- 服务器端的代码，在服务器上运行，然后运行结果，由浏览器下载并展示出来。