AI 编程基础

什么是 JavaScript

JavaScript（JS）是网页的大脑和肌肉。它让页面能响应用户操作。

点击按钮 → 弹出提示
输入文字 → 实时搜索
滚动页面 → 加载更多

变量的概念

变量就像一个带标签的盒子，用来存放数据。

let name = "小明";          // 文字（字符串）
let age = 25;               // 数字
let isStudent = true;       // 布尔值（是/否）
let hobbies = ["编程", "游戏"]; // 数组（列表）

你不需要声明变量——AI 会帮你做。你只需要看懂这是什么意思。

条件判断

if (score >= 60) {
  console.log("及格了！");
} else {
  console.log("没及格。");
}

→ 如果分数 ≥60，输出”及格了”；否则”没及格”。

大白话：if (条件) { 条件成立做什么 } else { 不成立做什么 }

函数

函数是一个可重复使用的功能块。

function greet(name) {
  return "你好，" + name + "！";
}

greet("小明");  // → "你好，小明！"
greet("小红");  // → "你好，小红！"

→ 定义一次，到处调用。

操作 DOM（改页面内容）

// 获取页面上的元素
const title = document.querySelector('h1');
const button = document.querySelector('button');

// 修改内容
title.textContent = "新标题";

// 点击按钮时执行
button.addEventListener('click', () => {
  alert('按钮被点击了！');
});

常用操作速查

想做什么	代码
获取元素	`document.querySelector('.类名')`
改文字	`element.textContent = "新文字"`
加/删类名	`element.classList.add('active')`
监听点击	`element.addEventListener('click', fn)`
控制台输出	`console.log('调试信息')`

异步操作（fetch）

从服务器获取数据：

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => {
    console.log(data); // 拿到数据了
  });

→ 就像”去厨房点菜，回来告诉你菜好了”。

在 AI 编程中的应用

你不需要手写 JavaScript！但需要扫一眼知道大概在干什么：

// AI 生成的代码
const button = document.querySelector('#submit');
button.addEventListener('click', async () => {
  const name = document.querySelector('#name').value;
  const result = await fetch('/api/user', {
    method: 'POST',
    body: JSON.stringify({ name })
  });
});

扫一眼理解：

找到了 #submit 按钮
点击按钮时 → 获取输入框的值
发送一个 POST 请求到 /api/user

小结

核心概念：

变量 = 数据盒子
函数 = 可重复用的功能
事件监听 = 用户做了什么 → 执行什么
fetch = 从服务器拿数据

其他细节 → 问 AI。下一篇学习如何与 AI 高效沟通需求。