HTML中的javascript基本用法及综合实例
文章目录
- 基本的使用方法
- 内联JavaScript
- 脚本标签
- 外部脚本文件
- 使用库和框架
- 注意事项
- 几个进阶的主题和示例
- 1. 操作DOM
- 2. 响应用户输入
- 3. AJAX请求
- 4. 使用框架/库
- 综合实例
- HTML 结构
- JavaScript 逻辑
- 功能解释
- CSS 样式
基本的使用方法
在HTML中使用JavaScript可以让网页变得更加动态和交互。JavaScript可以嵌入到HTML文档中，通过响应事件、操作DOM元素以及执行各种任务来增强用户体验。下面是一些基本的使用方法：
内联JavaScript
你可以直接在HTML标签中添加on开头的属性来编写JavaScript代码，这些被称为事件处理程序。例如：
<button onclick="alert('Hello, World!')">点击我</button>
这段代码会在用户点击按钮时弹出一个包含"Hello, World!"的警告框。
脚本标签
也可以在<script>标签内编写JavaScript代码。这个标签可以放在HTML文档的<head>部分或者<body>部分的底部（通常是为了确保页面加载完成后再执行脚本）。
<script>
document.write("Hello, World!");
</script>
外部脚本文件
如果JavaScript代码较多，推荐将其放置在一个外部.js文件中，并在HTML文档中引用它。这样可以使HTML文档更清晰，同时也有利于代码的重用。
<script src="script.js"></script>
在script.js文件中，你可以写入如下代码：
window.onload = function() {
alert("页面加载完毕");
};
使用库和框架
为了简化开发过程，开发者经常使用JavaScript库（如jQuery）或框架（如React，Vue.js）。这些工具提供了丰富的功能集合，可以帮助开发者快速构建复杂的Web应用程序。
注意事项
- 在编写JavaScript时，请确保遵循最佳实践，比如避免使用全局变量以减少命名冲突的风险。
- 测试你的脚本，确保它们在不同的浏览器上都能正常工作。
- 考虑到安全性和性能，尽量避免使用
eval()这样的函数，因为它可能会带来安全风险。
以上是HTML中使用JavaScript的一些基础方式。根据你的具体需求，你可以选择合适的方式来集成JavaScript代码。
几个进阶的主题和示例
我们可以进一步探讨如何在HTML中使用JavaScript来实现更复杂的功能。以下是几个进阶的主题和示例：
1. 操作DOM
JavaScript可以通过DOM（Document Object Model）来访问和操作HTML文档中的元素。以下是一个简单的例子，展示了如何改变页面上的文本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM示例</title>
</head>
<body>
<h1 id="title">欢迎来到我的网站</h1>
<button onclick="changeText()">点击改变标题</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "感谢您的访问！";
}
</script>
</body>
</html>
在这个例子中，当用户点击按钮时，标题文字会从“欢迎来到我的网站”变为“感谢您的访问！”。
2. 响应用户输入
JavaScript可以根据用户的输入做出反应。例如，创建一个简单的表单，当用户提交后显示输入的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单处理示例</title>
</head>
<body>
<form onsubmit="handleSubmit(event)">
<label for="name">名字:</label><br>
<input type="text" id="name" name="name"><br>
<input type="submit" value="提交">
</form>
<p id="output"></p>
<script>
function handleSubmit(event) {
event.preventDefault(); // 阻止默认提交行为
const name = document.getElementById("name").value;
document.getElementById("output").innerText = `您输入的名字是: ${name}`;
}
</script>
</body>
</html>
3. AJAX请求
使用JavaScript进行异步请求（AJAX），可以在不重新加载整个页面的情况下更新部分内容。这里使用fetch API获取数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX请求示例</title>
</head>
<body>
<div id="data"></div>
<button onclick="loadData()">加载数据</button>
<script>
async function loadData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
document.getElementById("data").innerText = JSON.stringify(data);
}
</script>
</body>
</html>
这个例子假设有一个API提供数据，点击按钮后会从该API获取数据并显示出来。
4. 使用框架/库
随着Web技术的发展，使用现代JavaScript框架（如React、Vue.js、Angular等）已经成为标准做法。这些框架可以帮助开发者更容易地构建可维护的应用程序。例如，使用React来创建一个简单的组件：
// React 组件示例
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
要使用React，你需要设置一个支持它的环境，比如使用Create React App脚手架工具。
这些示例只是冰山一角，JavaScript的强大之处在于其灵活性和广泛的应用场景。如果你有特定的需求或想了解更多细节，请告诉我，我会尽力提供帮助。
综合实例
让我们创建一个综合实例，展示如何使用HTML和JavaScript来构建一个简单的待办事项列表应用。这个应用将允许用户添加待办事项、删除待办事项，并且能够标记事项为已完成。
HTML 结构
首先，我们需要定义HTML结构，包括一个输入框用于添加新的待办事项，一个按钮用于提交新事项，以及一个无序列表用于显示所有待办事项。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>待办事项列表</title>
<style>
.todo-item {
margin-bottom: 5px;
}
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="newTodoInput" placeholder="请输入待办事项">
<button onclick="addTodo()">添加</button>
<ul id="todoList"></ul>
<script>
// JavaScript 代码将放在这里
</script>
</body>
</html>
JavaScript 逻辑
接下来，在<script>标签内部添加JavaScript代码，以实现待办事项列表的基本功能。
let todos = [];
function addTodo() {
const inputElement = document.getElementById("newTodoInput");
const newTodo = inputElement.value.trim();
if (newTodo === "") return;
todos.push({
id: Date.now(),
text: newTodo,
completed: false
});
renderTodos();
inputElement.value = "";
}
function deleteTodo(id) {
todos = todos.filter(todo => todo.id !== id);
renderTodos();
}
function toggleCompleted(id) {
todos = todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
renderTodos();
}
function renderTodos() {
const listElement = document.getElementById("todoList");
listElement.innerHTML = ""; // 清空列表
todos.forEach(todo => {
const li = document.createElement("li");
li.className = "todo-item" + (todo.completed ? " completed" : "");
li.textContent = todo.text;
const deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.onclick = () => deleteTodo(todo.id);
const toggleButton = document.createElement("button");
toggleButton.textContent = todo.completed ? "未完成" : "完成";
toggleButton.onclick = () => toggleCompleted(todo.id);
li.appendChild(toggleButton);
li.appendChild(deleteButton);
listElement.appendChild(li);
});
}
// 初始化渲染
renderTodos();
功能解释
- 添加待办事项：当用户在输入框中输入文本并点击“添加”按钮时，会创建一个新的待办事项对象，并将其添加到
todos数组中。然后调用renderTodos()函数来更新显示。 - 删除待办事项：每个待办事项旁边都有一个“删除”按钮，点击后会从
todos数组中移除对应的项，并重新渲染列表。 - 标记为完成/未完成：用户可以通过点击“完成”或“未完成”按钮来更改待办事项的状态，这会更新对应待办事项的
completed属性，并触发列表的重新渲染。
CSS 样式
简单地添加了一些CSS样式，使得已完成的待办事项被划线表示。
这个简单的待办事项列表应用展示了如何使用HTML和JavaScript来创建一个具有基本功能的Web应用程序。你可以在此基础上扩展更多的功能，比如保存数据到本地存储，增加编辑功能等。
————————————————
最后我们放松一下眼睛
