← 返回目录

2. 三种书写位置与 console 详解

代码写在哪儿、怎么写备忘、怎么把结果"打小票"看？这三件事是写代码的基本功。

核心三步：
① <script> 标签——代码写在 HTML 里的位置
② console.log()——把结果打到控制台看
③ 注释 // 和 /* */——写备忘不执行

坑：忘加分号、字符串没加引号。

2.1 互动演示

点按钮，看 console 小票逐条亮。

2.2 知识点逐条讲解（配合代码）

① JS 代码写在哪儿？三种位置

就像你学英语可以写在课本上、笔记本上、单独的本子上，JS 代码也有三个家。跟 CSS 的引入思路很像：

// 1. 行内式：直接写在按钮的"事件属性"里（写着玩可以，正式项目别用）
<input type="button" value="点我" onclick="alert('Hello')" />
// 点一下这个按钮，就会执行 onclick 后面引号里的代码

// 2. 内嵌式：用一对 <script> 把代码包在页面里（课堂常用）
// 记住：放到 body 最底下，等网页元素都加载好了再跑
<body>
  <div>内容</div>
  <script>
    alert('Hello World');
  </script>
</body>

// 3. 外部式：代码单独存成一个 .js 文件，再用 src 引进来（正式项目首选）
<script src="./my.js"></script>
// src = "文件路径"，告诉浏览器去哪个文件拿代码

如果你在同一个 script 标签里又写了 src、又在里面夹了代码，浏览器就会只认 src、把里面夹的代码全忽略，因为它以为你要去外部文件拿。这俩只能二选一，新手常踩。

写法优点缺点什么时候用
行内式一行写完，省事网页和代码缠在一起，乱小 demo
内嵌式集中在一起，好调试只能这一个页面用课堂学习
外部式干干净净、多个页面共用多一个文件正式开发

② 注释：写给人看，电脑跳过

注释就是代码里的"悄悄话/备忘"，浏览器看到它直接跳过不执行。写注释是好习惯，半个月后你自己都看不懂没注释的代码。

// 这是单行注释，快捷键 Ctrl + /（光标放哪行按一下就注释）
let num = 10;

/*
这是多行块注释
可以写一大段说明
快捷键 Shift + Alt + A
*/
let name = "前端学员";

③ console 全家桶：前端的"打印小票机"

写代码经常要"看看中间结果对不对"，就像算账要打一张小票。按 F12 或 Ctrl+Shift+I 打开开发者工具，切到 Console（控制台）面板，就是看小票的地方。打印出来不挡着代码往下跑。

// 普通小票，白色字
console.log("Hello JS");

// 先准备一个数字，等下打印用
let age = 18;
// 一次打好几样，用逗号隔开，浏览器自动在中间加空格
console.log("姓名：", name, "年龄：", age);

// 黄色小票：警告
console.warn("库存不足");
// 红色小票：出错了
console.error("网络请求失败");

// count：记一下"这行代码被执行了几次"，适合循环/点按钮时用
// 第一次打印 1，再调一次打印 2
console.count("执行次数");

// time / timeEnd：掐表，看一段代码跑了多少毫秒
// 开始掐表（起个名字）
console.time("循环耗时");
// 跑一万次空循环
for (let i = 0; i < 10000; i++) {}
// 停表，打印用了多少毫秒
console.timeEnd("循环耗时");

如果你 time 起名叫 "循环耗时"、timeEnd 却写成了 "循环用时"，两个名字对不上，浏览器就不知道停哪块表，因为它是靠一模一样的名字配对的。作业里让你"一条语句打三个变量"，练的就是逗号分隔多参数。

实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：写小 demo 用内嵌；正式项目把代码抽成 main.js 外部引入；调试时用 console.log 看中间值。

② 常见的问题：点按钮没反应，F12 一看满屏红；或者 src 路径写错，js 文件直接 404 没加载到。

③ 解决思路：F12 打开 Console 看第一条红色报错；切到 Network 看那个 js 文件是不是 404。

一句话记住：代码写哪儿？外部式首选、放 body 最底下、src 和内部代码二选一；看结果按 F12 进 Console，log/warn/error/count/time 就是那台打印小票机。

本页重点

API作用参数返回值代码示例
console.log打普通小票（白色字）任意个值undefinedconsole.log("你好", 123);
console.warn打警告小票（黄色字）任意个值undefinedconsole.warn("注意啦");
console.error打错误小票（红色字）任意个值undefinedconsole.error("出错了");
console.count数同一段代码被执行几次标签名本次次数console.count("次数");
console.time / timeEnd掐表算一段代码跑了多久同名标签耗时毫秒数console.time("t");
console.timeEnd("t");