JavaScript 用法

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 元素已经可用。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <!-- 可选: 放在 <head> 中的脚本 -->
    <script>
        function sayHello() {
            alert('Hello World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
    
    <!-- 推荐: 放在 <body> 底部的脚本 -->
    <script>
        // 这里的代码会在DOM加载完成后执行
        document.querySelector('button').addEventListener('click', function() {
            alert('Hello World from bottom script!');
        });
    </script>
</body>
</html>

3. 外部 JavaScript 文件

当您的 JavaScript 代码量较大或希望在多个页面之间共享代码时，可以将 JavaScript 代码保存在一个单独的 .js 文件中，然后通过 <script> 标签的 src 属性引入这个文件。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

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 样式。例如：

// www.javascriptcn.com code example
// 创建一个新的 <p> 元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新添加的段落。';

// 将新的 <p> 元素添加到页面的 <body> 中
document.body.appendChild(newParagraph);

// 修改现有元素的样式
let existingElement = document.querySelector('h1');
existingElement.style.color = 'blue';