JavaScript簡介--學習筆記

時間  2019-11-19
標籤 javascript 簡介 學習 筆記 欄目 JavaScript 简体版
原文   原文鏈接
1、JavaScript概述：
javascript是一種具備面向對象能力的、解釋型的程序設計預言。更具體一點：它是基於對象和事件驅動並具備相對安全性的客戶端腳本語言。由於它不須要在一個語言環境下運行，而只須要支持它的瀏覽器便可。它的主要目標是，驗證發往服務器端的數據、增長web互動性、增強用戶體驗度等。
基於對象和事件驅動的且相對安全的客戶端使用的腳步預言。使用javascript的時候
  • 肯定對象
  • 肯定事件
  • 肯定屬性
  • 用JS實現功能
 
2、JavaScript的特色:
  • 鬆散性
  • 對象屬性
  • 繼承機制     //基於原型的
 
3、 javascript的核心: //知識點
名稱解釋：
ECMA: European Computer Manufacturers Association 歐洲計算機制造商協會(制定信息傳輸與通信的國際化標準組織)
ISO/IEC: International Organization for Standardization and International Electrotechnical
Commission(國標標準化組織和國際電工委員會)
ECMAScript: ECMA制定的標準化腳本語言
ECMA-262: ECMA指定了JavaScript的標準ECMA-262(定義一種名爲 ECMAScript 的新腳本語言的標準)
 
  1. 核心(ECMAScript)
ECMAScript 就是對實現該標準規定的各個方面內容的語言的描述。
ECMA-262 定義的 ECMAScript 與 Web 瀏覽器沒有依賴關係。實際上，這門語言自己並不包含輸入和輸出定義。 ECMA-262 定義的只是這門語言的基礎，而在此基礎之上能夠構建更完善的腳本語言。
咱們常見的 Web 瀏覽器只是 ECMAScript 實現可能的宿主環境之一。宿主環境不只提供基本的ECMAScript 實現，同時也會提供該語言的擴展，以便語言與環境之間對接交互。而這些擴展——如DOM，則利用 ECMAScript 的核心類型和語法提供更多更具體的功能，以便實現針對環境的操做。其餘宿主環境包括 Node（一種服務端 JavaScript 平臺）和 Adobe Flash。
既然 ECMA-262 標準沒有參照 Web 瀏覽器，那它都規定了些什麼內容呢？大體說來，它規定了這門語言的下列組成部分：
  1. 語法
  2. 類型
  3. 語句
  4. 關鍵字
  5. 保留字
  6. 操做符
  7. 對象
版本與兼容：
應該基本都支持ECMAScript 5.0
 
  1. 文檔對象模型DOM
文檔對象模型（DOM， Document Object Model）：是針對 XML 但通過擴展用於 HTML 的 應用程序編程接口（API， Application Programming Interface）。 DOM 把整個頁面映射爲一個多層節點結構。 HTML或 XML 頁面中的每一個組成部分都是某種類型的節點，這些節點又包含着不一樣類型的數據。 
DOM級別：W3C標準：DOM一、DOM二、DOM3/其餘 DOM 標準
DOM1 級由兩個模塊組成： DOM核心（DOM Core）和 DOM HTML。其中， DOM 核心規定的是如何映射基於 XML 的文檔結構，以便簡化對文檔中任意部分的訪問和操做。 DOM HTML 模塊則在 DOM 核心的基礎上加以擴展，添加了針對 HTML 的對象和方法。
DOM2 級在原來 DOM 的基礎上又擴充了（DHTML 一直都支持的）鼠標和用戶界面事件、範圍、遍歷（迭代 DOM文檔的方法）等細分模塊，並且經過對象接口增長了對 CSS（Cascading Style Sheets，層疊樣式表）的支持。 DOM1 級中的 DOM 核心模塊也通過擴展開始支持 XML 命名空間。
DOM3 級則進一步擴展了 DOM，引入了以統一方式加載和保存文檔的方法——在 DOM 加載和保存（DOM Load and Save）模塊中定義；新增了驗證文檔的方法——在 DOM 驗證（DOM Validation）模塊中定義。 DOM3 級也對 DOM 核心進行了擴展，開始支持 XML 1.0 規範，涉及 XML Infoset、 XPath和 XML Base。
替他標準：
    1. SVG（Scalable Vector Graphic，可伸縮矢量圖） 1.0；
    2. MathML（Mathematical Markup Language，數學標記語言） 1.0；
    3. SMIL（Synchronized Multimedia Integration Language，同步多媒體集成語言）。
