javascript 学习笔记三浏览器中的JavaScript

jickcai

浏览: 238717 次
性别:
来自: 北京

最近访客更多访客>>

zllhit

lxch257

lifeifeijack

sunanwenjun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

浏览器 JavaScript 应用服务器 Go 脚本

第五章浏览器中的JavaScript
BOM(浏览器对象模型)
window-------document--------anchors
     frames----------forms
     history---------images
     location--------links
     navigator-------location
     screen
key      Object----------Array
1.窗口操作 139
moveBy(dx,dy)----把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，
向左移动窗口,dy值为负数，向上移动窗口。
moveTo(x,y)-----移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样
会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh)--相对浏览器窗口的当前大小，把它的宽度调整dw个像素，高度调整dy个像素。dw为负数,
缩小窗口的宽度，dy为负数，缩小窗口的高度。
resizeTo(w,h)----把窗口宽度调整为w,高度调整为h.不能使用负数。

<a href="javascript:window.moveBy(10,20)">window.moveBy(10,20)</a><br/>
<a href="javascript:window.resizeTo(150,300)">window.resizeTo(150,300)</a><br/>
<a href="javascript:window.resizeBy(150,0)">window.resizeBy(150,0)</a><br/>
<a href="javascript:window.moveTo(0,0)">window.moveTo(0,0)</a><br/>
2.导航和打开新窗口
用Javascript可以导航到指定的URL,并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的
URL、新窗口的名字(为目标所用)、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，因为
最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。
如果使用第三个参数，该方法就假设应该打开新窗口。特性字符串使用逗号分隔的设置列表，它定义新创建的窗口的某些方面。
-----------------------------------------------------------------------------------------------
设置值说明
-----------------------------------------------------------------------------------------------
left Number 说明新创建的窗口的左坐标。不能为负数
top Number 说明新创建的窗口的上坐标。不能为负数
height Number 设置新创建的窗口高度。该数字不能小于100
width Nmuber 设置新创建的窗口的宽度。该数字不能小于100
resizable yes,no 判断新窗口是否能通过拖动边线调整大小。默认值是no
scrollable yes,no 判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no
toolbar yes,no 判断是否显示工具栏。默认值是no
status yes,no 判断新窗口是否显示状态栏。默认值是no
location yes,no 判断新窗口是否显示(Web)地址栏。默认值是no
-----------------------------------------------------------------------------------------
var onewWin=window.open("http://www.wrox.com/","wroxwindow","height=150,widht=300,top=10,left=10,resizable=yes");
oNewWin.moveto(100,100);
oNewWin.resizeTo(200,200);
3.系统对话框
alert(),confirm()和prompt()
prompt()方法接受两个参数，即要显示给用户的文本和文本框中的默认文本。
alert("Hello world");
if(confirm("Are you sure?")){
alert("I'm so glad you're sure!");
}else{
alert("I'm sorry to hrar you're not sure.");
}

var sResult=prompt("What is your name?","");
if(sResult!=null){
alert("Welcome,"+sResult);
}
4.状态栏
状态栏是底部边界内的区域，用于向用户显示信息。
一般说来，状态栏告诉了用户何时载入页面，何时完成载入页面。但可以用window对象的两个属性设置它的值，即status和
defaultStatus属性。如你所料，status可以使状态栏的文本暂时改变，而defaultStatus则可以再用户离开页面前一直改变该文本。
window.defaultStatus="You are surfring www.wrox.com";
<a href="javascript:goSomewhere(1,2,3,4)" onmouseover="window.status='Information on Wrox books'"></a>
5.时间间隔和暂停
setTimeout("alert('Hello world')",5000);
setTimeout(function(){alert("Hello world!");},3000);
当然，还可以引用以前定义的函数:
function sayHelloWorld(){
alert("Hello world!");
}

setTimeout(sayHelloWorld,1000);
调用setTimeout()时，它创建一个数字暂停ID,与操作系统中的进程ID相似。暂停ID本质上是要延迟的进程的ID,
在调用setTimeout()后，就不应该再执行它的代码。
var iTimeoutId=setTimeout("alert('Hello world')",1000);
clearTimeout(iTimeoutId);

setInterval("alert('Hello world')",2000);
时间间隔用法的常见示例:
var iNum=0;
var iMax=100;
var iIntervalId=null;
function incNum(){
iNum++;
if(iNum==iMax){
clearInterval(iIntervalId);
alert(iNum);
}
}

iIntervalId=setInterval(incNum,500);
setTimeout示例:
var iNum=0;
var iMax=10;

function incNum(){
iNum++;
if(iNum!=iMax){
setTimeout(incNum,500);
}
}

