JavaScript 调用|极客笔记

JavaScript 调用

JavaScript 是一种动态的、强类型的脚本语言，常用于网页前端开发。通过 JavaScript，我们可以实现网页的交互功能，例如表单验证、页面元素操作、动态效果等。在这篇文章中，我们将详解 JavaScript 的调用方式，包括内联方式、外部文件方式、事件触发方式等。

内联方式

内联方式即直接将 JavaScript 代码嵌入到 HTML 页面中，通过 <script> 标签实现。这种方式适用于简单的功能或者临时的调用。下面是一个内联方式的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联方式示例</title>
</head>
<body>
    <h1>内联方式示例</h1>

    <button onclick="alert('Hello, World!')">点击我</button>

    <script>
        // JavaScript 代码
        alert('Hello, JavaScript!')
    </script>
</body>
</html>

在上面的示例中，我们通过按钮的 onclick 事件和 <script> 标签中的 JavaScript 代码实现了两种内联方式调用。点击按钮会弹出对话框显示 Hello, World!，同时页面加载时也会弹出对话框显示 Hello, JavaScript!。

外部文件方式

外部文件方式是将 JavaScript 代码保存在独立的 .js 文件中，通过 <script> 标签引入到 HTML 页面中。这种方式适用于复杂的功能或者多个页面共享同一段 JavaScript 代码。下面是一个外部文件方式的示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部文件方式示例</title>
</head>
<body>
    <h1>外部文件方式示例</h1>

    <button onclick="sayHello()">点击我</button>

    <script src="script.js"></script>
</body>
</html>

// script.js
function sayHello() {
    alert('Hello, External Script!')
}

在上面的示例中，我们将 sayHello() 函数保存在 script.js 文件中，然后在 index.html 页面中引入该文件。点击按钮会触发 sayHello() 函数，弹出对话框显示 Hello, External Script!。

事件触发方式

事件触发方式是通过 JavaScript 监听事件，然后执行相应的操作。常见的事件包括点击事件、鼠标移入事件、键盘事件等。下面是一个事件触发方式的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件触发方式示例</title>
</head>
<body>
    <h1>事件触发方式示例</h1>

    <button id="myButton">点击我</button>

    <script>
        // JavaScript 代码
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Hello, Event Trigger!')
        })
    </script>
</body>
</html>

在上面的示例中，我们通过 addEventListener 方法监听按钮的点击事件，然后在事件触发时弹出对话框显示 Hello, Event Trigger!。