《JavaScript高级程序设计》读书笔记四BOM

 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);

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值