JavaScript學習筆記1：JavaScript學前介紹
阿新 • • 發佈：2020-10-22
主要根據圖書《JavaScript高階程式設計（第3版）
》
1、JavaScript是一種專門與網頁互動而設計的指令碼語言，由下列三個不同的部分組成： 1）ECMAScript，由ECMA-262定義，提供核心語言功能； 2）文件物件模型(DOM) ,提供訪問和操作網頁內容的方法和介面； 3）瀏覽器物件模型（BOM），提供與瀏覽器互動的方法和介面。
現狀： JavaScript 的這三個組成部分，在當前5個主要瀏覽器(IE, Firefox, Chrome, Safari 和Opera)中都得到了不同程度的支援。其中，所有瀏覽器對 ECMAScript 第 3 版的支援大體上都還不錯，而對ECMAScript 5 的支援程度越來越高
2、在HTML中使用JavaScript 1）在HTML頁面中執行JS的3中方法 嵌入執行（2種方法）： <body> <a href="javascript:alert('執行JavaScript!');">執行 JavaScript</a> <script type="text/javascript"> alert("直接執行的JavaScript!");
匯入外部js檔案： <script src="test.js"type="text/javascript"></script> 這個時候標籤內就不要再嵌入JS程式碼， 匯入外部JS的時候，嵌入的程式碼會被忽略。
3、需要注意的 把JavaScript插入到HTML頁面中要使用<script >元素。使用這個元素可以把JavaScript嵌入到頁面中，也可以包含外部JS檔案。 1）包含外部JavaScript檔案時，必須將src屬性設定為指向響應檔案的URL。而這個檔案可以是與它的頁面位於同一伺服器的檔案，也可以是其他任何域中的檔案
4、<script>元素 HTML4.01為<script>定義了6個屬性，全是可選，language已廢棄 1）type ：考慮到約定俗成和最大限度的瀏覽器相容性，還是text/javascript 。其實標準來說有好幾個其他值 2）src ：表示包含要執行程式碼的外部檔案 3）charset：表示通過src屬性指定的程式碼的字符集。由於大多數瀏覽器會忽略它的值。 4）language：已廢棄，原來用於標識編寫程式碼使用的指令碼語言(如JavaScript、JavaScript1.2、VBScript) 5）defer：表示指令碼可以延遲到文件完全被解析和顯示之後再執行，只對外部指令碼檔案有效。 6）async：可選，表示應該立即下載指令碼，但不應妨礙頁面中的其他操作，如下載其他資源或等待載入指令碼。支隊外部指令碼有效。
注意1： 在<script>嵌入JS程式碼是，不要在程式碼中的任何地方出現"</script>"字串，瀏覽器載入時會產生錯誤，會認為那是結束的</script>標籤，如下文： <script type="text/javascript"> function sayScript(){ alert("</script>"); } </script>
但是通過轉義字元"\"可以解決這個問題 <script type="text/javascript"> function sayScript(){ alert("<\/script>"); } </script>
注意2：
XHMTL可以容忍省略</script>，但HTML文件不行。
5、 XHTML程式碼的規則 比HTML嚴格得多，如 1）< 和> 直接a < b 會報錯，要改寫成實體編碼< 還可以 2）用 <![CDATA[...這裡是不需要的任意格式的文字內容...]]> 語法包裹內容 。有時候還配合註釋使用 //<![CDATA[ ...這裡是不需要的任意格式的文字內容... //]]> 3）在XHTML格式中，要把defer屬性設定為 defer="defer" ,async也一樣
6、<noscript>元素 當瀏覽器不支援JavaScript時，如何讓頁面平穩退化。
<!DOCTYPE html> <html> <head> <title>ceshi</title> </head> <body> <noscript> <p>本頁面需要瀏覽器支援(啟用)Javascript</p> </noscript> </body> </html>
不推薦使用的(為了讓不支援 <script> 標籤的瀏覽器能隱藏嵌入的JavaScript程式碼： <script><!-- alert("Hi"); //--></script>
Chrome測試程式碼：
正常時：
1、JavaScript是一種專門與網頁互動而設計的指令碼語言，由下列三個不同的部分組成： 1）ECMAScript，由ECMA-262定義，提供核心語言功能； 2）文件物件模型(DOM) ,提供訪問和操作網頁內容的方法和介面； 3）瀏覽器物件模型（BOM），提供與瀏覽器互動的方法和介面。
現狀： JavaScript 的這三個組成部分，在當前5個主要瀏覽器(IE, Firefox, Chrome, Safari 和Opera)中都得到了不同程度的支援。其中，所有瀏覽器對 ECMAScript 第 3 版的支援大體上都還不錯，而對ECMAScript 5 的支援程度越來越高
2、在HTML中使用JavaScript 1）在HTML頁面中執行JS的3中方法 嵌入執行（2種方法）： <body> <a href="javascript:alert('執行JavaScript!');">執行 JavaScript</a> <script type="text/javascript"> alert("直接執行的JavaScript!");
匯入外部js檔案： <script src="test.js"type="text/javascript"></script> 這個時候標籤內就不要再嵌入JS程式碼， 匯入外部JS的時候，嵌入的程式碼會被忽略。
3、需要注意的 把JavaScript插入到HTML頁面中要使用<script >元素。使用這個元素可以把JavaScript嵌入到頁面中，也可以包含外部JS檔案。 1）包含外部JavaScript檔案時，必須將src屬性設定為指向響應檔案的URL。而這個檔案可以是與它的頁面位於同一伺服器的檔案，也可以是其他任何域中的檔案
4、<script>元素 HTML4.01為<script>定義了6個屬性，全是可選，language已廢棄 1）type ：考慮到約定俗成和最大限度的瀏覽器相容性，還是text/javascript 。其實標準來說有好幾個其他值 2）src ：表示包含要執行程式碼的外部檔案 3）charset：表示通過src屬性指定的程式碼的字符集。由於大多數瀏覽器會忽略它的值。 4）language：已廢棄，原來用於標識編寫程式碼使用的指令碼語言(如JavaScript、JavaScript1.2、VBScript) 5）defer：表示指令碼可以延遲到文件完全被解析和顯示之後再執行，只對外部指令碼檔案有效。 6）async：可選，表示應該立即下載指令碼，但不應妨礙頁面中的其他操作，如下載其他資源或等待載入指令碼。支隊外部指令碼有效。
注意1： 在<script>嵌入JS程式碼是，不要在程式碼中的任何地方出現"</script>"字串，瀏覽器載入時會產生錯誤，會認為那是結束的</script>標籤，如下文： <script type="text/javascript"> function sayScript(){ alert("</script>"); } </script>
但是通過轉義字元"\"可以解決這個問題 <script type="text/javascript"> function sayScript(){ alert("<\/script>"); } </script>
注意2：
XHMTL可以容忍省略</script>，但HTML文件不行。
5、 XHTML程式碼的規則 比HTML嚴格得多，如 1）< 和> 直接a < b 會報錯，要改寫成實體編碼< 還可以 2）用 <![CDATA[...這裡是不需要的任意格式的文字內容...]]> 語法包裹內容 。有時候還配合註釋使用 //<![CDATA[ ...這裡是不需要的任意格式的文字內容... //]]> 3）在XHTML格式中，要把defer屬性設定為 defer="defer" ,async也一樣
6、<noscript>元素 當瀏覽器不支援JavaScript時，如何讓頁面平穩退化。
<!DOCTYPE html> <html> <head> <title>ceshi</title> </head> <body> <noscript> <p>本頁面需要瀏覽器支援(啟用)Javascript</p> </noscript> </body> </html>
不推薦使用的(為了讓不支援 <script> 標籤的瀏覽器能隱藏嵌入的JavaScript程式碼： <script><!-- alert("Hi"); //--></script>
Chrome測試程式碼：
| <!DOCTYPE html> <html> <head> <title>ceshi</title> </head> <body> <noscript> <p>本頁面需要瀏覽器支援(啟用)Javascript</p> </noscript> <script><!-- alert("Hi"); //--></script> </body> </html> |
正常時：
禁用當前頁面JS後：
轉載於:https://my.oschina.net/bluefly/blog/478575