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