在当今数字化的时代，网页不再仅仅是静态的展示页面，而是充满了各种交互功能，让用户能够更好地参与和体验。Javascript 作为网页设计中不可或缺的脚本语言，赋予了网页动态和交互性的灵魂。今天，我们将通过一个简单的案例来学习如何运用 Javascript 实现基础的网页交互功能。
一、案例背景与目标
我们的案例是一个简单的用户登录页面。当用户输入用户名和密码后，点击登录按钮，页面将进行验证，如果用户名和密码正确，将弹出欢迎消息；如果错误，将显示错误提示。通过这个案例，我们将学习如何获取网页元素、处理用户输入、进行条件判断以及使用弹窗与用户进行交互。
二、HTML 结构搭建
首先，我们来构建登录页面的 HTML 结构。创建一个基本的 HTML 文件，包含一个表单（form），表单中有两个输入框（input）分别用于用户名和密码，以及一个提交按钮（button）。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Login Page</title><style>/* 简单的样式，使页面看起来更整齐 */form {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;}label {display: block;margin-bottom: 5px;}input {width: 100%;padding: 8px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 3px;}button {background-color: #4CAF50;color: white;padding: 10px 15px;border: none;border-radius: 3px;cursor: pointer;}</style>
</head><body><form id="loginForm"><label for="username">Username:</label><input type="text" id="username" required><label for="password">Password:</label><input type="password" id="password" required><button type="submit">Login</button></form><script src="script.js"></script>
</body></html>
在上述代码中，我们为表单设置了一个 id 为 “loginForm”，以便在 Javascript 中能够方便地获取到它。输入框分别设置了 id 为 “username” 和 “password”，并且添加了 “required” 属性，确保用户必须填写这两个字段。
三、Javascript 功能实现
接下来，我们在一个名为 “script.js” 的文件中编写 Javascript 代码来实现登录验证功能。
// 获取登录表单元素
const loginForm = document.getElementById('loginForm');
// 获取用户名和密码输入框元素
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');// 为登录表单添加提交事件监听器
loginForm.addEventListener('submit', function (e) {// 阻止表单的默认提交行为e.preventDefault();// 获取用户输入的用户名和密码const username = usernameInput.value;const password = passwordInput.value;// 假设正确的用户名和密码const correctUsername = 'admin';const correctPassword = '123456';// 进行验证if (username === correctUsername && password === correctPassword) {// 如果正确，弹出欢迎消息alert('Welcome, ' + username + '!');} else {// 如果错误，显示错误提示alert('Invalid username or password. Please try again.');}
});在这段代码中，我们首先使用 “document.getElementById” 方法获取了登录表单、用户名输入框和密码输入框的元素。然后，为登录表单添加了一个 “submit” 事件监听器，当用户点击提交按钮时，该事件将被触发。在事件处理函数中，我们使用 “e.preventDefault ()” 阻止了表单的默认提交行为，因为我们要自己处理登录验证逻辑。接着，获取了用户在输入框中输入的用户名和密码，并与预先设定的正确用户名和密码进行比较。如果匹配成功，使用 “alert” 函数弹出欢迎消息；如果匹配失败，则弹出错误提示。
通过这个简单的案例，我们初步了解了如何使用 Javascript 与 HTML 元素进行交互，获取用户输入并进行简单的逻辑判断，从而实现了基础的网页交互功能。这只是 Javascript 在网页设计中应用的冰山一角，后续我们将进一步深入学习更多复杂和强大的功能，让我们的网页更加生动和智能。