文档对象模型（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>
网友评论