JavaScript客户端编程文档格式.docx
《JavaScript客户端编程文档格式.docx》由会员分享，可在线阅读，更多相关《JavaScript客户端编程文档格式.docx（19页珍藏版）》请在冰豆网上搜索。
/script>
在HTML标签中使用<
scripttype=”application/javascript”>
./script>
来做为html嵌入JavaScript代码不使用text/JavaScript因为JavaScript不是正直的文本
noscript>
/noscript>
当浏览器的JS被禁用了会显示这里的内容
HTML中的事件句柄：
onclick:
所有类似按钮的表单元素和标记<
a>
及<
area>
都支持该处理程序当用户点击标记元素的时候触发。
如果onclick返回false则浏览器不执行任何与按钮或链接相关的默认动作。
onmousedownonmouseup
这两个事件句柄和onclick非常相似，只不过分别在用户按下鼠标和释放鼠标时触发。
onmouseoveronmouseout
分别在鼠标指针移动到或移出文档元素时触发这两个处理程序
onchange
inputselecttextarea元素支持这个事件句柄，在用户改变了元素的值的时候或移出元素的焦点时触发
onload
这个事件句柄出现在<
body>
标记上，当文档及其外部内容如图像，完全载入的时候触发它。
客户端JavaScript线程模型：
核心javascript语言并不包含任何线程机制。
所以javascript是单线程的。
也就是说当脚本载入和执行的时候，文档解析就停止下来。
并且，当事件句柄执行的时候，WEB浏览器会停止对用户输入的响应。
单线程是为了更加简单的脚本而制定的，编写代码同时确保两个事件不会同时运行。
这意味着脚本和事件句柄不能运行太长时间，否则会有延迟如果脚本是可能变得无法响应，或崩溃。
如果应用程序必须执行足够的计算从而导致显著的延迟，应该允许文档在执行这个计算之前完全载入，应该确保能够通知用户计算正在进行中并且浏览器没有挂起。
如果可能将计算分散为离散的子任务，可以使用setTimeout（）和setInterval（）这样的方法后台运行子任务。
在载入过程中操作文档：
在onload事件已经触发以后操作文档是安全的，并且这也是大多数javascript程序的做法，它们使用onload句柄触发所有的文档修改。
在包含较大的图像或很多图像的文档中，在图像载入和onload事件触发之前，主文档可以很好地解析。
在这种情况下，可能希望在onload事件之前开始操作文档，一种技术是把操作代码放在文档的末尾。
IE的技术是把文档操作代码放入到一个既有defer属性又有src属性的<
标记中。
而firfox的技术是把文档操作代码为未详细说明的DOMContentLoaded事件的一个事件句柄。
文档完全载入之前事件句柄能否调用的问题，到目前为止，javascript执行模式的讨论可以得出结论，所有的事件句柄总是在所有脚本已经执行以后才触发。
尽管这通常会发生，但是也不是任何标准要求的。
如果一个很长的或者在一个很慢的网络连接上载入着，浏览器可能部分地提交文档并且在所有的脚本和onload句柄运行之前就允许用户开始和它交互（并触发事件句柄）如果这样的一个事件句柄调用了一个还没有定义的函数，它将会失败。
同源策略：
同源策略是对JavaScript代码能够和哪些Web内容交互的一条完整的安全限制。
当一个Web页面使用多个帧包括iframe标记。
或者打开其他的浏览器窗口的时候，这一策略会发挥作用。
这种情况下，同源策略负责管理一个窗口或帧中的JavaScript代码和其他窗口或帧的交互。
也就是说：
一个脚本只能够读取和包含这一脚本的文档来源泉相同的窗口和文档的属性。
当使用XMLHttpRequest对象脚本化HTTP的时候，同源策略也发挥作用。
这一对象允许客户端面的JavaScript代码来提出任意的HTTP请求，但所针对的WEB服务器只能是载入包含文档的WEB服务器（也就载入脚本的域名）
文档的来源定义为协议，主机或者是载入文档的URL的端口，载入自不同的WEB服务器的文档具有不同的来源，通过同一主机的不同端口载入的文档具有不同的来源泉，使用http协议载入的一个文档和另一个使用https协议载入的文档具有不同的来源，即使它们来自同一个WEB服务器
在有的情况下，顶级域中的其他二级域要相互访问他们的页面，在默认情况是无法做到的，但是可以使用Document对象的属性domain，domain默认情况下，保存的是装载文档的服务器主机名。
如domain属性的初始值为可以设置为至少要有一个顶级域
如果两个窗口含有的脚本把domain设置成了相同的值，那么这两个窗口就不再受同源策略的约束，它们可以互相读取对方的属性。
如一个域一个为
装载进来的文档中协作脚本可以把它们的document.domain属性设置为
这样一来，这些文档就有了同源性，可以互相读取属性
注意在客户端拿到get的内容可以使用:
decodeURIComponent（window.location.search.substring（））。
脚本化浏览器窗口：
计时器：
Window对象的setTimeout（）方法：
用来安排一个函数在指定的毫秒数过去之后运行，setTimeout（）返回一个不确定的值，这个值可以传给clearTimeout（）来取消规划的函数的执行
setInterval（）方法：
指定的函数在一个指定的毫秒数的间隔里重复地调用。
setInterval（）返回一个不确定的值，这个值可以传递给给clearInterval（）用来取消规划。
解析URL:
Location对象
窗口的location属性引用的是Location对象，它代表该窗口或帧中当前显示的文档的URL。
Location对象的href属性是一个字符串。
它包含URL的完整文本，Location对象的toString（）方法返回href属性的值。
可以使用location代替location.href
当前的对象有属性protocol协议host主机pathname路径search
functiongetArgs（）{
varargs=newObject（）;
声明一个空对象
varquery=location.search.substring
（1）;
把get的内容保存到一个变量中
varpairs=query.split（"
&
"
）;
再把当前这个变量中&
分为一个数组
for（vari=0;
i<
pairs.length;
i++）{
varpos=pairs[i].indexOf（'
='
拿到＝后面位置
if（pos==-1）continue;
如果等于号位置为－1跳过
varargname=pairs[i].substring（0,pos）;
拿到等于号前面的字符串username=abcd
varvalue=pairs[i].substring（pos+1）;
拿到等于号后面的字符串
value=decodeURIComponent（value）;
解码等于号后面的字符串
args[argname]=value;
放入对象中
}
returnargs;
}
decodeURIComponent（）解码URI上的一些UNICODE字符注意在URI拿到的值一定要做这个解码否则会得到%10f%123e类似这样的字符
这段代码是截取网页?
后面的URI
注意如果直接给location赋一个字符串那么表示跳转到这个页面location=””表示跳到
Location对象：
Window对象的location属性和Document对象的location属性，前者引用一个Location对象，而后者只是一个只读字符串。
并不具有Location对象的任何特性。
document.location与document.URL是同义的。
大多数情况下，document.location和location.href是相同的。
但是当存在服务器重写向时，document.location包含的是已经装载的URL，而location.href包含的则是原始请求的文档URL
History对象：
因为出于安全考虑History内的数组元素是无法真正的访问的，可以支持三种方法：
back（）返回前一个页面<
forward（）返回后一个页面>
go（）有一个整数参数，可以在历史列表中向前（正参数）或向后（负参数）跳过多个页（这里的参数表示跳几个页面）
使用window.back（）操作帧
也可以得到history.back（）的效果
Window对象中的窗口信息：
window.outerWidth获得浏览器的窗口长
window.outerHeight获得浏览器的窗口宽
window.screenX获得浏览器在桌面上的X
window.screenY获得浏览器在桌面上的Y
window.innerWidth实际显示网页内容的浏览器窗口宽（除滚动条和工具栏）
window.innerHeight实际显示网页内容的浏览器窗口高
window.pageXOffset滚动条的X位置
window.pageYOffset滚动条的Y位置
这些属性全是只读的。
Navigator对象：
Window对象的navigator属性引用的是包含Web浏览器总体信息。
以前是全来确定浏览器是否支持相关的方法和属性
而现在使用测试相关浏览器是否支持相关方法和属性使用
if（window.addEventListener）类似这样的方法来测试
Navigator相关属性:
appName:
Web浏览器的简单名称，在IE中就是MicrosoftInternetExplorer在Netscape代码基础的Firfox和其他的浏览器如Mozilla和Netscape都为Netscape
appVersion:
浏览器的版本号和其他版本信息。
应该视为“内部”版本号，因为它不总是与显示给用户的版本号一致，如Netscape6以及随后发布的Mozilla和Firfox所报告的版本号是5.0另外IE4到IE6的版本号为4.0说明它们与第四代浏览器的基准功能兼容
userAgent
浏览器在它的USER-AGENTHTTP头部中发送的字符串，这个属性通常包含appName和appVersion中所有信息。
appCodeName
浏览器的代码名。
Netscape用代码名“Mozilla”作为一个属性的值为了兼容IE也采用这种方式
platform
运行浏览器的硬件平台。
返回为Win32或linuxunix
判断浏览器的平台：
varbrowser={
version:
parseInt（navigator.appVersion）,
isNetscape:
navigator.appName.indexOf（'
Netscape'
）!
=-1,
isMicrosoft:
Microsoft'
=-1
};
Window.open（URL,target,新窗口参数,替换窗口）方法
有四个可选参数：
URL:
表示打开的页面地址
target：
打开新窗口的名字这个名为target标记_blank
新窗口参数：
width=400宽,height=350高,状态status=no,可否可调整resizeble=no
替换窗口：
如果为true那么就替换target这里的字符串的窗口
关闭窗口：
window.close（）或者window.open（）返回的值来关闭
键盘焦点和可见性:
方法focus（）和blur（）提供了对窗口的高级控制
focus（）会请求系统将键盘焦点赋予窗口,焦点
blur（）则会放弃键盘焦点。
失去焦点
窗口大小和位置：
判断一个窗口是否关闭可以使用window.open（）返回值中的属性closed
注意这里的窗口必须是指定了width和height
open（“”,””,””,”width=xxx,height=xxx”）
moveTo（X,Y）移动窗口的坐标位置绝对位置
moveBy（）将窗口上下左右移动
resizeTo（）和resizeBy（）修改窗口大小
写一个打开关闭窗口最好写在一个对象中
简单的对话框：
alert（）向用户显示一条消息并等待用户关闭对话框。
confirm（）要求用户点击一个OK或者Cancel按钮来确认或取消操作
prompt（）请求用户输入一个字符串
这三个方法的用户体验不好，因为在弹出对话框的时候，会停止执行后面的代码直到这三个函数返回为止才会继续执行代码。
这样就会产生阻塞。
错误处理：
Window对象的onerror属性比较特殊，如果给这个属性赋一个函数，那么只要这个窗口中发生了JavaScript错误。
该函数就会被调用，即它成了窗口的错误处理句柄（这是一个比较早的错误处理方法，他是Window对象中的一个方法）特别在IE中IE9以下的版本
这个函数有三个参数，一个是
window.onerror=function（自信，文件的URL，错误行数）
他还可以返回，返回true表示它通知浏览器句柄已经处理错误，无需其他操作。
就是不显示错误信息。
window.onerror=function（）{returntrue}
多窗口和多帧：
一个窗口中的任何帧都可以使用Window对象的属性framesparenttop属性来引用其他的帧
每个窗口都有frames属性，这个属性引用一个Window对象的数组，其中每个元素代表这个窗口中包含的帧。
如果一个窗口都迷彩有任何帧，那么frame[]数组就是一个空，frames.length为0。
每个窗口含有一个parent属性，它引用包含这个窗口的Window对象。
窗口中的第一个帧就可以引用它的兄弟帧（即第二个帧）
parent.frames[1]
如果一个窗口是顶级窗口，而不是帧，那么parent属性引用的就是这个窗口本身。
parent=self
一个帧包含在另一个帧中，而后者又包含在顶级窗口中，那么该帧就可以使用
parent.parent引用顶级窗口。
注意：
无论一个帧嵌套了几层，top属性引用的都是包含它的顶级窗口。
如果一个Window对象代表的是一个顶级窗口，那么它的top属性引用的就是窗口自身。
对于那些顶级窗口的直接子帧（iframe）top就等价于parent.
他们之间的关系
可以直接使用
parent.name
这里的name表示分帧的名字这样可以直接返回那个分帧的window对象
这样就可以用来操作他内部的元素。
或者使用top.framenametop.帧名
这样只要拿到这个分帧返回的window对象那么分帧内的变量也是可以直接访问的
如：
页面1中vara=100
parent.页面1.a也是可以访问到空上100的
访问他的方法也是可行的
parent.页面1.f（）
函数是在定义他的作用域中执行，也就是编写函数的那个页面执行。
而不是在调用他的它的作用域中执行。
也就是说当两个页面（执行环境）如一个函数内有相同的变量，那么他就是去调用，定义这个函数的那个页面中的变量。
而不是执行这个函数页面中的变量。
Document脚本化文档
document.write（）将内容写入页面中
document.open（）创建文档
document.close（）关闭文档，浏览就不能制止它所显示的文档装载动画。
而且浏览器可以将写入的HTML缓存起来，这样在调用close（）显式地结束文档之前，缓存输出不会显示出来
Document属性：
bgColor
文档的背景色，这个属性对应标记body的bgcolor属性（已经没用）
cookie
一个特殊属性，允许javascript程序续写HTTPcookie
domain
该属性使处于不同的internet域中的相互信任的WEB服务器在它们的网页间交互时能协同放松同源策略安全性限制
lastModified
一个字符串，包含文档的修改日期
location
文档的URL属性已经没用
referrer
文档的URL，包含浏览器带到当前文档的连接
title
文档的标题
URL
一个字符串，声明了装载文档的URL，除非发生了服务器重定向，否则该属性值与Window对象的location.href一样
技巧：
在布署平台上，可以使用document.referrer来判断文件是否来自本域。
不是来自本域的访问可以进行跳转。
遗留DOM:
文档对象集合。
anchors[]
anchor对象的一个数组，该对象代表文档中的锚也就是a标签中的name也就是返回a标签的集合
applets[]
Applet对象的一个数组，该对象代表文档中的javaapplet
forms[]
Form对象的一个数组，该对象代表文档中的form元素。
每个Form对象有自己的elements[]集合属性，其中包含了代表表单中的所包含的表单元素的对象。
images[]
Image对象的一个数组，该对象代表文档中img元素，Image对象的src属性是可读写的。
并且给这个属性赋一个URL会导致浏览器读取和显示一个新图像。
links[]
Link对象的一个数组，该对象是代表文档中超文本连接的Link对象。
超文本链接在HTML中用<
标记创建的、并且偶尔会用客户端图像地图的<
标记来创建。
一个Link对象的href属性和<
标记的href属性相对应。
它保存了该链接的URLLink对象也通过protocolhostnamepathname等属性使一个url的不同部分变得可用。
他返回的对象类似Location
技巧:
可能通过document.froms.表单名name属性来得到这个表单对象。
如document.forms.userRegFrom表示获取页面中name为userRegFrom的表单
还可以document.表单名
formname=”shipping”>
inputtype=”Text”name=”zipcode”/>
/form>
如果要拿表单中的input元素
document.shipping.zipcode这样就可以拿到input元素。
如果两个元素的name相同那么使用document.n引用的是一个数组。
如果要在表单提交的时候检查表单中元素的内容，可以在
formname=”myform”onsubmit=”returnxxxx（）>
<
或者可以在js中这样写：
document.myform.onsubmit=function
W3C中的DOM：
父节点：
直接位于一个节点之上的节点被叫为父节点parent
子节点：
直接位于节点下层的节点是该节点的子节点children
兄弟节点：
位于同一层的节点叫做兄弟节点sibling
后代节点：
一个节点的下一个层次的节点集合是那个节点的后代descendant
祖先节点：
一个节点的父节点，祖父节点及其他所有位于它之上的节点都是那个节点的祖先ancestor
节点：
每个Node对象都有一个nodeType属性，它指定了节点是什么类型的。
如一个节点的nodeType为ELEMENT_NODE那么他就量个Element对象并且可以使用Element接口为定义的所有方法和属性。
常见的nodeType值
接口nodeType常量nodeType值
ElementNode.ELEMENT_NODE1
TextNode.TEXT_NODE3
DocumentNode.DOCUMENT.NODE9
CommentNode.COMMENT_NODE8
DocumentFragmentNode.DOCUMENT_FRAGMENT_NODE11
AttrNode.ATTRIBUTE_NODE2
DOM树根部的Node是一个Document对象，这个对象的documentElement属性引用了一个Element对象，它代表了文档的根元素。
对于HTML文档，这是<
html>
标记。
它在文档中可以显式或隐式的。
核心DOMAPI的一部分类层级
不同的接口有不同的方法。
如HTMLInputEle
升级会员 