怎么将 JavaScript 嵌入 HTML 文件中

怎么将 JavaScript 嵌入 HTML 文件中

首页/常见问题/低代码开发/怎么将 JavaScript 嵌入 HTML 文件中

作者：开发工具发布时间：2024-10-31 14:03浏览量：9799

织信企业级低代码开发平台

提供表单、流程、仪表盘、API等功能，非IT用户可通过设计表单来收集数据，设计流程来进行业务协作，使用仪表盘来进行数据分析与展示，IT用户可通过API集成第三方系统平台数据。

免费试用

将JavaScript 嵌入 HTML 文件中有三种基本方法：通过<script>标签内联、通过<script>引入外部文件、通过HTML事件属性。 其中，内联写法适合较短的代码，而引入外部文件方式适合包含大量JavaScript代码的场合，提高了代码的复用性和可维护性。HTML事件属性通常用于快速触发简单的JavaScript功能，如点击按钮时执行。

一、内联JavaScript代码

要在HTML文件中直接编写JavaScript代码，我们需要使用<script>标签。这个标签可以放置在HTML文档的任何位置，但通常，为了维持良好的加载顺序和不阻塞页面渲染，我们将其放在<head>标签内或者<body>标签的底部。

示例代码：

<script>
  // JavaScript代码放在这里
  function showAlert() {
    alert('Hello, World!');
  }
</script>

此代码段定义了一个简单的函数，当调用这个函数时，会弹出一个包含“Hello, World!”的警告框。

放置建议：

通常，将<script>标签放在<head>内，意味着它将在HTML文档的其余部分解析之前就加载和执行。这可能会影响页面的加载时间：

<head>
  <script>
    // JavaScript代码放在这里
  </script>
</head>

为了避免这种情况，将<script>标签放在页面内容的最下面，这样浏览器会优先渲染页面，再执行JavaScript：

<body>
  <!-- 页面内容 -->
  <script>
    // JavaScript代码放在这里
  </script>
</body>

二、引入外部JavaScript文件

当我们有大量的JavaScript代码或者希望在多个页面上重用同样的脚本时，将JavaScript代码放入独立的.js文件并通过<script>标签引入，是一种更为清晰和有效的做法。

示例代码：

创建一个名为script.js的JavaScript文件，并编写所需的JavaScript代码。然后，在HTML文件中，使用<script>标签的src属性来引入文件。

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

这样的好处是可以促进代码的重用和易维护性，而且使HTML文件结构更加清晰。

使用建议：

与内联JavaScript一样，放置<script src="...">的位置同样重要。请按照相同的建议将其放置在<body>标签的底部，以避免阻塞页面渲染。

<body>
  <!-- 页面内容 -->
  <script src="script.js"></script>
</body>

三、利用HTML事件属性执行JavaScript

另一种将JavaScript代码嵌入HTML的方法是使用事件属性，例如onclick、onload、onmouseover和onmouseout等。这些属性可以直接在HTML标签中定义，并且当特定的事件发生时，与之关联的JavaScript代码将被执行。

示例代码：

<button onclick="showAlert()">Click Me</button>

在这个例子中，当用户点击按钮时，就会调用先前定义的showAlert()函数。

使用时机：

这种方法在对简单交互进行快速原型设计时非常方便，不过，滥用事件属性会让HTML代码变得难以维护。因此，更推荐使用独立的JavaScript文件来绑定事件处理器。

通过上述方法，我们可以灵活地将JavaScript嵌入HTML文件，在增强网页交互性的同时保持代码的清晰和维护性。在实际开发中，项目的规模和需求通常决定了选择哪种方法。然而，无论方法如何，重要的是保持代码的组织和可读性。

作为一家全球知名的超大型企业，吉利需要大量的技术人员来满足各事业部门的日常数字化需求。在内部强调“降本增效”的大环境下，吉利通过采购“织信低代码平台”，开发周期平均缩短61%，人力投入减少47%，解决了开发需求常年堆积的难题。

医院后勤服务领军者——某管家

国内市场化运作、跨区域经营、集团化管理的大型专业医疗机构后勤服务供应商，全国80多座城市，每天为超过百万的病人和医护人员提供服务，通过织信低代码平台构建线上数字化的方式服务各医院的后勤保障和正常运行，主要为运送条线、保洁条线、秩序条线、工程条线、医废条线等解决工单调度、医辅材料运输、多端协同的效率难题。

中国兵器工业集团——银光化学

国家“一五”期间156个重点项目之一。属于国家高新技术企业，在信息化升级建设中，存在大量“小、散、碎”的信息化需求，需要投入大量人力资源进行开发，通过引入织信低代码平台，解决当下遇到的各类业务难题，提升整体的IT研发效率。

石油领域重点工程单位——川庆钻探

随着国企工规模的不断扩大和内部数字化转型的要求不断提升，公司着眼长远，决定借助织信低代码的各方面能力，从物资储备管理入手，并辐射经营、生产、工程、日常管理等多个板块，为后续内部信息化建设打好基座。

汽车零部件上市企业——川环科技

川环为了有效应对残酷的市场现实，高层一致决定加强公司内部管理，8大部门将全面进行数字化转型，耗时10月，成功上线8套系统，通过织信低代码平台对接现有用友U9ERP，实现各部门的业务线上化，并通过数据治理，实现整个企业从战略到经营管理的分析。

B2C跨境电商知名品牌——朗驰实业

全球500强车企巨头——吉利集团