正文

网页如何加载和调用JavaScript

/0 浏览量
0820

在当今的Web开发中，JavaScript是构建动态和交互式网页的核心技术。理解网页如何加载和调用JavaScript对于前端开发者来说至关重要。下面，我们将深入探讨这一过程。

JavaScript的加载方式

JavaScript可以通过多种方式加载到HTML文档中，以下是几种常见的加载方式：

1. 内联JavaScript

内联JavaScript直接在HTML文档的<script>标签中编写。这种方式简单易行，但将JavaScript代码与HTML结构混合在一起通常被认为是不好的做法，因为它会降低代码的可维护性和可读性。

<script>
  // JavaScript代码
  function sayHello() {
    alert('Hello, world!');
  }
</script>

2. 外部JavaScript文件

将JavaScript代码保存在外部文件中，并在HTML文档中通过<script>标签引用。这是最常见和推荐的做法，因为它遵循了“内容与样式分离”的原则。

<script src="example.js"></script>

3. 异步加载

使用async或defer属性可以异步加载外部JavaScript文件。async属性让浏览器在文件下载时继续解析HTML，而defer属性则等到文档解析完成后再执行。

<script src="example.js" defer></script>
<script src="another.js" async></script>

JavaScript的调用时机

JavaScript的调用时机取决于其加载方式：

1. 内联JavaScript

内联JavaScript通常在文档解析时立即执行。

2. 外部JavaScript文件

  • defer属性：在文档解析完成后，按照在文档中出现的顺序执行。
  • async属性：在文件下载完成后立即执行，但执行顺序不确定。
  • 没有async或defer属性：在文档解析时执行。
// 当文件加载完毕后执行
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM已加载完毕');
});

// 当整个页面加载完毕后执行
window.addEventListener('load', function() {
  console.log('页面已完全加载');
});

示例：动态更改网页内容

以下是一个简单的示例，展示如何使用JavaScript动态更改网页内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript示例</title>
  <script>
    function changeText() {
      document.getElementById('content').innerHTML = '内容已更改！';
    }
  </script>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p id="content">这是网页的内容。</p>
  <button onclick="changeText()">更改内容</button>
</body>
</html>

在这个示例中，我们创建了一个按钮，当点击按钮时，会调用changeText函数，该函数通过getElementById方法获取到页面中的<p>元素，并使用innerHTML属性更改其内容。

通过以上内容，你应该对网页如何加载和调用JavaScript有了更深入的了解。希望这些信息能帮助你更好地进行Web开发。

-- 展开阅读全文 --