用户代理检测 为了不在全局作用域中添加多余的变量,我们使用模块增强模式来封装检测脚本 以下是完整的用户代理字符串检测脚本,包括检测呈现引擎.平台.Window操作系统.移动设备和游戏系统 var client=function(){ //呈现引擎 var engine={ ie:0, gecko:0, webkit:0, khtml:0, opera:0, //完整的版本号 ver:null }; //浏览器 var browser={ //主要浏览器 ie:0, firefox:0, safa…

虽然执行环境的类型总共只有两种——全局和局部(函数),但还有其他方法延长作用域链,有些语句可以在作用域链的前端临时增加一个变量对象,执行后会被移除try-catch语句的catch块和with语句 with语句会将指定对象添加到作用域链中,catch会创建一个新的变量对象 function buildUrl () { var qs="?debug=true"; with (location) { var url=href + qs; } return url; } 在此,with语句接…

JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringify()和parse(),分别用于把JavaScript对象序列化为JSON字符串(值为undefined的任何属性会被略过)和执行相反的操作 JSON.stringify()除了要序列化的JavaScript对象外,还可以接受2个参数,一个是过滤器,可以是一个数组或者函数,另一个是一个选项,表示是…

错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存着错误消息:还有一个保存着错误类型的name属性(Opera9之前不支持这个属性) try{ //可能会导致错误的代码 }catch(error){ alert(error.message); } finally子句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时…

15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com) XDM的核心是postMessage()方法,目的是向另一个地方传递信息,“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口 postMessage()方法接收2个参数:一条消息和一个…

表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset”和“button”的按钮 多选选择框中的每个选中的值单独一个条目 在单击提交按钮提交表单的情况下,也会发送提交按钮:否则,不发送提交按钮(包括type为“image”的<input>元素) <select>元素的值,就是选中的<option>元素的value特性的值,如果&…

输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text" pattern="\d+" name="count"> 注意,模式的开头和结尾不用加^和$符号(假定已经有了),这两个符号表示输入的值必须从头到尾与模式匹配 与其他输入类型相似,指定的pattern也不能阻止用户输入无效的文本,.这个模式应用给值,浏览器…

过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中,所有非字符键触发的keypress事件对应的字符编码为0,而在Safari3之前的版本,对应的字符编码全部为8,最后确保用户没有按下Ctrl键(不屏蔽ctrl+c.ctrl+v) EventUtil.addHandler(textbox,"keypress",function(event)…

共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHandler(window,"load",function(event){ document.forms[0].elements[0].focus(); }); 要注意的是,如果第一个表单字段是隐藏的,使用以上代码会导致错误 HTML5为表单字段新增了一个autofocus属性,不用Javas…

表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HTML元素相同的默认属性,HTMLFormElement也有它自己独有的属性和方法 acceptCharset:服务器能够处理的字符集:等价于HTML中accept-charset特性 action:接受请求的URL:等价于HTML的action特性 elements:表单中所有控件的集合(HTMLCollec…

hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列来保存状态或导航信息 将hashchange事件处理程序添加给window对象,然后URL参数列表只要变化就会调用它.此时的event对象额外包含两个属性:oldURL和newURL,分别保存着参数列表变化前后的完整URL EventUtil.addHandler(wind…

HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.preventDefalut()取消默认行为,在IE中将event.returnValue的值设置为false取消默认行为 contextmenu事件属于鼠标事件,其事件对象中包含与光标位置有关的所有属性 beforeunload事件 这个事件在页面卸载之前触发,让开发人员在页面卸载前阻止这一操作,弹出一个…

事件类型 Web浏览器中有很多事件类型,“DOM3级事件”规定了以下几类事件 UI事件(用户界面),当用户与页面上的元素交互时触发: 焦点事件,当元素获得或失去焦点时触发 鼠标事件,当用户通过鼠标在页面上执行操作时触发 滚轮事件,当用户使用鼠标滚轮(或类似设备)时触发 文本事件,当在文档中输入文本时触发 键盘事件,当用户通过键盘在页面上执行操作时触发 合成事件,当为IME(输入法编辑器)输入字符时触发 变动事件,当底层DOM结构发生变化时触发 变动名称事件,当元素或属性名变动时触发,已废弃不做介…

事件对象 在触发DOM上某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息. DOM中的事件对象 兼容DOM的浏览器会将event对象传入到事件处理程序中,无论指定事件处理程序时使用什么方法(DOM0级或DOM2级) btn.addEventListener("click",function(event){ alert(event.type); //"click" },false); 通过HTML特性指定事件处理程序时,变量event中保…

第13章 事件 JavaScript与HTML之间的交互式通过事件来实现的. 事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出了完全相反的事件流概念,IE是事件冒泡流,Netscape是事件捕获流 事件冒泡 click一个<div>元素,click事件沿DOM树向上传播,在每一级节点都会发生,直至传播到document对象,现代浏览器则将事件冒泡到window对象 事件捕获 click一个<div>元素,click事件沿DOM树依次向下,直到传播到事件的实际…

TreeWalker TreeWalker是NodeIterator的更高级的版本,除了包括nextNode()和previousNode()在内的相同功能外,这个类型还提供了用于不同方向上遍历DOM结构的方法 parentNode():遍历到当前节点的父节点 firstChild():遍历到当前节点的第一个子节点 lastChild():遍历到当前节点的最后一个子节点 nextSibling():遍历到当前节点的下一个同胞节点 previoussibling():遍历到当前节点的上一个同胞节点…

样式 在HTML中定义样式的方式有3种:通过<link/>元素包含外部样式表文件.使用<style/>元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式,“DOM2级样式”模块围绕这3种应用样式的机制提供了一套API,要确定浏览器是否支持DOM2级定义的css能力 var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0"); 访问元素的样式 HTML元素…

第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性 DOM2和DOM3级分为许多模块,分别描述了DOM的某个非常具体的子集 DOM2级核心(DOM Level 2 Core):在1级核心基础上构建,为节点添加更多方法和属性 DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图 DOM2级事件(DOM Level 2 Events):说明了如何使…

insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个相邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子…

DOM操作技术 动态脚本 指得是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本,跟操作HTML元素一样,创建动态脚本也有2种方式:插入外部文件和直接插入JavaScript代码 var script=document.createElement("script"); script.type="text/javascript"; script.src="client.js"; document.body.appendChild(sc…

Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeValue的值为null: parentNode可能是Document或Element: 要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值 <div id="myDiv"></div> var div=document.getEle…

document对象作为HTMLDocument的一个实例,它还有一些标准的Document对象所没有的属性,这些属性提供了网页上的一些信息 //取得文档标题 var title1=document.title; //修改文档标题 document.title="New page title"; //取得完整的URL var url=document.URL; //取得域名 var domain=document.domain; //取得来源页面的URL var referrer=do…

操作节点 appendChild()用于向childNodes列表末尾添加一个节点,appendChild()返回新增的节点 var returnedNode=someNode.appendChild(newNode); alert(returnedNode==newNode); //true alert(someNode.lastChild==newNode); //true 如果传入到appendChild()中的节点已经是文档的一部分了,结果会将该节点从原来位置转移到新的位置 insert…

第10章 DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口) IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的对象与原生JavaScript对象行为不一致 节点层次 总共有12种节点类型,这些类型都继承自一个基类型 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中所有节点类型实现.除了IE以外其他浏览器都可以访问到这个类型,JavaScript中所有节点类型都继承自Node类型,共享着相同的基本属性和方法 if(someN…

注册处理程序 navigator.registerContentHandler("applicat/rss+xml","http://www.somereader.com?feed=&s","Some Reader"); screen对象 JavaScript中有几个对象在编程中用处不大,而screen对象就是其中之一.screen对象基本是用来表明客户端的能力,每个浏览器中的screen对象包含着各不相同的属性 history对象 hi…

导航和打开窗口 使用window.open()方法可以导航到一个特定的URL也可以打开一个新的浏览器窗口,接收4个参数:要加载的URL.窗口目标.特性字符串和一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值.通常只需要传递第一个参数,最后一个参数只在不打开新窗口的情况下使用,如果传递的第二个参数,该参数是已有的窗口或者框架的名称,那么就会在该窗口加载第一个参数指定的URL //等同于<a href="http://www.baidu.com" target="…

第8章 BOM BOM的核心对象就是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色,它既是JavaScript访问浏览器的一个接口,又是规定的Global对象,因此所有在全局作用域中声明变量.函数都会是window对象的属性和方法 定义全局变量与在window对象上直接定义属性的差别是全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在 如果页面…

组合继承的问题是会调用2次超类型构造函数 寄生组合式继承 即通过借用构造函数来继承属性,通过原型链的形式来继承方法,思路:不必为了指定子类型的原型而调用超类型的原型,我们所需要的无非是超类型原型的一个副本而已 function inheritPrototype(subType,superType){ var prototype=object(subType.prototype); //创建对象 prototype.constructor=subType; //增强对象 subType.proto…

第六章 面向对象的程序设计 ECMA中有两种属性:数据属性和访问器属性 数据属性的特性 [[Configurable]] 表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属性 [[Enumerable]] 表示是否通过for-in循环返回属性 [[writable]] 表示是否修改属性的值 [[Value]] 包含这个属性的数据值,从这个属性里读取数据值 要修改属性默认的特效必须使用ECMAScript 5的Object.defineProperty()方法,它接收3…

function类型 每个函数都是function类型的实例,函数是对象,函数名是指向对象的指针 function sum(num1,num2) { return num1+num2; } //等价于 var sum=function (num1,num2) { return num1+num2; }; //function构造函数,解析两次第一次是常规的ECMAScript代码,第二次解析传入的字符串,影响性能故不推荐 var sum=new Function("num1",&quo…