---
isOriginal: true
category: JavaScript 系列
tag:
- JavaScript
date: 2022-04-16
---
# 简介
## 什么是 JavaScript
作为世界上最流行的语言之一，是一种运行在客户端的脚本语言。而所谓脚本语言，就是不需要编译就能运行的编程语言，JavaScript 在运行过程中通过 JS 解释器来逐行解释然后执行。
## JavaScript 能做什么？
最初的时候，JavaScript 被设计出来的初衷是为了实现表单的动态校验，比如密码长度校验、邮箱格式校验等。但渐渐随着 JavaScript 的发展，JavaScript 变得越来越强大，也发展出了许多产物，如 `Node.js`、`Electron`、`Cordova`、`Ruff`、`cocos2d-js`。利用这些产物，我们可以用来进行服务器的开发、桌面程序的搭建、APP 的开发、硬件-物联网的控制、游戏开发等等工作。
## HTML、CSS、JavaScript 之间的关系
HTML 和 CSS 不同于 JavaScript，它们都是描述类语言，其中 HTML 主要用于决定网页结构和内容（决定网页上能看到什么），而 CSS 则主要用于定义网页所呈现给用户的模样（决定网页是否美观）。JavaScript 则是专注于实现业务逻辑和页面控制（决定网页提供的功能）。
如果把这三者比作一个王者荣耀中的英雄的话，那 HTML 就相当于原皮的英雄，而 CSS 则是相当于英雄的皮肤，让我们的英雄更帅气，而 JavaScript 则相当于英雄的技能，我们可以通过控制英雄通过技能来实现杀敌清兵的效果。
## 浏览器如何执行 JavaScript
JavaScript 一般运行在网页中的，所以一般是在浏览器中运行。而浏览器一般分为两部分，一个是**渲染引擎**，另一个则是 **JS 引擎**，两者的功能如下：
- **渲染引擎**：用于解析 HTML 和 CSS 代码，大家一般把它叫做内核，比如 Chrome 浏览器的 Blink，Firefox 浏览器的 Gecko。
- **JavaScript 引擎**：也叫做 JavaScript 解释器，主要用于读取网页中的 JavaScript 代码，然后对其处理用执行，如 Chrome 浏览器的 V8，Firefox 的 TraceMonkey。
所以名义上虽然说是浏览器执行了 JavaScript 代码，但如果看底层的话，却会发现其实 JavaScript 代码是通过浏览器中的 JavaScript 引擎来执行的。JavaScript 引擎在执行代码时会逐行解释源代码，将其转换为机器语言，然后交由计算机执行。也正因为如此，所以将 JavaScript 划分为脚本语言，它会逐行去解释执行，而不是像 HTML、CSS 类似的标记语言。
## JavaScript 的组成
1. **ECMAScript**
ECMAScript 是由 ECMA 国际进行标准化的一门编程语言，往往被大家称为 JavaScript 或者 JScript，但实际上并不是一个东西，后两者其实是基于 ECMAScript 的实现和扩展。其中，JavaScript 是由网景公司所提出，而 JScript 则是由微软公司所提出。 所以 ECMAScript 更像是一种规范，它规定了 JavaScript 的编程语法和基础核心知识，然后所有的浏览器厂商都需要共同遵守这一套 JavaScript 语法工业标准。
2. **DOM**
DOM（Document Object Model）即文档对象模型，是由 W3C 组织推荐的用于处理可扩展标记语言的**标准编程接口**。通过 DOM 所提供的各种接口，我们就能够轻易地对网页上的各种元素进行操作，如调整位置、大小、颜色等。
3. **BOM**
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容，能够与浏览器进行交互的对象结构。通过使用 BOM，我们就能够十分方便的操作浏览器窗口，如弹出提示框、控制跳转、获取分辨率等操作。
## JavaScript 入门体验
JavaScript 的书写位置主要有 3 种，分别是行内式、内嵌式和外部式，以下就分别来看看各种方式的写法。
1. **行内式**
首先是行内式，顾名思义，所谓行内式，就是将少量的 JavaScript 代码直接写在 HTML 标签的时间属性中，比如下面的代码。通过点击页面中的按钮，页面就会弹窗。
```html
JavaScript 入门体验
```
行内式的特点就是比较简单，但是也存在很多问题。比如可读性较差，如果需要在 HTML 编写大量 JavaScript 代码时，此时阅读就很不方便。除此之外，JavaScript 和 HTML 中都会使用到引号，如果出现多层引号相互嵌套时，会非常容易混淆，导致代码实现结果出错。所以除非特殊情况，否则一般不推荐使用行内式。
2. **内嵌式**
相比于单行式，内嵌式就更加清晰明了。我们通过将 JavaScript 代码封装到 `