JS高階程式設計第2章--精簡版

X1aoYE發表於2019-07-11

前言:純手打!!!這次是二刷了,想暑假做一次完整的筆記,但用本子來寫筆記的話太貴了,可能哪天還丟了。。所以還是部落格好==


 第二章:在HTML中使用JavaScript


2.1 <script>元素:

  即在HTML頁面插入JS的主要方法。HTML4.01定義了以下JS屬性(主要):

  • async :表示立即下載指令碼(只對外部指令碼檔案有效),但不妨礙頁面中的其他操作。
  • defer : 表示指令碼可以延遲到文件完全被解析和顯示之後再執行(只對外部指令碼檔案有效)。
  • src : 表示包含要執行程式碼的外部檔案。
  • type :表示編寫程式碼使用的指令碼語言的內容型別,如 type="text/javascript",但不寫預設也為它。

  使用<script>元素的方式:

  • 頁面嵌入JS程式碼: function.......
  • 外部JS檔案: src="example.js"

2.1.1 <script>元素位置:

  所有<script>元素都應放在頁面的<head>元素裡,意味著必須的等到全部JS程式碼都被下載、解析、執行完成以後才能開始呈現頁面的內容(遇到<body>才開始呈現)。

  !!!注意,在需要很多JS程式碼的頁面裡這樣子會延遲頁面的呈現,所以下載一般會把全部JS程式碼放在<body>頁面內容的後面!

2.1.2 延遲指令碼defer:(HTML4.01)

  defer="defer" 這個屬性只適用於外部指令碼檔案。推薦把延遲指令碼放在頁面底部!(在幾個延遲指令碼的情況下,可能可以按照先後順序執行)

2.1.3 非同步指令碼aysnc:(HTML5)

  直接寫一個async,XHTML中要寫async="async",這個屬性只適用於外部指令碼檔案,不讓頁面等待指令碼下載和執行,從而非同步載入頁面其他內容。(在幾個延遲指令碼的情況下,不可以保證按照先後順序執行)

2.1.4 XHTML中的使用:

  XHTML即可以站超文字標語語言,意思就是超級嚴格!!!用 type="application/xhtml+xml" 才會觸發XHTML模式

  例如使用HTML實體(&lt;)代替小於號 <

  但這樣子是不是太麻煩?

  所以我們可以在<script> 後加上<![CDATA[JS程式碼]]>來包含JS程式碼,這樣子可以不用解析了。如果不需要這個CDATA,那就在<![CDATA[JS程式碼]]>的前後加上 // 就行了。

2.1.5 在不支援JS的瀏覽器中使用<script>元素會把JS程式碼內容全部顯示在頁面,所以我們可以把JS程式碼包含在一個HTML註釋中,即

  <script><!--

    function sayHi () {

      alert ("Hi");

    }

  //--></script> 

 

2.2 嵌入JS方式的選擇:

  最好還是使用外部檔案,優點是:

  • 可維護性
  • 可快取:幾個頁面需要使用同一個檔案,那這個檔案只需下載一次~
  • 適應未來:即XHTML和HTML包含外部檔案的語法都是相同的。

 

2.3 文件模式(很重要!面試經常有)

  通過使用文件型別(doctype)切換實現。主要有兩種文件模式:(模式主要影響CSS內容的呈現和可能影響到JS的解釋執行),還有一個準標準模式,我暫不討論。

  • 混雜模式:忽略DTD宣告,瀏覽器用自己的方式解析程式碼。以一種先後相容的方式顯示,會讓IE的行為與IE5相同,IE5包含非標準特性,以防止老站點無法工作
  • 標準模式:DTD宣告定義了標準文件的型別後,瀏覽器按W3C標準解析執行程式碼。讓IE的行為更接近標準行為,IE6及以上都支援標準模式。

  混雜模式寫法: 不想寫,因為本來就不推薦這種模式!!!

  標準模式寫法:

  • HTML 5 :<!DOCTYPE html>
  • 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">

 

2.4 <noscript>元素:

  使用這個元素可以產生以下兩種效果:(可以在指令碼無效的情況下向使用者顯示一套訊息~)

  • 在瀏覽器不支援指令碼的情況下會顯示<noscript>元素中的內容。
  • 在瀏覽器支援指令碼但被禁用的情況下會顯示<noscript>元素中的內容。

 

相關文章