什么是 Java脚本？以“Hello World”示例进行介绍
詹姆斯·哈特曼
⚡ 智能摘要
Java脚本是一种使网页具有交互性的编程语言。本简介解释了…… Java脚本是指脚本的来源、浏览器和 Node.js 如何执行脚本，以及如何编写和运行第一个 Hello World 脚本。
什么是 Java脚本？
Java脚本是一种高级编程语言，它为网页添加行为。它是 Web 的三大核心技术之一：HTML 提供结构，CSS 提供外观， Java脚本负责实现交互功能。例如，每次搜索框在您输入时显示建议、照片轮播滑动，或者注册表单提醒您缺少字段时， Java脚本在后台执行这项工作。
下图展示了脚本如何与普通网页的标记并存。
在其生命的大部分时间里 JavaScript 最初被描述为一种客户端脚本语言，因为它只能在浏览器中运行。但这种描述现在已经不完整了。自 2009 年 Node.js 问世以来，这种语言也被用于驱动 Web 服务器、命令行工具、桌面应用程序和移动应用程序。如今更准确的描述是： Java脚本是一种通用语言，在浏览器中有着异常强大的影响力。
该语言的特征包括：
- 动态类型： 一个变量现在可能保存一个数字，过一会儿可能保存一个字符串，因此程序运行时会检查类型。
- 经解读并及时汇编： Chrome 和 Node.js 等引擎会将频繁执行的代码编译成机器代码以提高速度。
- 多范式： 支持命令式、函数式和面向对象等多种编程风格。
- 事件驱动： 代码会对点击、按键、计时器和网络响应做出反应，而不是自上而下运行并停止。ping.
- 单线程，带事件循环： 像网络调用这样的慢速任务会被排队，而不是冻结页面。
💡提示： JavaScript 和 ECMAScript 不是相互竞争的语言。ECMAScript 是书面规范，而 Java脚本是浏览器和 Node.js 实际发布的对该规范的实现。
历史回顾 Java脚本
布伦丹·艾奇创作 Java1995 年，我在 Netscape Communications 公司编写了脚本，并在大约十天内制作出了第一个可运行的原型。该项目在公司内部被称为…… 摩卡它随 Netscape Navigator 2.0 测试版一起发布。 实时脚本 1995年9月，更名为 JavaScript 1995年12月，作为Netscape和Sun Microsystems（拥有该产品的公司）之间营销协议的一部分，该公司收购了该产品。 Java 当时。
正是因为改名，很多初学者仍然会这样想。 JavaScript 是轻量级版本 Java这两种语言在设计、所有权和运行时环境上都毫无关联。Netscape 于 1996 年向 ECMA 国际组织提交了该语言，ECMA-262 标准的第一版于 1997 年 6 月发布。下表列出了阅读旧代码时最重要的几个里程碑事件。
| 年份 | 里程碑 | 为何重要 |
|---|---|---|
| 1995 | 然后是 Mocha，然后是 LiveScript，然后 Java脚本 | 该语言由 Netscape 公司的 Brendan Eich 创建。 |
| 1997 | ECMA-262 第一版 | 该语言获得了与厂商无关的书面标准。 |
| 2009 | ES5 和 Node.js 的第一个版本 | 严格模式启动， Java脚本会逃逸出浏览器。 |
| 2015 | ES6（ECMAScript 2015） | 新增了 let、const、箭头函数、类、模块和 Promise。 |
| 2016以上 | ECMAScript 年度版本 | 规模较小的游戏内容会在每年六月发布，而不是像以往那样偶尔集中发布。 |
由于每年的版本发布周期，2015 年之前编写的代码与现代代码看起来明显不同。较早的教程使用 var 到处都是，而当前代码更倾向于 let 和 const ，尤其是 在声明变量 Java脚本.
什么是 Java脚本用途？
Java脚本不再局限于一些简单的页面技巧。同样的语法现在出现在四个截然不同的地方，这也是为什么它在开发者调查中始终位列最常用语言之一的原因。
| 区域 | 什么是 Java脚本在那里运行。 | 典型工具 |
|---|---|---|
| 浏览器前端 | 处理点击事件，无需重新加载即可更新页面，验证表单，并绘制图表。 | React、Vue、Angular、Svelte |
| 服务器端 | 处理 HTTP 请求，与数据库通信，并构建 REST 或 GraphQL API。 | Node.js、Deno、Bun、Express |
| 移动应用程序 | 构建 Android 以及来自同一共享代码库的 iOS 应用。 | React Native， Ionic电容器 |
| 桌面应用 | 将 Web 界面封装在具有文件系统访问权限的原生窗口中。 | 电子，金牛座 |
| 工具和自动化 | 打包资源、运行测试套件并驱动浏览器进行端到端测试。 | Vite、webpack、Jest、Playwright |
游戏、数据可视化、浏览器扩展程序和小型硬件项目也都依赖于它。对于初学者来说，实际意义很简单：你现在花在语法上的精力可以直接应用到以后的服务器端开发、移动端开发和自动化测试中。如果你想了解这门语言在实际问题中的应用，可以尝试完成一系列练习。 实际 Java脚本代码示例 一旦基本技能掌握得比较熟练了。
怎么跑 Java脚本？
Java脚本不会自行执行。它需要一个包含以下内容的宿主环境： Java脚本 “引擎”Chrome 和 Edge 使用的是 V8 引擎。 Firefox 使用 SpiderMonkey，Safari 使用 JavaScriptCore。当浏览器下载 HTML 页面并找到脚本时，它会将该脚本交给其引擎，由引擎解析、编译和运行该脚本。
第二个宿主环境是 Node.js，它将相同的 V8 引擎嵌入到浏览器之外。这样，相同的语言就可以在服务器或终端中运行。其实际优势在于…… Java脚本是 所有现代浏览器都支持它 on Windows，Linux和 macOS因此，您几乎无需担心访客使用哪个浏览器。这相比 VBScript 来说是一项真正的改进，VBScript 之前只能在 Internet Explorer 中运行。 Windows 现在它和 Internet Explorer 本身一样已被弃用。
⚠️警告： 浏览器 Java脚本和Node.js Java脚本共享核心语言，但不共享外部对象。 document 和 window 仅存在于浏览器中，并且 require 文件系统模块仅存在于 Node.js 中。未经检查就在两者之间复制代码会引发引用错误。
您需要的工具
你需要文本编辑器来编写代码，需要浏览器来查看结果。 Notepad++, Visual Studio Code, Sublime Text任何你用起来顺手的编辑器都可以，不过带有语法高亮和括号匹配功能的编辑器能帮你省去很多调试时间。任何主流浏览器都可以： Google Chrome, Firefox, Microsoft Edge或者使用 Safari 浏览器。除了这两样东西之外，无需购买或安装任何其他软件。
一个简单的 Java脚本程序
如果你坚持 Java脚本位于 HTML 文档内部，所有代码都必须位于一个开放标签（例如 `<script>`）内。 <script> 标签和结尾 </script> 标签。浏览器就是通过这个标签来区分你的代码和周围的标记。旧版页面还会设置一个标签。 type 属性，写作 <script type="text/javascript">这在当时存在 VBScript 等竞争性客户端语言时是必要的。现代页面省略了它，因为 HTML5 将其视为…… text/javascript 默认版本为以下两个版本，功能完全相同，且均有效。
你好世界的例子
传统的第一个程序会显示一条消息。请将以下标记放在一个名为“ hello.html 并在浏览器中打开。
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
输出：
A browser dialog box opens containing the text: Hello World!
注意： type="text/javascript" 在 HTML5 中，这并非必要。以下代码的功能完全相同。
<html>
<head>
<title>My First JavaScript code!!!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
输出：
A browser dialog box opens containing the text: Hello World!
一旦页面内容超过几行，就应该将脚本移到单独的页面上。 .js 文件保持标记的可读性，并允许浏览器缓存代码。此比较详细介绍了两者之间的区别。 内部和外部 Java脚本.
如何编写和运行你的第一个脚本
执行有三种切实可行的方法。 Java脚本，初学者应该尝试所有三种脚本，因为每一种都适合不同的情况。
1. 浏览器控制台。 这是最快的选择，而且完全不需要任何文件。打开任意网页，按下 F12 （或 Ctrl+Shift+I Windows 在 Linux 系统中，可以使用 Cmd+Option+I 快捷键。 macOS），然后选择 安慰 Tab 键。输入一行代码，按 Enter 键，结果会立即显示。它是测试单个表达式或检查函数返回值的理想位置。
// Type each line into the browser console and press Enter console.log(2 + 2); console.log("Guru" + 99); console.log(Math.max(4, 12, 7)); console.log(typeof "hello");
输出：
4 Guru99 12 string
注意第二行。将数字 99 添加到字符串“Guru”生成字符串“Guru99”而不是错误，因为 Java脚本会自动将数字转换为文本。这种行为虽然方便，但也是新手容易犯错的典型原因。
2. 一个 HTML 文件。 上面展示的是“Hello World”示例。当代码需要直接操作页面时，例如读取表单值或更改页面元素，都可以使用此示例。
3. 从终端运行 Node.js。 安装 Node.js，并将代码保存到一个文件中。 .js 然后运行扩展程序 node first-script.js什么都没渲染出来，所以 console.log 成为你的输出通道。如果你想练习纯粹的语言特性，而不想使用任何 HTML，那么这就是你应该采用的方法。
// first-script.js const language = "JavaScript"; const createdBy = "Brendan Eich"; const releaseYear = 1995; console.log(language + " was created by " + createdBy + " in " + releaseYear + "."); const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"]; usedFor.forEach(function (item, index) { console.log(index + 1 + ". " + item); });
输出：
JavaScript was created by Brendan Eich in 1995. 1. Interactive web pages 2. Server apps with Node.js 3. Mobile apps
这段简短的脚本已经运用了三个你会不断遇到的概念：用以下方式声明的常量 const，一个 排列 包含一个值列表，以及一个传递给它的回调函数。 forEach用以下方式重写同一个循环： for 学习之后，陈述句是一项很有用的练习。 循环 Java脚本.
Java脚本与 Java
这些名称是编程史上最大的意外，它们造成的混乱值得尽早澄清。 Java1995年，Script从LiveScript更名为Script，纯粹是出于市场营销的原因。 Java 是当时网络上最热门的技术。这两种语言是由不同的公司、不同的人为解决不同的问题而设计的。
| 方面 | JavaScript | Java |
|---|---|---|
| 创建者 | 1995年，布伦丹·艾希在网景公司工作 | 詹姆斯·戈斯林在太阳微系统公司，1995年 |
| Typing | 动态和弱类型 | 静态且强类型 |
| 继续 | 浏览器引擎和Node.js | 此 Java 虚拟机 |
| 汇编 | 由引擎在运行时进行即时编译 | 预先编译成字节码 |
| 对象模型 | 基于原型，并在 ES6 中添加了类语法 | 从一开始就以班级为基础 |
| 文件扩展名 | JS。 | .java 文件编译成 .class 文件。 |
| 常用 | Web前端、API、工具 | 企业后端 Android、大数据 |
唯一的真正相似之处在于它们都从 C 语言借用了花括号语法。学习其中一种语言并不能让你学会另一种，尽管共享的语法使得第二种语言更容易阅读。如果严格要求ping 吸引你， TypeScript 在顶部添加一个静态类型层 Java脚本编译成纯文本时 Java脚本，以及其中的区别，请参见此处。 TypeScript 和 Java脚本比较.
基础工作完成后，接下来的自然步骤是： 互动 Java剧本练习， 然后 变量和数据类型，其次是 数组 和 循环。 之后， 面向对象的 Java脚本 解释了对象、原型和类是如何相互配合的，以及 字符串格式化 涵盖了几乎所有脚本中都会用到的文本处理方法。
