【JS 基础】3 种 JavaScript 代码编写位置，新手必看！
【JS基础】3种JavaScript代码编写位置，新手必看！
在前端开发中，JavaScript 作为核心脚本语言，代码写在哪里直接影响页面运行逻辑和开发体验。今天就给大家系统梳理 JavaScript 代码最常见的 3 种编写位置，尤其适合刚入门的小伙伴理解和掌握～
一、内嵌 <script> 标签（最基础的写法）
这是最直观的方式：在 HTML 文件中直接嵌入 <script></script> 标签对，把 JS 代码写在标签内部。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码编写位置_内嵌标签</title>
<style>
/* 页面整体居中布局 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: Arial, sans-serif;
}
/* 容器样式 */
div { text-align: center; }
/* 按钮美化 */
#btn {
width: 200px;
height: 50px;
border: none;
border-radius: 25px;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
transition: all 0.3s ease;
outline: none;
}
#btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6);
background: linear-gradient(45deg, #ee5a24, #ff6b6b);
}
#btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(238, 90, 36, 0.4);
}
</style>
</head>
<body>
<div>
<button id="btn">点击按钮</button>
</div>
<!-- JS代码写在这里 -->
<script>
// 获取按钮元素
var btn = document.getElementById('btn');
// 给按钮添加点击事件
btn.addEventListener('click', function () {
alert('===> 二等小饼干 <=== 点击了按钮');
console.log('===> 二等小饼干 <=== 点击了按钮');
})
</script>
</body>
</html>
关键注意点
虽然 <script> 标签理论上可以放在 HTML 文件的任意位置（<head> 里、<body> 开头/结尾都能运行），但强烈建议写在 <body> 标签内所有元素的后面！
原因很简单：
- JS 代码执行会阻塞 HTML 标签加载，放在后面能保证页面元素先加载完成，避免页面卡顿；
- 能直接获取到页面元素（比如示例中的按钮），不会出现“代码执行了，但元素还没加载，获取不到”的问题。
💡 小知识点：
- HTML4.01 标准中，
<script>标签需要加type="text/javascript"声明类型：<script type="text/javascript"> // JS代码 </script> - HTML5 标准中，
type属性可以省略，直接写<script></script>即可。
二、外部 JS 文件引入（开发首选）
这种方式实现了 HTML 和 JS 代码的分离，是实际开发中最常用的写法：先把 JS 代码单独写在 .js 文件里，再通过 <script> 标签的 src 属性引入。
操作步骤
- 新建
index.js文件，把第一种方式里<script>标签内的代码复制进去：// index.js 文件内容 var btn = document.getElementById('btn'); btn.addEventListener('click', function () { alert('===> 二等小饼干 <=== 点击了按钮'); console.log('===> 二等小饼干 <=== 点击了按钮'); }) - 在 HTML 文件中通过
src引入该文件：<!-- 放在<body>末尾，和第一种方式位置一致 --> <script src="js/index.js"></script>
优势
- 代码分离：HTML 负责结构、JS 负责交互，代码更清晰，便于维护；
- 可复用：同一个 JS 文件可以被多个 HTML 页面引入，减少重复代码；
- 缓存友好：浏览器会缓存外部 JS 文件，提升后续页面加载速度。
三、标签内直接写事件（不推荐）
第三种方式是把 JS 代码直接写在 HTML 标签的事件属性里（比如 onclick、onmouseenter）。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码编写位置_标签内事件</title>
<style>
/* 样式和第一种方式一致，省略 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: Arial, sans-serif;
}
div { text-align: center; }
.btn {
width: 200px;
height: 50px;
border: none;
border-radius: 25px;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
transition: all 0.3s ease;
outline: none;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6);
background: linear-gradient(45deg, #ee5a24, #ff6b6b);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(238, 90, 36, 0.4);
}
</style>
</head>
<body>
<div>
<button onclick="alert('===> 二等小饼干 <=== 点击了按钮')" class="btn">点击按钮</button>
<button onmouseenter="alert('===> 二等小饼干 <=== 鼠标移入了按钮')" class="btn">鼠标移入按钮</button>
</div>
</body>
</html>
为什么不推荐？
- 代码耦合严重：HTML 结构和 JS 交互逻辑混在一起，可读性差；
- 维护成本高：如果要修改交互逻辑，需要在 HTML 标签里找代码，量大时极易出错；
- 不利于复用：代码只能作用于当前标签，无法批量复用。
总结
- 内嵌
<script>标签：适合小demo、临时测试，注意放在<body>末尾； - 外部 JS 文件引入：实际开发首选，实现代码分离，便于维护和复用；
- 标签内写事件：仅了解即可，项目中尽量避免使用。
掌握这三种写法的区别和适用场景，能让你在前端开发中更规范地编写 JS 代码，也为后续学习更复杂的前端工程化打下基础。
浙公网安备 33010602011771号