JavaScript 是一种用于网页开发的脚本语言，它可以让网页变得更加动态和交互性。JavaScript 可以直接嵌入到 HTML 页面中，也可以作为外部文件链接到 HTML 页面。以下是主要的使用方式：
1. 内联 JavaScript
内联 JavaScript 是指将 JavaScript 代码直接写在 HTML 标签的属性中，比如 onclick、onmouseover 等事件处理程序。
<button onclick="alert('Hello World!')">点击我</button>这种方式适合非常简单的交互逻辑，但对于更复杂的代码不推荐使用，因为它会使得 HTML 和 JavaScript 混合在一起，降低代码的可维护性。
2. <script> 标签中的 JavaScript
您可以使用 <script> 标签将 JavaScript 代码嵌入到 HTML 文件中。这种标签可以放在 HTML 文档的 <head> 或 <body> 部分。
- 放在
<head>中：适用于需要在页面加载之前运行的脚本，如函数定义。 - 放在
<body>的底部：适用于需要在文档完全加载后执行的脚本，以确保 DOM 元素已经可用。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
---- --- -- ------ ---- ---
--------
-------- ---------- -
------------ ---------
-
---------
-------
------
------- ---------------------------------
---- --- -- ------ ----- ---
--------
-- -----------------
---------------------------------------------------------- ---------- -
------------ ----- ---- ------ ----------
---
---------
-------
-------3. 外部 JavaScript 文件
当您的 JavaScript 代码量较大或希望在多个页面之间共享代码时，可以将 JavaScript 代码保存在一个单独的 .js 文件中，然后通过 <script> 标签的 src 属性引入这个文件。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
------- --------------------------------------
-------
------
------- --------------------------
-------
-------script.js 文件内容可能像这样：
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('myButton').addEventListener('click', () => {
alert('Hello World from external file!');
});
});注意事项
- 避免阻塞页面渲染：尽量将
<script>标签放置在 HTML 文档的底部，或者使用async和defer属性来异步加载脚本。 - 模块化：对于现代 JavaScript 开发，可以使用 ES6 模块系统 (
import和export) 来组织代码。 - 调试：使用浏览器开发者工具（如 Chrome DevTools）来调试 JavaScript 代码，设置断点，检查变量值等。
使用 JavaScript 创建动态内容
JavaScript 可以用来创建、修改和删除 HTML 元素以及操作 CSS 样式。例如：
-- -------------------- ---- ------- -- ------ --- -- --- ------------ - ---------------------------- ------------------------ - ------------ -- --- --- -------- ------ - ---------------------------------------- -- --------- --- --------------- - ----------------------------- --------------------------- - -------