Professional javascript 读书笔记

 

第二章 ECMAScript

 

ECMAScript

区分大小写

变量无特定的类型

每行分号可有可无

注释与 java, c 和 php 语言的注释相同

// this is a single-line comment

/* this is a multi-line comment */

javascript 中的变量不需要初始化

变量命名规则 :  变量第一个字母必须是字母 , 或是下划线 , 货币符

 

Camel 标记法 ( 首字母小写 , 接下来的单词大写字母开头 )

Pascal 标记法 ( 首字母大写 , 接下来的单词大写字母开头 )

匈牙利类型标记法 ( 以 Pascal 标记法命名的变量前附加一个小写字母 , 说明变量类型 )

匈牙利类型标记法 的一些通用缩写

Array	A	AValue
Boolean	B	bFound
Float(Number)	F	fValue
Function	Fn	fnMethod
Integer(Number)	I	iValue
Object	O	oType
Regular Expression	Re	repattern
String	S	sValue
Variant(can be any type)	V	vValue

 

变量可以不经申明当作全局变量使用 .

变量中可以存放两种类型的值 ( 原始值 和引用值 )

原始值 存储在栈中的简单数据段 .

2.6.2 Undefined   声明的变量未初始化时默认值是 undefined, 当函数无明确返回值时 .

2.6.3 Null   表示不存在的对象 , Undefined 从 null 派生来 .

2.6.4 Boolean

2.6.5 Number

直接输入的任何数字都被看作 Number, Number 的上限 Number.MAX_VALUE, 下限 Number.MIN_VALUE

大于 Number.MAX_VALUE 的值为 Number.POSITIVE_INFINITY(Infinity)

小于 Number.MN_VALUE 的值为 Number.NEGATIVE_INFINITY(Infinity)

isFinit() 判断一个数是否为 infinity

NaN 表示非数 , 用在类型转换失败时 , 不能用于算术计算 .

2.6.6 String

唯一没有固定大小的原始类型 .

字符变量

/n 换行                    /t 制表符                 /b 空格                     /r 回车                      /f 换页符

/// 反斜杠                 /’ 单引号                 /” 双引号                 /0nnn 八进制                 /xnn 十六进制                 /unnnn 十六进制

 

2.7.1 转换成字符串                  三种原始值 Boolean, 数字和字符串都有 toString()

2.7.2 转换成数字                 parseInt()/parseFloat() 只有对 String 调用才有用 , 其他类型返回 NaN

2.7.3 强制类型转换                 Boolean(value), Number(value), String(value)

 

2.6.1 Typeof 用来判断一个值是否在某种类型的范围内 .

Var sTemp = “testing string”;

Alert(typeof sTemp);

引用值 存储在堆中的对象 , 存储在变量处的值是一个指针 .

2.8.1 Object 类

ECMAScript中的所有类都由这个类继承, Object类中的所有属性和方法都会出现在其他类中

Contructor        创建对象的函数的引用.

 

Prototype        对该对象原型的引用, 主要为了节省内存空间.

原型和类型类似于继承的关系 , 如果不用原型, 属性是不会被实例继承的

引用 ： 类和实现的关系类似于：模具和成品的关系。而   prototype   就是对模具的细节雕刻，刻上什么，那从这个模具里浇铸出来的成品就会有什么。 Car.doors=4;   这样的写法只是对   Car   这个对象扩展一些静态成员，不会被实例继承的

 

  在面向对象领域里，实例与类型不是唯一的一对可描述的抽象关系，在JavaScript中，另外一种重要的抽象关系是类型(Type)与原型(prototype)。

    在现实生活中，我们常常说，某个东西是以另一个东西为原型创作的。这两个东西可以是同一个类型，也可以是不同类型。习语“依葫芦画瓢”，这里的葫芦就是原型，而瓢就是类型，用JavaScript的prototype来表示就是“瓢.prototype =某个葫芦”或者“瓢.prototype= new 葫芦()”.

