本博文总结：
JavaScript 书写位置：
- 内部
- 外部
- 行内
注意事项：
- 书写的位置尽量写到
</body>之前 - 外部 js 标签中间不写任何内容，因为不予以展示
正文：
交互效果示例
一个简单的交互效果示例；
<head>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
let bts = document.querySelectorAll('button')
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.pink').className = ''
this.className = 'pink'
})
}
</script>
</body>
JavaScript 书写位置
JS 有三种书写位置：
- 行内 JavaScript；
- 内部 JavaScript；
- 外部 JavaScript；
内部 JavaScript
描述： 直接写在 html 文件里，用 script 标签包住。
规范： script 标签写在 <\body> 上面。
<body>
<!-- 内部js -->
<script>
// 页面弹出警示框
alert('你好,js')
</script>
</body>
外部 JavaScript
描述： 代码写在以 .js 结尾的文件里。
规范： 通过 script 标签，引入到 html 页面中。
<body>
<!-- 通过src引入外部js文件 -->
<script src="my.js">
// 中间不写内容
</script>
</body>
alert('我是外部的js文件')
行内 JavaScript
描述： 代码写在标签内部。
注意： 后期 Vue 框架使用这种模式。
<body>
<button onclick="alert('hi~')">点击我</button>
</body>
