Javascript的運用與提高

田明山

【摘 要】JavaScript作為一種網絡的腳本語言、解釋性語言，采用小程序段的方式實現編程，廣泛的應用于網頁制作過程中，被幾乎所有的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies，以及更多的應用，是因特網上最流行的腳本語言。當你學習它、使用它、掌握它時，你一定會喜歡上它。

【關鍵詞】程序設計；JavaScript；問題解決

JavaScript屬于計算機專業類的重要教學內容，對學生提高網頁設計水平具有重要意義。為保證學生能掌握JavaScript的網頁制作，更好的培養網頁制作的實踐型人才，本文通過對JavaScrip學習過程中需要關注并加以解決的問題的分析，旨在提升學生掌握JavaScrip的層次。

1 如何在js被禁用的情況下要保證網頁仍能實現它的核心功能

具體的js實現有以下幾個方案：

方案一：可以使用javascript偽協議：

Myexample

方案二：使用內嵌的事件處理函數：

當我們采用以上兩種方案，在js被禁用時，“在一個新窗口里打開鏈接”這個功能就無法實現了。所以，我們不能為了使用js而濫用js。以下方案就為js預留出了退路，即所謂的平穩退化（留好js被禁后的退路）

方案三：平穩退化：

2 getElementsByName和getElementsById的區別

通常我們在獲取頁面內控件時有多種方法，比如document.getElementsByName和document.getElementsById。如果您需要查找文檔中的一個特定的元素，最有效的方法是 getElementById（）。由于一個頁面中的 name 屬性可能不唯一（如 HTML 表單中的單選按鈕通常具有相同的 name 屬性），而getElementsByName（） 方法則返回帶有指定名稱的對象的集合（即數組）。

3 將網頁的結構和內容與JavaScript腳本的動作分離

3.1 網頁的結構和內容由html來做，而網頁的樣式則由CSS來做，網頁的行為讓由JavaScript來做

3.2 分離JavaScript代碼其實很簡單，JavaScript代碼并不要求事件必須在html中處理，完全可以在外部JavaScript文件里將一個事件添加到html文檔中的某個元素上。

4 瀏覽器的兼容性問題

兼容性問題是由于多種瀏覽器同時存在而導致的。用戶在使用不同瀏覽器訪問一個相同的頁面時，所看到的效果有時會有差異。這種差異可能會比較小，甚至不會被用戶注意到；也可能很大，極端情況下可能造成在某種瀏覽器下無法正常瀏覽。引起這些差異的問題統稱為“瀏覽器兼容性問題”。我們所要做的是新老要通吃，尤其要注意老的，即向后兼容。比如：

4.1 document.formName.item（”itemName”） 問題

問題說明：IE下，可以使用 document.formName.item（”itemName”） 或 document.formName.elements ["elementName"]；而ff 下，只能使用document.formName.elements["elementName"]。

解決途徑：統一使用document.formName.elements["elementName"]。

4.2 數組類對象問題

問題說明：IE下，可以使用 （） 或 [] 獲取數組類對象；ff下，只能使用 [ ]獲取數組類對象。

解決途徑：統一使用 [] 獲取集合類對象。

4.3 window.location.href問題

問題說明：使用IE或者ff2.0.x以下版本，可以使用window.location或window.location.href；而ff1.5.x以下版本，卻只能使用window.location。

解決方法：只使用 window.location 以避免版本兼容問題。當然也可以使用 location.replace（）方法。

4.4 frame和iframe問題

4.4.1 訪問frame對象

IE：可以使用window.frameId或者window.frameName來訪問frame對象；

ff：只能使用window.frameName來訪問frame對象；

解決方法：統一使用 window.document.getElementById（”frameId”） 來訪問這個frame對象。

4.4.2 切換frame內容

在IE和ff中都均使用 window.document.getElementById（”frameId”）.src=“example.html”或 window.frameName.location=“example.html”來更改frame中的內容；

如果需要將frame中的參數傳回父窗口，可以在frame中使用parent關鍵字來訪問父窗口。

4.5 innerText的問題.

問題說明：innerText在IE中可以正常工作，但是innerText在ff中卻不起效果。

解決方法：在非IE瀏覽器中可以使用textContent代替innerText。innerHTML 能夠同時被ie、ff等瀏覽器支持，而outerHTML卻只能被ie支持，最好不用。

5 性能考慮

以前的程序員話費大量的精力，想盡一切的辦法把程序的效率弄得高一點，因為那時的計算機非常慢，而且也非常貴，而現如今的計算機不僅快多了而且也便宜多了，是不是就無需考慮執行性能了呢？性能是永遠要考慮的問題，這涉及到你編寫的網頁能否順利快速地加載。

那如何保證腳本執行的性能是最優的呢？我們可以盡量做到以下幾點。

5.1 盡可能少訪問dom、少使用標記、少用循環遍歷

5.2 合并腳本代碼（js代碼），減少頁面在加載時所發送的請求數量；將之前，這樣可以加快頁面的加載速度，卻不影響js的加載。

5.3 盡可能的壓縮腳本：將js代碼中多余的空格、注釋刪除，甚至可以將變量名簡化?？梢詼蕚鋬蓚€版本的js腳本文件：一個是工作版本，用于修改代碼和注釋，另一個為精簡版本，則用于發布。

不管什么樣的語言，能實際運用才是王道，技術是靠練出來的，也就是說多做項目，你才能有提高。JavaScript更是如此，同時JavaScript的掌握和運用還需要結合HTML、SQL、CSS等的學習來提高自己綜合能力。一個人必須去感受和領悟構建程序帶來的強烈快感。當你一步步的掌握知識點，一點點的將程序搭建起來時，就會對自己產生激勵與肯定，帶來十分美妙的滿足感。

【參考文獻】

[1]W3School.W3School教程JavaScript.

[2]Jaward.如何正確學習JavaScript.

[3]周翔.提高web應用性能之 JavaScript 性能調優.

[責任編輯：王偉平]