要深入理解原型，可以研究关于它的一种设计模式 ——prototype pattern，这种模式的核心是用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。JavaScript的prototype就类似于这种方式.     关于prototype pattern的详细内容可以参考《设计模式》（《Design Patterns》）它不是本文讨论的范围.     注意，同类型与实例的关系不同的是，原型与类型的关系要求一个类型在一个时刻只能有一个原型（而一个实例在一个时刻显然可以有多个类型）。对于JavaScript来说，这个限制有两层含义，第一是每个具体的JavaScript类型有且仅有一个原型（prototype），在默认的情况下，这个原型是一个Object对象（注意不是Object类型！）。第二是，这个对象所属的类型，必须是满足原型关系的类型链。例如p1所属的类型是Point和Object，而一个Object对象是Point的原型。假如有一个对象，它所属的类型分别为ClassA、ClassB、ClassC和Object，那么必须满足这四个类构成某种完整的原型链.

prototype的实质     上面已经说了prototype的作用，现在我们来透过规律揭示prototype的实质。

    我们说，prototype的行为类似于C++中的静态域，将一个属性添加为prototype的属性，这个属性将被该类型创建的所有实例所共享，但是这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。换句话说，对象在读取某个属性时，总是先检查自身域的属性表，如果有这个属性，则会返回这个属性，否则就去读取prototype域，返回protoype域上的属性。另外，JavaScript允许protoype域引用任何类型的对象，因此，如果对protoype域的读取依然没有找到这个属性，则JavaScript将递归地查找prototype域所指向对象的prototype域，直到这个对象的prototype域为它本身或者出现循环为止。

prototype的价值与局限性     从上面的分析我们理解了prototype，通过它能够以一个对象为原型，安全地创建大量的实例，这就是prototype的真正含义，也是它的价值所在。后面我们会看到，利用prototype的这个特性，可以用来模拟对象的继承，但是要知道，prototype用来模拟继承尽管也是它的一个重要价值，但是绝对不是它的核心，换句话说，JavaScript之所以支持prototype，绝对不是仅仅用来实现它的对象继承，即使没有了prototype继承，JavaScript的prototype机制依然是非常有用的。

    由于prototype仅仅是以对象为原型给类型构建副本，因此它也具有很大的局限性。首先，它在类型的prototype域上并不是表现为一种值拷贝，而是一种引用拷贝，这带来了“副作用”。改变某个原型上引用类型的属性的属性值（又是一个相当拗口的解释:P），将会彻底影响到这个类型创建的每一个实例。有的时候这正是我们需要的（比如某一类所有对象的改变默认值），但有的时候这也是我们所不希望的（比如在类继承的时候），下面给出了一个例子： <script> function ClassA() { this.a=[]; } function ClassB() { this.b=function(){}; } ClassB.prototype=new ClassA(); var objB1=new ClassB(); var objB2=new ClassB(); objB1.a.push(1,2,3); alert(objB2.a); //所有b的实例中的a成员全都变了！！这并不是这个例子所希望看到的。 </script> 1

 

2.8.2 Boolean 类

Boolean 类是 Boolean 原始类型的引用类型

2.8.3 Number 类

Number 类是 Number 原始类型的引用类型

toFixed()

toExponential()

toPrecision()

2.8.4 String 类

charAt()

charCodeAt()

concat()

indexof()

lastIndexOf()

localeCompare()

slice()

substring()

toLowercase()/toLocaleLowerCase()/toUpperCase()/toLocaleUpperCase()

2.8.5 instanceOf

instanceOf 用来辨别对象的类型

javascript 中的函数不能重载 , 相同名字在同一个作用域中定义两个函数 , 不会引发错误 , 真正使用后一个函数 .

2.11.2 arguments

无需指出参数命 , 就能访问 , 函数可以接受任意个数的参数 , 用 arguments 对象判断传递给函数的参数个数 , 可以模拟重载 .

 

2.11.3 Function

函数只是一种引用类型 .

函数的属性 length 声明函数期望的参数个数 .

valueOf() 和 toString() 方法返回函数的源代码 .

 

第三章 对象基础

3.3 对象的类型