還有一些語言也開發了本身的 DOM 實現，例如 Mozilla 的 XUL （XML User Interface Language，XML用戶界面語言）。可是，只有上面列出的幾種語言是 W3C 的推薦標準。
備註：DOM 並不僅是針對 JavaScript 的，不少別的語言也都實現了 DOM。不過，在 Web 瀏覽器中，基於 ECMAScript 實現的 DOM 的確已經成爲 JavaScript 這門語言的一個重要組成部分。
Web 瀏覽器對 DOM 的支持
 
  1. 瀏覽器對象模型BOM
從根本上講， BOM 只處理瀏覽器窗口和框架；但人們習慣上也把全部針對瀏覽器的 JavaScript 擴展算做 BOM 的一部分。
因爲沒有 BOM 標準能夠遵循，所以每一個瀏覽器都有本身的實現。雖然也存在一些事實標準，例如要有 window 對象和 navigator 對象等，但每一個瀏覽器都會爲這兩個對象乃至其餘對象定義本身的屬性和方法。如今有了 HTML5， BOM 實現的細節有望朝着兼容性愈來愈高的方向發展。
下面就是一些這樣的擴展(經常使用功能)：
  • 彈出新瀏覽器窗口的功能；
  • 移動、縮放和關閉瀏覽器窗口的功能；
  • 提供瀏覽器詳細信息的 navigator 對象；
  • 提供瀏覽器所加載頁面的詳細信息的 location 對象；
  • 提供用戶顯示器分辨率詳細信息的 screen 對象；
  • 對 cookies 的支持；
  • 像 XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義對象。
 
4、 javascript的歷史與版本：
...
 
5、 javascript的使用方法：
 
  1. <script>元素
    1. <script>屬性：
async：可選。表示應該當即下載腳本，但不該妨礙頁面中的其餘操做，好比下載其餘資源或等待加載其餘腳本。只對外部腳本文件有效。
charset：可選。表示經過 src 屬性指定的代碼的字符集。因爲大多數瀏覽器會忽略它的值，所以這個屬性不多有用。
defer：可選。表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行。只對外部腳本文件有效。 IE7 及更早版本對嵌入腳本也支持這個屬性。
language：已廢棄。原來用於表示編寫代碼使用的腳本語言（如 JavaScript、JavaScript1.2或 VBScript）。大多數瀏覽器會忽略這個屬性，所以也沒有必要再用了。
src：可選。表示包含要執行代碼的外部文件。
type：可選。能夠當作是 language 的替代屬性；表示編寫代碼使用的腳本語言的內容類（也稱爲 MIME 類型）。雖然 text/javascript 和 text/ecmascript 都已經不被推薦使用，但人們一直以來使用的都仍是 text/javascript。實際上，服務器在傳送 JavaScript 文件時使用的MIME 類型一般是 application/x–javascript，但在 type 中設置這個值卻可能致使腳本被忽略。另外，在非 IE瀏覽器中還可使用如下值：application/javascript 和 application/ecmascript。考慮到約定俗成和最大限度的瀏覽器兼容性，目前 type 屬性的值依舊仍是text/javascript。不過，這個屬性並非必需的，若是沒有指定這個屬性，則其默認值仍爲text/javascript。
 
    1. <script>使用方法：
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
<script type="text/javascript" src="example.js"></script>
 
    1. <script>放置位置：
<!DOCTYPE html> //傳統的放置方法
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
在文檔的<head>元素中包含全部 JavaScript 文件，意味着必須等到所有 JavaScript 代碼都被下載、解析和執行完成之後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時纔開始呈現內容）。對於那些須要不少 JavaScript 代碼的頁面來講，這無疑會致使瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。爲了不這個問題，現代 Web 應用程序通常都把所有 JavaScript 引用放在<body>元素中頁面內容的後面，以下例所示：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
這樣，在解析包含的 JavaScript 代碼以前，頁面的內容將徹底呈如今瀏覽器中。而用戶也會由於瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了
 
    1. 延遲腳本
HTML 4.01 爲<script>標籤訂義了 defer 屬性。這個屬性的用途是代表腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢後再運行。所以，在<script>元素中設置defer 屬性，至關於告訴瀏覽器當即下載，但延遲執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
在這個例子中，雖然咱們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標籤後再執行。 HTML5 規範要求腳本按照它們出現的前後順序執行，所以第一個延遲腳本會先於第二個延遲腳本執行，而這兩個腳本會先於 DOMContentLoaded 事件 （詳見第 13 章）執行。在現實當中，延遲腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded 事件觸發前執行，所以最好只包含一個延遲腳本。
defer 屬性只適用於外部腳本文件。這一點在 HTML5 中已經明確規定，所以支持HTML5 的實現會忽略給嵌入腳本設置的 defer 屬性。
 
    1. 異步腳本
HTML5 爲<script>元素定義了 async 屬性。這個屬性與 defer 屬性相似，都用於改變處理腳本的行爲。一樣與 defer 相似， async 只適用於外部腳本文件，並告訴瀏覽器當即下載文件。但與 defer不一樣的是，標記爲 async 的腳本並不保證按照指定它們的前後順序執行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
在以上代碼中，第二個腳本文件可能會在第一個腳本文件以前執行。所以，確保二者之間互不依賴很是重要。指定 async 屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其餘內容。爲此，建議異步腳本不要在加載期間修改 DOM。異步腳本必定會在頁面的 load 事件前執行，但可能會在 DOMContentLoaded 事件觸發以前或以後執行。支持異步腳本的瀏覽器有 Firefox 3.六、 Safari 5 和 Chrome。
 
    1. 在XHTML中的用法
 
    1. 不推薦的使用方法
 
 
  1. 嵌入代碼和外部代碼
在 HTML 中嵌入 JavaScript 代碼雖然沒有問題，但通常認爲最好的作法仍是儘量使用外部文件來包含 JavaScript 代碼。不過，並不存在必須使用外部文件的硬性規定，但支持使用外部文件的人多會強調以下優勢。
可維護性：遍佈不一樣 HTML 頁面的 JavaScript 會形成維護問題。但把全部 JavaScript 文件都放在一個文件夾中，維護起來就輕鬆多了。並且開發人員所以也可以在不觸及 HTML 標記的狀況下，集中精力編輯 JavaScript 代碼。
可緩存：瀏覽器可以根據具體的設置緩存連接的全部外部 JavaScript 文件。也就是說，若是有兩個頁面都使用同一個文件，那麼這個文件只需下載一次。所以，最終結果就是可以加快頁面加載的速度。
適應將來：經過外部文件來包含 JavaScript 無須使用前面提到 XHTML 或註釋 hack。 HTML 和XHTML 包含外部文件的語法是相同的。
 
  1. 文檔模式
IE5.5 引入了文檔模式的概念，而這個概念是經過使用文檔類型（doctype）切換實現的。
若是在文檔開始處沒有發現文檔類型聲明，則全部瀏覽器都會默認開啓混雜模式。但採用混雜模式不是什麼值得推薦的作法，由於不一樣瀏覽器在這種模式下的行爲差別很是大，若是不使用某些 hack 技術，跨瀏覽器的行爲根本就沒有一致性可言。
 
對於標準模式，能夠經過使用下面任何一種文檔類型來開啓：
<!-- 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">
 
<!-- HTML 5 -->
<!DOCTYPE html>
 
而對於準標準模式，則能夠經過使用過渡型（transitional）或框架集型（frameset）文檔類型來觸發，以下所示：
<!-- 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. <noscript>元素
　　在不支持 JavaScript 的瀏覽器中顯示替代的內容。這個元素能夠包含可以出如今文檔<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的內容只有在下列狀況下才會顯示出來：
  • 瀏覽器不支持腳本；
  • 瀏覽器支持腳本，但腳本被禁用。
 1 <html>
 2 　　<head>
 3　　　　 <title>Example HTML Page</title>
 4　　　　 <script type="text/javascript" defer="defer" src="example1.js"></script>
 5　　　　 <script type="text/javascript" defer="defer" src="example2.js"></script>
 6　　 </head>
 7 　　<body>
 8    　　 <noscript>
 9         　　<p>本頁面須要瀏覽器支持（啓用） JavaScript。</p>
10     　　</noscript>
11 　　</body>
12 </html>

這個頁面會在腳本無效的狀況下向用戶顯示一條消息。而在啓用了腳本的瀏覽器中，用戶永遠也不會看到它——儘管它是頁面的一部分。javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程