如何在HTML中使用JavaScript创建交互式网页

在标签之间嵌入JavaScript代码的优点

• 实施快速： 在同一文件中工作可以节省时间，因为您可以从同一文件中引用HTML代码的JavaScript代码。
• 易于阅读的代码： 存在标签
  • 使代码难以重用： 如果您的应用中有多个表单，这意味着您将为每个表单创建JavaScript代码。
  • 降低性能： HTML文档中的大型代码块可能会降低加载速度。

  #2. 通过直接在HTML中使用JavaScript代码的内联代码

  不需要将上述JavaScript代码包含在标签中，而是直接将其添加到HTML代码中。我们将使用相同的HTML代码和样式表（style.css）。 

  当你点击提交按钮时，浏览器上会出现一个带有“inline submit”字样的小窗口。 

  在内联代码中添加JavaScript的优点

  • 实施快速： 您无需从一个文档转到另一个文档来编写HTML和JavaScript代码。
  • 适用于小型应用： 如果您有一个不需要太多交互性的小型应用程序，内联JavaScript是一个理想的选择。

  在内联代码中添加JavaScript的缺点

  • 代码不可重复使用： 如果您的应用程序有多个表单，则需要为每个表单创建JavaScript代码。
  • 降低性能： HTML文档中的大型代码块可能会降低加载速度。
  • 代码可读性： 随着代码库的不断增长，代码可读性降低。

  #3. 创建一个外部JavaScript文件

  随着应用程序的不断发展，您会注意到直接将JavaScript代码添加到HTML文件中并不是一个好主意。当您的HTML文件上有大量代码时，您的网页加载速度也很慢。

  创建一个新文件script.js来存放您的JavaScript代码。

  在HTML文件中导入script.js文件；

  新更新的HTML页面将包含以下代码；

  将以下代码添加到script.js文件中；

  document.addEventListener("DOMContentLoaded", function() {
  
      const form = document.querySelector("form");
  
      form.addEventListener("submit", function(event) {
  
        event.preventDefault();
  
        alert("external JS sheet submit");
  
      });
  
    });

  这个JavaScript代码做了以下几点；

  • 我们有一个事件监听器，等待DOMContentLoaded事件的触发。
  • 在DOMContentLoaded事件触发后，执行回调函数。
  • 代码使用querySelector来选取一个表单。
  • 我们使用event.preventDefault()来阻止DOM在提交事件被触发时选择默认行为（刷新页面或导航到新页面）。
  • 一旦提交事件被触发，就会触发消息“external JS sheet submit”。

  

  HTML中的JavaScript最佳实践

  • 压缩文件大小：文件大小越大，加载到浏览器上所需的时间就越长。压缩可以删除source code中的所有不必要的字符，而不改变其含义或性能。您可以使用Yahoo YUI Compressor和HTMLMinifier等工具来创建紧凑的代码库。
  • 保持代码有序：这将使您的代码易于阅读和维护。您可以使用像Prettier这样的扩展来组织您的代码。
  • 使用外部库：如果库可以为您的应用程序执行某个任务，就没有必要从头开始编写代码。但是，避免在同一个项目中使用多个实现相同目标的库。
  • 优化JavaScript放置位置：如果您打算将JavaScript代码添加到HTML文件中，请确保它位于HTML代码之后。将JavaScript放置在标签之间，紧接着是标签的结束。这样确保了HTML内容（如文本、图片和表格）在JavaScript之前首先加载，从而提高加载速度。

  总结

  您现在可以舒适地使用JavaScript与HTML创建交互式网页。您将使用的合并这两种技术的方法将取决于您正在创建的Web应用程序的性质。例如，当创建一个小型应用程序时，您可以使用内联代码。另一方面，一个大型应用程序需要一个外部的JavaScript文件，您将其导入到HTML文件中。

  查看可以立即使用的JavaScript table libraries。

  相关