實(shí)現(xiàn)html界面
<!DOCTYPE html><html><head><title>Select and Go Navigation</title><script src="script01.js"></script><link rel="stylesheet" href="script01.css" rel="external nofollow" ></head><body><form action="gotoLocation.cgi" class="centered"><select id="newLocation"><option selected>Select a topic</option><option value="script06.html">Cross-checking fields</option><option value="script07.html">Working with radio buttons</option><option value="script08.html">Setting one field with another</option><option value="script09.html">Validating Zip codes</option><option value="script10.html">Validating email addresses</option></select><noscript><input type="submit" value="Go There!"></noscript></form></body></html>
實(shí)現(xiàn)菜單導(dǎo)航
window.onload = initForm;window.onunload = function() {};function initForm() {document.getElementById("newLocation").selectedIndex = 0;document.getElementById("newLocation").onchange = jumpPage;}function jumpPage() {var newLoc = document.getElementById ("newLocation");var newPage = newLoc.options [newLoc.selectedIndex].value;if (newPage != "") {window.location = newPage;}} 下面是源碼分析
1.
window.onload = initForm;
window.onunload = function() {};
在窗口加載時(shí)，調(diào)用initForm()函數(shù)。下一行需要解釋一下，因?yàn)樗翘幚砟承g覽器的古怪行為的變通方法。
當(dāng)窗口卸載時(shí)（即關(guān)閉窗口或者瀏覽器轉(zhuǎn)到另一個(gè)網(wǎng)址），我們調(diào)用一個(gè)匿名函數(shù)（anonymousfunction），即沒(méi)有名稱的函數(shù)。在這個(gè)示例中，這個(gè)函數(shù)不但沒(méi)有名稱，而且根本不做任何事情。提供這個(gè)函數(shù)是因?yàn)楸仨殞nunload設(shè)置為某種東西，否則，當(dāng)單擊瀏覽器的back按鈕時(shí)，就不會(huì)觸發(fā)onload事件，因?yàn)樵谀承g覽器（比如Firefox和Safari）中頁(yè)面會(huì)被緩存。讓onunload執(zhí)行任何操作，就會(huì)使頁(yè)面不被緩存，因此當(dāng)用戶后退時(shí)，會(huì)發(fā)生onload事件。
匿名是指在function和()之間沒(méi)有名稱。這是觸發(fā)onunload但不讓它做任何事情的最簡(jiǎn)單的方法。與任何函數(shù)中一樣，花括號(hào)包含函數(shù)的內(nèi)容。這里的花括號(hào)是空的，因?yàn)檫@個(gè)函數(shù)不做任何事情。
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函數(shù)中，第一行獲得HTML頁(yè)面上的菜單（它的id為newLocation），并且將它的selectedIndex屬性設(shè)置為零，這會(huì)使它顯示Select a topic。
第二行讓腳本在菜單選擇發(fā)生改變時(shí)，調(diào)用jumpPage()函數(shù)。
3.
var newLoc = document.getElementById("newLocation");
在jumpPage()函數(shù)中，newLoc變量查找訪問(wèn)者在菜單中選擇的值。
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
從方括號(hào)中的代碼開始，向外依次分析。newLoc.selectedIndex是一個(gè)從0～5的數(shù)字（因?yàn)橛?
個(gè)菜單選項(xiàng)。記住JavaScript的編號(hào)常常是基于零的）。得到這個(gè)數(shù)字之后，接下來(lái)獲得對(duì)應(yīng)的菜單項(xiàng)
的值，這就是我們希望跳轉(zhuǎn)到的網(wǎng)頁(yè)的名稱。然后，將結(jié)果賦值給變量newPage。
5.
if (newPage != "") {
window.location = newPage;
這個(gè)條件語(yǔ)句首先檢查newPage是否非空。換句話說(shuō)，如果newPage有一個(gè)值，那么讓窗口轉(zhuǎn)到
選擇的菜單項(xiàng)所指定的URL。