Array 类

join() 方法用于连接字符串 .

toString()

valueOf()

concat()

slice()

栈数据结构

push()

pop()

shift()

unshift()

reverse()

sort()

Date 类

可以用 parse() 方法获得毫秒数

var d=new Date(Date.parse(“May 25, 2004”));

UTC() 获得毫秒数

var d=new Date(Date.UTC(2004, 1, 5, 13, 5));

3.3.2 内置对象

ECMA-262 定义了两个内置对象 Global 和 Math

3.3.3 宿主对象

所有非本地对象都是宿主对象

ECMAScript 中所有对象的所有属性和方法都是公用的 .

在属性名前后加下划线 , 约定为私有作用域 .

obj._color_ = ‘red’

obj._color

3.3.4 关键字 this

this 总是指向调用该方法的对象 .

在实例化对象时 , 总不能确定会使用怎样的变量名 , 使用 this, 可在任意多个地方重用同一个函数 .

3.5 定义类或对象

3.5.1 工厂方式

混合的构造函数 / 原型方式

动态原型方法

混合工厂方式

3.6 修改对象

在 ECMAScript 中 , 每个本地对象也有用法完全相同的 protetype 属性 .

protetype 可用用来创建新方法 , 重定义已有方法

Array.prototype.enqueue = function(vItem){

                this.push(vItem);

}

Array.proto.toString = function(){

                return “Function code hidden”;

}

 

第四章 继承

4.2.1 继承的方式

对象冒充

function ClassA(sColor){

                this.color = sColor;

                this.sayColor = function(){

                                alert(this.color);

                }

}

function ClassB(sColor){

                this.newMethod = ClassA;

                this.newMethod =(sColor);

                delete this.newMethod;

 

                this.name = sName;

                this.sayName = function(){

                                alert(this.name);

};

}

为什么删除了对 ClassA 的引用后 , 实例还能调用超类的方法 ?

所有的新属性和新方法都必须在删除了新方法的代码后定义， 否则， 可能覆盖超类的相关属性和方法 .

对象冒充可以支持多重继承 .

call 方法

function ClassB(sColor, sName){

                ClassA.call(this, sColor);

 

                this.name = sName;

                this.sayName = function(){

                                alert(this.name);

                };

}

 

apply 方法

function ClassB(sColor, sName){

                ClassA.apply(this, new Array(sColor));

               

                this.name = sName;

                this.sayName = function(){

                                alert(this.name);

}

}

this 的对象和要传递给函数的参数的数组 .

原型链

把超类赋予 prototype 属性 .

原型链不支持多重继承 , 不能够传递参数 .

混合方式

function ClassA(sColor){

                this.color = sColor;

}

ClassA.prototype.sayColor = function(){

                alert(this.color);

}

function ClassB(sColor, sName){

                ClassA.call(this, sColor);

                this.name = sName;

}

ClassB.prototype = new ClassA();

ClassB.prototype.sayName = function(){

                alert(this.name);

}

zInherit 和 xbObjects

 

第五章 在浏览器中使用 javascript

5.1 <script language=”JavaScript” src=”../scripts/external.js”></script>

额外 js 文件的优点

安全 , 代码维护 , 缓存 , 浏览器会缓存额外链接的 js 文件

<script/> 放在 <body/> 内时 , 只要脚本所属的那部分页面被载入浏览器 , 脚本就会执行 .

<noscript>

5.1.7 XHMTL

type 特性声明内嵌代码或要加入的外部文件的 mime 类型 , javascript 的 mime 类型是 ’text/javascript’

5.3 BOM( 浏览器对象模型 )

window 对象

moveBy(dx, dy), moveTo(x, y), resizeBy(dw, dh), resizeTo(w, h)

但是浏览器不同会有不同的获得当前窗口位置和大小的方法 .

导航开新窗口

Window.open();

参数 : URL, 新窗口的名字 , 特性 , 布尔值 ( 决定新窗口是否取代现有窗口 )

第二个参数若不是 _self, _parent, _top, _blank 或是合法的框架名的话 , 方法根据第三个参数开新的窗口 .

