网页js脚本怎么用

```html

打开浏览器按F12，网页切到Console面板，脚本敲一行 document.body.style.background = 'black'，网页回车。脚本整个页面瞬间变黑。网页这就是脚本JS脚本最直接的用法——你不需要搭建任何环境，浏览器自带解释器，网页控制台就是脚本你的草稿纸。

很多人以为JS必须嵌在HTML里才能跑。网页其实不然。脚本控制台里执行的网页代码和页面里加载的脚本共享同一个运行时，操作的脚本是同一个DOM。区别只在于：控制台里的网页代码刷新就没了，页面里的脚本脚本会跟着HTML一起加载。

把脚本塞进HTML的网页两种姿势

最传统的方式是直接在HTML里写 <script> 标签。比如：

<script> alert('页面加载完了'); </script>

这行代码放在 <body> 末尾最稳妥。放 <head> 里也行，但脚本执行时DOM还没解析完，document.getElementById 会返回null。我见过太多新手卡在这里，对着控制台的报错发呆。

另一种方式是外链：<script src="app.js"></script>。文件里直接写JS，不用包 <script> 标签。浏览器遇到这个标签会暂停解析HTML，先去下载并执行JS文件，然后再继续。如果不想阻塞页面渲染，加上 defer 或 async 属性。defer保证按顺序在DOM解析完后执行，async则是下载完就执行，顺序不保证。我一般用defer，省心。

脚本到底能干什么

操作DOM是最常见的。比如你有个按钮：

<button id="btn">点我</button> <p id="msg"></p> <script> const btn = document.getElementById('btn'); const msg = document.getElementById('msg'); btn.addEventListener('click', () => {  msg.textContent = '你点了按钮，时间是' + new Date().toLocaleTimeString(); }); </script>

这段代码做了三件事：找到按钮和段落元素，给按钮绑定点击事件，点击后修改段落文字。没有框架，没有构建工具，浏览器直接跑。

除了DOM，JS还能发网络请求。fetch('/api/data') 返回一个Promise，用 .then 或 await 拿结果。我经常在控制台里直接fetch接口，看返回的JSON结构，比开Postman快多了。

脚本加载的时机问题

有个坑我踩过好几次。页面里有个 <script> 在 <head> 里，代码里写 document.querySelector('.container')，结果报null。原因很简单：脚本执行时 .container 还没被解析出来。解决办法要么把脚本移到 </body> 前面，要么用 DOMContentLoaded 事件包一层：

document.addEventListener('DOMContentLoaded', () => {  // 这里放心操作DOM });

现代浏览器对 defer 的支持很好，外链脚本加上它，就不用操心这个顺序问题。内联脚本没这个待遇，只能靠位置或事件来保证。

模块化不是必须的

写个小脚本，真没必要上webpack。一个 <script type="module"> 就能用 import 和 export。比如：

<script type="module"> import {  formatDate } from './utils.js'; console.log(formatDate(new Date())); </script>

浏览器原生支持ES模块，只是注意模块脚本默认是defer的，而且需要服务器环境（file:// 协议下会报CORS错误）。本地开发起个 python -m http.server 就行。

脚本这东西，写多了就发现核心就三件事：选元素、绑事件、改内容。剩下的都是围绕这三件事的工程化包装。别被那些花哨的框架吓住，打开控制台敲几行，比看十篇教程都管用。