day1

最新推荐文章于 2024-04-24 09:22:16 发布

自然醒^

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量248

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lime_00/article/details/106751271

版权

一. 什么是JavaScript?

1. javascrip简介

JavaScript 语言是一门弱类型、基于原型的直译式脚本语言，运行于 JavaScript 解释器/引擎。JavaScript 解释器/引擎最早是浏览器核心的一部分，广泛地被用来支持客户端的脚本语言（不仅包含 JavaScript 语言），最早是支持 HTML 页面的运行。

JavaScript 语言内置了一个包含一系列对象的标准库，比如数组、日期、数学和一个语言元素集合包括操作符、流程控制及语句等语法内容。

JavaScript 解释器/引擎是作为 JavaScript 脚本代码的运行环境，目前主要的呈现方式有 2 种，如下所示：

独立安装的 JavaScript 解释器/引擎，例如 Node.js 就是利用 Chrome 浏览器的 JavaScript V8 版本引擎创建的 JavaScript 运行环境。
嵌入在各个浏览器内核中的 JavaScript 解释器/引擎，目前主流浏览器都支持该解释器/引擎，例如 Chrome、Firefox 等浏览器。

2. JavaScript 组成部分

虽然大部分经常把 JavaScript 和 ECMAScript 划为同一个概念，但实际上 JavaScript 语言所包含的内容要比 ECMAScript 多得多。完整的 JavaScript 语言其实是由 3 个部分组成的，如下所示：

ECMAScript：JavaScript 语言的核心，是 ECMA-262 标准化的脚本语言的名称。
DOM：全称为 Document Object Model，译为文档对象模型，是用来 W3C 组织制定的标准接口规范。
BOM：全称为 Browser Object Model，译为浏览器对象模型，提供了一系列对象可以与浏览器窗口进行交互。

ECMAScript

ECMAScript 语言是一门由 ECMA 组织根据 ECMA-262 标准定制的脚本程序设计语言，该语言的内容包含了语法、类型、语句、关键字和操作符等内容。

ECMA 的全称为 European Computer Manufacturers Association，译为欧洲计算机制造商协会，后来更名为 ECMA 国际，是一家国际性会员制度的信息和电信标准组织。

很多脚本语言的核心都是 ECMAScript，JavaScript 语言只是众多脚本语言中的一种，例如 Adobe 公司的 ActionScript 同样实现了 ECMAScript。

在 2015 年之前，ECMAScript 的最新一个版本是第 5 版本，发布于 2009 年。在 2015 年发布了版本号为 2015 的新版本，俗称 ECMAScript 6。

与此同时，ECMA 国际对外宣布此后每年都会发布一个新版本，并且版本号使用年份命名。截止到目前（2019 年）已经发布了 2016、2017 以及 2018 等新版本，并且还会以每年一个新版本的速度进行迭代更新。

文档对象模型（DOM）

DOM 是一个简写，其全称为 Document Object Model，译为文档对象模型，是针对 XML 但经过扩展用于 HTML 的应用程序编程接口。

DOM 会把整个 HTML 页面映射为一个多层的节点结构，HTML 页面中的每一个组成部分都是这个节点结构中的某种类型的节点。

如下示例代码展示了简单的 HTML 页面源代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML页面示例</title>
</head>

<body>
  <h1>这是一个示例页面.</h1>
</body>

</html>
html

DOM 映射上述 HTML 页面为一个节点结构如下所示：

浏览器对象模型（BOM）

BOM 同样是一个简写，全称为 Browser Object Model，译为浏览器对象模型，是允许开发人员访问和修改浏览器窗口的对象集合。

BOM 经常导致出问题的原因是 BOM 作为 JavaScript 语言的组成部分之一，但是却没有相关标准。换句话讲，各个浏览器对 BOM 可能都支持，但是具体用法上可能存在差异。不过，在 HTML5 中已经得到了解决，HTML5 版本将 BOM 的很多内容都写进了标准规范中。

BOM 提供了一系列与浏览器窗口进行互动的对象，如下所示：

