DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript高級程序設計(第3版)學習筆記 概述
JavaScript高級程序設計(第3版)學習筆記 概述
編輯:JavaScript基礎知識     
在JavaScript面世之初,沒有人會想到它會被應用的如此廣泛,也遠比一般人想象中的要復雜強大的多,在我自己學習的過程中,曾經有過多次震撼,只是常常沒有過多久,很多美輪美奂的用法就又模糊起來,希望通過對JavaScript高級程序設計(第3版)的專題學習筆記,能夠較為系統的將基礎知識梳理一次,也能夠將自己平常學習與工作過程中遇到的一些美妙用法記錄下來,便於自己再次學習,當然,也希望可以給有需要的朋友們一些力所能及的幫助。

相關術語

  先簡要說一下和JavaScript相關的一些背景術語,就不詳細討論JavaScript的歷史了,想了解的朋友可以參考原書。

  • ECMA:歐洲計算機制造商協會(Standard ECMA-262European Computer Manufacturers Association)。
  • TC39:ECMA第39號技術委員會(Technical Committee#39),由來自一些關注腳本語言發展的公司的程序員組成,負責制定一種通用、跨平台、供應商中立的腳本語言。
  • ECMAScript:由ECMA制定,在ECMA-262中定義的腳本語言標准。ECMAScript只是一個腳本語言標准,你盡可以在自己的環境中取實現它,這個環境,就稱為ECMAScript的宿主環境,Web浏覽器可以說是ECMAScript目前最重要的宿主環境了,而不同的Web浏覽器,對ECMAScript標准的支持也不盡相同。除Web浏覽器,Adobe ActionScript也實現了ECMAScript。一般的宿主環境,除了實現ECMAScript標准,也會有各自的擴展,以便與環境更好的交互。
  • ES3、ES5:ECMAScript目前最新的版本是5.1版,發布於2011年7月,可以從其官方網站免費下載。最主要的兩個版本是第3版和第5版,分別簡稱為ES3和ES5,目前五大浏覽器(IE、Firefox、Chrome、Safari、Opera)都已經開始不同程度的支持ES5了,但目前在Web浏覽器上兼容性最好的還是第3版。介於向後兼容和安全上的考慮,第5版提供了普通和嚴格兩種模式,後面會再討論相關內容。
  • LiveScript、JavaScript、JScript:LiveScript是Netscape最初開發JavaScript時的名稱,在發布時,為了趕上Java的時髦,臨時修改為JavaScript了,而JScript則是微軟為了防止版權沖突而給自己的腳本語言起的名稱。對於開發者來說,他們都只是ECMAScript的實現。一般來說,JavaScript的除了實現ECMAScript外,還會包括針對浏覽器的擴展(BOM:浏覽器對象模型)和針對XML/HTML API的擴展(DOM:文檔對象模型)。
  • DOM:文檔對象模型(Document Object Model),DOM標准由負責制定WEB通信標准的W3C(World Web Consortium,萬維網聯盟)制定。DOM並非針對JavaScript的,很多別的語言也都實現了DOM。目前DOM共有三級標准(DOM1、DOM2、DOM3),有時,也將DOM標准之前稱為DOM0級,現代浏覽器幾乎全部支持DOM2級標准,也部分支持DOM3級標准了。
  • BOM:浏覽器對象模型(Browser Object Model)。

使用JavaScript

  在HTML中使用JavaScript的方式主要有:

  1. 使用<script>標簽元素引入外部文件(推薦),將代碼寫入外部文件中。
  2. 使用<script>標簽元素嵌入JavaScript代碼。
  3. 直接在HTML中嵌入JavaScript代碼,比如在HTML元素中的事件處理程序。

  <script>標簽元素:

屬性 是否必填 適用范圍 說明 async 可選 外部文件 表示應該立即下載腳本,但不應妨礙頁面中的其它操作,比如下載資源或其它腳本文件 charset 可選 外部文件 表示通過src指定的代碼的字符集 defer 可選 外部文件,IE4-7也支持嵌入代碼 表示腳本可以延遲到文檔完全解析和顯示之後再執行 language 可選(已廢棄)   原用於表示編寫代碼的腳本語言 src 可選,使用外部文件時為必填選項 外部文件 表示包含要執行的外部文件 type 可選,默認text/javascript   可以看成是language的替代屬性,表示編寫代碼使用的腳本語言的內容類型(也稱為MIME類型)。

 說明:

  (1)外部文件

  A、在XHTML文檔中,導入外部文件時,可以使用簡寫方式<script/>但是在HTML中只能<script></script>。

  B、導入外部文件時,src屬性是必須的,這個時候嵌入在<script></script>中的代碼(如果有)會被忽略。

  C、src屬性也可以指定來自外部域的JavaScript文件,這一點讓<script>元素異常強大,也備受爭議,因為可能會讓人惡意注入腳本。

  D、外部文件只需要包含<script></script>中的代碼即可,不需要包括<script>元素本身;外部文件一般擴展名為.js,但這不是強制的。

  (2)在<script>元素中內嵌代碼時,只需要指定type屬性,但代碼中不能出現</script>字符串,否則會解析出錯。例如:
復制代碼 代碼如下:
<script type="text/javascript">
//document.writeln('</script>');會將字符串中的</script>作為前面的標簽結束符來解析,從而出現異常
document.writeln('</scr'+'ipt>');//通過將</script>分開,從而避免作為<script>的結束標簽解析
</script>

(3)關於type屬性,雖然text/javascript和java/ecmascript都已經不被推薦使用,但一直以來使用的都還是test/javascript,實際上,服務器在傳送JavaScript文件時使用的MIME類型通常是application/x-javascript,但在type中設置這個值可能導致腳本被忽略,另外,在非IE浏覽器中還可以使用application/javascript和application/ecmascript。type如果沒有指定,默認值為text/javascript。

  (4)只要不包含async和defer,浏覽器會按照<script>在頁面中出現的順序依次解析;設置了defer時,會立即下載<script>元素,但是延遲執行,在規范中,要求多個含defer屬性的腳本順序執行且在DOMContentLoaded事件前執行,但是在實現中不一定滿足這些要求;在HTML5中添加了async屬性,和defer類似,也只是適用於外部文件,告訴浏覽器立即下載文件,但延遲執行,不同的是,多個含async的腳本即便在規范中也沒有規定執行的順序,異步腳本再load事件前執行,但可能在DOMContentLoaded之前或之後執行。

  (5)在閱讀之前的代碼或者用一些IDE生成代碼時,常常可以看到下面的結構:
復制代碼 代碼如下:
<script type="text/javascript">
//<![CDATA[
// 這裡首先是以//開始的JavaScript注釋
// 然後<![CDATA[...]]>結構是XHTML(XML)的一個特殊區域,區域內的文本不需要做任何解析,以防止XHTML將代碼中的類似小於號“<”的這種特殊符號解析為元素標簽
// 若不使用CDATA結構,則需要轉義成相應實體,比如小於號(<)需要使用(<)
// 對於不兼容XHTML的,由於最開始的//注釋,也能夠平穩退化
//]]>
</script>

一些常用的HTML轉義: 顯示 說明 實體名稱 實體編號   半方大的空白       全方大的空白       不斷行的空白     < 小於 < < > 大於 > > & &符號 & & " 雙引號 " "

  有些不支持JavaScript的浏覽器,可以將JavaScript代碼包含在一個HTML注釋中(由於所有主流浏覽器均支持JavaScript,所以不再推薦使用):

復制代碼 代碼如下:
<script><!--
//--></script>  

對於一些老舊浏覽器或者禁用了JavaScript的浏覽器,還可以使用<noscript></noscript>元素來呈現相關的說明。

文檔模式

  在IE5.5中開始引入文檔模式的概念,通過使用通過文檔類型(doctype)切換實現的,最初包括混雜模式(quirks mode)和標准模式(standards mode),混雜模式讓IE的行為與包括非標准特性的IE5相同,標准模式則讓IE的行為更接近標准行為。在IE引入文檔模式之後,其他浏覽器也紛紛仿效。之後,IE又提出一種所謂准標准模式(almost standards mode),這種模式下的浏覽器特性有很多是符合標准的,但也不盡然。所有浏覽器默認開啟混雜模式。

  可以通過下面的方法啟動標准模式:
復制代碼 代碼如下:
<!-- HTML 4.01 嚴格型-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 嚴格型-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

通過過渡性或框架集型來觸發准標准模式:
復制代碼 代碼如下:
<!-- HTML 4.01 過渡型-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 過渡型-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

參考書籍

  [1]Professional JavaScript for Web Developers 3rd Edition:JavaScript高級程序設計(第3版)[美]Nicholas C.Zakes 著 李松峰 曹力譯 人民郵電出版社。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved