[01] JS-概述

1. JavaScript

JavaScript 与 ECMAScript 的关系：

ECMAScript（简称“ES”）是根据 ECMA-262 标准实现的通用脚本语言，ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分，目前 ECMAScript 的最新版是 ECMAScript6（简称“ES6”）。

至于 JavaScript，有时人们会将 JavaScript 与 ECMAScript 看作是相同的，其实不然，JavaScript 中所包含的内容远比 ECMA-262 中规定的多得多，完整的 JavaScript 是由以下三个部分组成：

核心（ECMAScript）：提供语言的语法和基本对象
文档对象模型（DOM）：提供处理网页内容的方法和接口
浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口

如何运行 JavaScript？

作为一种脚本语言，JavaScript 代码不能独立运行，通常情况下我们需要借助浏览器来运行 JavaScript 代码，所有 Web 浏览器都支持 JavaScript。

除了可以在浏览器中执行外，也可以在服务端或者搭载了 JavaScript 引擎的设备中执行 JavaScript 代码，浏览器之所以能够运行 JavaScript 代码就是因为浏览器中都嵌入了 JavaScript 引擎，常见的 JavaScript 引擎有：

V8：Chrome 和 Opera 中的 JavaScript 引擎
SpiderMonkey：Firefox 中的 JavaScript 引擎
Chakra：IE 中的 JavaScript 引擎
ChakraCore：Microsoft Edge 中的 JavaScript 引擎
SquirrelFish：Safari 中的 JavaScript 引擎

JavaScript 具有以下特点：

解释型脚本语言：JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
面向对象：JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
弱类型：JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
动态性：JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
跨平台：JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

2. Node.js

2.1 二者关系

JavaScript 诞生于 1995 年，几乎是和互联网同时出现；Node.js 诞生于 2009 年，比 JavaScript 晚了 15 年左右。

在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。

Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。

2.2 运行时是什么？

所谓运行时，就是程序在运行期间需要依赖的一系列组件或者工具；把这些工具和组件打包在一起提供给程序员，程序员就能运行自己编写的代码了。

对于 JavaScript 来说，它在运行期间需要依赖以下组件：

（1）解释器

JavaScript 是一种脚本语言，需要一边解释一边运行，用到哪些源代码就编译哪些源代码，整个过程由解释器完成。没有解释器的话，JavaScript 只是一堆纯文本文件，不能被计算机识别。

（2）标准库

我们在 JavaScript 代码中会调用一些内置函数，这些函数不是我们自己编写的，而是标准库自带的。

（3）本地模块

所谓本地模块，就是已经被提前编译好的模块，它们是二进制文件，和可执行文件在内部结构上没有什么区别，只是不能单独运行而已。这些本地模块其实就是动态链接库（在 Windows 下是 .dll 文件），如果你使用过 C、C++ 等编译型语言，那你应该能够更好地理解它。

JavaScript 的很多功能都需要本地模块的支持，比如：

Cookie 用于存储少量的用户数据，它是用户计算机上的一种小文件，使用 Cookie 必须有「文件操作模块」的支持。
Ajax 可以借助互联网从服务器请求数据，这是一种网络操作，必须有「网络库」的支持。
一步一步跟踪代码的执行流程，从中发现逻辑错误，这个过程叫做调试，需要有「调试器（Debugger）」的支持。
JavaScript 可以操作 HTML，这需要「HTML 解析模块」提前构建起 DOM 树。

本地模块一般封装了通用功能，对性能要求较高，所以通常使用编译型语言来实现，比如C、C++、汇编语言等。

JavaScript 解释器需要本地模块的支持，标准库在编写时也会调用本地模块的接口，而我们编写的 JavaScript 代码一般不会直接使用本地模块，所以开发时触及不到它们。

本地模块是幕后英雄，它不显山露水，但是又不可或缺。

【小结】

解释器、标准库、本地模块等各种组件/工具共同支撑了 JavaScript 代码的运行，它们统称为 JavaScript 运行时。

在 Node.js 之前，JavaScript 运行时被绑定在浏览器中，作为浏览器的各种模块出现。这意味着，要想运行 JavaScript 代码就必须启动浏览器，JavaScript 逃不出浏览器的手掌心，它的功能受到很大的限制，只能作为网页脚本使用。

2.3 Node.js 诞生