window 对象：代表浏览器窗口，可以修改浏览器窗口显示的大小等功能。
navigator 对象：该对象提供了当前浏览器的详细信息，包含了浏览器名称、浏览器版本、当前操作系统信息等。
screen 对象：代表当前显示器，提供了用户显示器分辨率等信息。

上述所罗列的对象并不是 BOM 中包含的所有对象，在后续章节中再详细讲解 BOM 的内容。除了上述这些对象之外，还提供了 XMLHttpRequest 这种自定义对象。

3. JavaScript 应用

客户端 JavaScript

这里的客户端主要还是指 Web 浏览器，这部分的 JavaScript 提供了 BOM 和 DOM 等对象集来扩展 JavaScript 核心。例如客户端版本直接支持应用将元素放在 HTML 表单中并且支持响应用户事件，比如鼠标点击、表单提交和页面导航等操作。

服务器端 JavaScript

自从 Node.js 的面市，使得 JavaScript 同样可以完成传统服务器端语言完成的事情。Node.js 提供了一系列 API 扩展 JavaScript 核心。例如服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。

物联网 JavaScript

JavaScript 语言目前也可以应用于物联网领域，国产厂商推出的 Ruff.js 就是支持 JavaScript 开发应用的物联网操作系统。Ruff.js 同样提供了一系列 API 扩展 JavaScript 核心。

人工智能 JavaScript

人工智能领域被认为是未来十大趋势之一，JavaScript 语言有幸可以参与其中，这要归功于 Google 公司。Google 公司曾推出人工智能领域的 TensorFlow 开发框架，同样提供了 JavaScript 版本。TensorFlow.js 框架是基于 JavaScript 语言的机器学习库，允许使用 JavaScript 语言开发 ML，并运行在浏览器或者 Node.js 环境中。

总结

本小节主要讲解了 JavaScript 语言的概念、发展简史、组成部分以及目前主要的应用场景。需要关注的重点如下：

JavaScript 是一种弱类型、基于原型的语言，这是 JavaScript 语言最为重要的特性。
JavaScript 的组成部分是 3 个：ECMAScript、DOM 和 BOM，并不只是 ECMAScript。
JavaScript 语言目前的应用已经不仅仅局限于 Web 浏览器客户端，还有很多新的应用场景。

二. JavaScript运行环境

1. 浏览器运行环境

目前主流的浏览器自带的提供了开发者工具，使得开发人员可以很方便地使用 JavaScript 语言，并且进行代码调试等工作。

如下图所示展示了 Chrome 浏览器提供的开发者工具运行 JavaScript 代码：

2. 独立解释器运行环境

Node.js 不仅使得 JavaScript 语言可以像常见的服务器端语言一样运行在服务器端环境中，还提供了独立的 JavaScript 解释器/引擎环境。

提示：运行 Node.js 环境的前提是要先安装 Node.js

1. 打开电脑的命令行/终端工具，如下图所示：

2. 在命令行/终端工具中，输入 node 命令，进入 Node CLI 模式。如下图所示：

3. 在 Node CLI 模式中，输入 console.log('Hello World') 代码，并点击回车键进行运行。如下图所示：

三. JavaScript 代码调试

调试手段

这里我们主要会以 Node.js 运行环境来介绍几种 JavaScript 代码调试的手段：

console 控制台
Node.js 调试器
V8 引擎的调试器

1. console 控制台

我们是在可以 Node.js 运行环境中直接使用 console 的。在 Node.js 中的 console 是以一个对象的方式存在的，console 常用的方法如下表所示：

方法	描述
console.log()	向标准输出流打印字符并以换行符结束
console.info()	向标准输出流打印信息性消息。输出文字外，会显示一个蓝色的惊叹号
console.warn()	向标准输出流打印警告性消息。输出文字外，会显示一个黄色的惊叹号
console.error()	向标准输出流打印错误性消息。输出文字外，会显示一个红色的叉子

如下示例代码展示了 console 的上述方法的使用方式：

// 用于输出日志性消息
console.log("这是一个log日志性消息.");
// 用于输出信息性消息
console.info("这是一个info信息性消息.");
// 用于输出警告性消息
console.warn("这是一个warn警告性消息.");
// 用于输出错误性消息
console.error("这是一个error错误性消息.");
javascript

