JavaScript學習筆記系列(一)

時間 2019-12-05

原文原文鏈接

一：JavaScript組成部分

JavaScript是由三個不一樣部分組成的，核心(ECMAScript) 、文檔對象模型(DOM)和瀏覽器對象模型(BOM)。html

1.ECMAScript

ECMAScript與Web瀏覽器沒有依賴關係。只是Web瀏覽器只是ECMAScript實現可能的宿主環境之一，其餘宿主環境包括Node和Adobe Flash。它規定了這門語言的組成部分：
1.語法
2.類型
3.關鍵字
4.保留字
5.操做符
6.對象編程

2.文檔對象模型(DOM)

文檔對象模型(Document Object Model)是針對XML但通過擴張用於HTML的應用程序編程接口(API，Application Programming Interface)。DOM把整個頁面映射爲一個多層次節點結構。以HTML代碼爲例子數組

<html>
    <head>
     <title>DOM</title>
         <body>
            <h1>DOM</h1>
              <p>Hello world</p>
      </body>
    </head>
</html>

根據 DOM，HTML 文檔中的每一個成分都是一個節點。DOM 是這樣規定的：整個文檔是一個文檔節點。每一個 HTML 標籤是一個元素節點。包含在 HTML 元素中的文本是文本節點。每個 HTML 屬性是一個屬性節點。註釋屬於註釋節點
每一個節點彼此都有等級關係，HTML 文檔中的全部節點組成了一個文檔樹（或節點樹）。HTML 文檔中的每一個元素、屬性、文本等都表明着樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直處處於這棵樹最低級別的全部文本節點爲止。除文檔節點以外的每一個節點都有父節點。
以上列代碼分析，<head> 和 <body> 的父節點是 <html> 節點，文本節點 "Hello world!" 的父節點是 <p> 節點。
大部分元素節點都有子節點。比方說，<head> 節點有一個子節點：<title> 節點。<title> 節點也有一個子節點：文本節點 "DOM"。
當節點分享同一個父節點時，它們就是同輩（同級節點）。比方說，<h1> 和 <p>是同輩，由於它們的父節點均是 <body> 節點。
節點也能夠擁有後代，後代指某個節點的全部子節點，或者這些子節點的子節點，以此類推。比方說，全部的文本節點都是 <html>節點的後代，而第一個文本節點是 <head> 節點的後代。
節點也能夠擁有先輩。先輩是某個節點的父節點，或者父節點的父節點，以此類推。比方說，全部的文本節點均可把 <html> 節點做爲先輩節點。瀏覽器

2.1DOM級別

DOM1級由兩個模塊組成：DOM核心和DOM HTML。其中，DOM核心規定是如何映射基於基於XML的文檔結構，以便簡化對文檔中任意部分的訪問和操做，DOM HTML則在DOM核心的基礎上加以擴展，添加了針對HTML文檔的對象和方法。
DOM2級在DOM的基礎上又擴展了鼠標和用戶界面事件、範圍、遍歷(迭代DOM文檔的方法)等細分模塊，並且經過對象接口增長對CSS的支持。
DOM3級則進一步擴展了DOM，引入了以統一方式加載和保存文檔方法—在DOM加載和保存模塊中定義；新增了驗證文檔的方法—在DOM驗證模塊定義。cookie

3.瀏覽器對象模型（BOM）

開發人員能夠經過BOM來控制瀏覽器顯示的頁面之外的部分。從根本上講，BOM只處理瀏覽器窗口和框架；但人們習慣也把全部針對瀏覽器的JavaScript擴展算做BOM一部分。
1.彈出新瀏覽器窗口功能；
2.移動、縮放和關閉瀏覽器窗口的功能；
3.提供瀏覽器詳細信息的navigatior對象；
4.提供瀏覽器所加載頁面的詳細信息的location對象；
5.提供用戶顯示器分辨率詳細信息的scree對象
6.對cookies的支持
7.像XMLHttpRequest和IE的ActiveXObject這樣的自定義對象。框架

二：在HTML中使用JavaScript

在HTML中插入JavaScript的主要方法，就是使用<script>元素。HTML4.0.1爲<script>元素定義下列6個屬性。
1.async:可選，表示應該當即下載腳本，但不妨礙頁面中的其餘操做，好比下載其餘資源或等待其餘腳本。只對外部腳本有效
2.charset：可選，表示經過src屬性指定的代碼的字符集。(不多人用)
3.defer：可選，表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行。只對外部腳本有效
4.language:已經廢棄。
5.src:可選。表示包含要執行代碼的外部文件。
6.type：可選，瀏覽器已經默認了。
通常把<script>元素放在<body>元素後面，爲的是避免瀏覽器在呈現頁面時候出現明顯的延遲，也讓JavaScript更好操做DOMasync

<script>
    function sayHi(){
        var i = 'wythe';
        alert("</script>");
    }
<script>

按照解析嵌入式代碼規則，當瀏覽器遇到字符串</script>時候，就會認爲那是結束的標籤。而經過轉義字符""解決這個問題，例如：函數

<script>
    function sayHi(){
        var i = 'wythe';
        alert("<\/script>");
    }
<script>

三：JavaScript 基本概念

3.1 區分大小寫
JavaScript是區分大小寫的，也就是說變量、函數、關鍵字和全部標識符都是區分大小寫的。
所謂的標識符，就是指得是變量、函數、屬性的名字，或者函數的參數。標識符能夠是按照下列格式規則組合起來的一或多個字符：code

