AI智能体如何革新数据交易流通与治理
2026/9/12 21:15:19
上一篇：01 搭建环境
一、场景引入：从"看别人写"到"我说的它照做"
上一篇我们点亮了 JS 的两个世界，这一篇正式开火。
学编程和学其他技能最大的不同是：你写的每一个字，浏览器都会立刻给你反馈。你让它说句话，它就说；你打错了字，它会用红字告诉你哪里错了。这种"我指挥、它执行"的即时感，就是编程让人上瘾的地方。
本篇只做三件事：让浏览器开口说话（console.log）、知道 JS 代码怎么跑起来（三种方式）、以及最重要的——第一次见到红色报错时不慌。把报错当敌人的人学不会编程，把报错当线索的人三天就能入门。
二、本篇目标
- 会用
console.log让浏览器打印任何内容（顺带认识alert弹窗）； - 掌握运行 JS 的三种方式，并知道各自什么时候用；
- 给你一段故意写错的代码，你能按"三段式"读出报错在说什么。
全程不需要任何编程基础，跟着敲就行。
三、知识点讲解
3.1 console.log：让浏览器开口说话
F12 打开控制台，光标点进最底部的输入行，敲下这一行，回车：
console.log("你好，浏览器")下面立刻输出你好，浏览器。这就是你的第一行代码。恭喜，从现在起你说的"话"，浏览器照做。
三条立刻要建立的认知：
- 引号里的内容原样输出。
"你好，浏览器"换成"hello world"就打印 hello world。引号本身不会打出来——它是你告诉浏览器"这是一段文字"的记号，不是内容； - 一个 console.log 占一行。想输出三行就写三条；
- 括号和引号必须成对出现。写完
console.log("之后，结尾的")少一个都不行——本篇报错高发区，第六节见。
再学一个马上能用的小技巧——repeat 重复术：
console.log("=".repeat(30))输出 30 个等号，不用真的敲 30 下键盘。打印分隔线、装饰框，全靠它。
顺带认识第二位说话的选手alert（弹窗）：
alert("注意：这是弹窗喊话")两位的区别一句话：console.log 是写给开发者看的（日志本），alert 是喊给页面上的人听的（大喇叭）。调试用 log，正式通知用 alert——本篇主角是 log，alert 露一面就好。
3.2 运行代码的三种方式（各自什么时候用）
控制台敲代码爽是爽，但敲完关掉就没了。真工具的代码要存成文件、反复运行、发给别人。JS 代码住进文件有三种住法，一次讲全，以后不再迷路：
方式一：控制台直接敲（随手的草稿纸）
就是 3.1 的做法：不建文件、不保存，敲一行执行一行。适合"就想试一下这行对不对"、拿浏览器当计算器的场景。
方式二：内嵌进 HTML（日常练习的最快形态）
新建文件我的名片.html，敲入：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的名片</title></head><body><h2>我的专属名片</h2><script>console.log("名片内容在这里打印");</script></body></html>保存，双击这个 html 文件，浏览器打开；按 F12 看控制台——那句打印就躺在里面。
关键认知：HTML 是网页的骨架，<script>标签是骨架上留给 JS 的房间——写进房间的代码，页面打开时自动执行。本专栏模块一的日常练习，用的都是这个形态。
（每一个代码文件都一定要记得先 Ctrl + S 保存，终端跑的是磁盘上的文件，不是你编辑器里看到的代码，所以未保存磁盘上那份 html 或 js 文件还是空的（或旧版）会导致运行后什么都没有或运行的代码不对！）
方式三：独立 .js 文件 + HTML 引用（正经工程结构）
页面大了、代码多了，全塞 html 里会越来越乱。工程上的标准做法是分家：JS 独立成一个文件，HTML 用一行把它请进来。文件夹里放两个文件：
名片外置.html：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>名片 · 外置脚本版</title></head><body><h2>名片（外置脚本版）</h2><p>JS 写在旁边的 名片脚本.js 里，本文件用 script 标签把它请进来。</p><scriptsrc="名片脚本.js"></script></body></html>名片脚本.js：
console.log("外置脚本，照样能跑");console.log("=".repeat(36));文件夹里双击 html 运行，或直接在 VS Code 里的 html 文件界面点球形图标（注意：永远双击 html，不双击 js——01 篇报错 2 那个 WSH 报错框的坑还记得吧），F12 看控制台，照样出结果。
两种文件的关系一句话：HTML 是入口，JS 是剧本——观众从入口进场，入口负责把剧本请上舞台。模块一里练习用方式二，小项目用方式三。
三种方式一张表记牢：
| 方式 | 怎么跑 | 适合干什么 |
|---|---|---|
| 控制台敲 | F12 → Console | 随手试验、当计算器 |
| HTML 内嵌 | <script>写进 html，双击打开 | 日常练习、快速小工具 |
| 独立 js 文件 | html 里<script src>引用 | 正经项目（代码多时分家） |
（其实还有第四种——01 篇你已经在命令行里用node跑过体检脚本。那是 Node 世界的方式、模块四的主场，现在先按下不表。）
3.3 读懂报错：Console 里的红色求救信
新手最大的心理关不是语法，是 Console 里那行红字。先纠正心态：报错不是"你失败了"，而是浏览器在说"我想执行但卡在这一行，这是线索"。职业前端每天要看几十个报错，读报错本身就是编程技能的一部分。
来看一段故意写错的代码（console 少了一个 e）：
console.log("第一行：一切正常");consloe.log("第二行：这行有错");把它写进 html 的 script 标签里，保存、刷新页面，Console 显示：
第一行：一切正常 错误测试.html:12 Uncaught ReferenceError: consloe is not defined at 错误测试.html:12:5从这封"求救信"里读出三段信息：
红字（最先看）：错误类型 + 说明。
Uncaught ReferenceError: consloe is not defined——“叫 consloe 的东西不存在”。拆开看：Uncaught＝没被接住、当场摔出来的错；ReferenceError＝引用了一个不存在的名字。较新版的 Chrome/Edge 还会贴心地补一句Did you mean 'console'?——对，就是它；at 后面：文件和行号。
错误测试.html:12:5——第 12 行。点击这个行号，DevTools 会直接跳到源码面板、高亮出错那行——比自己数行号快得多，这是浏览器世界送你的报错导航；报错上方：已打印的内容。"第一行：一切正常"出来了，说明代码是一行行往下执行的，走到第 2 句才摔倒——"逐行执行"这个认知，是你以后理解程序一切行为的基础。
和命令行世界一个大差别，要提前打好预防针：网页不会因为报错而崩溃。页面照常显示，红字只在 Console 里静静躺着——这种"表面正常、内里出错"的现象叫静默失败。所以职业前端干活时永远开着 F12；从今天起你也养成这个习惯：页面行为不对劲，第一反应不是刷新重开，是打开 Console 看红字。
记住读报错的口诀：先看红字，再点行号，别被一串英文吓退。
四、完整实战：我的专属名片
现在把本篇知识拼成第一件完整作品。新建我的名片.html，复制以下全部代码（或者直接点击前面的html名下载）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的专属名片</title></head><body><h2>我的专属名片</h2><p>名片本体在控制台——按 F12 打开 Console 查看。</p><script>// 以 // 开头的内容叫注释：写给看代码的人，浏览器完全无视console.log("=".repeat(36));console.log(" 我 的 专 属 名 片");console.log("=".repeat(36));console.log("代号：凌星宇");console.log("身份：JS 学习者（第 2 天）");console.log("宣言：39 篇之后，让网页替我干活");console.log("-".repeat(36));console.log(" 今天学会的第一招：");console.log(" 我说什么，浏览器就打印什么");console.log("=".repeat(36));// 星星树：空格 + 星号，用 repeat 拼出来console.log(" ".repeat(12)+"*");console.log(" ".repeat(11)+"***");console.log(" ".repeat(10)+"*****");console.log(" ".repeat(9)+"*******");console.log(" ".repeat(8)+"*********");// 最后用 alert 通知"页面上的人"：名片发好了alert("名片已发往控制台！按 F12 打开 Console 查看");</script></body></html>双击打开：先弹 alert 欢迎你，关掉弹窗，按 F12——名片和星星树都在控制台等你。
代码里三个新面孔：
//注释：写给（以后读代码的）你看的备忘，浏览器完全无视。代码一长，用注释给自己留路标是专业习惯；+拼接：字符串可以用加号首尾相连——" ".repeat(12) + "*"就是"12 个空格后面接 1 个星号"；- 星星树的"笨办法"：每行都是空格把星星往中间推。这恰恰说明电脑没有魔法，只有精确——你给的每一个字符（包括空格）都算数。
五、运行效果
Console 输出：
==================================== 我 的 专 属 名 片 ==================================== 代号：凌星宇 身份：JS 学习者（第 2 天） 宣言：39 篇之后，让网页替我干活 ------------------------------------ 今天学会的第一招： 我说什么，浏览器就打印什么 ==================================== * *** ***** ******* *********跑出来的同学，把你的名片截图发在评论区——这是你的第一件作品，值得留念。
六、常见报错与排查（新手第一周 90% 的坑都在这）
报错 1：Uncaught SyntaxError: Invalid or unexpected token——中文标点（中国新手第一大坑）
console.log（"你好"）
原因：代码里的逗号、引号、括号必须是英文半角，混进中文全角标点就报这个错。翻译过来是"碰到了一个我看不懂的记号（token）“——它不告诉你是哪个字符，但行号会给。
解决：写代码时输入法切到英文状态，或开启"中文时使用英文标点”；去报错点名的行里专找中文标点。
console.log（“你好”） 错误是因为：用了中文的（），正确应该为英文的：()
报错 2：Uncaught SyntaxError: missing ) after argument list——括号或引号没配对
console.log("你好"） console.log("你好"，浏览器)原因：(开了没关、或引号开了没关。报错说"缺右括号"，
解决：数一数该行的引号和括号是否成对、左右是否都是英文符号。
console.log(“你好”） 错误是因为：右挎号是中文导致英文 () 没成对，改英文的 ) 即可
console.log(“你好”，浏览器) 错误是因为：中间的 ，是中文，导致英文 () 被中文隔断没成对，改英文 , 即可
报错 3：Uncaught ReferenceError: consloe is not defined——名字拼错
原因：console 拼成 consloe、alert 拼成 alret。JS 严格区分大小写：Console、CONSOLE都不等于console。
解决：重新查询对应命令语法的准确单词后再试
报错 4：控制台不让粘贴代码（Warning: Don’t paste code…）
原因：浏览器的防诈骗设计——曾有骗子诱导受害者在控制台粘贴恶意代码，所以默认拦截一切粘贴。你自己的代码当然可以粘。
解决：按提示输入allow pasting回车解锁，再重新粘贴（不同浏览器提示词可能略有差别，以弹出的文案为准）。
报错 5：改了代码，页面没变化 / 输出还是老样子
原因：三连问——保存了吗？刷新了吗？开的是这个文件吗？VS Code 里改完没按 Ctrl+S；浏览器还停在旧页面没刷新；或者双击打开的是别的同名文件。
解决：Ctrl+S→Ctrl+R两连招，再不行就核对地址栏路径。这是网页开发要用一辈子的肌肉记忆，从今天开始练。
七、练习作业
- 改造名片：把名片里的代号、身份、宣言换成你自己的信息，跑出来截图发评论区；
- 控制台当计算器：F12 → Console，算一下
2026 - 1998（或任何你好奇的算式），再试试"哈".repeat(10)； - 故意制造一个报错（本篇最重要的一题）：把名片代码里任意一个 console 改成 consloe，刷新页面，按"三段式"写出：错误类型是什么？在第几行（点行号链接验证一下）？怎么改？写在评论区——能给别人讲清楚报错的人，永远不会怕报错；
- 选做：把星星树加高到 7 层；或者用 repeat + 拼接打印一个你自己的图案（做出来的同学，模块五我们会让你在网页上画出真正的数据图表）。
准备篇收官，接下来是基础篇
三篇下来你已经做到：认清 JS 的两个世界、装好双环境、写出第一行代码、能独立读懂报错——这已经超过了大多数"收藏了教程但从没打开"的人。
接下来进入模块一 · 基础篇：我们不再满足于让浏览器"说话"，而是教它记住数据、做出判断、自动重复——第 12 篇你会拥有第一个真正的工具：文本百宝箱。
专栏正在连载——点个关注不迷路，每篇更新都会推到你主页；中途关注，前面的篇目一样能看。
第 3 篇见。
下一篇预告：《03 变量与数据类型：给数据贴标签》——为什么程序需要"变量"？数字和文字在浏览器眼里有什么本质区别？