CSDN博客

img zhangboone

JavaScript程序设计——第5章 浏览器中的JavaScript

发表于2008/10/2 0:38:00  378人阅读

分类: JavaScript

5.1 HTML中的JavaScript

 

5.1.1 <script/>标签

HTML页面中包含JavaScript通过使用<script/>标签来实现。该标签通常放置在页面<head/>标签中。有两个属性,language声明要使用的脚本语言;src是可选的,声明要加入页面的外部JavaScript文件。如果未声明src,在<script/>标签中即可任意形式编写JavaScript代码,如果声明了,那么<script/>标签中的代码可能无效。如下例:

<html>

<head>

<title>Title of Page</title>

<!—定义了内部JavaScript代码 -->

<script language=JavaScript>

var i = 0;

</script>

<!--定义了外部JavaScript代码文件的链接-->

<script language=JavaScript src=../scripts/external.js></script>

</head>

<body>

<!-- body goes here -->

</body>

</html>

 

5.1.2 外部文件格式

外部文件格式只包含JavaScript代码的纯文本,不需要<Script/>标签,引用文件的<Script/>标签出现在HTML页中。

 

5.1.3 内嵌代码和外部文件

何时应该采用内嵌代码,何时采用外部文件?

大量的JavaScript代码不应内嵌在HTML文件中,原因如下:

l   安全性——只要查看页面的源代码,任何人都可确切地知道其中的代码做了什么。在外部文件中还可以加入版权和其他知识产权通告,而不打断页面流。

l   代码维护——把所有JavaScript文件放在一个目录中易于维护,这样在发生JavaScript错误时,就不会对放置代码的位置有任何疑问。

l   缓存——浏览器会根据特定的设置缓存所有外部链接的JavaScript文件,这意味着如果两个页面使用同一文件,只需要下载一次。

 

5.1.4 标签位置

一般来说,所有代码和函数都定义在HTML页的<head/>标签中,这样在显示页面主体后,代码就被完全装载进浏览器。若出现在<body/>标签中,说明是调用前面定义的函数。

<script/>放在<body/>内时,只要脚本所属的部分页面被载入浏览器,脚本就会被执行。但建议不要这样做,建议在页面主体重使用事件处理函数(event handler),例如:

<html>

<head>

<title>Title of Page</title>

<script language=JavaScript>

function sayHi() {

alert(Hi);

}

</script>

</head>

<body>

<input type=button value=Call Function onclick=sayHi() />

</body>

</html>

Onclick声明一个事件处理函数,即响应特定事件的代码。

 

5.1.5 隐藏还是不隐藏

如果浏览器不支持JavaScript,可以在内嵌代码周围加入HTML注释,这样其他浏览器就不会在屏幕上显示这段代码。

<script language=JavaScript><!-- hide from older browsers

function sayHi() {

alert(Hi);

}

//-->

</script>

 

5.1.6 <noscript/>标签

支持或者启用JavaScript的浏览器会忽略<noscript/>标签中的代码,不支持或禁用JavaScript的浏览器则显示<noscript/>标签中的内容。

 

5.1.7 XHTML中的改变

XHTML中不再用language特性,而用type声明内嵌代码或要加入的外部文件的mine类型,JavaSriptmine类型是“text/javascript”。

XHTML中第二个改变是CDATAXML中的CDATA段用于声明不应被解析为标签的文本,这样就可以使用特殊字符,如<>&*,而不必使用它们的字符实体。如遇到不支持CDATA的浏览器,可使用注释隐藏该代码。

 

 

5.2 BOM(浏览器对象模型)

BOM提供了独立于内容而与浏览器窗口进行交互的对象。

BOM由一系列相关的对象构成,下图展示了基本的BOM体系结构:

 

可以看到,window对象是整个BOM的核心,所有对象和集合都以某种方式回接到window对象。

 

5.2.1 window对象

Window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其它影响。

如果页面使用框架集合,每个框架都有它自己的window对象,存放在frames集合中。在frames集合中,可用数字(由0开始,从左到右,逐行的)或用名字对框架进行索引。

如果有一个框架集,其中包含一个顶层框架(name=topname”)和两个底层框架。那么可以用window.frames[0]window.frames[“topname”]top.frames[0]来引用框架,其中top对象指向的都是最顶层的框架,即浏览器窗口本身。

另外,当定义了嵌套窗口时,可用parent指向父框架;还有一个全局化的窗口指针self,它总是等于window

 

1.窗口操作

可以用四种方法移动或调整浏览器窗口的大小:

l   moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。dx为负值,向左移动窗口,dy为负值,向上移动窗口。

l   moveTo(x,y)——移动浏览器窗口,使它左上角位于用户屏幕的(x,y)处。可以使用负数,不过这样会把部分窗口移出屏幕的可视区域。

l   resizeBy(dw,dh)——相对于浏览器窗口的当前大小,把窗口的宽度调整dw个像素,高度调整dy个像素。dw为负数,把缩小窗口的宽度,dy为负数,缩小窗口的高度。

l   resize(w,h)——把窗口的宽度调整为w,高度调整为h。不能使用负数。

 

2.导航和打开新窗口

JavaScript可以导航到指定的URL,并用window.open()方法打开新窗口。该方法接受四个参数,即要载入新窗口的页面的URL,新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数,最后一个参数只有在调用window.open()方法却打不开新窗口时才有效。

特性字符串使用逗号分隔的设置列表,它定义新创建的窗口的某些方面:

设置

说明

left

Number

说明新创建的窗口的左坐标。不能为负数

top

Number

说明新创建的窗口的上左边。不能为负数

height

Number

