1 / 15

JavaScript 入门 | 自在学

JavaScript 入门

在开始编写JavaScript代码之前，我们需要理解JavaScript运行环境的基本特点。与许多其他编程语言不同，JavaScript有一个独特的优势：它可以直接在浏览器中运行，无需安装任何额外的软件。每个现代浏览器都内置了JavaScript引擎，这意味着只要你有一台能上网的设备，就可以立即开始JavaScript编程。

除了浏览器环境，JavaScript还可以通过Node.js在服务器端运行，这为JavaScript开发者提供了更广阔的应用场景。无论是前端网页开发、后端服务构建，还是移动应用和桌面应用开发，JavaScript都能胜任。

JavaScript的运行环境

JavaScript主要在两种环境中运行：浏览器环境和Node.js环境。作为初学者，我们推荐从浏览器环境开始学习，因为它更加直观且无需额外配置。

浏览器环境

每个现代浏览器（Chrome、Firefox、Safari、Edge等）都内置了JavaScript引擎，能够解释和执行JavaScript代码。这意味着你现在就可以开始编写JavaScript程序！

浏览器为JavaScript提供了丰富的API，包括：

DOM操作（操作网页内容）
事件处理（响应用户交互）
网络请求（与服务器通信）
本地存储（保存数据到浏览器）

Node.js环境

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，让JavaScript能够在服务器端运行。虽然初学阶段不是必需的，但了解Node.js有助于后续的全栈开发学习。

对于初学者，我们建议先专注于浏览器环境中的JavaScript学习。当然你也可以使用下面的工具来体验即时反馈的编程乐趣。

浏览器开发者工具

浏览器开发者工具是JavaScript开发者最重要的工具之一。它不仅能让我们编写和测试代码，还能调试程序、检查网页结构、监控网络请求等。在任何现代浏览器中，你都可以通过以下方式打开开发者工具：

Windows/Linux: 按F12键或Ctrl + Shift + I
macOS: 按Cmd + Option + I
右键菜单: 右键点击网页，选择"检查"或"检查元素"

使用控制台（Console）

控制台是开发者工具中最重要的面板之一，它允许我们直接在浏览器中编写和执行JavaScript代码。打开控制台后，你会看到一个以>开头的命令提示符。

让我们尝试第一个JavaScript命令：

|
console.log("Hello, World!");

控制台是学习JavaScript的绝佳工具。你可以在其中测试任何JavaScript表达式，立即看到结果。这种即时反馈有助于快速理解语言特性。

创建第一个JavaScript程序

虽然可以在控制台中编写简单的代码，但对于完整的程序，我们通常会创建HTML文件并在其中嵌入JavaScript代码。

创建HTML文件

首先，让我们为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生成的段落文字
一个弹出的提示框
在控制台中显示的消息（需要打开开发者工具查看）

恭喜！你已经成功运行了第一个JavaScript程序。

外部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

安装Node.js（可选）

如果你想在浏览器之外运行JavaScript，可以安装Node.js。

下载和安装

访问Node.js官网
下载LTS（长期支持）版本
运行安装程序，按照提示完成安装

安装完成后，打开命令行工具：

|
# 检查Node.js版本
node --version
 
# 检查npm版本（Node.js包管理器）
npm --version

运行JavaScript文件

有了Node.js，你就可以在命令行中直接运行JavaScript文件：

|
# 创建一个简单的JavaScript文件
echo 'console.log("Hello from Node.js!");' > hello.js
 
# 运行JavaScript文件
node hello.js

虽然Node.js为JavaScript提供了更多可能性，但作为初学者，我们只专注于浏览器环境的学习。等掌握了基础语法后，你可以再探索Node.js的强大功能。

选择代码编辑器

虽然可以使用任何文本编辑器编写JavaScript代码，但专业的代码编辑器能大大提升开发效率。以下是一些推荐的编辑器：

Visual Studio Code（推荐）

VS Code是目前最流行的JavaScript开发工具，具有以下优势：

免费且功能强大
内置JavaScript支持
丰富的插件生态
智能代码补全
内置终端和调试器

其他优秀选择

Sublime Text: 轻量级，启动快速
Atom: GitHub开发，高度可定制
WebStorm: JetBrains出品，功能全面（付费）

练习

练习 1：控制台的基本使用

打开浏览器开发者工具的控制台，依次输入以下代码并观察结果：

|
console.log("JavaScript环境配置成功！");
2 + 3;
"Hello" + " " + "JavaScript";
Math.random();
new Date();

操作步骤：

按F12或右键选择"检查"打开开发者工具
切换到"Console"（控制台）标签
依次输入每行代码并回车

预期结果：

console.log()会输出文本到控制台
2 + 3会显示计算结果5
字符串连接会显示"Hello JavaScript"
Math.random()会显示一个0到1之间的随机数
new Date()会显示当前日期和时间

控制台是学习和调试JavaScript的重要工具，可以直接执行代码并查看结果。

练习 2：创建第一个HTML页面

创建一个HTML文件，在其中编写JavaScript代码，实现以下功能：

在控制台输出"这是我的第一个JavaScript程序"
弹出提示框显示"欢迎学习JavaScript！"

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个JavaScript页面</title>
</head>
<body>
    <h1>欢迎学习JavaScript</h1>
    
    <script>
        console.