JS引入方式和基本属性是什么?

在Web开发中,JavaScript是一种常用的脚本语言,可以实现动态交互效果和复杂的前端逻辑。为了让JavaScript代码能够被浏览器正确执行,我们需要将其引入到HTML页面中。本文将详细介绍JavaScript的引入方式和一些基本属性。

一、JavaScript的引入方式

JavaScript的引入方式有两种常用方法:直接在页面中写入和引入外部JS文件。

1、在页面中直接写入

可以使用<script>标签将JavaScript代码直接写入HTML页面中,例如:

<script>
alert("Hello, World!");
</script>

2、引入外部JS文件

通过 src 引入,此时 script 标签内添加任何js代码都不起效果。

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

其中,src属性指定了外部JS文件的路径。

动态引入JS的四种方式:

1、使用document.write方法

document.write("<script src='test.js'><\/script>");

但这种方式会将当前页面全覆写掉,不推荐使用。

2、动态改变已有<script>的src属性

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通过创建一个新的<script>元素,并修改其src属性,然后将其添加到<head>标签中,实现动态引入。

3、动态创建<script>元素

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通过使用document.createElement方法创建一个新的<script>元素,然后设置其src属性,并将其添加到<head>标签中。

4、基于Ajax请求的(推荐)

function includeJS(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var script = document.createElement("script");
script.text = xhr.responseText;
document.head.appendChild(script);
}
};
xhr.send();
}
includeJS("test.js");

通过使用XMLHttpRequest对象发送GET请求获取JS文件的内容,然后创建一个新的<script>元素,设置其text属性为获取到的JS代码,并将其添加到<head>标签中。

二、引入JavaScript的基本属性

1、type属性

在<script>标签中,可以使用type属性指定引入的是JavaScript文件,但这是默认属性,可以省略不写。

<script src="index.js" type="text/javascript"></script>

2、async属性

使用async属性可以异步加载JS文件,即在加载JS文件过程中,页面会继续渲染和执行其他代码。默认情况下是同步加载(即阻塞加载,直到JS文件加载完成后再继续渲染和执行)。

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

3、defer属性

使用defer属性可以延迟执行JS文件,即在页面加载完成后再执行JS代码。与async属性不同的是,defer保证了JS文件的执行顺序与其在页面中的顺序一致。

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

async和defer的区别:

  • async:异步加载,JS文件加载完成后立即执行,不影响页面渲染。多个async属性的JS文件的执行顺序不确定。
  • defer:延迟执行,JS文件在页面加载完成后按照其在页面中的顺序依次执行,不影响页面渲染。

例如:

<script src="index.js" async></script>
<script>
alert("First");
</script>
<script>
alert("Second");
</script>
<h1>Hello, World!</h1>
<script>
alert("Third");
</script>
<script>
alert("Fourth");
</script>
  • 使用async属性加载index.js,将会有5次弹窗,首先是"First",然后是"Second",接着是页面中的内容,最后是index.js中的代码。
  • 如果改为使用defer属性加载index.js,则会先弹出"First"、"Second"、页面内容,最后是index.js中的代码。
广告合作
QQ群号:707632017
标签:

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

热门教程

  • Z-Blog教程
    Z-Blog教程
    ZBlog教程分享ZBlog安装教程、ZBlog建站教程和ZBlog使用教程等相关教程,包括如何创建...
  • CSS教程
    CSS教程
    CSS教程提供了关于如何使用CSS来设计和美化网页的基础知识和技巧,包括选择器、样式规则、盒模型、布...
  • WordPress教程
    WordPress教程
    WordPress教程提供了关于WordPress的基础知识和技巧,包括安装、设置、发布内容、选择主...
  • 宝塔面板教程
    宝塔面板教程
    宝塔面板教程是一个致力于向用户传授宝塔面板的使用技巧和知识的学习资源,旨在帮助用户快速上手和充分利用...
  • Xmind教程
    Xmind教程
    Xmind是一款功能强大的思维导图软件,它可以帮助用户组织思维、整理信息、规划项目等。Xmind教程...

3个月免费VPS

亚马逊云科技