关于script元素的两三点

最新推荐文章于 2021-11-29 18:17:20 发布

路小一

最新推荐文章于 2021-11-29 18:17:20 发布

阅读量280

点赞数

分类专栏： JavaScript 文章标签： html 浏览器脚本

本文链接：https://blog.csdn.net/daydaysky/article/details/53245675

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、script元素简介
script元素由Netscape创造，在Netscape Navigator 2中首先实现。之后被加入到正式的HTML规范中。HTML 4.01定义了如下6个属性：
1、async：可选。表示应立即下载脚本，但不应妨碍页面中的其他操作，即异步脚本。
2、charset：可选。表示通过src属性指定的代码的字符集，因为大多数浏览器会忽略它的值，因此很少人用这个属性。
3、defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。
4、language：已废弃。
5、src：可选。表示包含执行代码的外部文件。
6、type：可选。表示编写代码使用的脚本语言的内容类型，通常使用的是“text/javascript”。如果没有指定属性值，默认值依旧是text/javascript。

2、script元素使用的两种方式
A.直接在页面中嵌入JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
    alert("Hi!");
</script>
</body>
</html>

运行结果如下：
这里写图片描述

！！需要注意的是：使用嵌入式JavaScript时，不要在代码任何地方出现</script>字符串。如果将上述js代码换成如下所示：

<script type="text/javascript">
    alert("</script>");
</script>

则运行结果如下：
这里写图片描述
原因是浏览器遇到</script>字符串时，会误认为是结束标签，解决办法是把这个字符串分为两个部分：

<script type="text/javascript">
    alert("<\/script>");
</script>

或是如下分成两个字符串：

<script type="text/javascript">
    alert('<'+'/script>');
</script>

B.包含外部JavaScript文件：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="Example1.js"></script>
    <script type="text/javascript" src="Example2.js"></script>
</head>
<body>
</body>
</html>

script元素放在head中，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容，这无疑会导致浏览器在呈现页面时出现明显的延迟。
所以一般将script引用放在body中，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />
</head>
<body>
    <p><!-- 内容 --></p>
    <script type="text/javascript" src="Example1.js"></script>
    <script type="text/javascript" src="Example2.js"></script>
</body>
</html>

这样，在解析javascript代码之前，页面内容会呈现在浏览器中。

上文所提的defer属性（只可用于外部文件）可用于延迟脚本，defer表示告诉浏览器立即下载，但是延迟执行：

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
<script type="text/javascript" defer="defer" src="Example1.js"></script>
<script type="text/javascript" defer="defer" src="Example2.js"></script>
</head>
<body>
</body>
</html>

如上，脚本会延迟到整个页面加载完毕后再运行，HTML5规范要求脚本按照它们出现的先后顺序执行，所以，第一个延迟脚本会先于第二个延迟脚本执行。

asnyc属性与defer属性类似，告诉浏览器立即下载文件，但与defer不同的是，标记为asnyc的脚本并不保证按照指定它们的先后顺序执行。

3、noscript元素
在不支持JavaScript的浏览器或者禁用JavaScript时，noscript元素中的内容会显示，否则不显示。

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />
</head>
<body>
<noscript>
    <p>本页需要启用JavaScript</p>
</noscript>
</body>
</html>

路小一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于script元素的两三点

1、script元素简介 script元素由Netscape创造，在Netscape Navigator 2中首先实现。之后被加入到正式的HTML规范中。HTML 4.01定义了如下6个属性： 1、async：可选。表示应立即下载脚本，但不应妨碍页面中的其他操作，即异步脚本。 2、charset：可选。表示通过src属性指定的代码的字符集，因为大多数浏览器会
复制链接

扫一扫