setTimeout(incNum,500);
6.历史
go()方法只有一个参数，即前进或后退的页面数。如果实负数，就在浏览器历史中后退。如果是正数，就前进。
window.history.go(-1);
要前进一页，只需要使用正数1:
history.go(1);
另外，用back()和forward()方法可以实现同样的操作：
history.back();//go back one
history.forward();//go forward one
虽然不能使用浏览器历史中的URL,但可以用length属性查看历史中的页面数:
alert("There are currently "+history.length+" pages in histroy.");
document对象
document对象实际上是window对象的属性。
这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，
这些集合可以访问文档的各个部分，并提供页面自身的信息。
下面列出了BOM的document对象的一些通用属性:
---------------------------------------------------------------------
属性说明
---------------------------------------------------------------------
alinkColor 激活的链接的颜色，如<body alink="color">定义的
bgColor 页面的背景颜色，如<body bgcolor="color">定义的
fgColor 页面的文本颜色,如<body text="color">定义的
lastModified 最后修改页面的日期，是字符串
linkColor 链接的颜色，如<body link="color">定义的
referrer 浏览器历史中后退一个位置的URL
title <title/>标签中显示的文本
URL 当前载入的页面的URL
vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的
----------------------------------------------------------------------------
注意:反对使用这些属性，因为它们应用了<body/>标签中的旧HTML特性。应该用样式表脚本代替它们。

top.document.title="New page title";
document.URL="http://www.wrox.com/";
doucment对象也有许多集合，提供对载入的页面的各个部分的访问。
----------------------------------------------------------------
集合说明
----------------------------------------------------------------
anchors 页面中所有锚的集合(由<a name="anchorname"></a>表示)
applets 页面中所有applet的集合
embeds 页面中所有嵌入式对象的集合(由<embed/>标签表示)
forms 页面中所有表单的集合
images 页面中所有图像的集合
links 页面中所有链接的集合(由<a href="somwhere.html"></a>表示)
------------------------------------------------------------------
document.write()
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();
location对象
BOM中最有用的对象之一是location对象，它是window对象和document对象的属性(对此没什么标准，导致了一些混乱).
location对象表示载入窗口的URL,此外，它还可以解析URL.
hash----如果URL包含#，改方法将返回该符号之后的内容(例如,http://www.some_where.com/index#selection1的hash等于"#selection1").
host----服务器的名字(如www.wrox.com).
hostname--通常等于host,有时会省略前面的www.
href----当前载入的页面的完整的URL.
pathname--URL中主机名后的部分。例如,http://www.somewhere.com/pictures/index.htm的pathname是"/pictures/index.htm";
prot----URL中声明的请求端口。
protocol--URL中使用的协议，即双斜杠(//)之前的部分。例如,http://www.wrox.com中protocol属性等于http:
search---执行GET请求的URL中的问号(?)后的部分，又称为查询字符串。例如,http://www.somewhere.com/search.html?term=javascript
中的search属性等于?term=javascript
location.href是最常用的属性，用于获取或设置窗口的URl.
location.href="http://www.wrox.com/";
采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，意味着Back按钮会导航到调用的该属性的页面。
assign()方法实现同样的操作：
location.assign("http://www.wrox.com");
如果不想让包含脚本的页面能从浏览器历史中访问，可使用replace()方法。该方法所作的操作与assign()方法一样，但它多了一步操作，
即从浏览器历史中删除包含脚本的页面，这样，就不能通过浏览器的Back和Forward按钮访问它了。
location.replace("http://www.wrox.com/");

location对象还有个reload()方法，可重新载入当前页面。reload()方法有两种模式，即从浏览器缓存中重复，或从服务器端重载。
究竟采用哪种模式由该方法的参数值决定，如果是false,则从缓存中载入，如果是true，则从服务器端载入(如果省略参数，默认值为false)。
location.reload(true);
从缓存重载当前页面:
location.reload(false);
location.reload();
注意: 本节采用示例介绍了location对象。记住，location对象是window对象和document对象的属性。所以window.location和
document.location互相等价，可以交换使用。
navigator对象
---------------------------------------------------------------------------------------------------------------------
属性/方法说明 IE Moz Op Saf
---------------------------------------------------------------------------------------------------------------------
appCodeName 浏览器代码名的字符串表示(如:"Mozilla") X X X X
appName 官方浏览器名的字符串表示 X X X X
appMinorVersion 格外版本信息的字符串表示 X - - -
appVersion 浏览器版本信息的字符串表示 X X X X
----------------------------------------------------------------------------------------------------------------------

screen对象
availHeight---------窗口可以使用的屏幕的高度(以像素计),其中包括操作系统元素(如Window工具栏)需要的空间
availWidth---------窗口可以使用的屏幕的宽度(以像素计).
colorDepth---------用户表示颜色的位数。大多数操作系统采用32位。
height-------------屏幕的高度，以像素计。
width--------------屏幕的宽度，以像素计。

window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);

分享到：

VISTA系统更新后怎么上不了网？ | getQueryParamValue 得到URL中的参数类 ...

2009-10-23 09:34
浏览 902
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论