說(shuō)明：本文為《JavaScript高級(jí)程序設(shè)計(jì)》第5章學(xué)習(xí)筆記。
本章探討如何把JavaScript嵌入HTML及其他語(yǔ)言，并介紹了BOM（瀏覽器對(duì)象模型）的一些基本概念。
一．HTML中的JavaScript
1. <script/>標(biāo)簽
最初定義的JavaScript標(biāo)簽具有一個(gè)或兩個(gè)特性，language特性聲明要使用的腳本語(yǔ)言，src特性是可選的，聲明要加入頁(yè)面的外部JavaScript文件。language特性一般被設(shè)置為JavaScript，不過(guò)也可以用它聲明JavaScript的確切版本，例如JavaScript 1.3（如果省略，瀏覽器默認(rèn)使用最新的JavaScript版本）。
Eg1. <script language=”JavaScript”>
var i=0;
</script>
Eg2. <script language=”JavaScript” src=”external.js”></script>
2. 外部文件格式
外部文件中為只包含JavaSript代碼的純文本文件。在外部文件中不需要<script/>標(biāo)簽。
Eg. <script language=”JavaScript” src=”external.js”></script>
external.js的內(nèi)容如下：
function sayHello() {
alert(“Hello!”);
}
3. 內(nèi)嵌代碼和外部格式
一般認(rèn)為，大量的JavaScript不應(yīng)內(nèi)嵌到HTML文件中，原因如下：
l 安全性——只要查看頁(yè)面的源代碼，任何人都可確切地知道其中的代碼做了什么。如果懷有惡意的開(kāi)發(fā)者查看了源代碼，就可能發(fā)現(xiàn)系統(tǒng)漏洞，危及整個(gè)站點(diǎn)或應(yīng)用程序的安全。此外，在外部文件中還可加入版權(quán)和其他知識(shí)產(chǎn)權(quán)通告，而不打算頁(yè)面流；
l 代碼維護(hù)——如果JavaScript代碼散布于多個(gè)頁(yè)面，那么代碼維護(hù)將變成一場(chǎng)噩夢(mèng)。
l 緩存——瀏覽器會(huì)根據(jù)特定的設(shè)置緩存所有外部鏈接的JavaScript文件，這意味著如果兩個(gè)頁(yè)面使用同一個(gè)文件，只需要下載該文件一次。這將加快下載速度。把同一段代碼放入多個(gè)頁(yè)面中，不只浪費(fèi)，還增加了頁(yè)面大小，從而增加下載時(shí)間。
4．標(biāo)簽放置
一般放在<head/>中，這樣在顯示頁(yè)面主題后，這些代碼就被完全裝載進(jìn)瀏覽器。唯一該出現(xiàn)在<body/>標(biāo)簽中的代碼是調(diào)用前面定義的函數(shù)的代碼。
Eg.
<html>
<head>
<title>測(cè)試</title>
<script language="JavaScript">
function sayHi() {
alert("Hi");
}
</script>
</head>
<body>
<input type="button" value="調(diào)用函數(shù)" onclick="sayHi()"/>
</body>
</html>
5. 隱藏還是不隱藏
若要在不支持JavaScript的瀏覽器中隱藏<script/>的代碼。
Eg.
<script language="JavaScript">
<!—
function sayHi() {
alert("Hi");
}
//-->
</script>
6．<noscript/>標(biāo)簽
不支持JavaScript的瀏覽器另外一個(gè)令人關(guān)注的是如何提供替代的內(nèi)容。隱藏代碼只是解決方法的一部分，開(kāi)發(fā)者還需要一種方法，聲明在JavaScript不能用時(shí)應(yīng)該顯示的內(nèi)容。解決方法是采用<noscript/>標(biāo)簽，它可包含任何HTML代碼（除<script/>）。支持或啟用JavaScript的瀏覽器會(huì)忽略這些HTML代碼，不支持的則顯示<noscript/>的內(nèi)容。
7．XHTML中的改變
近年來(lái)，隨著XHTML標(biāo)準(zhǔn)的出現(xiàn)，<script/>標(biāo)簽也經(jīng)歷了一些改變。它不再用language特性，而用type特性來(lái)聲明要加入的外部文件的mine類型。
Eg. <script type=”text/javascript” src=”external.js”></script>
二．SVG中的JavaScript
SVG是一種嶄露頭角的基于XML的語(yǔ)言，用于在Web上繪制矢量圖形。矢量圖形不同于光柵圖形(位圖)，它們定義的是三角形、線段及它們之間的關(guān)系，而不只是定義圖像的每個(gè)像素的顏色。這樣生成的圖像無(wú)論大小，看起來(lái)都是相同的。隨著這種語(yǔ)言的日益流行，矢量圖形程序已經(jīng)開(kāi)始加入SVG導(dǎo)出功能。
三．BOM
BOM由一系列相關(guān)的對(duì)象構(gòu)成，window對(duì)象是整個(gè)BOM的核心，所有對(duì)象的集合都以某種方式回接到window對(duì)象。
1. window對(duì)象
window對(duì)象表示整個(gè)瀏覽器窗口，但不必表示其中包含的內(nèi)容。此外，window還可用于移動(dòng)或調(diào)整它表示的瀏覽器的大小，或者對(duì)它產(chǎn)生其他影響。
Eg. 可用window.frames[0]、window.frames[“topFrame”]來(lái)引用框架集合中的某個(gè)框架。
1） 窗口操作
moveBy(dx, dy)——把瀏覽器窗口相對(duì)當(dāng)前位置水平移動(dòng)dx個(gè)像素，垂直移動(dòng)dy個(gè)像素。
moveTo(x, y)——移動(dòng)瀏覽器窗口，使它的左上角位于用戶屏幕的(x, y)處。
resizeBy(dw, dh)——相對(duì)于瀏覽器窗口的當(dāng)前大小，把窗口的寬度調(diào)整為dw個(gè)像素，高度調(diào)整為dh個(gè)像素。
resizeTo(w, h)——把窗口的高度調(diào)整為w，高度調(diào)整為h。不能使用負(fù)數(shù)。
1) 導(dǎo)航和打開(kāi)窗口
Eg. window.open(http://www.wrox.com/, “wroxwindow”, “height=150,width=300,top=10,left=10,resizable=yes”);
2) 系統(tǒng)對(duì)話框
Eg1. alert(“Hello world!”);
Eg2. comfirm(“Are you sure?”);
Eg3. propt(“What’s you name?”, “阿蜜果”);
3) 狀態(tài)欄
狀態(tài)欄為底部邊界內(nèi)的區(qū)域，用于向用戶顯示信息。
Eg1. window.defaultStatus = “You are surfing www.wrox.com.”;
Eg2. window.status = “hello, 阿蜜果”;
4) 時(shí)間間隔和暫停
JavaScript支持暫停和時(shí)間間隔，這可有效地告訴瀏覽器應(yīng)該何時(shí)執(zhí)行某行代碼。所謂暫停，是在指定的毫秒數(shù)后執(zhí)行指定的代碼。時(shí)間間隔是反復(fù)執(zhí)行指定的代碼，每次執(zhí)行之間指定的毫秒數(shù)。
可以用window對(duì)象的setTimeout()方法設(shè)置暫停。該方法接受兩個(gè)參數(shù)，要執(zhí)行的代碼和在執(zhí)行它之前要等待的毫秒數(shù)。第一個(gè)參數(shù)可以是代碼串，也可以是函數(shù)指針。
Eg1. setTimeout(“alert(‘Hello world!’)”, 1000);
Eg2. setTimeout(function() {alert(“Hello world”);}, 1000);
該函數(shù)返回一個(gè)數(shù)字暫停ID，與操作系統(tǒng)的進(jìn)程ID相似。要取消還未執(zhí)行的暫停，可調(diào)用clearTimeout()方法，并將暫停ID傳遞給它。如下：
var iTimeoutId = setTimeout(“alert(‘Hello world!’)”, 1000);
clearTimeout(iTimeoutId);
時(shí)間間隔與暫停的運(yùn)行方式相似，只是它無(wú)限次地每隔指定的時(shí)間段就重復(fù)一次指定的代碼。可調(diào)用setInterval()方法設(shè)置時(shí)間間隔，它的參數(shù)和setTimeout()相同，是要執(zhí)行的代碼和每次執(zhí)行之間等待的毫秒數(shù)。
Eg1. setInterval(“alert(‘Hello world!’)”, 1000);
Eg2. setInterval(function() {alert(“Hello world!”)}, 1000);
此外，與setTimeout()類似，setInterval()方法也創(chuàng)建時(shí)間間隔ID，以標(biāo)識(shí)要執(zhí)行的代碼。ClearInterval()方法可用這個(gè)ID阻止再次執(zhí)行該代碼。
Eg.
var iNum = 0;
var iMax = 100;
var iIntervalId = null;
function incNum() {
iNum++;
if (iNum = iMax) {
clearInterval(iIntervalId);
}
}
iIntervalId = setInterval(incNum, 500);
這段代碼的功能是：每隔500ms，就對(duì)數(shù)字iNum進(jìn)行一次增量運(yùn)算，直到它達(dá)到最大值（iMax）。
5) 歷史
歷史是指訪問(wèn)過(guò)的站點(diǎn)的列表。處于安全原因，所有導(dǎo)航只能通過(guò)歷史完成，不能得到瀏覽器歷史中包含的頁(yè)面的URL。
Eg1. 后退一頁(yè)：window.history.go(-1); 或者 history.go(-1); 或者history.back();
Eg2. 前進(jìn)一頁(yè)：history.go(1); 或者 history.forward();
Eg3. 查看歷史中的頁(yè)面數(shù)：history.length;
2. document對(duì)象
document對(duì)象實(shí)際上是window對(duì)象的屬性，因?yàn)?/span>window對(duì)象的任何屬性和方法都可直接訪問(wèn)，所以下面代碼返回“true”：
alert(window.document == document);
該對(duì)象的獨(dú)特之處是它是唯一一個(gè)既屬于BOM又屬于DOM的對(duì)象。
Eg1. 改變框架的標(biāo)題：top.document.title = “新標(biāo)題”;
Eg2. 把窗口導(dǎo)航到新頁(yè)面：document.URL = “http://www.aygfsteel.com/amigoxie”;
Eg3. document.links[0]訪問(wèn)鏈接；
Eg4. document.images[0]或document.images[“imgHome”]訪問(wèn)圖像；
Eg5. document.forms[0]或document.forms[“frmSubscribe”]訪問(wèn)表單。
Eg6. 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>新窗口</title></head>”);
oNewWin.document.write(“<body>新窗口內(nèi)容</body></html>”);
oNewWin.document.close();
本例功能如下：打開(kāi)空白頁(yè)，然后寫(xiě)入新頁(yè)面，寫(xiě)完后，調(diào)用close()方法完成顯示。
3. location對(duì)象
BOM最有用的對(duì)象之一是location對(duì)象，它是window對(duì)象和document對(duì)象的屬性。location對(duì)象表示載入窗口的URL，此外，它還可以解析URL。
l hash——如果URL包含#，該方法將返回該符號(hào)之后的內(nèi)容；
l host——服務(wù)器的名字（eg. www.wrox.com）；
l hostname——通常等于host，有時(shí)會(huì)省略前面的www；
l href——當(dāng)前載入的頁(yè)面的完整URL；
l pathname——URL中主機(jī)后面的部分；
l port——URL中聲明的請(qǐng)求的端口，默認(rèn)情況下，無(wú)端口信息；
l protocol——URL中使用的協(xié)議，即雙斜杠之前的部分；
l search——執(zhí)行GET請(qǐng)求的URL中的問(wèn)號(hào)后的部分。
Eg1. location.href = “http://www.aygfsteel.com/amigoxie”;
Eg2. location.assign(“http://www.aygfsteel.com/amigoxie”);
如果不想要包含腳本的頁(yè)面能從瀏覽器中訪問(wèn)，可使用replace()方法，該方法所做的操作與assign()方法一樣，但它多了一步操作，即從瀏覽器歷史中刪除包含腳本的頁(yè)面，這樣就不能通過(guò)瀏覽器的Back和Forward按鈕訪問(wèn)它了。
Eg3. location. Replace(“http://www.aygfsteel.com/amigoxie”);
Eg4. 從服務(wù)器重載當(dāng)前頁(yè)面：location.reload(true);
Eg5. 從緩存中重載當(dāng)前頁(yè)面：location.reload(false); 或者 location.reload();
4. navigator對(duì)象
它是最早實(shí)現(xiàn)的BOM對(duì)象之一。它包含大量有關(guān)Web瀏覽器的消息。它也是window對(duì)象的屬性，可以用window.navigator引用它。
它包括appName、appVersion等屬性。
5. screen對(duì)象
雖然處于安全原因，有關(guān)用戶系統(tǒng)的大多數(shù)信息都被隱藏了，但還可以用screen對(duì)象獲取某些關(guān)于用戶屏幕的信息。
屬性如下：
l availHeight——窗口可以使用的屏幕的高度（以像素計(jì)），其中包括操作系統(tǒng)元素需要的空間；
l availWidth——窗口可以使用的屏幕的狂賭（以像素計(jì)）；
l colorDepth——用戶表示顏色的位數(shù)。大多數(shù)系統(tǒng)采用32位置；
l height——屏幕的高度（以像素計(jì)）；
l width——屏幕的寬度（以像素計(jì)）。
Eg. window.resizeTo(screen.availWidth, screen.availHeight);
四．小結(jié)
本章介紹了Web瀏覽器中的JavaScript，學(xué)到了BOM及它提供的各種對(duì)象。
posted on 2007-08-31 17:40
阿蜜果 閱讀(1408)
評(píng)論(3) 編輯 收藏 所屬分類:
Javascript