JavaScript 的一生伴随着浏览器大战。JavaScript 由 Netscape（网景）浏览器发布，但是 Netscape 在和 IE 的竞争中落败，早已不复存在；后来谷歌公司的 Chrome 浏览器异军突起，凭借强悍的性能把 IE 按在地上摩擦。

谷歌公司在 Chrome 浏览器中集成了一种名为“V8”的 JavaScript 引擎（也即 JavaScript 解释器），它能够非常快速地解析和执行 JavaScript 代码。

V8 引擎使用 C++ 语言编写，可以独立运行，也可以嵌入到任何其它 C++ 程序中。谷歌公司将 V8 引擎甚至整个 Chrome 浏览器都开源了，任何人都可以免费地将 V8 应用到自己的项目中。

V8 引擎的强大，以及当年 JavaScript 的火爆，使得一名叫 Ryan Dahl 的程序员动起了“歪心思”，他希望在浏览器之外再为 JavaScript 构建一个运行时，让 JavaScript 能够直接在计算机上运行，这样 JavaScript 就能像 Python、Ruby、PHP 等其它脚本语言一样大展宏图，不必再受限于浏览器，只能做一些小事情。

Ryan Dahl 和他的团队真的做到了，并且做得很好，他们将这套独立的 JavaScript 运行时命名为 Node.js；为了避免被误认为是 JavaScript 框架，现在也经常简称为 Node。

2.4 Node.js 组成

Node.js 运行时主要由 V8 引擎、标准库和本地模块组成，尤其是本地模块的多少，从底层决定了 Node.js 功能的强弱。

（1）V8 引擎

V8 引擎就是 JavaScript 解释器，它负责解析和执行 JavaScript 代码。

V8 引擎借鉴了 Java 虚拟机和 C++ 编译器的众多技术，它将 JavaScript 代码直接编译成原生机器码，并且使用了缓存机制来提高性能，这使得 JavaScript 的运行速度可以媲美二进制程序。

（2）本地模块

Node.js 集成了众多高性能的开源库，它们使用 C/C++ 语言实现，比如：

模块	说明
libuv	一个跨平台的、基于事件驱动的异步 I/O 库。但是 libuv 不仅限于 I/O，它还提供了进程管理、线程池、信号处理、定时器等其它功能。 Linux 中一切皆文件，这里的 I/O 不仅仅包括文件读写，还包括数据库读写、网络通信（socket）等。
nmp	Node.js 包管理器，可以下载包、安装包、卸载包、更新包、上传包等。
http_parser	一款由C语言编写的轻量级 HTTP 解析器，用以支持 Web 应用开发。
zlib	工业级的数据压缩/解压模块，Nodejs 借助 zlib 来创建同步、异步或者流式的压缩/解压接口。
OpenSSL	该模块提供了经过严密测试的许多加密/解密功能，现代 Web 依赖这些功能来实现安全性，比如 SSL 协议和 https 协议。
c-ares	异步 DNS 查询和解析库。

Node.js 直接在计算机上运行 JavaScript 代码，并且要赋予 JavaScript 强大的能力，所以它的本地模块和浏览器中的运行时有很多大区别，甚至说几乎没有什么关联。Node.js 几乎完全抛弃了浏览器，自己从头构建了一套全新的 JavaScript 运行时。

（3）标准库

本地模块使用 C/C++ 编写，而 Node.js 面向 JavaScript 开发人员，所以必须要封装本地模块的 C/C++ 接口，提供一套优雅的 JavaScript 接口给开发人员，并且要保持接口在不同平台（操作系统）上的一致性。

这套 JavaScript 接口，就是 Node.js 标准库。标准库是否优雅和强大，决定了 Node.js 的易用性，直接影响 Node.js 的市场表现。

【小结】

V8 引擎和众多本地模块都是现成的，别人已经造好了轮子，Node.js 的主要工作就是选择合适的模块，将它们集成在一起，并编写好 JavaScript 接口。

当然，并不是所有的本地模块都能找到合适的，Node.js 也自己编写了几个模块，典型的代表就是 Libuv。Libuv 是 Node.js 最核心最基础的模块，Node.js 完全基于 Libuv 而构建。

你可能听说过 Node.js 采用了基于事件的、单线程的异步 I/O 架构，这是 Node.js 最大的特点，也是它和其它脚本语言最大的区别，Node.js 的这种能力就是依赖 Libuv 实现的。

