<script>元素

文档对象模型（DOM）全称：Document Object Model
应用程序编程接口（API）全称：Application Programming Interface
浏览器对象模型（BOM）全称：Browser Object Model

DOM并不只是针对于JavaScript的，很多其它编程语言也都实现了DOM
DOM提供访问和操作网页内容的方法和接口
BOM可以控制浏览器显示的页面以外的部分
BOM提供与浏览器交互的方法和接口

<script>元素
<script>元素有六个可选属性，这里单讲几个常用的

src 属性：表示要执行代码的外部文件
type 属性：表示编写代码的脚本语言的内容类型。考虑到最大限度的浏览器兼容性，该属性的默认值为 text/javascript
defer 属性：表示脚本会在页面加载完毕之后执行，注：只适用于外部脚本文件
acync 属性：表示立即下载脚本，但不妨碍页面中其他操作，注：只对外部文件有效

<script>使用

<script> 内容内代码从上而下执行，在它执行完毕之前，页面内其他内容不会被浏览器加载或显示
</script>出现在任何位置都会使得<script>内容结束
当有多个 <script> 元素时，会按照从上往下的顺序，依次执行。引入文件也是同样的从上往下依次执行

举例：
<script type = "text/javascript">
    function(){
        alert("</script>");
    }
任何地方出现</script>都会结束，所以上面的代码会报错
    如果想要正确输出，可以加入转义字符 “\” 处理
    alert("<\/script>");

<script>引用

src属性 + 相对路径如：app.js
src属性 + 绝对地址如：https://www.jianshu.com/app.js。引入外部文件请保证外部文件不会失效。
带有 src 属性的<script>元素最好不要在 <script> 和 </script> 之间加入任何代码，此处包含的代码会被忽略，而只会下载并执行外部脚本文件
扩展名 .js 并不是必须的，最好加上以避免意料之外的错误
</script> 在 XHTML 也可以被省略（如下），但是在 HTML 中却不可以省略，为了稳妥起见，最好都加上

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

<script>引入位置

传统的做法会把所有的 <script> 元素都包含在页面的 <head> 元素中
优点是： 统一管理，方便维护
缺点是： 会导致页面会在加载并执行完所有 <script> 元素后才会被显示出来，这样会导致页面加载出现延迟，延迟期间页面一片空白，影响用户体验
现在的做法是把 <script> 元素放在 <body> 的最底部，在页面所有内容之后引用
<script> 元素的 defer 属性，会将脚本延迟到页面加载完成之后再执行：立即下载，延迟执行
（延迟脚本最好只包含一个，理论上延迟脚本按顺序执行，现实中未必会这样）
（defer 属性只适用于外部脚本文件）
（-- 最佳选择还是把延迟脚本放在页面底部 --）

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

<script> 元素的 async 属性，异步脚本。
只适用于外部脚本文件，告诉浏览器立即下载文件，并不是所有浏览器都支持它。
它并不会按顺序执行，所以应该保证不同的<script>间没有因果联系，不然会出错。
不会阻碍页面内容显示，不会阻碍其他<script>元素加载，不会等待其他<script>元素加载完。

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

<noscript>标签
用于不支持 JavaScript 脚本的浏览器，在支持 JavaScript 的浏览器中不会执行，不会显示
当浏览器不支持 JavaScript 脚本时，会执行<noscript> 元素

<body>
    <noscript>
        <p> 本页面需要浏览器支持（启用）JavaScript！ </p>
    </nosctipt>
</body>

最后编辑于：2018.09.20 14:31:37