说明新创建的窗口的高度。该数字不能小于100

width

Number

说明新创建的窗口的宽度。该数字不能小于100

resizable

yes,no

判断新窗口是否能通过拖动边线调整大小。默认值是no

scrollable

yes,no

判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no

toolbar

yes,no

判断新窗口是否显示工具栏。默认值是no

status

yes,no

判断新窗口是否显示状态栏。默认值是no

location

yes,no

判断新窗口是否显示(web)地址栏。默认值是no

如果在主浏览器窗口中调用window.close()方法,将得到一条消息:提示脚本错误试图关闭窗口。通用规则是,脚本可以关闭它们打开的任何窗口,但不能关闭其它窗口。

 

3.系统对话框(system dialog

l   alert()方法——接受一个参数,即要显示给用户的文本。调用该方法后,浏览器将创建一个具有OK按钮的系统消息框,显示指定文本。

l   confirm()方法——与alert()方法相似,但弹出的对话框除了OK按钮外还有Cancel按钮,这样允许用户说明是否执行指定的动作。为判断用户单击的是OK还是Cancel按钮,confirm()返回一个Boolean值,如果点OK,返回true,点击Cancel返回false。典型用法如下:
if(confirm(“Are you sure?”)){
    alert(“I’m so glad you’re sure!”);
}else{
    alert(“I’m sorry to hear you’re not sure!”);
}

l   prompt()方法——弹出的对话框提示用户输入某些信息。除OK按钮和Cancel按钮外,还有文本框,要求用户在此输入某些数据。该方法接受两个参数,即要显示给用户的文本和文本框中的默认文本(如果不需要,可以是空串)。如果点击OK按钮,将文本框中的值作为函数值返回。如果单击Cancel按钮,返回null

 

4.状态栏(status bar

状态栏是页面底部边界内的区域,用于向用户显示信息。可以使用window对象的status属性和defaultStatus属性设置它们的值。Status可以使状态栏的文本暂时改变,defaultStatus可在用户离开当前页面前一直改变该文本。

当鼠标移到链接上时,浏览器默认在状态栏中显示href属性的值。设置window.status属性,可以向用户隐藏链接实现的细节:

<a href=javascript:goSomewhere(1,2,3,4) onmouseover=window.status=hello world’ “>Books</a>

 

5.时间间隔和暂停

暂停是在制定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码,每次执行之间等待指定的毫秒数。

可用window对象的setTimeou()方法设置暂停。该方法接受两个参数,要执行的代码和在执行它之前要等待的毫秒数(1/1000秒)。第一个参数可以是代码串,也可以是函数指针。要取消尚未执行的暂停可调用clearTimeout()方法,并将暂停ID传递给它。

可调用setInterval()方法设置时间间隔,参数是要执行的代码和每次执行之间等待的毫秒数。ClearInterval()方法可用ID阻止再次执行该代码。

 

6.历史

可以访问浏览器窗口的历史。处于安全原因,所有导航只能通过历史完成,不能得到浏览器历史中包含的页面的URL

可以使用window对象的history属性及相关方法完成操作。

go()方法只有一个参数,即前进或后退的页面数。如果是负数,就在浏览器历史中后退。如果是正数,就前进。因此,后退一页,就用:window.history.go(-1)history.go(-1)

通常用该方法创建网页中嵌入Back按钮,例如:

<a href=”javascript:history.go(-1)”>Back</a>

back()forward()可实现同样的操作。

虽然不能使用浏览器历史中的URL,但可以用length属性查看历史中的页面数:

alert(“There are currently”+history.length.+”pages in history”);

如果想前进或后退多个页,想知道是否可以这样做,上面的代码就非常有用。

 

5.2.2 document对象

    Document对象实际上是window对象的属性,它是唯一一个即属于BOM又属于DOM的对象。

lastModified属性获取的是最后一个修改页面的日期的字符串表示,用作旁注,除非你想在主页上显示最后的修改日期。

Title属性是可读写的,所以可以随时改变。

URL也是可读写的,所以可以用来获取当前页面的URL,或者设置为新的URL

Write()和writeln()方法接受一个参数,即要写入文档的字符串,唯一的不同是writeln()在结尾加一个换行符。这两个方法都会把字符串的内容插入到调用它们的位置,这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串。

Open()方法用于打开已经载入的文档以便编写,close()方法用于关闭open()方法打开的文档。

 

5.2.3 location对象

该对象表示载入窗口的URL,此外还可以解析URL

l   hash——如果URL包含#,该方法将返回该符号之后的内容。

l   host——服务器的名字。

l   hostname——通常等于host,有时会省略前面的www

l   href——当前载入的页面的完整URL

l   pathname——URL中主机名后的部分。

l   port——URL中声明的请求的端口。默认情况下属于空白。

l   protocol——URL中使用的协议,即双斜杠(//)之前的部分。

l   search——执行GET请求的URL中的问号(?)后的部分,又称查询字符串。

Replace()方法,用于设置或获取窗口的URL,然后从浏览器历史中删除包含脚本的页面,这样就不能通过浏览器的backforward按钮访问它了。

Reload()方法可重载当前页面。有一个参数,当为false时从缓存载入,为true从服务器载入。这个方法调用后的代码可能执行,也可能不被执行,因此,最好把它放在最后一行。

注意,location对象是window对象和document对象的属性,所以window.locationdocument.location互相等价,可以交换使用。

 

5.3 小结

    介绍了BOM及它提供的各种对象。了解了Windows对象是JavaScript世界的核心,其他所有BOM对象都不过是window对象的属性。

阅读全文
0 0

相关文章推荐

img
取 消
img