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 相关文章推荐
js Math 对象的方法
Sep 01 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP新手上路(十三)
2006/10/09 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
php实现微信模板消息推送
2018/03/30 PHP
php函数式编程简单示例
2019/08/08 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python文件写入write()的操作
2019/05/14 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
清明节寄语2015
2015/03/23 职场文书
西游记读书笔记
2015/06/25 职场文书
老人院义工活动感想
2015/08/07 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书