在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助。
相关术语
先简要说一下和JavaScript相关的一些背景术语,就不详细讨论JavaScript的历史了,想了解的朋友可以参考原书。
使用JavaScript
在HTML中使用JavaScript的方式主要有:
<script>标签元素:
属性 | 是否必填 | 适用范围 | 说明 |
async | 可选 | 外部文件 | 表示应该立即下载脚本,但不应妨碍页面中的其它操作,比如下载资源或其它脚本文件 |
charset | 可选 | 外部文件 | 表示通过src指定的代码的字符集 |
defer | 可选 | 外部文件,IE4-7也支持嵌入代码 | 表示脚本可以延迟到文档完全解析和显示之后再执行 |
language | 可选(已废弃) | 原用于表示编写代码的脚本语言 | |
src | 可选,使用外部文件时为必填选项 | 外部文件 | 表示包含要执行的外部文件 |
type | 可选,默认text/javascript | 可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。 |
说明:
(1)外部文件
A、在XHTML文档中,导入外部文件时,可以使用简写方式<script/>但是在HTML中只能<script></script>。
B、导入外部文件时,src属性是必须的,这个时候嵌入在<script></script>中的代码(如果有)会被忽略。
C、src属性也可以指定来自外部域的JavaScript文件,这一点让<script>元素异常强大,也备受争议,因为可能会让人恶意注入脚本。
D、外部文件只需要包含<script></script>中的代码即可,不需要包括<script>元素本身;外部文件一般扩展名为.js,但这不是强制的。
(2)在<script>元素中内嵌代码时,只需要指定type属性,但代码中不能出现</script>字符串,否则会解析出错。例如:
<script type="text/javascript"> //document.writeln('</script>');会将字符串中的</script>作为前面的标签结束符来解析,从而出现异常 document.writeln('</scr'+'ipt>');//通过将</script>分开,从而避免作为<script>的结束标签解析
</script>
(3)关于type属性,虽然text/javascript和java/ecmascript都已经不被推荐使用,但一直以来使用的都还是text/javascript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略,另外,在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定,默认值为text/javascript。
(4)只要不包含async和defer,浏览器会按照<script>在页面中出现的顺序依次解析;设置了defer时,会立即下载<script>元素,但是延迟执行,在规范中,要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行,但是在实现中不一定满足这些要求;在HTML5中添加了async属性,和defer类似,也只是适用于外部文件,告诉浏览器立即下载文件,但延迟执行,不同的是,多个含async的脚本即便在规范中也没有规定执行的顺序,异步脚本再load事件前执行,但可能在DOMContentLoaded之前或之后执行。
(5)在阅读之前的代码或者用一些IDE生成代码时,常常可以看到下面的结构:
<script type="text/javascript"> //<![CDATA[ // 这里首先是以//开始的JavaScript注释 // 然后<![CDATA[...]]>结构是XHTML(XML)的一个特殊区域,区域内的文本不需要做任何解析,以防止XHTML将代码中的类似小于号“<”的这种特殊符号解析为元素标签 // 若不使用CDATA结构,则需要转义成相应实体,比如小于号(<)需要使用(<) // 对于不兼容XHTML的,由于最开始的//注释,也能够平稳退化 //]]> </script>
一些常用的HTML转义:
显示 | 说明 | 实体名称 | 实体编号 |
半方大的空白 |   |   | |
全方大的空白 |   |   | |
不断行的空白 | |   | |
< | 小于 | < | < |
> | 大于 | > | > |
& | &符号 | & | & |
" | 双引号 | " | " |
有些不支持JavaScript的浏览器,可以将JavaScript代码包含在一个HTML注释中(由于所有主流浏览器均支持JavaScript,所以不再推荐使用):
<script><!-- //--></script>
对于一些老旧浏览器或者禁用了JavaScript的浏览器,还可以使用<noscript></noscript>元素来呈现相关的说明。
文档模式
在IE5.5中开始引入文档模式的概念,通过使用通过文档类型(doctype)切换实现的,最初包括混杂模式(quirks mode)和标准模式(standards mode),混杂模式让IE的行为与包括非标准特性的IE5相同,标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后,其他浏览器也纷纷仿效。之后,IE又提出一种所谓准标准模式(almost standards mode),这种模式下的浏览器特性有很多是符合标准的,但也不尽然。所有浏览器默认开启混杂模式。
可以通过下面的方法启动标准模式:
<!-- 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"> <!-- HTML5 --> <!DOCTYPE html>
通过过渡性或框架集型来触发准标准模式:
<!-- HTML 4.01 过渡型--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 框架集型--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- XHTML 1.0 过渡型--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 框架集型--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
参考书籍
[1]Professional JavaScript for Web Developers 3rd Edition:JavaScript高级程序设计(第3版)[美]Nicholas C.Zakes 著 李松峰 曹力译 人民邮电出版社。