前言: 纯手打!!! 这次是二刷了, 想暑假做一次完整的笔记, 但用本子来写笔记的话太贵了, 可能哪天还丢了.. 所以还是博客好 ==
第二章: 在 html 中使用 JavaScript
2.1 <script > 元素:
即在 HTML 页面插入 JS 的主要方法. HTML4.01 定义了以下 JS 属性(主要):
async : 表示立即下载脚本(只对外部脚本文件有效), 但不妨碍页面中的其他操作.
defer : 表示脚本可以延迟到文档完全被解析和显示之后再执行(只对外部脚本文件有效).
src : 表示包含要执行代码的外部文件.
type : 表示编写代码使用的脚本语言的内容类型, 如 type="text/javascript", 但不写默认也为它.
使用 < script > 元素的方式:
页面嵌入 JS 代码: function.......
外部 JS 文件: src="example.js"
2.1.1 <script > 元素位置:
所有 < script > 元素都应放在页面的 < head > 元素里, 意味着必须的等到全部 JS 代码都被下载, 解析, 执行完成以后才能开始呈现页面的内容(遇到 < body > 才开始呈现).
!!! 注意, 在需要很多 JS 代码的页面里这样子会延迟页面的呈现, 所以下载一般会把全部 JS 代码放在 < body > 页面内容的后面!
2.1.2 延迟脚本 defer:(HTML4.01)
defer="defer" 这个属性只适用于外部脚本文件. 推荐把延迟脚本放在页面底部!(在几个延迟脚本的情况下, 可能可以按照先后顺序执行)
2.1.3 异步脚本 aysnc:(HTML5)
直接写一个 async,XHTML 中要写 async="async", 这个属性只适用于外部脚本文件, 不让页面等待脚本下载和执行, 从而异步加载页面其他内容.(在几个延迟脚本的情况下, 不可以保证按照先后顺序执行)
2.1.4 XHTML 中的使用:
XHTML 即可以站超文本标语语言, 意思就是超级严格!!! 用 type="application/xhtml+xml" 才会触发 XHTML 模式
例如使用 HTML 实体 (<) 代替小于号 <,
但这样子是不是太麻烦?
所以我们可以在 < script> 后加上 <![CDATA[JS 代码]]> 来包含 JS 代码, 这样子可以不用解析了. 如果不需要这个 CDATA, 那就在 <![CDATA[JS 代码]]> 的前后加上 // 就行了.
2.1.5 在不支持 JS 的浏览器中使用 < script > 元素会把 JS 代码内容全部显示在页面, 所以我们可以把 JS 代码包含在一个 HTML 注释中, 即
<script><!--
function sayHi () {
alert ("Hi");
}
//--></script>
2.2 嵌入 JS 方式的选择:
最好还是使用外部文件, 优点是:
可维护性
可缓存: 几个页面需要使用同一个文件, 那这个文件只需下载一次~
适应未来: 即 XHTML 和 HTML 包含外部文件的语法都是相同的.
2.3 文档模式(很重要! 面试经常有)
通过使用文档类型 (doctype) 切换实现. 主要有两种文档模式:(模式主要影响 CSS 内容的呈现和可能影响到 JS 的解释执行), 还有一个准标准模式, 我暂不讨论.
混杂模式: 忽略 DTD 声明, 浏览器用自己的方式解析代码. 以一种先后兼容的方式显示, 会让 IE 的行为与 IE5 相同, IE5 包含非标准特性, 以防止老站点无法工作.
标准模式: DTD 声明定义了标准文档的类型后, 浏览器按 W3C 标准解析执行代码. 让 IE 的行为更接近标准行为, IE6 及以上都支持标准模式.
混杂模式写法: 不想写, 因为本来就不推荐这种模式!!!
标准模式写法:
HTML 5 :<!DOCTYPE HTML>
HTML 4.01 严格型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 严格型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.4 <noscript > 元素:
使用这个元素可以产生以下两种效果:(可以在脚本无效的情况下向用户显示一套消息~)
在浏览器不支持脚本的情况下会显示 < noscript > 元素中的内容.
在浏览器支持脚本但被禁用的情况下会显示 < noscript > 元素中的内容.
来源: https://www.cnblogs.com/XiaoYEBLog/p/11167572.html