Javascript-2-script

最新推荐文章于 2024-10-18 11:12:30 发布

1024肥宅

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量100

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lqpf199681/article/details/105805527

版权

1、`<script>`元素

向HTML页面中引入Javascript的主要方法就是使用script元素。

HTML4.01为script定义了下面6个属性：
1，async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其它资源或等待加载其它脚本。只对外部脚本文件有效。
2，charset：可选。表示通过src属性指定的代码的字符集。
3，defer：可选。表示脚本可以延迟到文档完全被解析和现实之后再执行。只对外部脚本文件有效。
4，language：已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性，因此也没必要再用了。
5，src：可选。表示包含要执行代码的外部文件。
6，type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型。

使用script元素的方式有两种：直接在页面中嵌入Javascript代码和包含外部Javascript文件。

包含在script闭合标签内部的Javascript代码将被从上至下依次解释。在解释器对script元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。

在使用script标签嵌入Javascript代码时，记住不要在代码中的任何地方出现"</script>"字符串。例如，浏览器在加载下面所示的代码时就会产生一个错误：

<script type="text/javascript">
function printScript() {
    alert("</script>");
}
</script>

因为按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>"标签时，会认为是结束的<script>标签。可以通过转义符来解决这个问题，例如：

<script type="text/javascript">
    function printScript() {
        alert("<\/script>");
    }
</script>

2、标签位置

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="example.js"></script>
</head>
<body>
    
</body>
</html>

这种做法的目的就是把所有外部文件(包括CSS文件和Javascript文件)的引用都放在相同的地方。可是把所有的Javascript文件都放在<head>元素中，意味着必须等到全部Javascript代码都被下载、解析、执行完成之后。才开始呈现页面的内容。对于那些需要很多Javascript代码的页面来说，会导致浏览器窗口在呈现页面是出现明显的延迟，浏览器窗口一片空白。

为了避免这个问题，现代web一般都把全部Javascript引用放到<body>元素中页面内容之后，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript" src="example.js"></script>
</body>
</html>

这样在解析包含的Javascript代码之前，页面的内容将完全呈现在浏览器中。