BOM
一、HTML中的JavaScript
<html>
<head>
<title>Title of Page</title>
<script type="text/javascript">
//<![CDATA[
var i=0;
function copare(a){
if(a>i){
alert("A is greater than zero")
}
}
//]]>
</script>
<script type="text/javascript" src="../scripts/external.js"></script>
</head>
<body>
<noscript>
<p>Your brower doesn't support JavaScript.If it did support JavaScript.
you would see this message:Hi!</p>
</noscript>
<p>This is the first text the user with see if JavaScript is enabled.If JavaScript is
disabled this is the second text the user will see.</p>
</body>
</html>
二、BOM(浏览器对象模型)
基本的BOM体系结构
1.window对象表示整个浏览器窗口,但不必表示其中包含的内容。
框架frames不符合网页标准,Ajax可实现框架作用,就没有必要使用框架了。
1)窗口操作
moveBy(dx,dy) 把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。
dx值为负数,向左移动窗口,dy值为负数,向上移动窗口。
moveTo(x,y) 移动浏览器窗口,使它左上角位于用户屏幕的(x.y)处。
可使用负数,不过这样会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh) 根据窗口的当前大小,缩放指定的dw和dh偏移量。
resizeTo(w,h) 将窗口的大小更改为指定的宽度w和高度h,w,h不能为负数。
注意:窗口操作会对用户产生影响,应避免使用。
2)导航和打开新窗口
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
sName:_self、_parent、_top、_blank、已有框架名或新窗口名。
sFeatures:left、top、height、width、resizable、scrollable、toolbar、status、location。
bReplace:说明是否用新载入的页面替换当前载入的页面的Boolean值。
oNewWindow.close();//关闭新创建的窗口
window.colse();//关闭自身,仅当新建窗口包含此代码有效,其他将有关闭提示
新窗口还有对打开它的窗口的引用,存放在opener属性中。
alert(oNewWindow.opener==window); //outputs "true"
注意:弹出式窗口拦截程序会拦截open()创建的窗口,最好在弹出窗口时警告用户
3)系统对话框
var sResult=prompt("请输入帐号。",""); //输入对话框
if(sResult!=null){
if(confirm("确认输入帐号"+sResult+"吗?"){ //确认对话框
alert("帐号输入完成。"); //提示对话框
}else{
alert("重新输入帐号。");
}
}
4)状态栏
window.defaultStatus="welcome";离开当前页面前一直显示的默认状态栏消息。
<a href="books.htm" οnmοuseοver="window.status='book'">Books</a>
<a href="javascript:goSomeWhere(1,2,3,4)" οnmοuseοver="window.status='book'">Books
</a>//status属性可向用户隐瞒链接实现的细节
注意:不要过度使用状态栏,以使它分散用户的注意力。
5)时间间隔和暂停
延迟setTimeout(要执行的代码或函数指针,要等待的毫秒数[1/1000秒])
var iTimeoutId=setTimeout("alert('hello')",1000);//延迟1秒后执行alert
clearTimeout(iTimeoutId); //取消还未执行的延迟程序
重复执行setInterval(要执行的代码或函数指针,要间隔的毫秒数[1/1000秒]))
var iNum=0,iMax=100,iIntervalId=null;
function incNum(){
iNum++;
if(iNum==iMax){
clearInterval(iIntervalId);//停止重复执行该代码
}
}
iIntervalId=setInterval(incNum,500);
//每隔0.5秒执行一次程序,重复100次。
var iNum=0,iMax=100;
function incNum(){
iNum++;
if(iNum!=iMax){
setTimeout(incNum,500);
}
}
setTimeout(incNum,500);
//作用同上,好处是不必跟踪时间间隔的ID
6)历史history是用户访问过的站点的列表
go()方法只有一个参数,即正数前进或负数后退的页面数。
history.forward()相当于history.go(1)
history.back()相当于history.go(-1)
history.length属性查看历史中的页面数。
2.document对象是window对象的属性,一个即属于BOM又属于DOM的对象。
document.title属性可随时改变页面的标题
document.URL属性可获取当前页面的URL,或设置新的URL来导航到新页面。
document.lastModified属性获取最后一次修改页面的日期的字符串表示。
document.referrer属性表示浏览器历史中后退一个位置的URL,可跟踪用户来源
document对象的集合:achors、applets、embeds、forms、images、links。
document.images[0].src相当于document.images["image_name"].src
writeln()与write()一样用来把字符串写入文档,不同处是writeln()在字符串末尾加个/n
<html><head><title>动态引入外部JS文件</title><script type="javascript">
document.write("<script type=/"text/javascript/" src=/"js.js/">"
+"</scr"+"ipt>");//必须把结束标记分开,否则将产生混乱
</head><body></body><html>
注意:必须在完全载入页面前调用write()和writeln()方法,否则它将抹去页面的原内容,显示指定的内容。
var oNewWin=window.open("about:blank", "newwindow",
"height=150,width=300,top=10,left=10,resizable=yes");
oNewWin.document.open(); //打开已经载入的文档以便进行编写
oNewWin.document.write("<html><head><title>New Window</title></head>");
oNewWin.document.write("<body>This is a new window!</body></html>");
oNewWin.document.close(); //关闭open()方法打开的文档
3.location对象是window对象和document对象的属性,表示载入窗口的URL,并可以解析它。
href 获取当前载入页面的完整URL的字符串或设置新URL来导航的新页面,类似document.URL属性。
例如:http://localhost:3774/20090115/Default2.aspx?id=1&sub=2
hash 设置或获取href属性中在#井号后面的分段。 "#anchor1"
search 设置或获取href属性中跟?问号后面的部分。"?id=1&sub=2"
hosthome 设置或获取location或URL的主机名称部分。"localhost"
port 设置或获取与URL关联的端口号。"3774"
host 设置或获取location或URL的hosthome和port部分。"localhost:3774"
pathname 设置或获取对象指定的文件名或路径。"/20090115/Default2.aspx"
protocol 设置或获取URL的协议部分。"http:"
location.assign("http://www.163.com")与location.href="http://www.163.com"功能相同,
导航后新地址加到浏览器的历史栈中,放在前一个页面后面,可被Back按钮返回。
location.replace("http://www.163.com");//将从浏览器历史中删除包含脚本的页面,不可返回。
location.reload(true);//从服务器段重新载入当前页面。
location.reload()与location.reload(false)功能相同,既从缓存重载当前页面。
注意:最好把reloud()调用放在最后一行,因为它会对它之后的代码造成不确定的影响。
4.navigator对象由于不同浏览器对他的属性支持不一样,所以多用于判断用户采用何种浏览器。
5.screen对象可获取用户屏幕的信息。可与流量工具结合,来判断用户的图形接受能力。
avaiHeight 窗口可以使用的屏幕的高度(以像素计),包括工具栏等操作系统元素所需要的空间。
avaiWidth 窗口可以使用的屏幕的宽度(像素)。
colorDepth 用户表示颜色的位数,大多数系统采用32位。
height 屏幕的高度。width屏幕的宽度。都是以像素计。
window.moveTo(0,0); //这行代码和下行一起使用,让窗口填充用户的屏幕。
window.resizeTo(screen.avaiHeight,screen.avaiWidth);