a.第一個字符必須是一個字母、下劃線或一個美圓符號($);
b.其餘字符能夠是字母、下劃線、美圓符號或數字。

3.2 註釋
JavaScript支持兩種註釋，包括單行註釋和塊級註釋。
單行註釋以//開頭，如://單行註釋
多行註釋則以一個斜槓和一個星號(/)開頭以一個星號和一個斜槓( /)結尾。
3.3保留字和關鍵字
JavaScript把一些標識符拿出來做爲本身的關鍵字。所以，不能再在程序使用這些關鍵字做爲標識符。如break、do、instanceof、typeof、var、case、if、while、function 和for等等...
保留字雖然尚未任何特定的用途，但它們未來可能用做關鍵字。如：int、short、boolean、goto和byte。
3.3變量
JavaScript的變量是鬆散類型的，所謂鬆散類型就是能夠用來保存任何類型的數據。換句話說，每一個變量僅僅是一個保存值的佔位符而已。定義變量時候要使用var操做符，後跟變量名（標識符）：var message;初始化的過程就是給變量賦一個值,所以，能夠在修改變量值同時修改值的類型。htm

var message = "hi";
message = 100 //有效不推薦

有一點必須注意，即用var操做符定義的變量將成爲定義該變量的做用域的局部變量。也就是說，在函數中使用var定義一個變量，那麼這個變量在函數退出後就會銷燬，除非定義一個全局變量。

function test(){
  var a = 'hello,wythe';//局部變量
  b = 'hello world';//全局變量
}
test()
console.log(a)//錯誤，a沒有定義。
console.log(b)//hello,world

3.4數據類型
JavaScript的數據類型分爲兩類：原始類型和對象類型。原始類型包括數字(numner)、字符串(string)、布爾值(boolean)、undefined和null。對象類型則有object,object是屬性的集合，每一個屬性都由名/值對(值能夠是原始值，好比數字、字符串，也能夠是對象)構成。
3.4.1typeof操做符
因爲JavaScript是鬆散類型，所以須要有一種手段來檢測給定變量的數據類型——typeof。對一個變量使用typeof操做符可能返回下列字符串：

"undefined"—若是這個值未定義;
"boolean"—若是這個值是布爾值;
"string"—若是這個值是字符串;
"number"—若是這個值是數值;
"object"—若是這個值是對象或null 數組也是對象，數組是一種特殊對象，表示帶編號的值的有序集合
"function"—若是這個值是函數。函數是一種特殊對象，函數具備與它相關聯的可執行代碼的對象。經過調用函數來運行可執行代碼，並返回運算結果
對於null，typeof返回的是object,那是由於null被認爲是一個空對象的引用。

3.4.1 undefined類型
undefined類型只有一個值，那就是undefined。是變量的一種取值，代表值沒有初始化。
3.4.2 null類型
null類型也是隻有一個值，那就是null。typeof null 返回的是"object"也就是能夠認爲是一個特殊的對象值，含義是「非對象」。
undefined跟null都是表示值的空缺。null == undefined 會返回true 判斷相等符「==」認爲二者相等。這個操做符出於比較的目的會轉換其操做數。
3.4.3 number類型
JavaScript是不區分整數值和浮點數值的。最基本的字面量格式是十進制整數，除了十進制之外，還支持八位制(在嚴格模式下無效)或十六進制的字面值表示。浮點數值，就是該數值中必須包含一個小數點，而且小數點後面必須至少有一位數字。浮點數值的最高精度是17位小數，但在進行算術計算的時候其精確度遠遠不如整數。

var a = 0.1,
     b = 0.2;   
 if(a+b == 0.3){
    console.log("bingo");
 }else{
    console.log("error");//顯示error
 }

所以儘可能避免這樣運算。NaN,即非數值是個特殊的值，這個數值表示一個原本要返回數值的操做數未返回數值的狀況。0除以0會返回NaN,正數除以0返回Infinity，負數除以0返回-Infinity。NaN與任何值都不相等，包括自身。所以JavaScript定義isNaN函數，isNaN接受一個參數，該參數能夠是任何類型，函數會判斷該參數是否「不是數值」。isNaN接收一個以後，會嘗試把這個值轉爲數值。

isNaN(1); //false
    isNaN("10");//會轉換爲數值10，返回false
    isNaN(true);//轉換爲數值1，返回false
    isNaN("blue");//不能轉換爲數值，返回true
    isNaN("true");//不能轉爲數值，返回true
    isNaN("11blue");//true,不能轉爲數值

數值轉換有3個函數能夠把非數值轉換爲數值：Number()、parseInt()和parseFloat().第一個函數（Number）能夠用於任何數據類型，而另兩個函數專門把字符串轉換爲數值。
Number()函數的轉換規則以下：

若是是布爾值true和false，則分別轉換爲1和0
若是是數字值，則返回該數值
若是是null值，則返回0
若是是undefined，則返回NaN
若是是字符串，若是字符串只包含數字的話，則將其轉爲十進制數值，即「1」轉爲1，「123」則是123，「011」轉爲11（忽略前導的0），「11.1」則爲11.1,"0xf"則轉爲相同大小的十進制整數。若是字符串是空，則將轉爲0；除此之外其餘字符串，則轉爲NaN(「122blue」,「0a」,"a")。
若是是對象，則調用對象的valueOf()方法，而後按照前面規則轉換返回的值。若是轉換的結果是NaN，則調用對象toString()方法，再次按照前面的規則轉換返回的字符串值。
譬如Number({a:2})返回的是NaN,而Number([1])返回的是1

未完待續...