写点什么

JavaScript02 - js 的引入方式

发布于: 2021 年 01 月 15 日
JavaScript02 - js的引入方式

js 有三种引入方式:行内式、内嵌式、外链式。

行内代码

  • 使用 javascript: 前缀构建执行 JavaScript 代码的 URL。

<a href="javascript:alert('Hello JavaScript')">点我</a>
复制代码

所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL,当用户触发该 URL 时,javascript: 之后的 JS 代码就会获得执行。

  • 将 JS 代码写到元素的事件属性值中

<div onclick="window.alert('Hello JavaScript!')"></div>
复制代码


这两种方式只适用于代码量比较少的时候,如果代码比较多,建议使用内部代码或写到单独的 JS 文件中。

内部代码(内嵌式)

如果页面需要中包含大量的 JavaScript 代码,则建议将这些 JavaScript 代码放在<script> 标签中。<script> 元素既可作为 <head> 的子元素,也可作为 <body>的子元素,通常位于<body>元素闭合标签(即</body>)的前面。

<script type="text/javascript">	alert('Hello JavaScript');</script>
复制代码

外部代码(外链式)

为了让 HTML 页面和 JavaScript 脚本更好地分离,我们可以将 JavaScript 脚本单独保存在一个 .js 文件中,HTML 页面导入该 .js 文件即可。

<script src="test.js" type="text/javascript"></script>
复制代码

注意:

  • 由于现代网页开发提倡结构、样式、行为的分离,即分离 HTML、CSS、JavaScript 三部分的代码,避免直接写在 HTML 标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式。

  • 存在的问题:引入 JavaScript 代码时,页面的加载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。解决的办法:对于不需要提前执行的代码,将<script>标签放在<body>标签的底部(即</body>标签前),可以减少对整个页面加载的影响。

发布于: 2021 年 01 月 15 日阅读数: 32
用户头像

所思在远道 2020.08.19 加入

一只慢慢进步的小白

评论

发布
暂无评论
JavaScript02 - js的引入方式