上一篇
html中js代码
在HTML中嵌入JavaScript可通过`
标签实现，支持内联（直接写代码）、内部（ / 中）及外部引用（src=”path”`），需注意语法规范与浏览器兼容性，如旧版IE需用
嵌入方式
| 类型 | 示例代码 | 说明 |
|---|---|---|
| 内联脚本（直接在HTML标签中） | <script>alert("Hello");</script> | 直接在HTML中编写JS代码，通常用于简单交互 |
内部脚本（<head>或<body>中） | <script>document.title = "新标题";</script> | 在HTML文件内部集中编写JS代码 |
外部脚本（.js文件） | <script src="app.js"></script> | 引入外部JS文件，便于复用和维护 |
事件处理
| 方式 | 示例代码 | 特点 |
|---|---|---|
| 内联事件属性 | <button onclick="alert('点击')">点我</button> | 直接绑定事件，但不利于分离逻辑 |
| 事件监听器（推荐） | javascript document.getElementById('myBtn').addEventListener('click', function() { alert('点击'); }); | 支持多个监听器，代码更清晰 |
DOM操作
| 操作 | 示例代码 | 作用 |
|---|---|---|
| 获取元素 | document.getElementById('box') | 通过ID获取元素 |
| 修改样式 | element.style.color = 'red' | 动态调整CSS样式 |
| 创建节点 | javascript const newNode = document.createElement('div'); newNode.textContent = '新增节点'; document.body.appendChild(newNode); | 动态添加新元素 |
表单验证
| 场景 | 示例代码 | 功能 |
|---|---|---|
| 非空校验 | javascript const form = document.querySelector('form'); form.addEventListener('submit', function(e) { if (!input.value) { e.preventDefault(); alert('不能为空'); } }); | 阻止空表单提交 |
| 格式校验 | javascript const email = document.querySelector('input[type="email"]'); email.addEventListener('input', function() { if (!this.validity.valid) { this.setCustomValidity('邮箱格式错误'); } else { this.setCustomValidity(''); } }); | 实时验证输入格式 |
AJAX请求
| 步骤 | 示例代码 | 说明 |
|---|---|---|
| 创建对象 | const xhr = new XMLHttpRequest(); | 初始化XMLHttpRequest |
| 配置请求 | javascript xhr.open('GET', '/api/data'); xhr.send(); | 设置方法和URL |
| 处理响应 | javascript xhr.onload = function() { if (xhr.status === 200) { console.log(JSON.parse(xhr.response)); } }; | 解析返回数据 |
相关问题与解答
问题1：内联脚本和外部脚本有什么区别？
答：内联脚本直接写在HTML中，适合少量临时代码；外部脚本需引入.js文件，适合复用且能让HTML与JS分离，提升维护性，外部脚本还可通过defer或async属性控制加载顺序。
问题2：为什么推荐使用addEventListener而不是内联事件属性？
答：addEventListener支持为同一事件添加多个处理函数，且能明确分离HTML结构和JS逻辑，避免全局作用域被墙，内联事件属性（如onclick）会导致代码分散