特性字符串不能出现空格 , 并且 open 方法能够返回 window 对象 , 对 window 对象进行改变大小和位置的操作 , 通过 close 方法关闭窗口 .

新窗口有对打开它的窗口的引用 , 存放在 opener 属性中 , 只在新窗口的最高层 window 对象才有 opener 属性 .

if(confirm(“Are you sure?”)){

                alert(“I’m so glad you’re sure! ”);

}else{

                alert(“I’m sorry to hear you’re not sure.”);

}

var sResult = prompt(“What’s your name?”, “”);

if(sResult != null){

                alert(“Welcome, ” + sResult);

}

这些对话框都是模态的 .

javascript 支持暂停和时间间隔

function sayHelloWorld(){

                alert(“Hello world!”);

}

setTimeout(sayHelloWorld, 1000);

var iTimeoutId = setTimeOut(“alert(‘Hello world’)”, 1000);

clearTimeout(iTimeoutId);

 

setInterval(incNum, 500);

History

通过 History 对象的 go 方法返回浏览器前一页 , 或后一页 .

通过 History 对象的 length 方法得到浏览器中的页面个数 .

Document 对象

唯一一个既属于 BOM 又属于 DOM 的对象 .

BOM 的 document 对象的一些通用属性 .

alinkColor / bgColor / fgColor / lastModified / linkColor / referrer / title / URL / vLinkColor

集合

anchors / applets / embeds / forms /images /links

location 对象

window 对象和 document 对象的属性

location 对象表示载入窗口的 URL.

解析 URL

hash / host / hostname / href / pathname / port / protocol / search

navigator 对象

screen 对象

availHeight / availWidth / colorDepth / height / width

 

 

第六章 Dom 基础

6.1.2 Dom 是基于树的 API, 它的主要目的不是解析 XML 代码 , 而是通过解析内部链接的对象代表代码

使用 dom, 代码被一次解析成树结构

 

Dom 支持

 

Mozilla 是最好支持 Dom 的浏览器 , 支持 Dom level 2 和部分的 level 3. Opera 和 Safari 支持大部分的 Dom 1 和大部分的 Dom level 2, internet explorer 不完全的支持 Dom level 1.

 

使用 Dom

Html Dom 定义了 document.body 指向 <body /> 元素

得到 <html> 元素 document.documentElement

得到子节点元素 var oHead = oHtml.childNodes.item(0);

节点类型为 1 到 12 的常量 , document.nodeType, 但 internet explorer 不支持这些常量

Node 接口定义了一些所有节点类型都包含的类型和方法

6.3.3 处理 attributes

getNamedItem, removeNamedItem, setNamedItem, item – html 方法

getAttribute(name) / setAttribute(name, newvalue) / removeAttribute(name)

 

得到指定的节点 getElementsByTagName, getElementsByName, getElementById()

 

getElementsByTagName() 返回由 tagName 指定的元素节点列表

getElementsByName() 返回由 Name 指定的元素节点列表

getElementById() 返回由 Id 指定的元素节点列表

 

6.3.5 可以建立和操作节点

 

创建新节点

createElement(), createTextNode(), appendChild()

所有的 Dom 操作必须在页面载入之后才能进行 , 因为在页面完全下载到客户端机器之前 , 是无法完全构建 DOM 树的 , 必须使用 onload 事件来执行所有的代码 .

建立 <p> 元素 ,  建立文本节点 ,  将文本节点加到 p 元素中， 将 p 加入 body.

removeChild(), replaceChild(), insertBefore()

appendChild()

insertBefore()

createDocumentFragment() 能够一次性的将多个更新添加到 document 中 .

 

 

Dom Html 的特性

Html dom 加入了很多用于创建窗体的方法

DomTraversal

NodeIterator, TreeWalker 不支持 Internet Explorer.

 

第七章 正则表达式

定义一个正则表达式

var reCat = new RegExp(“cat”);  只匹配第一次出现

