上一篇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——本篇主角是 logalert 露一面就好。3.2 运行代码的三种方式各自什么时候用控制台敲代码爽是爽但敲完关掉就没了。真工具的代码要存成文件、反复运行、发给别人。JS 代码住进文件有三种住法一次讲全以后不再迷路方式一控制台直接敲随手的草稿纸就是 3.1 的做法不建文件、不保存敲一行执行一行。适合就想试一下这行对不对、拿浏览器当计算器的场景。方式二内嵌进 HTML日常练习的最快形态新建文件我的名片.html敲入!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的名片/title/headbodyh2我的专属名片/h2scriptconsole.log(名片内容在这里打印);/script/body/html保存双击这个 html 文件浏览器打开按 F12 看控制台——那句打印就躺在里面。关键认知HTML 是网页的骨架script标签是骨架上留给 JS 的房间——写进房间的代码页面打开时自动执行。本专栏模块一的日常练习用的都是这个形态。每一个代码文件都一定要记得先 Ctrl S 保存终端跑的是磁盘上的文件不是你编辑器里看到的代码所以未保存磁盘上那份 html 或 js 文件还是空的或旧版会导致运行后什么都没有或运行的代码不对方式三独立 .js 文件 HTML 引用正经工程结构页面大了、代码多了全塞 html 里会越来越乱。工程上的标准做法是分家JS 独立成一个文件HTML 用一行把它请进来。文件夹里放两个文件名片外置.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title名片 · 外置脚本版/title/headbodyh2名片外置脚本版/h2pJS 写在旁边的 名片脚本.js 里本文件用 script 标签把它请进来。/pscriptsrc名片脚本.js/script/body/html名片脚本.jsconsole.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 少了一个 econsole.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名下载!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的专属名片/title/headbodyh2我的专属名片/h2p名片本体在控制台——按 F12 打开 Console 查看。/pscript// 以 // 开头的内容叫注释写给看代码的人浏览器完全无视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% 的坑都在这报错 1Uncaught SyntaxError: Invalid or unexpected token——中文标点中国新手第一大坑console.log你好原因代码里的逗号、引号、括号必须是英文半角混进中文全角标点就报这个错。翻译过来是碰到了一个我看不懂的记号token“——它不告诉你是哪个字符但行号会给。解决写代码时输入法切到英文状态或开启中文时使用英文标点”去报错点名的行里专找中文标点。console.log“你好” 错误是因为用了中文的正确应该为英文的()报错 2Uncaught SyntaxError: missing ) after argument list——括号或引号没配对console.log(你好 console.log(你好浏览器)原因(开了没关、或引号开了没关。报错说缺右括号解决数一数该行的引号和括号是否成对、左右是否都是英文符号。console.log(“你好” 错误是因为右挎号是中文导致英文 () 没成对改英文的 ) 即可console.log(“你好”浏览器) 错误是因为中间的 是中文导致英文 () 被中文隔断没成对改英文 , 即可报错 3Uncaught ReferenceError: consloe is not defined——名字拼错原因console 拼成 consloe、alert 拼成 alret。JS 严格区分大小写Console、CONSOLE都不等于console。解决重新查询对应命令语法的准确单词后再试报错 4控制台不让粘贴代码Warning: Don’t paste code…原因浏览器的防诈骗设计——曾有骗子诱导受害者在控制台粘贴恶意代码所以默认拦截一切粘贴。你自己的代码当然可以粘。解决按提示输入allow pasting回车解锁再重新粘贴不同浏览器提示词可能略有差别以弹出的文案为准。报错 5改了代码页面没变化 / 输出还是老样子原因三连问——保存了吗刷新了吗开的是这个文件吗VS Code 里改完没按 CtrlS浏览器还停在旧页面没刷新或者双击打开的是别的同名文件。解决CtrlS→CtrlR两连招再不行就核对地址栏路径。这是网页开发要用一辈子的肌肉记忆从今天开始练。七、练习作业改造名片把名片里的代号、身份、宣言换成你自己的信息跑出来截图发评论区控制台当计算器F12 → Console算一下2026 - 1998或任何你好奇的算式再试试哈.repeat(10)故意制造一个报错本篇最重要的一题把名片代码里任意一个 console 改成 consloe刷新页面按三段式写出错误类型是什么在第几行点行号链接验证一下怎么改写在评论区——能给别人讲清楚报错的人永远不会怕报错选做把星星树加高到 7 层或者用 repeat 拼接打印一个你自己的图案做出来的同学模块五我们会让你在网页上画出真正的数据图表。准备篇收官接下来是基础篇三篇下来你已经做到认清 JS 的两个世界、装好双环境、写出第一行代码、能独立读懂报错——这已经超过了大多数收藏了教程但从没打开的人。接下来进入模块一 · 基础篇我们不再满足于让浏览器说话而是教它记住数据、做出判断、自动重复——第 12 篇你会拥有第一个真正的工具文本百宝箱。专栏正在连载——点个关注不迷路每篇更新都会推到你主页中途关注前面的篇目一样能看。第 3 篇见。下一篇预告《03 变量与数据类型给数据贴标签》——为什么程序需要变量数字和文字在浏览器眼里有什么本质区别