第7章 专用于手机的JavaScript-ESMP

第7章专用于手机的JavaScript_ESMP7.1使用ESMPECMAScriptMobileProfile简称ESMP，是OMA专为手机定义的一个脚本标准。它是基于ECMA-262第三版指定的，并且还增加了BOM、CoreDOM和HTMLDOM的定义。ECMA-262三足鼎立：Netscape发明了JavaScript；微软发布IE3.0时搭载了一个JavaScript的克隆版，叫做Jscript；CEnvi

中的ScriptEase。欧洲计算机制造商协会ECMA完成统一，形成ECMA-262，该标准定义了名为ECMAScript

的全新脚本语言。1999年12月发布的ECMA-262第三版，目前所有主流的Web浏览器都遵守。ECMAScript尽管ECMAScript

是一个重要的标准，但它并不是JavaScript唯一的部分，也不是唯一被标准化的部分。实际上，一个完整的JavaScript实现是由以下3个不同部分组成的：•核心（ECMAScript）•文档对象模型（DOM）•浏览器对象模型（BOM）ECMAScriptJavaScript的核心ECMAScript

描述了该语言的语法和基本对象；DOM描述了处理网页内容的方法和接口；BOM描述了与浏览器进行交互的方法和接口。7.1.1ESMP与ECMAScript的不同ESMP于ECMA-262第三版的不同之处主要表现在以下几个方面：ESMP为所有内建对象（不包括BOM）定义了一个version属性，格式为M.m.I.i。支持UTR-8和UTF-16编码ESMP支持非转义字符前加一个反斜杠禁止使用ES-CP中限制的语法ESMP定义了宿主BOM对象、HTMLDOM和CoreDOM7.1.1ESMP与ECMAScript的不同ESMP规定必须用分号结束语句ESMP规定，String的toLowerCase()和toUpperCase()方法分别等同于toLocaleLowerCase()和toLocaleUpperCase()方法。ESMP对Array类的sort()方法指定的参数不是一个函数时抛出TypeError异常。ESMP增加了一个MemeryError异常类型，为Error类增加了code属性。RegExp对象的multiline属性以及模式修正符m不支持。7.1.1ESMP与ECMAScript的不同Array类的sort()方法格式：arrayObject.sort(sortby)无参调用时，按照字符编码的顺序进行排序。如果想按照其他标准进行排序，就需要提供比较函数。sort1.html7.1.1ESMP与ECMAScript的不同函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：若a小于b，在排序后的数组中a应该出现在b之前，则返回一个小于0的值。若a等于b，则返回0。若a大于b，则返回一个大于0的值。sort2.html7.1.2ESMPBOMBOM是BrowserObjectModel的缩写，简称浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的API，这些API由若干对象组成，称为宿主对象。每个对象都提供了很多方法与属性。

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。7.1.2ESMPBOM基本的BOM体系结构图7.1.2ESMPBOM1.window对象window对象是浏览器顶层的一个对象，是浏览器窗口这个类的一个实例。它可以产生其他的对象，称为window的子对象，如history、location、document等。调用其方法和属性无需指定对象名。document.write("BOM");window.document.write("BOM");7.1.2ESMPBOM1.window对象属性：history、navigator、location、document。方法：prompt()、confirm()、alert()、setTimeout()、clearTimeout()JavaScript消息框警告框：alert("文本")用户需要点击确定按钮才能继续进行操作。

确认框：confirm("文本")如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。

提示框：prompt("文本","默认值")如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。

alert.htmlsetTimeout()和clearTimeout()setTimeout()：暂停指定的毫秒数后执行指定的代码。

clearTimeout()：在暂停时间段内可用来取消setTimeout函数指定的将要执行的代码。setTimeout()和clearTimeout()语法格式：如要考虑用clearTimeout

()

取消，则调用setTimeout()时要将其赋给一个变量。variTimerID=window.setTimeout(func[,delay[,arguments…]]);window.clearTimeout(iTimerID);timeout.html7.1.2ESMPBOM2.navigator对象window.navigator

