位置: IT常识 - 正文
JavaScript 教程 （详细 全面）(javascript教程)
编辑：rootadmin推荐整理分享JavaScript 教程 （详细 全面）(javascript教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript教程,html javascript教程,javascript教程,wps javascript教程,html javascript教程,html javascript教程,typejavascript教程,html javascript教程,内容如对您有帮助，希望把文章链接给更多的朋友！
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：
HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。1. JavaScript 的历史JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。 之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营销，蹭 Java 的热度。
同一时期，微软和 Nombas（一家名为 Nombas 的公司）也分别开发了 JScript 和 ScriptEase 两种脚本语言，与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。为了解决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了 ECMA-262 标准（ECMAScript）。
第二年，ISO/IEC（国际标准化组织及国际电工委员会）也采用了 ECMAScript 作为标准（即 ISO/IEC-16262）。
2. JavaScript 与 ECMAScript 的关系ECMAScript（简称“ES”）是根据 ECMA-262 标准实现的通用脚本语言，ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分，目前 ECMAScript 的最新版是 ECMAScript6（简称“ES6”）。
至于 JavaScript，有时人们会将 JavaScript 与 ECMAScript 看作是相同的，其实不然，JavaScript 中所包含的内容远比 ECMA-262 中规定的多得多，完整的 JavaScript 是由以下三个部分组成：
核心（ECMAScript）：提供语言的语法和基本对象；文档对象模型（DOM）：提供处理网页内容的方法和接口；浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。3. 如何运行 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 的特点4. JavaScript 具有以下特点1) 解释型脚本语言 JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。 2) 面向对象 JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。 3) 弱类型 JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。 4) 动态性 JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。 5) 跨平台 JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。
Node.js 是什么？Node.js 简介JavaScript 诞生于 1995 年，几乎是和互联网同时出现；Node.js 诞生于 2009 年，比 JavaScript 晚了 15 年左右。
在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。
Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。 现在的 JavaScript 除了用于 Web 前端编程（网页编程），还能干很多事情，比如：
开发网站后台，这原本是 PHP、Java、Python、Ruby 等编程语言擅长的；开发 GUI 程序，也就是我们常说的带界面的电脑软件，比如 QQ、360、迅雷等；手机 APP，包括 Android APP、iOS APP；CLI 工具，也就是不带界面的命令行程序。你看，学会了 JavaScript，你不但是全栈工程师，甚至还将无所不能，这都是 Node.js 带给我们的。
Node.js 官网中文版：https://nodejs.org/zh-cn/
1. 运行时是什么？所谓运行时，就是程序在运行期间需要依赖的一系列组件或者工具；把这些工具和组件打包在一起提供给程序员，程序员就能运行自己编写的代码了。
对于 JavaScript 来说，它在运行期间需要依赖以下组件： 1) 解释器 JavaScript 是一种脚本语言，需要一边解释一边运行，用到哪些源代码就编译哪些源代码，整个过程由解释器完成。没有解释器的话，JavaScript 只是一堆纯文本文件，不能被计算机识别。 2) 标准库 我们在 JavaScript 代码中会调用一些内置函数，这些函数不是我们自己编写的，而是标准库自带的。 3) 本地模块 所谓本地模块，就是已经被提前编译好的模块，它们是二进制文件，和可执行文件在内部结构上没有什么区别，只是不能单独运行而已。这些本地模块其实就是动态链接库（在 Windows 下是 .dll 文件），如果你使用过C语言、C++ 等编译型语言，那你应该能够更好地理解它。
JavaScript 的很多功能都需要本地模块的支持，比如：
Cookie 用于存储少量的用户数据，它是用户计算机上的一种小文件，使用 Cookie 必须有文件操作模块的支持。Ajax 可以借助互联网从服务器请求数据，这是一种网络操作，必须有网络库的支持。一步一步跟踪代码的执行流程，从中发现逻辑错误，这个过程叫做调试，需要有调试器（Debugger）的支持。JavaScript 可以操作 HTML，这需要 HTML 解析模块提前构建起 DOM 树。本地模块一般封装了通用功能，对性能要求较高，所以通常使用编译型语言来实现，比如C语言、C++、汇编语言等。
JavaScript 解释器需要本地模块的支持，标准库在编写时也会调用本地模块的接口，而我们编写的 JavaScript 代码一般不会直接使用本地模块，所以 Web 前端程序员触及不到它们。
本地模块是幕后英雄，它不显山露水，但是又不可或缺。
总结
解释器、标准库、本地模块等各种组件/工具共同支撑了 JavaScript 代码的运行，它们统称为 JavaScript 运行时。
在 Node.js 之前，JavaScript 运行时被绑定在浏览器中，作为浏览器的各种模块出现。这意味着，要想运行 JavaScript 代码就必须启动浏览器，JavaScript 逃不出浏览器的手掌心，它的功能受到很大的限制，只能作为网页脚本使用。
2. 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。
V8 引擎官网：https://v8.dev/
3. 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）等。nmpNode.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 能力。
Libuv 官网：http://libuv.org/
4. 总结Node.js 是一个 JavaScript 运行时，它让 JavaScript 脱离了浏览器环境，可以直接在计算机上运行，极大地拓展了 JavaScript 用途。我们应该将 JavaScript 和 Python、Java、Ruby 等其它编程语言同等对待，不能再将它视为一种“小玩意”。
最后我们来汇总一下 JavaScript 和 Node.js 的历史：
Netscape 浏览器衍生出了 JavaScript 脚本，赋予网页编程能力；Chrome 浏览器衍生了 V8 引擎，提高了 JavaScript 性能；V8 引擎构建了 Node.js，拓展了 JavaScript 的编程能力；Node.js 衍生了 Libuv 库，给网络开发增加了一款优秀的工具。第一个JavaScript 程序JavaScript 程序不能够独立运行，只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中，借助浏览器环境来运行。
在 HTML 文档中嵌入 JavaScript 代码 在 HTML 页面中嵌入 JavaScript 脚本需要使用<script><script><script>标签，用户可以在<script><script><script> 标签中直接编写 JavaScript 代码，具体步骤如下。
第1步，新建 HTML 文档，保存为 test.html。
第2步，在 标签内插入一个
第3步，为 <script><script><script> 标签设置type="text/javascript"type="text/javascript"type="text/javascript"属性。
现代浏览器默认 <script><script><script> 标签的脚本类型为 JavaScript，因此可以省略 type 属性；如果考虑到兼容早期版本浏览器，则需要设置 type 属性。
第4步，在 <script><script><script> 标签内输入 JavaScript 代码 document.write("<h1>HelloWorld!</h1>");document.write("<h1>Hello World!</h1>");document.write("<h1>HelloWorld!</h1>");
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script></head><body></body></html>在 JavaScript 脚本中，document 表示网页文档对象；document.write() 表示调用 Document 对象的 write() 方法，在当前网页源代码中写入 HTML 字符串"<h1>HelloWorld!</h1>""<h1>Hello World!</h1>""<h1>HelloWorld!</h1>"。
第5步，保存网页文档，在浏览器中预览，显示效果如图所示。
1. 在脚本文件中编写 JavaScript 代码JavaScript 程序不仅可以直接放在 HTML 文档中，也可以放在 JavaScript 脚本文件中。JavaScript 脚本文件是文本文件，扩展名为.js，使用任何文本编辑器都可以编辑。
常用的文本编辑器有 Windows 系统中的记事本、Linux 系统中的 Vim、Sublime Text、Notepad++ 等。对于初学者来说，建议先使用文本编辑器来编写 JavaScript 代码，这样有助于我们对 JavaScript 语法、关键字、函数等内容的记忆。等到了实际开发阶段，则可以选择一些更加专业的代码编辑器，例如 Visual Studio Code（简称“VS Code”）、WebStorm（收费）、Atom 等，这样可以提高开发效率。
新建 JavaScript 文件的步骤如下。
第1步，新建文本文件，保存为 test.js。注意，扩展名为.js，它表示该文本文件是 JavaScript 类型的文件。
第2步，打开 test.js 文件，在其中编写如下 JavaScript 代码。
alert(“Hello World!”);
在上面代码中，alert() 表示 Window 对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串 “Hello World!”。
第3步，保存 JavaScript 文件。在此建议把 JavaScript 文件和网页文件放在同一个目录下。
JavaScript 文件不能够独立运行，需要导入到网页中，通过浏览器来执行。使用 <script><script><script> 标签可以导入 JavaScript 文件。
第4步，新建 HTML 文档，保存为 test.html。
第5步，在 标签内插入一个 <script><script><script> 标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：
<script type="text/javascript" src="test.js"></script>注意：使用＜script＞＜script＞＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
第6步，保存网页文档，在浏览器中预览，显示效果如图所示。 定义 src 属性的 <script><script><script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
2. JavaScript 代码执行顺序浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据 <script><script><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>＜script>＜script> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。
如果想改变 JavaScript 文件的执行顺序，可以给 <script><script><script> 标签增加 defer 或者 async 属性，想了解的读者请转到：JS文件延迟和异步加载（defer和async属性）
JavaScript 中的几个重要概念本文我们讲解一下 JavaScript 中的几个简单的概念，包括标识符、关键字、保留字、大小写和字面量。这些基本概念虽然不能直接提升我们的编程能力，但它们是 JavaScript 的基本组成元素。
1. 标识符所谓标识符（Identifier），就是名字。JavaScript 中的标识符包括变量名、函数名、参数名、属性名、类名等。
合法的标识符应该注意以下强制规则：
第一个字符必须是字母、下划线（_）或美元符号（$）。除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。不能与 JavaScript 关键字、保留字重名。可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。示例
在下面示例中，str 就是变量的名字：
var str = "C语言中文网：c.biancheng.net";document.write(str);第1行代码定义了一个变量，名字为 str，第2行通过 str 这个名字使用了变量。
2. 关键字关键字（Keyword）就是 JavaScript 语言内部使用的一组名字（或称为命令）。这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如表所示。
JavaScript 关键字
breakdeleteifthiswhilecasedointhrowwithcatchelseinstanceoftrycontinuefinallynewtypeofdebugger（ECMAScript 5 新增）forreturnvardefaultfunctionswitchvoid3. 保留字保留字就是 JavaScript 语言内部预备使用的一组名字（或称为命令）。这些名字目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议用户不要使用。具体说明如表所示。
JavaScript 保留字
abstractdoublegotonativestaticbooleanenumimplementspackagesuperbyteexportimportprivatesynchronizedcharextendsintprotectedthrowsclassfinalinterfacepublictransientconstfloatlongshortvolatileECMAScript 3 将 Java 所有关键字都列为保留字，而 ECMAScript 5 规定较为灵活，例如：
在非严格模式下，仅规定 class、const、enums、export、extends、import、super 为保留字，其他 ECMAScript 3 保留字可以自由使用；在严格模式下，ECMAScript 5 变得更加谨慎，严格限制 implements、interface、let、package、private、protected、public、static、yield、eval（非保留字）、arguments（非保留字）的使用。JavaScript 预定义了很多全局变量和函数，用户也应该避免使用它们，具体说明如表所示。
JavaScript 预定义全局变量和函数
argumentsencodeURLInfinityNumberRegExpArrayencodeURLComponentisFiniteObjectStringBooleanErrorisNaNparseFloatSyntaxErrorDateevalJSONparseIntTypeErrordecodeURLEvalErrorMathRangeErrorundefineddecodeURLComponentFunctionNaNReferenceErrorURLError不同的 JavaScript 运行环境都会预定义一些全局变量和函数，上表列出的仅针对 Web 浏览器运行环境。
无论是在严格模式下还是在非严格模式下，都不要在定义变量名、函数名或者属性名时使用上面列举出的保留字，以免同学们入坑。
4. 区分大小写JavaScript 严格区分大小写，所以 Hello 和 hello 是两个不同的标识符。
为了避免输入混乱和语法错误，建议采用小写字符编写代码，在以下特殊情况下可以使用大写形式：
构造函数的首字母建议大写。构造函数不同于普通函数。示例
下面示例调用预定义的构造函数 Date()，创建一个时间对象，然后把时间对象转换为字符串显示出来。
d = new Date(); //获取当前日期和时间document.write(d.toString()); // 显示日期如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写。例如：typeOf();printEmployeePaychecks();提示：
上述都是约定俗成的一般习惯，不构成强制性要求，用户可以根据个人习惯进行命名。
5. 直接量字面量（Literal）也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。
示例
下面示例分别定义不同类型的直接量：字符串、数值、布尔值、正则表达式、特殊值、对象、数组和函数。
//空字符串直接量1 //数值直接量true //布尔值直接量/a/g //正则表达式直接量null //特殊值直接量{} //空对象直接量[] //空数组直接量function(){} //空函数直接量，也就是函数表达式JS注释（多行注释+单行注释）注释是给开发人员看的，程序在执行时会自动忽略注释的内容，所以我们通常使用注释来为代码添加一些解释说明或描述，以提高代码的可读性。JavaScript 中的注释与 C/C++、Java、PHP 等语言中注释的定义方式相同，支持单行注释和多行注释两种风格。
1. 单行注释单行注释以双斜杠//开头，//之后的所有内容都会看作是注释的内容，对//之前的内容则不会产生影响，示例代码如下：
<!DOCTYPE html><html><head> <title>JavaScript</title></head><body> <div id="demo"></div> <script> // 在 id 属性为 demo 的标签中添加指定内容 document.getElementById("demo").innerHTML = "Hello World!"; </script></body></html>注意：单行注释 // 只对所在行有效。
另外，单行注释除了可以独占一行外，也可以在代码的末尾使用，如下例所示：
var x = 5; //下一篇：NovelAi + Webui + Stable-diffusion本地配置