上述代码可以运行在浏览器的开发者工具的 console 页签中，也可以运行在 Node.js CLI 模式下，运行效果如下图所示：

但需要注意的是，console 可以打印的信息是很有限的。如果遇到比较复杂的问题的话，console 是无法满足代码调试需要的。

2. Node.js 调试器

在 Node.js 的原生 API 中提供了一个强大的调试器，帮助开发人员调试应用程序。

使用 Node.js 提供的调试器的话，具体的操作步骤如下所示：

1. 使用开发编辑器创建一个扩展名为 .js 的文件，并编写如下示例代码：

var str = "这是一个测试内容."; // 定义一个用于测试的变量
debugger; // 添加debugger语句
console.log(str); // 输出测试内容
JavaScript

Node.js 提供的调试器实际上就是在 JavaScript 代码中添加 debugger 语句。

2. 在 Node.js CLI 模式下，以 Debug 方式运行上述 JavaScript 代码文件即可，如下示例指令：

node inspect debugger.js

运行效果如下图所示：

3. 接下来，使用 Node.js 提供的调试命令进行代码调试即可。调试命令如下所示：

cont、c：表示继续执行
next、n：执行到下一行代码
step、s：进入到代码内部
out、o：跳出当前代码到上一级
pause：暂停代码的执行

3. V8 引擎的调试器

在 Node.js 6.3 版本之后，Node.js 集成了 Chrome 浏览器的 V8 解释器/引擎所提供的调试器，允许在 Chrome 浏览器提供的开发者工具中进行 JavaScript 代码调试。

在 Node.js 中使用 V8 解释器/引擎所提供的调试器，需要在使用 node 命令运行 JavaScript 文件添加如下参数：

node --inspect index.js

上述命令运行之后的效果如下所示：

$ node --inspect index.js
Debugger listening on ws://127.0.0.1:9229/1f536a80-40de-4a4a-a3fc-bc030b2091bb
For help see https://nodejs.org/en/docs/inspector
Debugger attached.

这时正常的情况，Chrome 浏览器的开发者工具会自动弹出，并显示调试界面，如下图所示：

如果 Chrome 浏览器没有自动弹出上述开发者工具界面的话，可以手动打开 Chrome 浏览器，并在地址栏中复制如下地址：

chrome://inspect

输入上述地址之后，会看到的效果如下图所示：

如上述所示，点击【Remote Target】选项下的链接，即可弹出开发者工具界面。

总结

本小节主要讲解了 JavaScript 代码调试的 3 种常见手段，按照使用频率划分的话，这 3 种调试手段的顺序如下所示：

console 控制台：使用频率最高，但限制同样最多
Node.js 调试器：使用频率次之，但调试需要使用命令
V8 引擎的调试器：使用频率最低（原因是操作复杂），但调试功能是最多的

四. 词法结构

1. 区分大小写

JavaScript 语言是一种区分大小写的语言。也就是说，JavaScript 语言中的关键字、变量名、函数名，以及所有标识符采用了统一的大小写形式。

例如 JavaScript 语言中的关键字 while 必须是全部小写的，不能是 While 或者 WHILE 等这种写法。再例如 hello、Hello 和 HELLO 是不同的变量名。

如下示例代码展示了 JavaScript 语言区分大小写：

var hello = 'hello'
console.log(hello)

var Hello = 'Hello'
console.log(Hello)

var HELLO = 'HELLO'
console.log(HELLO)
javascript

上述示例代码运行效果如下图所示：

hello
Hello
HELLO

注意：在 JavaScript 语言中，一般情况下，习惯性会以全大写的形式表示常量。因为在 ECMAScript 5 版本以及之前版本中，是不存在常量语法的。

值得注意的是，HTML 页面是不区分大小写的，而 JavaScript 语言是区分大小写的。HTML 和 JavaScript 又经常编写在一起，免不了引起一些混淆。例如 HTML 某元素的 onclick 属性是允许写成 onClick 的，但在 JavaScript 语言中必须是全小写的 onclick。

２. 可选的分号

