JavaScript高级程序设计(第3版)学习笔记 概述


Posted in Javascript onOctober 11, 2012

在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助。

相关术语

先简要说一下和JavaScript相关的一些背景术语,就不详细讨论JavaScript的历史了,想了解的朋友可以参考原书。

  • ECMA:欧洲计算机制造商协会(Standard ECMA-262European Computer Manufacturers Association)。
  • TC39:ECMA第39号技术委员会(Technical Committee#39),由来自一些关注脚本语言发展的公司的程序员组成,负责制定一种通用、跨平台、供应商中立的脚本语言。
  • ECMAScript:由ECMA制定,在ECMA-262中定义的脚本语言标准。ECMAScript只是一个脚本语言标准,你尽可以在自己的环境中取实现它,这个环境,就称为ECMAScript的宿主环境,Web浏览器可以说是ECMAScript目前最重要的宿主环境了,而不同的Web浏览器,对ECMAScript标准的支持也不尽相同。除Web浏览器,Adobe ActionScript也实现了ECMAScript。一般的宿主环境,除了实现ECMAScript标准,也会有各自的扩展,以便与环境更好的交互。
  • ES3、ES5:ECMAScript目前最新的版本是5.1版,发布于2011年7月,可以从其官方网站免费下载。最主要的两个版本是第3版和第5版,分别简称为ES3和ES5,目前五大浏览器(IE、Firefox、Chrome、Safari、Opera)都已经开始不同程度的支持ES5了,但目前在Web浏览器上兼容性最好的还是第3版。介于向后兼容和安全上的考虑,第5版提供了普通和严格两种模式,后面会再讨论相关内容。
  • LiveScript、JavaScript、JScript:LiveScript是Netscape最初开发JavaScript时的名称,在发布时,为了赶上Java的时髦,临时修改为JavaScript了,而JScript则是微软为了防止版权冲突而给自己的脚本语言起的名称。对于开发者来说,他们都只是ECMAScript的实现。一般来说,JavaScript的除了实现ECMAScript外,还会包括针对浏览器的扩展(BOM:浏览器对象模型)和针对XML/HTML API的扩展(DOM:文档对象模型)。
  • DOM:文档对象模型(Document Object Model),DOM标准由负责制定WEB通信标准的W3C(World Web Consortium,万维网联盟)制定。DOM并非针对JavaScript的,很多别的语言也都实现了DOM。目前DOM共有三级标准(DOM1、DOM2、DOM3),有时,也将DOM标准之前称为DOM0级,现代浏览器几乎全部支持DOM2级标准,也部分支持DOM3级标准了。
  • BOM:浏览器对象模型(Browser Object Model)。

使用JavaScript

  在HTML中使用JavaScript的方式主要有:

  1. 使用<script>标签元素引入外部文件(推荐),将代码写入外部文件中。
  2. 使用<script>标签元素嵌入JavaScript代码。
  3. 直接在HTML中嵌入JavaScript代码,比如在HTML元素中的事件处理程序。

<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都已经不被推荐使用,但一直以来使用的都还是test/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 著 李松峰 曹力译 人民邮电出版社。

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
javascript深入理解js闭包
Jul 03 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
javascript天然的迭代器
Oct 29 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
javascript测试题练习代码
Oct 10 #Javascript
jQuery插件开发全解析
Oct 10 #Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 #Javascript
关于jQuery UI 使用心得及技巧
Oct 10 #Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 #Javascript
jQuery提交表单ajax查询实例代码
Oct 07 #Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP新手入门学习方法
2011/05/08 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
JS清除选择内容的方法
2015/01/29 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
vue中本地静态图片路径写法
2018/03/06 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Python3.5实现的三级菜单功能示例
2019/03/25 Python
20行python代码实现人脸识别
2019/05/05 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python中pyplot基础图标函数整理
2020/11/10 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
自荐书模板
2013/12/15 职场文书
公证委托书模板
2014/04/03 职场文书
初三新学期计划书
2014/05/03 职场文书
节能减耗标语
2014/06/21 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
大学生支教感言
2015/08/01 职场文书