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

在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 著 李松峰 曹力译 人民邮电出版社。

时间: 2012-10-08

JavaScript高级程序设计 XML、Ajax 学习笔记

第十五章 JavaScript与XML 1.浏览器对XML DOM的支持 1.1 DOM2级核心 ①在DOM2级在document.implementation中引入了createDocument()方法(IE6~8不支持). 可以创建一个空白XML. var xmldom = document.implemention.createDocument(namespaceUri,root,docype); ②要创建一个新的文档元素为<root>的XML文档,可用如下代码: var xmldom

JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型

ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

JavaScript高级程序设计 DOM学习笔记

第十章 DOM DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性.方法,具体实现由各自浏览器实现. 1. 节点层次 1) 文档节点:document,每个文档的根节点. 2) 文档元素:即<html>元素,文档最外层元素,文档节点第一个子节点. 3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法. □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE

JavaScript高级程序设计(第三版)学习笔记6、7章

第6章,面向对象的程序设计 对象: 1.数据属性 configurable,表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerbale,表示能否通过for-in访问属性,默认true ƒwritable,表示能否修改属性值,默认true „value,数据存储位置,默认undefined 修改默认属性特性:Object.defineProperty(),接收三个参数:属性所在对象,属性名,描述符对象,描述符对象属性必

JavaScript高级程序设计(第3版)学习笔记2 js基础语法

这一篇复习一下ECMAScript规范中的基础语法,英文好的朋友可以直接阅读官方文档.JavaScript本质上也是一种类C语言,熟悉C语言的朋友,可以非常轻松的阅读这篇文章,甚至都可以跳过,不过建议你最好还是看一看,在介绍的同时,我可能会引用一些自认为不易理解且比较流行的用法. 基础语法 1.标识符:所谓标识符,实际上就是指一个满足一定规范,能够被引擎识别的名字,可以用来表示常量.变量.函数名.函数参数.对象.对象属性等所有可命名对象的名称. (1)区分大小写. (2)以字母.下划线(_)或美

JavaScript高级程序设计 事件学习笔记

第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象

javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)

关于javascript中类的继承可以参考阮一峰的Blog<Javascript继承机制的设计思想>,说的很透. 一.在javascript中实例化遇到的问题: 下面用<javascript高级程序设计>中的例子来做说明,假如现在定义了一个car的对象,它是Object类的实例.像下面这样的: 复制代码 代码如下: var oCar=new Object(); oCar.color = "red"; oCar.doors = 4; oCar.mpg = 23;

《JavaScript高级编程》学习笔记之object和array引用类型

本文给大家分享我的javascript高级编程学习笔记之object和array引用类型,涉及到javascript引用类型相关知识,大家一起看看把. 1. Object类型 大多数引用类型值都是Object类型的实例:而且Object也是ECMAScript中使用最多的一个类型. 创建Object实例有如下两种方式: new操作符后跟Object构造函数: var person=new Object( ); person.name="webb"; person.age=25; 对象字

对javascript的一点点认识总结《javascript高级程序设计》读书笔记

l ECMAScript,有ECMA-262定义,明确javascript这门语言的规则和约定,好比为开始一场游戏指定的游戏规则.规范.约定. l DOM:提供访问和操作网页内容的方法和接口 l BOM,提供与浏览器交互的方法和接口 ECMA-262规定了以下内容: l 语法 l 类型 l 关键字 l 保留字 l 操作符 l 对象 ECMAScript是对该标准规定的各方面内容的编程语言描述,javascript实现了ECMAScript指定内容并进行了扩展. BOM用于访问浏览器的功能,包含了

《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型

2.8 引用类型 1.Object类 ECMAScript中的所有类都是由Object类继承而来. Object类具有下列属性: Constructor:对创建对象的函数的引用(指针),对于Object类,该指针指向原始的Object()函数 Prototype:对该对象的对象原型的引用. Object类还有几个方法: HasOwnProperty(property):判断对象是否有某个特定的属性.必须用字符串指定该属性值 IsPrototypeOf(object):判断该对象是否为另一个对象的

《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型

2.6 原始类型 ECMAScript有5种原始类型(primitive type),即Undefined.Null.Boolean.Number和String.ECMAScript提供了typeof来判断值的类型. 1.typeof运算符: 复制代码 代码如下: var sTemp="test string"; alert(typeof sTemp);//outpus "string" alert(typeof 95);//outpus "number&

《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础

2.1 语法 区分大小写.变量弱类型.行尾分号可有可无.注释为双斜线.括号表明代码块 2.2 变量 变量用var声明,变量的命名规则:第一个字符必须是字母.下划线或美元符号:余下的字符可以是下划线.美元符号或任何字母或数字字符. 变量命名规范: Camel标记法:首字母小写,接下来的单词都以大写字母开头.例如:var myTestValue=0,mySecondTestValue="hi"; Pascal标记法:首字母大写,接下来的单词都以大写字母开头.例如:var MyTestVal

JavaScript高级程序设计 读书笔记之八 Function类及闭包

Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,...,argumentN,function_body); 每个argument都是一个参数,最后一个参数是函数主体(要执行的代码). 示例: 复制代码 代码如下: function sayHi(sName,sMessage){ alert("Hello "+sNam