2019.3.7 Javascript 總結（面試前複習要點）

what should i do

1. 看前端資料（掘金）
2. 論文、面試
3. 金三銀四

JavaScript 要點總結：

1. JavaScript函數：（int） parseInt（string，radix）：將一個字符串string轉爲一個int
   解析：radix參數：是一個基數，（取值範圍2-36）；最後結果是這個數加上一個字符串各位的數

2. 說說null和undefined的區別。
   都表示 無，如果轉換爲數值 undefined => NaN 有聲明，但未賦值或者未初始化； null => 0 (原型鏈的終點) 沒有，也沒有定義，

3. JavaScript中，基本類型和引用類型有什麼不同：
   var bcc = arr;//傳址 ,對象中傳給變量的數據是引用類型的，會存儲在堆中；
   var cxx = arr[0];//傳值，把對象中的屬性/數組中的數組項賦值給變量，這時變量C是基本數據類型，存儲在棧內存中；改變棧中的數據不會影響堆中的數據

   4. 判斷與淺拷貝和深拷貝的問題
      == 等於操作符 使用的時候會進行強制類型轉換（判斷中不太建議使用）
      === 全等操作符 不會進行強制類型轉換
      如果使用全等符號判斷字符和數字之間的轉換，可以加上一個加號轉換：
      數字轉字符：’ '+10 === ‘10’ 判斷結果爲true
      字符轉數字： +‘10’ === 10 判斷結果同樣爲true
      ps:如果在其他地方想要實現字符串和數字互轉則有：
      字符串轉數字：s是字符串：num = parseInt（s） ;將s 轉爲int的數字（如果有小數則略去）或者num = parseFloat(s); 將s 轉爲float的數字 ；或者Number（s） 這時s不能出現非數字字符
      數字轉字符串：num 是一個數字:str = num.tostring()

4. 文檔對象模型：DOM（Document Object Model 文檔對象模型）
   JS可以通過DOM做到：
   JavaScript 能夠改變頁面中的所有 HTML 元素
   JavaScript 能夠改變頁面中的所有 HTML 屬性
   JavaScript 能夠改變頁面中的所有 CSS 樣式
   JavaScript 能夠對頁面中的所有事件做出反應

1、圍繞改變元素（元素就是element 也就是每個

、 都是一個元素）
查找 HTML 元素
通過 id 找到 HTML 元素 :document.getElementById(“id名”)；
通過標籤名找到 HTML 元素：document.getElementsByTagName(“p(標籤名)”)
通過類名找到 HTML 元素 document.getElementsByClassName("")

能夠改變頁面中的所有 HTML 元素(就是改變對應標籤裏面的內容)內容代表的值：innerHTML


    <script>
   //通過ID取得對應的標籤元素
   var pElement = document.getElementById("pid");
   //修改這個標籤內的內容
   pElement.innerHTML = "新內容"；
	 </script>

改變頁面中的所有 HTML 屬性 （像是改變img標籤的src屬性）

var imgElement = document.getElementsTagName("img");
imgElement.src = "/c/test.png";

改變CSS:

document.getElementById("p2").style.fontSize="larger";

• HTML 事件的例子（css3也有響應事件）：
  當用戶點擊鼠標時 ：οnclick=demo();：
  onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

當網頁加載時: onload =demo();
當網頁離開頁面時被觸發：onunload =demo();
當鼠標移動到元素上時：οnmοuseοver=“mOver()”
當鼠標離開目標函數觸發的事件：οnmοuseοut=“mOut()”
當輸入字段被改變時(輸入框離開時被觸發)：<input type=“text” id=“fname” οnchange=“myFunction()”
下載的時候觸發事件：“mymessage()”；
當提交 HTML 表單時
當用戶觸發按鍵時
當圖像已加載時：
獲取焦點事件：οnfοcus=demo();
失去焦點事件：onblur = demo();（可以用於觸發輸入框的信息驗證）
ps：onfocus 屬性不適用於以下元素：、、
、、、>、、、

事件綁定：（不用再標籤裏顯示寫該響應事件了，直接在js裏面寫綁定他們對應的事件和方法）
注意：事件綁定是直接卸載JavaScript內容裏面的，也就是說，當某個HTML頁面關聯到某個JS文件的時候，就一點會執行這個綁定事件，當觸發綁定事件的語句柄的時候就會觸發綁定事件（這個事件可function）
eg:渠道myBtn標籤使用addEventListener綁定事件：標籤如果影響click事件（也就是onclick）就會觸發方法：displayDate()
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
注意哦，還可以向同一個標籤綁定兩個相同監聽：

var x = document.getElementById("test")；   //獲取到id爲test的標籤元素
x.addEventListener("click",function1);
x.addEventListener("onmouseover",function2);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
使用：document.getElementById(“test”).removeEventListener(“mousemove”, myFunction);

顯示提示窗口：alert(“string”)；

將輸入框的英文改爲小寫：
document.getElementById(“fname”).value=x.toUpperCase()；

Javascript HTMLDOM節點
實例解析：

1. 使用css創建一個p（div）標籤
   var para = document.createElement(“p”);

2. 創建一個文本節點
   var node = document.createTextNode(“這是標籤裏面的文本內容”);

3. 將文本節點的內容添加到剛剛新建的標籤中：
   para.appendChild(node)
   ps:現在會在JS裏面生成一個標籤內容（DOM）也就是：

這是標籤裏面的文本內容

4. 將生成的標籤添加到就得標籤所在的位置：
   var dom = document.getElementById(“test”);
   dom.appendChild(para);