在开始编写JavaScript代码之前,我们需要理解JavaScript运行环境的基本特点。与许多其他编程语言不同,JavaScript有一个独特的优势:它可以直接在浏览器中运行,无需安装任何额外的软件。 每个现代浏览器都内置了JavaScript引擎,这意味着只要你有一台能上网的设备,就可以立即开始JavaScript编程。
除了浏览器环境,JavaScript还可以通过Node.js在服务器端运行,这为JavaScript开发者提供了更广阔的应用场景。 无论是前端网页开发、后端服务构建,还是移动应用和桌面应用开发,JavaScript都能胜任。

JavaScript主要在两种环境中运行:浏览器环境和Node.js环境。作为初学者,我们推荐从浏览器环境开始学习,因为它更加直观且无需额外配置。
每个现代浏览器(Chrome、Firefox、Safari、Edge等)都内置了JavaScript引擎,能够解释和执行JavaScript代码。这意味着你现在就可以开始编写JavaScript程序!
浏览器为JavaScript提供了丰富的API,包括:
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,让JavaScript能够在服务器端运行。虽然初学阶段不是必需的,但了解Node.js有助于后续的全栈开发学习。
对于初学者,我们建议先专注于浏览器环境中的JavaScript学习。当然你也可以使用下面的工具来体验即时反馈的编程乐趣。
浏览器开发者工具是JavaScript开发者最重要的工具之一。它不仅能让我们编写和测试代码,还能调试程序、检查网页结构、监控网络请求等。 在任何现代浏览器中,你都可以通过以下方式打开开发者工具:
F12键或Ctrl + Shift + ICmd + Option + I控制台是开发者工具中最重要的面板之一,它允许我们直接在浏览器中编写和执行JavaScript代码。打开控制台后,你会看到一个以>开头的命令提示符。
让我们尝试第一个JavaScript命令:
|console.log("Hello, World!");
控制台是学习JavaScript的绝佳工具。你可以在其中测试任何JavaScript表达式,立即看到结果。这种即时反馈有助于快速理解语言特性。
虽然可以在控制台中编写简单的代码,但对于完整的程序,我们通常会创建HTML文件并在其中嵌入JavaScript代码。
首先,让我们为JavaScript项目创建一个专门的文件夹。建议在桌面或文档目录下创建一个名为"javascript_projects"的文件夹。
在该文件夹中创建一个名为hello.html的文件,并输入以下内容:
|<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个JavaScript程序</title> </head> <body> <h1
保存文件后,双击hello.html文件,它将在默认浏览器中打开。你应该能看到:
恭喜!你已经成功运行了第一个JavaScript程序。
虽然可以在HTML文件中直接编写JavaScript代码,但更好的做法是将JavaScript代码保存在单独的文件中。这样做有助于代码的组织和维护。
创建一个名为script.js的文件:
|// script.js - 我的JavaScript代码 console.log("这段代码来自外部JavaScript文件"); // 定义一个简单的函数 function greet(name) { return "你好," + name + "!"; } // 调用函数 console.log(greet("JavaScript学习者")); // 进行简单的数学运算 let a = 10; let b =
然后修改HTML文件,引用外部JavaScript文件:
|<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部JavaScript文件示例</title> </head> <body> <h1
如果你想在浏览器之外运行JavaScript,可以安装Node.js。
安装完成后,打开命令行工具:
|# 检查Node.js版本 node --version # 检查npm版本(Node.js包管理器) npm --version
有了Node.js,你就可以在命令行中直接运行JavaScript文件:
|# 创建一个简单的JavaScript文件 echo 'console.log("Hello from Node.js!");' > hello.js # 运行JavaScript文件 node hello.js
虽然Node.js为JavaScript提供了更多可能性,但作为初学者,我们只专注于浏览器环境的学习。等掌握了基础语法后,你可以再探索Node.js的强大功能。
虽然可以使用任何文本编辑器编写JavaScript代码,但专业的代码编辑器能大大提升开发效率。以下是一些推荐的编辑器:
VS Code是目前最流行的JavaScript开发工具,具有以下优势:
打开浏览器开发者工具的控制台,依次输入以下代码并观察结果:
|console.log("JavaScript环境配置成功!"); 2 + 3; "Hello" + " " + "JavaScript"; Math.random(); new Date();
操作步骤:
预期结果:
console.log()会输出文本到控制台2 + 3会显示计算结果5"Hello JavaScript"Math.random()会显示一个0到1之间的随机数new Date()会显示当前日期和时间控制台是学习和调试JavaScript的重要工具,可以直接执行代码并查看结果。
创建一个HTML文件,在其中编写JavaScript代码,实现以下功能:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个JavaScript页面</title> </head> <body> <h1>欢迎学习JavaScript</h1> <script> console.
将上述代码保存为.html文件,然后用浏览器打开。页面加载时会执行<script>标签中的JavaScript代码。console.log()用于在控制台输出信息,alert()用于弹出提示框。