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属性，并触发列表的重新渲染。