JavaScript是什么，JavaScript简介（新手必看）

JavaScript 是前端开发中最重要的编程语言，经过近三十年的发展，JavaScript 已经成为世界上最流行的编程语言之一。

实际应用时，JavaScript 需要和 HTML、CSS 共同开发，其中 HTML 负责结构，CSS 负责表现，而 JavaScript 负责最重要的行为。

JavaScript是什么

1995 年，Netscape 公司的 Brendan Eich 设计并实现了 JavaScript，最初它被命名为 LiveScript。

由于 Netscape 与 Sun 公司合作，并希望与 Java关联，因此将其名称更改为 JavaScript。这个改名并不表示 JavaScript 和 Java 之间有直接的关联，它们是两种不同的编程语言，只是名称上存在一些相似之处。

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、解释型的、基于对象的脚本语言。脚本语言是指可以嵌入在其他编程语言当执行的开发语言。

JavaScript 也是一种广泛用于客户端 Web 开发的脚本语言，其解释器被称为 JavaScript 引擎（后续简称 JS 引擎），是浏览器的一部分。最早是在 HTML （标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页添加动态功能。随着 JavaScript 的发展，现在可以使用它做更多的事情，如读写 HTML 元素、在数据被提交到服务器之前验证数据等。JavaScript 同样可以适用于服务器端的编程。

JavaScript的特点

JavaScript的具体特点如下：

1) 动态类型

JavaScript 能够动态地修改对象的属性值类型，在编译时是不知道变量的类型的，只有在运行的时候才能确定变量类型，也就是说当程序执行的时候，数据类型才会确定。

2) 弱类型

JavaScript 在运行时可能会做隐式类型转换。

例如，“1+"2"”在 JavaScript 中会将整型 1 转换成字符串“1”，然后再与字符串“2”进行拼接，最后得到的结果为字符串“12”。

这里 JavaScript 做了隐式类型转换，因此 JavaScript 具有弱类型的特性。

3) 解释型的脚本语言

JavaScript 是一种解释型的脚本语言，解释型语言在运行过程中逐行进行解释，不需要被编译为机器码执行。

另一种相对应的是编译型语言，它在运行中为先编译后执行，比如 C、C++、Java 等。

4) 基于对象

JavaScript 是一种基于对象的脚本语言，它不仅可以创建对象，还能使用现有的对象。但是面向对象的三大特性中，JavaScript 能够实现封装，可以模拟继承，不支持多态。

5) 事件驱动

JavaScript 是一种采用事件驱动的脚本语言，它不需要经过 Web 服务器就可以对用户的输入做出响应。

6) 跨平台性

JavaScript 脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个 JavaScript 脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持 JavaScript 脚本语言。

目前，JavaScript 已被大多数的浏览器所支持。

值得注意的是，JavaScript 的语法与 Java 类似。除此之外，这两门编程语言之间没有任何关系。

JavaScript 由三部分构成，ECMAScript、DOM 和 BOM，如下图所示。根据宿主（浏览器）的不同，具体的表现形式也不尽相同。

图 1 JavaScript 组成

ECMAScript 是一种规范，规定了 JavaScript 编程语言的标准和规范，是 JavaScript 编程语言的核心部分。同时也定义了最小限度的 API，可以操作数值、文本、数组、对象等。
BOM 是 Browser Object Model 的缩写，译为“浏览器对象模型”，是浏览器为 JavaScript 提供的一系列 API。
DOM 是 Document Object Model 的缩写，译为“文档对象模型”，是 HTML 文档为 JavaScript 提供的一系列 API。

事实上，浏览器是 JavaScript 最早的宿主环境，也是目前最常见的运行环境。换句话说，运行在浏览器上的 JavaScript 可以调用浏览器所提供的 API。所谓宿主环境就是运行 JavaScript 的平台，负责对 JavaScript 进行解析编译，以实现代码的运行。

随着互联网的普及，在 2010 年诞生的 Node.js，成为 JavaScript 的另一个宿主环境。从此 JavaScript 不仅可以在浏览器上运行，还可以在 Node.js 上运行。与浏览器相同，运行在 Node.js 上的 JavaScript 也可以调用 Node.js 提供的 API。

BOM 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM，开发人员可以进行浏览器定位和导航、获取浏览器和屏幕信息、操作窗口的历史记录、获取地理定位、进行本地存储，以及 Cookie 操作等。

当创建好一个页面并加载到浏览器时，DOM 就悄然而生，它会把网页文档转换为一个文档对象，通过 DOM，我们可以获取页面中的元素，操作元素的内容、属性、样式，也可以创建、插入、删除节点，页面中的各种特效效果都需要通过 DOM 来实现。

JavaScript应用场景

JavaScript 在生活中的应用场景随处可见，只要是与互联网有关的，几乎都使用了 JavaScript。

例如，开发前端页面特效时，应用在页面中的轮播图、下拉菜单等各种效果以及用户名格式校验、手机号码合法性校验等功能，再比如数据交互时，我们会发送 AJAX（Asynchronous Javascript And XML，Web数据交互方式）请求将数据传递给后端。

轮播图是 JavaScript 中的经典案例，通过 JavaScript 实现了单击左右按钮切换图片、图片自动轮播等功能。

表单验证举例来说就是登录注册信息。不管在网站上还是在各大 App 上，这都是必须具备的功能。当用户输入一些信息时，可以通过 JavaScript 对表单信息进行格式校验，根据结果进行页面上的相应处理。

JavaScript入门

下面用 JavaScript 编写一个 HelloWorld 入门案例，演示 JavaScript 代码的简单应用。

HelloWorld 案例的流程如下图所示：

图 2 HelloWorld案例的流程

通过 HTML 代码编写一个 SayHello 按钮，编写 JavaScript 代码实现当用户通过鼠标单击 SayHello 按钮时，弹出警告框并显示“hello world”字符串。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 的入门程序</title>
</head>
<body>
    <!-- 在 HTML 代码中定义一个按钮，通过 onclick 属性绑定单击事件，当用户单击按钮时触发 hello 函数，从而执行 alert 弹框 -->
    <button type="button" onclick="hello()">SayHello</button>
    <!-- 目标：单击按钮时弹出一个警告框 -->
    <script type="text/javascript">
        function hello() {
            // 弹出警告框
            alert("hello world");
        }
    </script>
</body>
</html>

运行代码查看页面效果：