JavaScript 在线编译器

输出结果

在线编译器

支持所有主流语言，在线就可以编程

关于 JavaScript 在线编译器

有时候我们只是想临时测试几行 JavaScript 代码，比如看看 filter() 怎么筛选数组、模板字符串怎么写、判断某段逻辑到底对不对。如果为了这么一点小测试，还要专门创建 HTML 页面或者搭一个本地项目，这多少有点折腾。

而使用咱们绿叶网的 JavaScript 在线编译器，就方便省事多了。我们打开页面直接写代码，运行后马上查看结果，特别适合 “想到一个写法、就顺手试一下” 的场景。

JavaScript 在线编译器怎么用？

页面上方就是我们的 JavaScript 在线编译器。小伙伴们不用折腾复杂的本地环境，打开网页就能直接开练，主打一个 “左边敲代码，右边看结果”。

编写代码：在编辑区，输入或粘贴 JavaScript 代码。
运行代码：点击 “运行” 按钮，或者直接使用 Ctrl + Enter 快捷键。
查看结果：程序运行后，在右侧查看 console.log() 等代码输出的结果。
继续修改：如果结果不对或者出现报错，直接修改代码，再运行一次即可。

比如，我们可以拿一组价格做个小测试，用 filter() 筛选出 80 元以上的数据，顺便看看箭头函数和模板字符串的写法：

const prices = [39, 88, 120, 56];
const expensivePrices = prices.filter(price => price >= 80);

console.log(`80 元以上：${expensivePrices.join(", ")}`);

运行结果如下。

80 元以上：88, 120

像这种只想验证某个语法、数组方法或者小逻辑的代码，直接使用在线编译器会省事很多。改几个数字再跑一次，很快就能看出代码到底是怎么工作的。

JavaScript 在线编译器适合哪些场景？

JavaScript 在线编译器最适合 “代码不多、希望马上看到结果” 的场景。尤其是在学习基础语法或者临时验证代码时，不需要为了几十行代码专门搭一个完整项目。

新手入门练习：刚开始学变量、条件判断、循环、函数和数组时，可以边写边运行，理解起来会更加直观。
快速验证语法：记不清某个字符串方法、数组方法或者箭头函数怎么写时，打开网页就能直接试。
算法与逻辑测试：刷题或者验证一个小算法时，可以专注于代码本身，不需要先处理项目结构和开发环境。
课堂教学演示：老师讲解 JavaScript 语法、学生做小练习时，在线运行可以减少环境配置带来的干扰。

JavaScript在线编译器的主要适用场景：入门练习、语法验证、算法测试与课堂演示

JavaScript 是什么？

JavaScript 是一门广泛用于 Web 开发的编程语言。我们平时在网页里看到的按钮点击、内容切换、表单验证、数据请求和各种动态交互，很多都离不开 JavaScript。

如果把一个网页简单拆开来看，HTML 负责页面结构，CSS 负责外观和布局，而 JavaScript 主要负责逻辑和交互。也正因为它和浏览器关系非常紧密，JavaScript 一直都是前端开发最核心的基础技术之一。

不过，JavaScript 早就不只是在浏览器里写网页了。随着 Node.js 等运行环境的发展，它也可以用于服务端开发、命令行工具以及其他类型的应用。

HTML搭结构、CSS做外观与JavaScript负责逻辑交互的分工关系图解

JavaScript 主要用在哪些地方？

JavaScript 的应用范围已经非常广，但最有代表性的还是下面这些方向：

Web 前端开发：配合 HTML 和 CSS 实现页面交互，也可以使用 Vue、React 等框架开发更复杂的 Web 应用。
Web 后端开发：借助 Node.js，JavaScript 也可以运行在服务端，用来开发 API、网站后台等程序。
跨平台应用：JavaScript 生态中有不少跨平台方案，可以用于开发桌面应用或移动应用。
数据可视化：网页中的动态图表、仪表盘和交互式数据展示，也经常使用 JavaScript 来实现。

JavaScript的四大主要应用领域：前端开发、后端开发、跨平台与数据可视化

所以，JavaScript 虽然是从 Web 世界里成长起来的，但今天早就不是当年那个 “只会给网页加点特效” 的小配角了。对于准备学习前端开发的小伙伴来说，它更是一门值得好好掌握的核心基本功。

JavaScript 和 Java 有什么关系？

简单来说：它们俩没有任何血缘关系。

很多新手一看名字，以为 JavaScript 是 Java 的 “网页版” 或者 “小老弟”。在程序员圈子里，有个非常经典的段子能完美解释它们的关系：

JavaScript 和 Java 的关系，就像 “雷锋” 和 “雷峰塔” 的关系，或者 “老婆” 和 “老婆饼” 的关系——仅仅只是名字像而已。

其中：

JavaScript：主要活跃在 Web 前端，负责给网页写交互逻辑，语法相对灵活，上手比较快。
Java：是一门老牌的后端编程语言，主要用来开发企业级的大型系统或安卓后台等，有着自己独立且庞大的生态。

生动解释JavaScript与Java只是名字相似但完全不同的对比图

之所以名字这么像，主要是因为当年 JavaScript 刚诞生时，Java 正好非常火。而网景公司为了 “蹭个热度”，才给它改名叫 JavaScript。

虽然它们在语法上（比如都用花括号、都有 if 和 for）有一些相似之处，但这并不代表学了 Java 就能自动搞懂 JavaScript。我们在学习时，直接把它们当成两门完全独立的语言来看待就好了。

JavaScript 和 Node.js 有什么区别？

JavaScript 是一门语言，这门语言可以运行在 “浏览器” 和 “Node.js” 这两种 “运行环境” 中。

当 JavaScript 运行在 “浏览器环境” 时：浏览器通常会提供 document、window、DOM 等 Web API，所以 JavaScript 可以读取和修改网页内容，处理点击、输入等交互。
当 JavaScript 运行在 “Node.js 环境” 时：由于 Node.js 更偏向服务端和工具开发，会提供文件系统、进程等能力，但并没有浏览器页面里的 DOM。

这也是为什么一段 JavaScript 在浏览器中跑得好好的，放到 Node.js 中却可能报错的原因。比如在浏览器环境中访问 window、document，这没什么问题。但放到 Node.js 环境中访问，却会报错显示 “找不到 window”。

JavaScript在浏览器与Node.js两种不同运行环境下的区别及API对比

常用快捷键

代码写得多了以后，鼠标点来点去多少有点慢。JavaScript 在线编译器还支持下面这些常用快捷键，小伙伴们先记住几个高频的就够用了。

Ctrl + Enter：运行代码。
Ctrl + Z：撤销、Ctrl + Y：重做。
Ctrl + C：复制、Ctrl + V：粘贴。
Ctrl + A：全选。
Ctrl + X：剪切。
Ctrl + /：注释或取消注释。
Ctrl + Home：跳转到首行的行首。
Ctrl + End：跳转到末行的结尾。

其中最值得记住的还是 Ctrl + Enter。写完代码顺手一按就能运行，拿来反复验证小段 JavaScript 非常方便。