Libuv 如此强大，官方决定将它从 Node.js 中剥离出来，作为一个单独的网络库发布，并且开源免费。现在的 Libuv 已经变得非常流行，和传统的 Libevent 和 libev 库并称为“C/C++ 三大网络库”。

Node.js 之所以大名鼎鼎，主要是因为它采用了 V8 引擎和 Libuv 库：V8 引擎保证了 Node.js 运行高效，Libuv 库提供了基于事件循环的异步 I/O 能力。

2.5 总结

Node.js 是一个 JavaScript 运行时，它让 JavaScript 脱离了浏览器环境，可以直接在计算机上运行，极大地拓展了 JavaScript 用途。我们应该将 JavaScript 和 Python、Java、Ruby 等其它编程语言同等对待，不能再将它视为一种“小玩意”。

最后我们来汇总一下 JavaScript 和 Node.js 的历史：

Netscape 浏览器衍生出了 JavaScript 脚本，赋予网页编程能力；
Chrome 浏览器衍生了 V8 引擎，提高了 JavaScript 性能；
V8 引擎构建了 Node.js，拓展了 JavaScript 的编程能力；
Node.js 衍生了 Libuv 库，给网络开发增加了一款优秀的工具。

3. 第一个 JS 程序

JavaScript 程序不能够独立运行，只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中，借助浏览器环境来运行。

3.1 在 HTML 中嵌入

在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签，用户可以在 <script> 标签中直接编写 JavaScript 代码，具体步骤如下。

新建 HTML 文档 test.html
在 <head> 标签内插入一个 <script> 标签
为 <script> 标签设置 type="text/javascript" 属性（现代浏览器默认 <script> 标签的脚本类型为 JavaScript，因此可以省略 type 属性；如果考虑到兼容早期版本浏览器，则需要设置 type 属性。）

在 <script> 标签内输入 JavaScript 代码 document.write("<h1>HelloWorld</h1>");

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript程序</title>
    <script type="text/javascript">
      	// 在JS脚本中，document表示网页文档对象；document.write()表示调用Document对象的write()方法
        // 在当前网页源代码中写入 HTML 字符串"<h1>HelloWorld</h1>"。
        document.write("<h1>HelloWorld</h1>");
    </script>
</head>
<body></body>
</html>

保存网页文档，在浏览器中预览，显示效果。

3.2 在脚本文件中编写

JavaScript 程序不仅可以直接放在 HTML 文档中，也可以放在 JavaScript 脚本文件中。JavaScript 脚本文件是文本文件，扩展名为 .js，使用任何文本编辑器都可以编辑。

在 <head> 标签内插入一个 <script> 标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：

<script type="text/javascript" src="test.js"></script>

使用 <script>标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。

3.3 JS 代码执行顺序

浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的。

使用浏览器测试下面示例，会看到 JavaScript 代码从上到下逐步被解析的过程。

<!DOCTYPE html>
<script>
    alert("顶部脚本");
</script>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script>
        alert("头部脚本");
    </script>
</head>
<body>
    <h1>网页标题</h1>
    <script>
        alert("页面脚本");
    </script>
    <p>正文内容</p>
</body>
<script>
    alert("底部脚本");
</script>
</html>

在浏览器中浏览上面示例网页，首先弹出提示文本“顶部脚本”，然后显示网页标题“test”，接着弹出提示文本“头部脚本”，下面才显示一级标题文本“网页标题”，继续弹出提示文本“页面脚本”，接着显示段落文本“正文内容”，最后弹出提示文本“底部脚本”。

对于导入的 JavaScript 文件，也将按照 <script> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JS的编写位置</title>
        <!-- 
        1.可以将js编写到网页内部的script标签
        -->
        <script>
            alert("哈哈！")
        </script>

        <!-- 
            2.可以将js编写外部的js文件中，然后通过script标签进行引入
        -->
        <script src="./script/script.js"></script>
    </head>
    <body>
        <!--
            3.可以将js代码编写到指定属性中
        -->
        <button onclick="alert('你点我干嘛！')">点我一下</button>

        <hr>

        <a href="javascript:alert(123);">超链接</a>
        
        <hr>

        <a href="javascript:;">超链接</a>
    </body>
</html>

posted @ 2024-04-18 20:24 tree6x7 阅读(2) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Loading

◥(ฅºωºฅ)◤