javascript高等程序设计（第3版）之《script元素》

2023年2月18日 150次阅读来源: Jack

`<script>`元素属性

属性	定义
async	【可选】。能够异步加载，示意能够马上下载此剧本，但不影响页面其他操纵。只对外部剧本有用。
charset	【可选】。示意经由过程src属性制订代码的字符集。因为多半浏览器会疏忽此属性，很少人应用。
defer	【可选】。示意剧本能够掩盖到文档完整被剖析和显现以后再实行。只对外部剧本有用。IE7及更早的版本对嵌入剧本也支撑此属性。
language	已烧毁。
src	【可选】。示意要实行外部文件的途径或链接。
type	【可选】。默以为text/javascript。能够视为language的替代品。示意编写代码应用的剧本语言的内容范例（也成为MIME范例）

defer耽误剧本

这个属性表明剧本在实行时不会影响页面的组织。也就是说，剧本会被耽误到全部页面都剖析完成以后再运行。因而，在<script>元素中设置defer属性，就是通知浏览器此剧本马上下载，然则耽误实行。

<!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 src="example1.js" defer></script>
    <script src="example2.js" defer></script>
</head>
<body>
    <!--这里放代码-->
</script>
</html>

这以上例子中，虽然我们把<script>元素放在了文档的<head>元素中，但个中包括的剧本将耽误到全部<html>剖析完成以后再实行。因为HTML5范例请求剧本根据他们涌现的前后递次实行，因而第一个耽误剧本会优先于第二个实行，二这两个剧本会优先于DOMContentLoaded事宜实行。在现实应用中，两个耽误剧本不肯定会根据递次实行，也不肯定会在DOMContentLoaded事宜触发前实行，因而末了只包括一个耽误剧本。defer属性很少应用。

async异步剧本

这个属性与defer属性蕾西，都用于转变处置惩罚剧本的行动。与defer差别的是，应用async的剧本并不能保证根据指定他们的前后属性实行。

<!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 src="example1.js" async></script>
    <script src="example2.js" async></script>
</head>
<body>
    <!--这里放代码-->
</script>
</html>

在以上例子中，第二个剧本可能会优先于第一个剧本实行，也不能不是。因而，假如应用async属性，确保二者以后相互不依赖非常重要。指定async属性的目标是不让页面守候两个剧本的下载与实行，而是能够异步的加载页面的其他内容。所以，发起异步剧本不要在加载时期修正DOM，以避免涌现毛病。

异步剧本肯定会在页面load事宜前实行，但可能会在DOMContentLoaded事宜触发之前或以后实行，因而，应用此属性的人也很少。

`<scrip>`元素嵌入JavaScript代码的用法

两种用法

直接在页面内部嵌入JavaScript代码。

<script>
  function sayHello() {
  alert('hello,word')
}
</script>

在外部援用JavaScript代码。

<script src="example.js"></script>
<script src="../example.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

特别强调

包括在<script>元素内部的代码会被从上至下一次诠释。所以在元素内部不要涌现”</script>“字符串，不然会报错。
```
<script>
  function sayHello() {
  alert('</script>')
}
</script>
//Uncaught SyntaxError: Invalid or unexpected token
//页面只会显现"')}"字符串
```
假如确切要应用”</script>“字符串，能够加上转义符”
```
<script>
  function sayHello() {
  alert('<\/script>')
}
</script>
```
应用外部引入javascript时，src属性是必需的。这个属性值是一个指向外部JavaScript文件的途径或链接。
```
<script src="example.js"></script>
```
应用此体式格局引入JavaScript时，在<script>内部不要写任何分外的JavaScript代码。假如写了会被疏忽。
不管应用任何体式格局，只需不存在defer和async属性，浏览器都邑根据<script>元素在页面中涌现的前后递次顺次剖析。所以说，JavaScript代码最好放在<body>标签尾部，防备白屏之类题目。

    原文作者：Jack
    原文地址: https://segmentfault.com/a/1190000013011584
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

<script>元素属性