JavaScript入门代码示例：轻松上手网页交互脚本

家里刚装了新路由器，手机连上Wi-Fi，打开浏览器想看看网速怎么样。这时候你可能没注意到，ref="/tag/88/" style="color:#874873;font-weight:bold;">网页上那个实时刷新的“当前连接设备数”提示，背后很可能就是一段简单的 JavaScript 在工作。

什么是JavaScript？

JavaScript 是让网页“活”起来的语言。比如你点一下按钮，页面内容变了，或者弹出个提示框，这都是它在起作用。它不需要复杂的开发环境，浏览器就能直接运行。

第一个JavaScript例子：弹个窗说你好

打开浏览器的开发者工具（一般按F12），在控制台（Console）里输入下面这行代码：

alert('欢迎来到智用生活！');

回车后，你会看到一个弹窗。这就是最基础的 JavaScript 语句，用来提醒用户信息。

让网页自己动起来：定时更新内容

假设你想做个简单的网络状态提示页，每5秒检查一次连接状态。可以用 setInterval 来实现周期性操作：

<p id="status">正在检查网络...</p>
<script>
let count = 0;
setInterval(function() {
  count++;
  document.getElementById('status').innerText = '已连接设备数：' + count;
}, 5000);
</script>

这段代码会每隔5秒更新一次页面上的文字。虽然这里只是模拟数字递增，但思路和真实路由器管理界面是一样的。

点击按钮触发动作

加个按钮，让用户手动刷新状态。HTML 和 JavaScript 配合起来特别简单：

<button onclick="refreshStatus()">刷新网络状态</button>
<p id="result"></p>

<script>
function refreshStatus() {
  const time = new Date().toLocaleTimeString();
  document.getElementById('result').innerText = '最后一次检查：' + time;
}
</script>

点一下按钮，页面就会显示当前时间。这种交互方式在各种管理后台都很常见。

获取用户输入并反馈

有时候你需要让用户填点信息，比如设置Wi-Fi名称。可以用 prompt 获取输入：

<script>
const ssid = prompt('请输入新的Wi-Fi名称：');
if (ssid) {
  alert('已设置Wi-Fi名称为：' + ssid);
} else {
  alert('设置取消');
}
</script>

当然，真实场景中不会这么简单，但这是理解用户交互的第一步。

小技巧：避免页面卡顿

如果代码里有个死循环，整个网页就卡住了。比如：

while(true) {
  console.log('停不下来了');
}

这种代码会让浏览器忙于执行，无法响应其他操作。实际使用时要格外小心循环条件。