【前端 05】引入JS文件

终末圆

于 2024-07-24 08:04:38 发布

阅读量279

点赞数 7

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/delepaste/article/details/140651659

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS引入方式详解

请添加图片描述

在Web开发中，JavaScript（JS）作为一种脚本语言，广泛应用于增强网页的交互性和动态性。为了在HTML页面中引入并使用JavaScript代码，存在多种不同的方式。本文将详细介绍两种最常用的JS引入方式：内部脚本和外部脚本。

第一种方式：内部脚本

内部脚本，顾名思义，就是将JavaScript代码直接定义在HTML页面内部。这种方式非常适合小型脚本或者仅在单个页面中使用的脚本。使用内部脚本时，需要注意以下几点：

标签使用：JavaScript代码必须被放置在<script></script>标签之间。这些标签告诉浏览器，包含在它们之间的内容是JavaScript代码。
位置选择：<script>标签可以在HTML文档的任意位置放置。然而，为了优化页面加载速度和用户体验，通常建议将<script>标签放置在<body>元素的底部，紧接在关闭标签</body>之前。这样做可以确保在脚本执行前，页面的DOM（文档对象模型）已经完全加载，从而避免因脚本执行而阻塞页面渲染。

例子：

<!DOCTYPE html>  
<html>  
<head>  
    <title>内部脚本示例</title>  
</head>  
<body>  
  
<h1>欢迎来到我的网页</h1>  
  
<script>  
    alert("Hello JavaScript");  
</script>  
  
</body>  
</html>

在这个例子中，当页面加载完成后，会立即弹出一个包含“Hello JavaScript”的警告框。

第二种方式：外部脚本

对于较大的项目或需要在多个页面中复用的JavaScript代码，将JS代码放在外部文件中是一个更好的选择。这种方式不仅有利于代码的维护和复用，还能通过浏览器缓存减少网络请求，提升页面加载速度。

文件内容：外部JS文件中只包含JavaScript代码，不需要也不应该包含<script>标签。
引入方式：在HTML中，使用带有src属性的<script>标签来引入外部JS文件。src属性的值指定了外部JS文件的路径。

例子：

首先，创建一个名为demo.js的外部JS文件，内容如下：

// demo.js 文件内容  
alert("Hello from external JavaScript file!");

然后，在HTML文件中引入这个JS文件：

<!DOCTYPE html>  
<html>  
<head>  
    <title>外部脚本示例</title>  
</head>  
<body>  
  
<h1>欢迎来到我的网页</h1>  
  
<script src="js/demo.js"></script>  
  
</body>  
</html>

在这个例子中，当页面加载完成后，会从js/demo.js文件中加载JavaScript代码，并弹出一个包含“Hello from external JavaScript file!”的警告框。

总结

无论是内部脚本还是外部脚本，都是JavaScript在HTML页面中应用的常见方式。选择哪种方式取决于具体的应用场景和需求。对于小型项目或单页面应用，内部脚本可能更方便；而对于大型项目或需要代码复用的场景，外部脚本则是更好的选择。

终末圆

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【前端 05】引入JS文件

无论是内部脚本还是外部脚本，都是JavaScript在HTML页面中应用的常见方式。选择哪种方式取决于具体的应用场景和需求。对于小型项目或单页面应用，内部脚本可能更方便；而对于大型项目或需要代码复用的场景，外部脚本则是更好的选择。
复制链接

扫一扫

专栏目录