JavaScript 入门-平芜编程栈

一、先搞定运行环境（零配置，新手友好）

JavaScript 最棒的一点是无需安装任何软件，浏览器就是你的 “编程实验室”，两步就能开始写代码：

打开任意浏览器（Chrome/Edge/Firefox），按F12打开「开发者工具」，切换到「Console（控制台）」标签；
直接在控制台输入console.log("你好，JS入门！")，按回车就能看到输出，这就是你写的第一行 JS 代码！

如果想写完整的代码文件（更接近实际开发），只需：

新建一个文本文档，改后缀为index.html；
用记事本 / VS Code 打开，写入下面的基础模板（复制即可）：

html

预览

<!DOCTYPE html> <html> <head> <title>JS入门</title> </head> <body> <!-- JS代码写在script标签里 --> <script> // 这是注释，不会执行，用来写说明 console.log("我的第一个JS文件！"); </script> </body> </html>

双击文件，用浏览器打开，按F12看控制台，就能看到输出结果。

二、新手必学的核心知识点（循序渐进）

我把 JS 入门最核心的知识点拆成 5 个模块，每个模块配 “极简代码示例 + 解释”，新手能直接复制运行：

1. 变量与数据类型（存储数据的 “容器”）

核心：用let声明变量（新手别用var，容易踩坑），JS 常见类型：数字、字符串、布尔值。

javascript

运行

// 声明变量并赋值 let age = 18; // 数字类型 let name = "小明"; // 字符串（必须加引号） let isStudent = true; // 布尔值（只有true/false） // 输出变量 console.log(name); // 输出：小明 console.log(age + 2); // 输出：20

2. 条件判断（让代码 “做选择”）

核心：if/else语句，满足条件执行对应代码，新手重点理解===（严格相等，避免类型坑）。

javascript

运行

let score = 85; if (score >= 90) { console.log("优秀"); } else if (score >= 80) { console.log("良好"); } else { console.log("继续努力"); } // 输出：良好

3. 循环（让代码 “重复做事”）

核心：for循环（固定次数）、while循环（满足条件就执行），新手先掌握for循环。

javascript

运行

// 打印1到5 for (let i = 1; i <= 5; i++) { console.log(i); // 依次输出：1 2 3 4 5 } // 计算1到100的和 let sum = 0; let num = 1; while (num <= 100) { sum = sum + num; num++; } console.log(sum); // 输出：5050

4. 函数（封装重复代码）

核心：把重复用的代码封装成函数，调用时只需写函数名，新手重点理解 “参数” 和 “返回值”。

javascript

运行

// 定义一个计算两数之和的函数 function add(a, b) { return a + b; // 返回计算结果 } // 调用函数 let result = add(3, 5); console.log(result); // 输出：8

5. 简单 DOM 交互（让代码控制网页，新手最有成就感）

核心：JS 操作网页元素（比如点击按钮、修改文字），这是 JS 独有的优势，能立刻看到可视化效果。

html

预览

<!-- 完整示例，复制到html文件运行 --> <!DOCTYPE html> <html> <body> <!-- 网页上的按钮和文字 --> <button id="btn">点击我</button> <p id="text">初始文字</p> <script> // 获取网页元素 let btn = document.getElementById("btn"); let text = document.getElementById("text"); // 给按钮加点击事件 btn.onclick = function() { text.textContent = "你点击了按钮！"; // 修改文字 text.style.color = "red"; // 改文字颜色 }; </script> </body> </html>

运行后点击按钮，网页文字会变内容、变颜色，这就是新手能快速做出的 “可视化成果”！