当前位置：首页 > java >正文

第一节：JavaScript 简介与开发环境搭建

java 2025/5/13 19:12:38

📝 第一节：JavaScript 简介与开发环境搭建

目标：理解 JavaScript 的核心定位，掌握浏览器与 Node.js 开发环境的配置方法。

1. JavaScript 是什么？

定义：
- JavaScript（简称 JS）是 一门轻量级、动态类型、解释型 的脚本语言。
- 最初用于网页交互（如按钮点击、表单验证），现已扩展到服务端（Node.js）、移动端（React Native）、桌面端（Electron）等。
与 Java 的区别：
- 名字相似，但语法、用途完全不同（JS 灵感来自 Scheme 和 Self 语言）。
现代 JS 的三大核心：
1. ECMAScript（语言标准，如 ES6+ 新特性）
2. DOM（操作网页元素）
3. BOM（操作浏览器功能，如 window 对象）

2. 开发环境搭建

场景 1：在浏览器中直接运行 JS

方法：
1. 打开浏览器开发者工具（快捷键：F12 或 Ctrl+Shift+I）。
2. 切换到 Console（控制台） 标签页，输入代码并回车执行。
```
console.log("Hello, World!"); // 输出到控制台
alert("弹窗提示！");         // 浏览器弹窗
```

场景 2：使用 VSCode + Node.js 本地开发

步骤 1：安装 Node.js

下载地址：Node.js 官网（推荐 LTS 版本）。

安装后验证：

node -v   # 显示版本号（如 v18.16.0）
npm -v    # 显示 npm 版本（Node 包管理工具）

步骤 2：创建项目目录
1. 新建文件夹 js-demo，用 VSCode 打开。
2. 创建文件hello.js，写入代码：
```
console.log("Node.js 环境运行成功！");
```
步骤 3：运行代码
- 在 VSCode 终端（Ctrl+`）中执行：
```
node hello.js  # 输出结果
```

3. 第一个完整示例：动态修改网页内容

目标：点击按钮后，修改网页中的文字。

代码实现：

创建 index.html 文件：

<!DOCTYPE html>
<html>
<head><title>JS 入门示例</title>
</head>
<body><h1 id="title">原始标题</h1><button id="changeBtn">点击修改标题</button><script src="script.js"></script> <!-- 引入 JS 文件 -->
</body>
</html>

创建 script.js 文件：

// 获取 DOM 元素
const title = document.getElementById("title");
const btn = document.getElementById("changeBtn");// 绑定点击事件
btn.addEventListener("click", () => {title.textContent = "标题已修改！";title.style.color = "red"; // 修改样式
});

效果演示：
- 用浏览器打开 index.html，点击按钮观察变化。

4. 调试技巧

浏览器开发者工具：
- Elements：查看和修改 DOM 结构。
- Console：输出日志和错误信息。
- Sources：断点调试 JS 代码。
VSCode 调试：
- 安装扩展 Debugger for Chrome，配置 launch.json 实现断点调试。

5. 课后任务

基础任务：
- 在浏览器控制台输出自己的名字和年龄。
- 用 Node.js 计算 1 + 2 + ... + 100 的和。
进阶任务：
- 修改示例代码，点击按钮后显示当前时间（使用 new Date()）。
- 尝试用 let 和 const 替换示例中的 var，观察差异。