欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

在HTML中使用JavaScript

程序员文章站 2022-06-30 20:50:14
...

<script>元素

想HTML页面插入JavaScript的主要方法就是使用<script>元素。
HTML 4.01为<script>定义了下列5个属性。

  • src: 可选。表示包含要执行代码的外部文件。
  • type ： 可选。表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。
  • async : 可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
  • defer : 可选。表示脚本可以延迟到文档完全呗解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
  • charset：可选。表示通过src属性指定代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

使用<script>元素的方式有两种：

  • 直接在页面中嵌入JavaScript的代码
  • 包含外部JavaScript文件

使用<script>嵌入JavaScript代码时，只需为<script>指定type属性。然后把JavaScript直接放在元素内部即可。
例如：

<script tyoe="text/javascript">
  function sayHi(){
  alert("Hi !");
}
</script>

使用<script>元素包含外部JavaScript文件，src属性是必需的。src属性的值指向外部JavaScript文件的链接。
例如：

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

这个例子，外部文件example.js将被加载到当前页面中。

另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。这一点，<script>和<img>元素非常相似，即他的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL。
例如：

<script type="text/javascript" src="http://www.somewhere.cm/afile.js"></script>

这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点可以在必要时通过不同域来提供JavaScript文件。不过存在风险。
只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

标签的位置

安装传统做法<script>元素都应该放在页面的<head>元素中。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>
<body>
    <!-- 这里是内容 -->
</body>
</html>

这种做法的目的就是把所有外部文件（包括CSS和JavaScript）的引用都放在相同的地方。但这将出现明显的延时，会影响性能，为避免这一问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这里是内容 -->
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</body>
</html>

这样，在解析包含的JavaScript代码之前，页面内容将完全呈现在浏览器中。提高用户体验。

延迟脚本

HTML 4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会呗延迟到整个页面都解析完毕后在运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
    <!-- 这里是内容 -->
</body>
</html>

其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。

异步脚本

HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。async只适用于外部脚本，并告诉浏览器立即下载文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" async="async" src="example1.js"></script>
    <script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
    <!-- 这里是内容 -->
</body>
</html>

async属性的目的是不让页面等待脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。

嵌入代码与外部文件

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法是尽可能使用外部文件来包含JabaScript代码。使用外部文件有如下优点：

  • 可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，更易维护。能够在不触及HTML标记的情况下，专注于编辑JavaScript代码。
  • 可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

文档模式

文档模式这个概念是通过使用文档类型（doctype）切换实现的。
最初的两种文档模式是：

  • 混杂模式
  • 标准模式

这两种模式主要影响CSS内容的呈现，但某些情况下也会影响JavaScript的解释执行。

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混在模式不值得推荐，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本没有一致性可言。
对于标准模式可以通道声明doctype来开启，如HTML5标准模式声明

<!DOCTYPE html>

<noscript>元素

<noscript>元素用于当浏览器不支持JavaScript时让页面平稳退化。用以在不支持JavaScript的浏览器中显示替代内容。这个元素可以包含能后在<body>中的任何HTML元素---<script>元素除外。包含<noscript>元素中的内容只有在下列情况下才会显示出来：

  • 浏览器不支持脚本
  • 浏览器支持脚本，但脚本被禁用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" async="async" src="example1.js"></script>
    <script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
    <noscript>
        <p>本页面需要浏览器支持（启用）JavaScript。</p>
    </noscript>
</body>
</html>

上一篇： 淘宝直通车结合超级推荐双管齐下，引爆店铺搜索流量以及推荐流量

下一篇： Leetcode——174. Dungeon Game

推荐阅读