var reCat = new RegExp(“cat”, “gi”); g 匹配所有的情况 , I 不区分大小写 .

ReCat.test() 方法判断是否匹配正则表达式

Perl 风格的正则表达式

Var reCat = /cat/gi;

Exec 方法以字符串为参数 , 返回所有匹配的数组 . String 对象的 match() 方法用 RegExp 做参数 , 返回所有匹配的数组 . 看似两个方法有相同效果 , 但 Exec 方法不能在 Internet Explorer 环境下返回所有匹配的结果 .

扩展的字符串方法

repance() 替换所有匹配的字符 , 第一个参数正则表达式 , 第二个正则表达式需要替换的字符串

split() 分隔字符串为一系列子字符串返回一个数组 .

Javascript 里的元字符 （ [ { / ^ $ | ) ? * + .

使用元字符的方法 var reQMark = //?/;(non-literal) var reQMark = new ReqExp(“//?”);(literal)

literal 方式必须用 //, 因为 JavaScript 的字符串解析会用解析 /n 的方法解析 /?

贪婪 , 非贪婪 , 全部方式

贪婪方式一次匹配整个字符串 , 如果没有匹配被发现 , 删除最后一个字符再试 . 非贪婪模式第一次匹配第一个字符 , 然后逐个增加字符直到找到匹配的字符串为止 .

全部方式匹配一次全部字符串 , 如果没有找到 , 不再尝试 .

? 是贪婪 , ?? 非贪婪 , ?+ 全部

Internet Explorer 和 Opera 不支持全部模式 .

Group

分组后的分组引用 : RegExp.$1, RegExp.$2, RegExp.$3 表示

在括号后面加 ? 为不分组模式

lookahead 模式 (?=) 能够找到出现在某些特定字符串前的字符串 , 但好像 java 不支持 lookahead 模式

多行模式 加 m 到 option 里

日期 , 信用卡 , URLs, E-mail 地址 没有看

 

第八章 浏览器和操作系统检查

浏览器检查的两种途径 : 对象特性检查和用户代理字符串检查

对象特性检查

if(document.getElementById)

如果方法不存在 , 将返回 undefined, undefined 转化为 Boolean 时 , 为 false;

如果关注浏览器的能力而不在乎它实际的身份 , 就可以使用对象检测法 .

user-agent 字符串检测法

JavaScript 在 navigator 对象中引入了 userAgent 属性来提供对 user-agent 的访问 .

 

 

第九章 关于事件

Internet Explorer 建立了自己的事件模型 , Dom 1 不支持事件模型 , Dom 3 才完全支持事件模型 .

事件流

冒泡型事件

事件按照从最特定的事件目标到最不特定的事件目标的顺序触发 .

捕获型事件

事件从最不精确的对象开始触发 , 然后到最精确 .

多于一个的页面元素能够响应同一个事件 , Internet Explorer 6.0<html> 能够接收冒泡的事件 .

Dom 事件模型特性是文本节点也能发起事件 ( 不包括 Internet Explorer)

9.3  事件处理函数 / 监听函数

在响应中调用的事件功能称为事件句柄

用于响应某个事件而调用的函数称为事件处理函数 .

IE

每个元素和 window 对象有两个方法 attachEvent() 和 detachEvent() , 用来 attach/detach 事件句柄到事件

[Object].attachEvent(“name_of_event_handler”, fnHandler) 给一个事件附加事件处理函数

[Object].attachEvent(“name_of_event_handler”, fnHandler) 分离事件处理函数 .

DOM

[Object].addEventListener(“name_of_event”, fnHandler, bCapture);

[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);

对事件函数的直接赋值被认为是另一种对 addEventListener 的调用 , 后续对事件处理函数的赋值清除前面的赋值 .

事件对象

Locating

Event 对象是当事件发生时唯一可以获得的元素 , 在所有事件句柄执行完后 , 事件对象被销毁 .

得到事件类型

var sType = oEvent.type

得到 key code

var iKeyCode = oEvent.keyCode

检查 Shift, Alt, Ctrl

var bShift = oEvent.shiftKey,

var bAlt = oEvent.altKey,

var bCtrl = oEvent.ctrlKey

得到客户端鼠标的位置

var iClientX = oEvent.clientX

var iClientY = oEvent.clientY

clientX, clientY 是鼠标在浏览器内的坐标

screenX, screenY 是鼠标在屏幕内的坐标 .

得到目标

事件中心对象就是目标 , 在 internet explorer 中 , 目标包含在事件对象的 srcElement 中

在 IE 中阻止默认行为 , 设置 returnValue 为 false;

阻止事件冒泡

oEvent.cancelBubble = true;

事件类型

鼠标事件

click, dbclick, mousedown, mouseout, mouseover, mouseup, mousemove

键盘事件

keydown, keypress, keyup

html 事件

load 和 unload 事件 , resize 事件 , scroll 事件

跨浏览器的事件

EventUtil 对象没有属性 , 仅仅只要一个实例 , 不需要定义一个类 .

添加 / 删除事件句柄

attachEvent() 事件仅仅接受事件句柄的名称 , 在事件类型前加 ’on’

没有清楚为什么要 format EventUtil

 

 

第十章 高级 Dom 技术

脚本样式

Internet explorer 用 style 操作所有 css 定义的样式 , background-color 对应的 javascript 元素为 style.backgroudColor 第一个单词首写字母小写 , 第二个单词首写字母大写 .

能够改变所有内联方式的样式值

Dom 样式方法

Dom 也为样式对象定义了一些方法 .

GetPropertyValue(propertyName) 属性名必须指定为 Css 样式

GetPropertyPriority()

Item(index) 通过 index 返回 css 属性

RemoveProperty(propertyName)

SetProperty(propertyName, value, priority)

IE 不支持 DOM 的 style 方法 .

子定义鼠标提示 : 定义一块文字区域 , 定义提示的文字 , 用 onmouseover, onmouseout 显示提示 , 隐藏提示 , 提示的文字要用绝对定位 .

position: absolute 绝对定位 , 能够很准确的将元素移动到想要的位置 , 使用绝对定位的 nav 层前面或者后面的层会认为这个层不存在 (Z 方向 )

position: relative 相对定位 , 相对定位是相对于元素默认的位置的定位 , 需要 top, bottom, left, right 四个值配合确定元素的位置 .

10.2 innerText 和 innerHTML

IE 4.0 引入 innerText 和 innerHTML 进行文档操作 .

innerText 用来修改起始标签和结束标签之间的文本 , innerHTML 直接给元素分配 HTML 字符串 , 不需考虑使用 DOM 方法来创建元素 .

10.3 outerText 和 outerHTML

outText 将删除标签本身并把它替换成文本节点

10.4.2 IE 中的范围

IE 中的范围称为文本范围 , 主要用来处理文本 , 调用 body, button, input, textarea 元素上的 createTextRange() 方法 .

Range 还没有看 .

 

 

第十一章 窗体和数据完整性

11.1 窗体基础

method/action/enctype/accept/accept/accept-charset

enctype 发送到服务器时数据的编码方式

accept 在文件上传的时候指定文件的媒体类型

accept-charset 列表数据提交时 server 所接受的字符编码

控件中的 id 用于在客户端确定元素 , name 用于将数据提交到服务器 .

得到 form 引用

var oForm = document.getElementId(“form1”); 普通的 dom 树方法

var oForm = document.forms[0];

var oOtherForm = document.forms[“formZ”];

得到 form 的元素

var oFirstField = oForm.elements[0];

var oTextbox1 = oForm.elements[“textbox1”]

聚焦在第一个字段上

提交窗体

可以直接用类型为 submit 的控件提交 , 或用按钮再在单击的时候调用 submit() 方法 .

还可以取消窗体的提交 , oEvent.preventDefault 没有在 internet explorer 调用成功 ;

11.2.6 提交一次

使用平常的 button, 单击后 disable button

<input type=”button” value =”Submit” οnclick=”this.disabled=true; this.form.submit()” /> 不要使用 submit 控件 , 没有清楚为什么不能用 , note 里面的内容没有理解 .

 

重置 form

重置窗体所有字段为默认值

<input type=”reset” value=“Reset Values”/>

通过 reset() 方法重置 form

 

Text box

单行的 <input type=”text”/> 和多行的 <textarea/>

Size 用来指定在 Text Box 中可容纳字符的宽度 .

MaxLength 用来指定 Text Box 中可以容纳的最大字符数 .

两个控件支持同样的属性和值

选择文本

select() 方法选择在 text box 中的所有文本 , 在选择文本前调用 focus();

11.3.3Text box 事件

Change 和 blur 的不同 blur 事件在 text 丢失焦点时发生 , change 事件在 text 丢失焦点 , text 内容改变时 , 才发生 , 当 text 内容改变并丢失焦点时 , 先发生 change 事件再发生 blur 事件 .

自动切换到下一个 text 控件 , 必须指定 maxlength

限制 textarea 的字符 , 虽然 textarea 不支持 maxlength 但 Dom 的 getAttribute 方法可以得到 maxlength 的值

自动选择文本

自动切换到下一个

11.4 列表框和组合框

使用 html DOM 定义的 <option> 的特性 , text 返回显示文本 , value 返回值 .

每个 option 的 index 属性 , 表示在 options 集合中的位置 .

select 的 selectedIndex 总是包含目前选中的选项的索引 .

阻止不合法的字符 // 缺少 EventUtil 方法  TOOD

List Boxes 和 Combo Boxes

Size 属性能够决定可视的 option 个数 , options 用来存所有 option 元素

通过 dom 方式获得 option 的值 ,

oListbox.options[1].firstChild.nodeValue; //output display text

oListbox.options[1].getAttribute(“value”) //output value

oListbox.options[1].text

oListbox.options[1].value

oListbox.options[1].index

得到改变选择的 option

得到超过一个得选择 , 设置 multiple 属性 // 匿名函数的原理

增加选项

移除选项

转移选项

上移选项

下移选项

 

第十二章 表格排序

Array 对象的 sort() 方法 , 根据 ASCII 字符升序排序 , sort() 方法能够接受比较策略的函数方法 .

Arr.sort(comparison_function)

比较策略的函数方法和 java 里的 compare 方法很象 , 接受两个参数 , 根据大于 , 小于 , 等于返回 1, -1, 0

String 对象的 localeCompare() 和 comparison_function 工作方法是一样的 .

Arr.reverse() 能够以相反的方向对数组排序 .

最好的方法是为 table header 建立 <thead/>, 为数据行建立 <tbody/>, 这样能够方便的区别标题栏和数据栏 .

将 <tr></tr> 和 tr 内的元素加入一个数组 , 然后对数组进行排序 , 然后再把正确的元素加回页面 . 当第二次单击同一列时 , 应该倒序排序 , 任何在页面上建立的变量好像都是全局的 ( 不确定 ). 只要在第一次排序时将 col 存入一个变量 , 第二次比较是否同一列 , 同一列的话 , 倒序 . 这个排序程序能够同时兼顾到不同的数据类型 , 正序倒序 .

没有看 advanced sorting 主要是关于图片和链接的排序 .

 

第十三章 拖放 没有看

 

第十四章 错误处理

错误报告

Internet Explorer

默认情况 , internet explorer 弹出错误对话框 , 并且询问是否继续在页面上运行脚本 .

Options/Advanced/Display a notification about every script error

处理错误

onerror 是第一个错误处理措施

js 能够提供三种错误信息 , 错误信息 (sMessage), URL(sURL), 错误行数 (sLine).

错误处理机制必须第一时间出现在页面 .

Try catch 语句

错误对象

javascript 有一个 Error 基类 , EvalError/RangeError./ReferenceError/SyntaxError/TypeError/URIError

决定错误的类型

oException.name = “SyntaxError”

oException instanceof SyntaxError

抛出异常

调试技术

调试

下载 : http://www.microsoft.com/downloads/search.aspx?categoryid=10