JavaScript 是让网页具有交互能力的编程语言。你可以用它响应按钮点击、处理表单、请求接口，也可以通过 Node.js 编写后端程序。本文从几个最常用的概念开始。
1. 运行第一段代码
打开浏览器开发者工具，切换到 Console（控制台），输入：
console.log('你好，JavaScript！');
console.log() 用来输出信息，是观察程序运行过程的常用工具。
2. 使用变量保存数据
优先使用 const；如果变量需要重新赋值，再使用 let。
const name = '小明';
let count = 1;
count += 1;
console.log(name, count); // 小明 2
const 限制的是变量重新赋值，对象内部的属性仍然可以修改。
3. 认识基本数据类型
const title = '学习笔记'; // 字符串
const price = 19.9; // 数字
const isPublished = true; // 布尔值
const emptyValue = null; // 主动表示空值
let pendingValue; // undefined
比较值时通常使用 ===，避免隐式类型转换带来的意外。
4. 条件判断和循环
const score = 85;
if (score >= 60) {
console.log('通过');
} else {
console.log('继续练习');
}
for (let i = 1; i <= 3; i++) {
console.log('第 ' + i + ' 次练习');
}
5. 用函数组织逻辑
函数可以接收输入、执行操作并返回结果。
function add(a, b) {
return a + b;
}
const double = (value) => value * 2;
console.log(add(2, 3)); // 5
console.log(double(4)); // 8
6. 数组和对象
数组适合保存列表，对象适合描述一项事物。
const languages = ['JavaScript', 'TypeScript', 'Python'];
const user = { name: '小明', age: 18 };
for (const language of languages) {
console.log(language);
}
const lengths = languages.map((language) => language.length);
console.log(user.name, lengths);
map() 会返回一个新数组；需要筛选元素时可以使用 filter()。
7. 给网页添加交互
假设页面里有一个按钮和一个文本区域：
<button id="hello-button">打个招呼</button>
<p id="message"></p>
在页面元素加载后执行下面的代码：
const button = document.querySelector('#hello-button');
const message = document.querySelector('#message');
button.addEventListener('click', () => {
message.textContent = '欢迎开始学习 JavaScript！';
});
插入普通文本时使用 textContent，不要把不可信输入直接写入 innerHTML。
8. 理解异步操作
请求接口需要时间，可以用 async/await 等待结果，并用 try/catch 处理失败。
async function loadPost() {
try {
const response = await fetch('/api/example');
if (!response.ok) throw new Error('请求失败');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
这里的接口地址只是示例，需要换成你实际提供的接口后才能运行。
动手练习
试着做一个计数器：点击按钮让数字加一，再添加一个重置按钮。你会同时练习变量、函数、DOM 查询和事件监听。
遇到问题时，先看控制台报错，再把程序缩小到最简单的可复现例子。多写几段小程序，比一次记住所有语法更有效。