一般情况下，JavaScript 语言会使用分号（;）作为一条语句的结束，这对 JavaScript 语言的可读性和整洁性是非常重要的。

如下示例代码展示了使用分号作为一条语句的结束：

var sum = a + b;
var diff = a - b;
javascript

上述示例代码也可以编写为如下所示：

var sum = a + b;var diff = a - b;
javascript

通过上述两个示例代码，我们可以看出当使用分号作为语句的结束时，无论是将两条语句编写在两行还是一行都是允许的。

但在 JavaScript 语言中的分号也并不是必不可少的。如果 JavaScript 语言中的每一条语句都独占一行的话，那么用来表示结束的分号就可以省略。

如下示例代码展示了省略分号的用法：

var sum = a + b
var diff = a - b
javascript

但需要注意的是，如下示例代码如果省略了分号，运行时会报错：

var sum = a + bvar diff = a - b;

３. 语句

avaScript 语言将多行代码组合成一个代码块。一般情况下，每一个代码块的开始使用左花括号（{），结束使用右花括号（}）。

如下示例代码展示了 JavaScript 语言中的代码块：

if (test) {
  console.log('我在一个代码块中.')
}
javascript

如上述示例代码，如果代码块中只存在一条语句的话，代码块的左花括号和右花括号是允许省略的。但代码块中这条语句的缩进必须保留，如下示例代码所示：

if (test)
  console.log('我在一个代码块中.')
javascript

再有就是，如果只是使用左花括号和右花括号包含多条语句的话，这个表示的是块级作用域。例如如下示例代码所示：

{
  console.log('我在一个代码块中.')
  console.log('我也在一个代码块中.')
}
javascript

上述代码在 ECMAScript 5 版本以及之前版本中，运行后是不会报错的，但并不推荐这种写法。因为 ECMAScript 2015 版本之后才出现了块级作用域的概念和用法。

4. 注释

与 HTML、CSS 类似的是，JavaScript 语言同样是注释，其作用于 HTML、CSS 中的注释的作用也是类似的，都是用来描述一段代码的含义或者作用的。

JavaScript 语言中支持 2 种格式的注释：

单行注释：使用 // 表示注释的开始。
多行注释：使用 /* 作为注释的开始，使用 */ 作为注释的结束。

多行注释是不能进行嵌套的，如下示例代码所示：

/* 然而, 你不能, /* 嵌套注释 */ 语法错误 */

五. 关键字和保留字

1. 关键字

所谓关键字，就是在 JavaScript 语言中具有特殊用途的一组标识符，这些标识符是不能被用作变量名或者函数名的。关键字是由 ECMA-262 标准定制的，不同版本的 ECMA-262 标准中的关键字可能会有差异。

如下图展示了 ECMA-262 第 5 版本中的关键字：

２. 保留字

除了关键字，JavaScript 语言还定义了另一组同样不能用作变量名或者函数名的标识符，这就是保留字。所谓保留字，就是目前在 JavaScript 语言中还没有明确的特殊用途，将来可能会成为关键字的一组标识符。

保留字同样是由 ECMA-262 标准定制的，不同版本的 ECMA-262 标准中的保留字也可能会有差异。

如下图展示了 ECMA-262 中的一些保留字：

用作变量名或者函数名的。关键字是由 ECMA-262 标准定制的，不同版本的 ECMA-262 标准中的关键字可能会有差异。

如下图展示了 ECMA-262 第 5 版本中的关键字：

[外链图片转存中…(img-H4dG4Ei5-1592138308605)]

自然醒^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day1

一. 什么是JavaScript?1. javascrip简介JavaScript 语言是一门弱类型、基于原型的直译式脚本语言，运行于 JavaScript 解释器/引擎。JavaScript 解释器/引擎最早是浏览器核心的一部分，广泛地被用来支持客户端的脚本语言（不仅包含 JavaScript 语言），最早是支持 HTML 页面的运行。JavaScript 语言内置了一个包含一系列对象的标准库，比如数组、日期、数学和一个语言元素集合包括操作符、流程控制及语句等语法内容。JavaScript 解释器
复制链接

扫一扫