JS Study Notes(1) CN

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

一、 什么是JS

高层定义：

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


2. HTML/CSS/JS的层次结构

• HTML 会将文本标记，赋予结构和目的


• CSS用来装饰，让文本变得更好看


• JS用来实现动态行为

二、 它到底可以做什么

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

1. 在变量中储存有用的值e.g. 请求客户输入一个变量名，将这个名字输入到name变量中


2. 操作一段文本，e.g.将两个字符串结合起来


3. 运行代码以响应网页中发生的特定事件。

2.2 令人兴奋的功能

1. 
   

   应用程序接口 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() …

api application application programming interface css document html programming