对象包含有关访问者浏览器的信息。Navigator对象包含了正在使用的浏览器的版本信息，可以通过它获取浏览器已经安装的插件、支持MIME类型等信息。使用window.navigator属性可以返回一个navigator对象，该对象包含一些方法、属性、集合等成员。7.1.2ESMPBOM2.navigator对象属性：appName

返回浏览器的名称appVersion

返回浏览器的平台和版本信息

userAgent

返回由客户机发送服务器的user-agent头部的值。7.1.2ESMPBOM使用forin循环查看这些成员的值：<script>for(iinwindow.navigator){

document.write(i+“===”+window.navigator[i]+”<br/>”);}</script>navigator.html7.1.2ESMPBOM2.navigator对象用navigator.userAgent来识别浏览器警告：来自navigator对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：navigator数据可被浏览器使用者更改浏览器无法报告晚于浏览器发布的新操作系统checknavigator.html7.1.2ESMPBOM3.history对象history对象指浏览器的浏览历史。属性：length返回浏览器历史列表中的URL数量方法：back()加载history列表中的前一个

URLforward()加载history列表中的下一个URLgo([num])加载history列表中的某个具体页面，参数num是字符串则表示历史中的URL，数字则表示前进或后退的步数。history.html7.1.2ESMPBOM4.location对象window.location

对象用于获得某个窗口对象所打开的地址(URL)，并把浏览器重定向到新的页面。表示当前窗口直接用location，其他窗口用“窗口对象名.location”。出于安全性需要，属于不同协议或不同主机的两个地址间不能互相引用对方的location对象。var

