第一章：前端基础（JavaScript）——变量与数据类型、函数与作用域、DOM操作入门、事件处理、Ajax与Fetch API基础

各位产品经理朋友，咱们今天聊聊JavaScript。说实话，很多产品经理一听到「代码」两个字就头大。我完全理解，毕竟你们的核心能力是逻辑和洞察，不是写代码。

但我想说，JavaScript是你理解前端世界的「钥匙」。你不需要成为高手，但掌握基础，你就能跟开发聊到一块去。我自己带团队时，最怕的就是产品和技术之间「鸡同鸭讲」。嗯，今天这一章，就是帮你打破这层窗户纸。

1. 变量与数据类型：存东西的盒子

变量是什么？说白了，就是一个「盒子」。你把数据放进去，贴个标签，以后想用的时候直接喊标签名字就行。

在JavaScript里，声明变量有三种方式：

• var：老派写法，现在基本不用了。我刚开始学JS时踩过它的坑——作用域混乱，容易出bug。
• let：现代写法，推荐使用。它的作用域是块级的，更安全。
• const：声明常量，一旦赋值就不能改。我习惯把所有「不该变」的东西都用const，比如API地址。

数据类型呢？JavaScript里有两大类：

类型	例子	说明
Number	42, 3.14	数字，不分整数和小数
String	"你好", 'hello'	字符串，用引号包着
Boolean	true, false	布尔值，只有两个
Array	[1, 2, 3]	数组，一组数据的集合
Object	{name: "张三", age: 18}	对象，键值对的集合
undefined	let a;	未定义，变量声明了但没赋值
null	let b = null;	空值，表示「什么都没有」

2. 函数与作用域：把活儿包起来

函数是什么？就是把一段代码「包起来」，给它起个名字，以后想用就调用它。你想想看，这跟产品里的「功能模块」是不是一个道理？

声明函数有两种常见方式：

// 方式一：函数声明
function sayHello(name) {
  return "你好，" + name;
}

// 方式二：箭头函数（现代写法）
const sayHello = (name) => {
  return `你好，${name}`;
};

我个人更喜欢箭头函数，简洁、直观。但要注意，箭头函数和普通函数在 this 的指向上有区别。嗯，这个细节你暂时不用深究，知道有这回事就行。

作用域，说白了就是「变量的可见范围」。JavaScript里有三种作用域：

• 全局作用域：在函数外面声明的变量，整个文件都能访问。我建议尽量少用全局变量，容易冲突。
• 函数作用域：在函数里面声明的变量，外面访问不到。
• 块级作用域：用 let 或 const 在 {} 里声明的变量，只在那个块里有效。

3. DOM操作入门：跟网页「对话」

DOM（文档对象模型）是什么？你可以把网页想象成一棵树。每个HTML标签都是树上的一个节点。JavaScript就是那个可以「修剪」这棵树的人。

最常用的DOM操作就三个：

• 获取元素：document.getElementById('id') 或 document.querySelector('.class')
• 修改内容：element.textContent = '新内容' 或 element.innerHTML = '<b>新内容</b>'
• 修改样式：element.style.color = 'red'

// 举个例子：点击按钮，改变文字颜色
const btn = document.getElementById('myButton');
const text = document.getElementById('myText');

btn.addEventListener('click', function() {
  text.style.color = 'blue';
  text.textContent = '颜色变了！';
});

你看，是不是很简单？我刚开始学的时候，觉得DOM操作特别神奇——原来网页是可以「动」起来的。你想想看，产品里的「交互效果」，底层就是这些操作。

4. 事件处理：用户「动」了，网页「应」

事件，就是用户跟网页的「互动」。点击、鼠标移动、键盘输入、页面滚动……这些都是事件。

事件处理的核心就三步：

1. 找到目标元素（比如一个按钮）
2. 绑定事件（比如点击事件）
3. 定义响应函数（点击后做什么）

// 最常用的绑定方式
const button = document.querySelector('#submitBtn');

button.addEventListener('click', function(event) {
  console.log('按钮被点击了！');
  // event 对象里有很多信息，比如点击的位置
  console.log('点击位置：', event.clientX, event.clientY);
});

这里有个重要概念——事件冒泡。什么意思呢？你点击一个按钮，这个点击事件会「冒泡」到它的父元素、祖父元素……一直到document。为什么会这样？因为DOM树的结构决定的。

5. Ajax与Fetch API基础：跟服务器「聊天」

Ajax（Asynchronous JavaScript and XML）是什么？说白了，就是让网页在不刷新的情况下，跟服务器「偷偷」交换数据。你每次刷微博、看朋友圈，背后都是Ajax在干活。

传统Ajax用 XMLHttpRequest 对象，但写法比较啰嗦。现在更推荐用 Fetch API，它更简洁、更现代。

// 用Fetch获取数据
fetch('https://api.example.com/users')
  .then(response => response.json())  // 把响应转成JSON
  .then(data => {
    console.log('获取到的用户数据：', data);
    // 这里可以更新页面
  })
  .catch(error => {
    console.error('请求失败了：', error);
  });

你看，是不是很清晰？fetch 返回一个Promise，然后用 .then() 处理成功的结果，用 .catch() 处理失败的情况。

我建议你记住几个关键点：

• GET请求：获取数据，比如加载用户列表
• POST请求：提交数据，比如登录、注册
• 响应状态码：200表示成功，404表示找不到，500表示服务器出错了

小结

好了，这一章的内容就这些。我们来回顾一下：

• 变量与数据类型：用 let 和 const，别用 var
• 函数与作用域：函数是代码的「包」，作用域是变量的「可见范围」
• DOM操作：获取元素、修改内容、修改样式
• 事件处理：用户互动，网页响应
• Ajax与Fetch：跟服务器「聊天」，不刷新页面

说实话，这些内容你不需要全部记住。但下次跟开发沟通时，你能听懂他们在说什么，能提出更合理的产品需求，这就够了。

下一章，我们会聊聊「前端框架入门：React/Vue的核心概念」。嗯，那才是真正让前端「飞起来」的东西。咱们下章见。