newWindow=window.open(“timeout.html”);document.write(newWindow.location);document.write(location);location.html7.1.2ESMPBOM4.location对象属性：hash设置或返回从井号(#)开始的URL（锚）host设置或返回主机名和当前URL的端口号href

设置或返回完整的URLhostname设置或返回当前URL的主机名pathname设置或返回当前URL的路径部分port设置或返回当前URL的端口号protocol设置或返回当前URL的协议search设置或返回从问号(?)开始的URL（查询部分）

7.1.2ESMPBOM4.location对象方法：assign()加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的。replace()用新的文档替换当前文档，replace()方法不会在History对象中生成一个新的纪录。当使用该方法时，新的URL将覆盖History对象中的当前纪录。7.1.2ESMPBOM4.location对象方法：reload()重新加载当前文档，若无参数，或参数是false，就会用HTTP头If-Modified-Since来检测服务器上的文档是否已改变。若文档已改变，reload()会再次下载该文档。否则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住Shift健的效果是完全一样。location2.html7.1.2ESMPBOM5.document对象每个载入浏览器的HTML文档都会成为Document对象。它使我们可以从脚本中对HTML页面中的所有元素进行访问。7.1.2ESMPBOM5.document对象属性：cookie设置或返回与当前文档有关的所有cookiedomain返回当前文档的域名referrer返回载入当前文档的文档的URLtitle返回当前文档的标题创建Cookie.html相同Origin策略的限制——同源策略对于JavaScript程序，存在相同Origin策略的限制，即同源策略。同源策略阻止从一个Origin加载的文档或者脚本访问从另一个Origin加载的文档的属性（即DOM）。如果协议、端口、主机相同，那么就认为两个文档具有相同的Origin。相同Origin策略的限制——同源策略针对地址/dir/page.htmlURL匹配原因/dir2/other.htmlyeshttp:///dir/a/other.htmlyes:81/dir/etc.htmlno不同端口http:///dir/other.htmlno不同主机执行设置：document.domain=“”;7.1.2ESMPBOM方法：clear()用来清除一个文档中的内容open()打开一个流，以收集来自任何document.write()或document.writeln()的输出close()关闭用document.open()方法打开的输出流，并显示选定的数据write()向文档写HTML表达式或JavaScript代码writeln()等同write()并在每个表达式之后写一个换行符doc.html

、doc1.html7.1.3ESMPCoreDOMDocumentObjectModel，文档对象模型。是W3C指定的一簇规范，它是独立于平台和语言的一系列接口定义。DOM是文档在内存中的表现形式，它是一个应用程序接口，定义了该文档的逻辑结构以及一套访问和处理文档的方法。对应的应用程序可以跨语言跨平台。7.1.3ESMPCoreDOM例如：客户端浏览器是一个处理HTML和XML文档的应用程序，它必须将文档解析成DOM才能够以编程方式读取、操作和呈现HTML、XML文档。例如所有浏览器都支持使用DOM接口定义的方法来处理HTML文档中的内容、结构和样式，这样可以减少对浏览器兼容性的考虑。DOM的起源DOM历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，包括VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM应运而生。DOM的发展最初是一种让JavaScript在浏览器间可移植的方法，不过其应用已经远远超出这个范围。DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。DOM的分级根据W3CDOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。DOM的分级根据W3CDOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。1级DOM：由DOM核心与DOMHTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOMHTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。DOM的分级2级DOM：2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历和层叠样式表（CSS）的支持。同时也对DOM1的核心进行了扩展，从而可支持XML命名空间。3级DOM：引入统一方式载入和保存文档和文档验证方法对DOM进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包扩XMLInfoset、XPath、和XMLBase。DOM的分级目前大部分浏览器软件都可以部分获取全部实现DOMlevel2规范簇，HTML5DOMAPI也是大量基于DOMlevel2规范簇的。HTML网页加载DOM浏览器解析7.1.3ESMPCoreDOMW3C规定的三类DOM标准接口：CoreDOM（核心DOM），适用于各种结构化文档；XMLDOM，专用于XML文档；HTMLDOM，专用于HTML文档。ESMPCoreDOM仅定义了3种节点类型，即Document、Element、Text节点(nodeType返回9,1,3)，并为每个节点规定了少量的方法和属性。7.1.3ESMPCoreDOM1.DOMException属性：message，获取导致异常的消息字符串；code，获取抛出的异常的类型，该属性的返回值为一个整数。常量：见表7-37.1.3ESMPCoreDOM2.NodeNode对象是整个DOM的主要数据类型。节点对象代表文档树中的一个单独的节点。节点可以是元素节点、属性节点、文本节点等，可以通过节点查看器查看。node.html7.1.3ESMPCoreDOM2.Node根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点7.1.3ESMPCoreDOM节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。7.1.3ESMPCoreDOM属性：nodeName：节点的名称，只读，元素节点名与标签名相同；属性节点名是属性的名称；文本节点名永远是#text；文档节点名永远是#document。nodeValue：节点的值。元素节点值是undefined；文本节点的值是文本自身；属性节点的值是属性的值。

nodeType

：节点的类型，只读。7.1.3ESMPCoreDOM属性：parentNode、childNode、firstChild、lastChild、previousSibling、nextSibling、attributes、ownerDocument、namespaceURI、prefix、localName方法：hasAttributes()、haschildNodes()、insertBefore()、replaceChild()、removeChild()、appendChild()、cloneNode()克隆节点.html、替换节点.html、遍历结点树.html7.1.3ESMPCoreDOM3.Document方法：getElementsByTagName()返回带有指定标签名的所有元素，如：document.getElementsByTagName("p");getElementById()返回带有指定ID的元素，如：document.getElementById("id");7.1.3ESMPCoreDOM3.Document方法：creatElement()、createTextNode()//创建一个P元素节点var

para=document.createElement("p");varnode=document.createTextNode("Thisisnew.");para.appendChild(node);createElement.html7.1.3ESMPCoreDOM4.NodeList当使用诸如getElementsByTagName()或childNodes属性或方法时，会返回NodeList

对象。NodeList

对象表示节点的列表。使用从0开始的下标来访问节点列表中的节点。NodeList

对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。7.1.3ESMPCoreDOM4.NodeList属性：length列表中节点的数量，例如：x=document.getElementsByTagName(‘p').length;方法：item()返回节点列表中处于指定索引号的节点，如：item(index)index表示NodeList

中节点位置的整数。该值是大于等于0小于等于NodeList.length-1的整数。x=document.getElementsByTagName(‘p');for(i=0;i<x.length;i++){//仅显示元素节点if(x.item(i).nodeType==1){

document.write(x.item(i).nodeName);

document.write("<br/>");}}7.1.3ESMPCoreDOM5.Element属性：tagName方法：getAttribute()、setAttribute()、removeAttribute()、getElementsByTagName()、hasAttribute()element.html7.1.3ESMPCoreDOM6.Text属性：data设置或返回元素或属性的文本、length返回元素或属性的文本长度方法：appendData()向节点追加数据、deleteData()从节点删除数据、insertData()向节点中插入数据、replaceData()替换节点中的数据、substringData()从节点提取数据7.1.4ESMPHTMLDOMHTMLDOM定义了访问和操作HTML文档的专用API，它是对核心DOM的扩展，目前主流浏览器都支持。对核心DOM的扩展：指定和添加了特用于HTML文档和元素的API。实现和DOMLevel0兼容。提供一种便利的机制用于对HTML文档的一般性操作。7.1.4ESMPHTMLDOM1.document对象代表整个HTML文档，可被用来访问页面中的所有元素。doc-links.htmldoc-form.html7.1.4ESMPHTMLDOM7.1.4ESMPHTMLDOM2.link元素对象属性描述href设置或返回被链接资源的URLmedia设置或返回文档显示的设备类型name设置或返回<link>元素的名称rel设置或返回当前文档与目标URL之间的关系type设置或返回目标URL的MIME类型<head><linkrel="stylesheet"type="text/css"id="style1"href="style1.css"/><scripttype="text/javascript">functionchangeStyle(){ document.getElementById("style1").href="style2.css";}</script></head>link对象.html7.1.4ESMPHTMLDOM3.form元素对象属性或方法描述elements[]包含表单中所有元素的数组。action设置或返回表单的action属性。enctype设置或返回表单用来编码内容的MIME类型。length返回表单中的元素数目。method设置或返回将数据发送到服务器的HTTP方法。name设置或返回表单的名称。reset()把表单的所有输入元素重置为它们的默认值。submit()提交表单。form对象.html7.1.4ESMPHTMLDOM4.textinput元素对象属性描述defaultValue设置或返回文本域的默认值。form返回一个对包含文本域的表单对象的引用。maxLength设置或返回文本域中的最大字符数。name设置或返回文本域的名称。size设置或返回文本域的尺寸。type返回文本域的表单元素类型。value设置或返回文本域的value属性的值。7.1.4ESMPHTMLDOM4.textinput元素对象方法描述select()选取文本域中的内容。blur()从文本域上移开焦点。focus()在文本域上设置焦点。text对象.html5.passwordinput元素对象属性、方法：同text7.1.4ESMPHTMLDOM6.textarea元素对象属性或方法描述cols设置或返回textarea

的宽度。form返回对包含该textarea

的表单对象的引用。name设置或返回textarea

的名称。rows设置或返回textarea

的高度。type返回该文本框的表单类型。value设置或返回在textarea

中的文本。select()、blur()、focus()7.1.4ESMPHTMLDOM7.radioinput元素对象属性：checked、defaultchecked、form、length、name、type、value方法：click()radio对象.html8.checkboxinput元素对象属性、方法：同radio7.1.4ESMPHTMLDOM9.submitinput元素对象属性：form、name、type、value方法：click()10.resetinput元素对象属性：form、name、type、value方法：click()7.1.4ESMPHTMLDOM11.selectinput元素对象属性：form、length、name、options[]返回包含下拉列表中的所有选项的一个数组、selectedIndex、size、type、value方法：add()、remove()向下拉列表添加或删除一个选项。select对象.html7.1.4ESMPHTMLDOM12.option元素对象属性：defaultSelected返回selected属性的初始值、form、label、selected、text、value13.button元素对象属性：form、name、type、value方法：blur()、click()、focus()option对象.html7.2使用JavaScript的注意事项

7.2.1检测浏览器支持检测是否支持两个基本方法，以此来检测是否有基本的DOM支持。functionhasBasicDOM(){ if(document.getElementById&&document.getElementByTagName) returntrue; returnfalse;7.2.1检测浏览器支持DOM标准的检测方式是使用DOMImplementation接口定义的hasFeature()方法，一般实现该接口的浏览器都会完全支持DOMLevel2，也可以检测特定的支持项。格式：document.implementation.hasFeature(feature,version)7.2.1检测浏览器支持feature定义要检测的模块名，见表7-4。version是要检测的模块的版本号。如不指定则检测所有版本，只要一个支持就返回true。例如：//获得DOMImplementationif(document.implementation){varimplementation=document.implementation;if(implementation.hasFeature){ if(implementation.hasFeature(“XML”,”1.0”)) alert(“支持XML1.0”);

elsealert(“不支持XML1.0”);}}7.2.2关于打开新窗口避免使用window.open()方法和document.open()方法，因为并非所有手机浏览器均支持多窗口。不要使用window.showModalDialog()方法打开模式对话框，大部分手机浏览器都不支持该功能。7.2.3关于间隔调用setInterval()按照间隔指定的毫秒数循环执行指定的代码；clearInterval()取消对应setInterval函数指定的循环。不要使用setInterval()方法进行间隔调用，建议使用setTimeout()方法来代替。因为在使用setInterval()方法进行间隔调用时，如果要调用的函数执行时间超过间隔期就会导致不可预知的错误。打字机.html7.2.3关于间隔调用例如设置每100毫秒执行一次函数，但函数的操作时间需要200毫秒才能完成，这就可能导致异常，可能同时有两个函数在运行。functionsomeFunction(){ //运行函数功能需要200毫秒}window.setInterval(someFunction,100);7.2.3关于间隔调用解决方法是用setTimeout()方法来代替。functionsomeFunction(){ //运行函数功能需要200毫秒

//执行完成后，再次延迟100毫秒继续

setTimeout(someFunction,100);}setTimeout(someFunction,100);7.2.4隐藏浏览器工具条使用window.scrollTo()方法可以将浏览器窗口中的文档滚动到相对左上角指定x和y距离的位置。目前主流手机浏览器都支持该功能，因此可以用来隐藏工具条。window.scrollTo(0,1);7.2.4隐藏浏览器工具条一般来说，应该在问的那个加载完成后再调用该方法，例如下面代码，注册load时间，在事件监听函数中调用该方法。<scripttype=“text/javascript”>addEventListener(“load”,hideURLbar,false);functionhideURLbar(){ window.scrollTo(0,1);}</script>7.2.4隐藏浏览器工具条有一种特殊情况是网页太短导致不能滚动，这时要么为body元素设置min-height样式属性大于某个高度，要么使用下面的元数据声明，使视点的高度等于设备的高度，这样肯定超出了浏览器窗口可视高度，因此肯定会有滚动。<metaname=“viewport”content=“height=device-height”/>hideURLbar.html7.3定义和触发事件手机上使用JavaScript另一个较大的不同就是对事件的处理，与桌面系统的差异明显。另一个需要注意的就是IEMobile不支持W3C事件，所以必须寻找兼容性的方法，这与桌面上IE与其他浏览器的差别是相同的。一般定义如下函数来实现兼容：P1367.3.1基本交互事件键盘手机的事件处理很简单，就是keydown、keypress、keyup，这与桌面一致。而触摸屏手机则不同，如ondbclick和onmousewheel事件等都不适用于手机。触摸屏手机没有focus和blur事件，而都支持click事件。大多数也支持下面几个连续事件：mouseover、mousemove、mousedown、mouseup、mouseoutcheckmouse.html7.3.2关于软键盘事件对于触摸屏，一般都是使用软键盘，其出发的时间应由change监听，软键盘也有keydown、keypress、keyup事件。但若按按键时间长或连续按键会出现另一个字符，这些只有被写到输入框时才有办法捕捉到。7.3.3感知手机握持方向和orientationchange事件iPhone和Android支持orientationchange事件，在手机旋转时会触发，一般可以通过其判断手机握持方向。下面是一个通用方法，根据几个特定属性的比较来确定手机握持的方向。7.4触摸和手势iPhone和Android支持触摸