前端高級工程師養成之路 -001 JS基礎

寫在前面

以前上大學的時候，就已經學了這個關於前端的課程，如今也工做了快一年了。最近想前端的課程從新系統的學一遍，也用於檢查本身那些地方漏掉了。我是報了開課吧的前端高級工程師的課程，因此接下來會把本身在開課吧這個基礎的前端課程中學到的知識點分享出來。但願可以自勉。

1.JavaScript科普

1.1 JS到底能幹點啥？

• 行爲交互：例如點擊按鈕關閉彈框；
• 數據交互：例如註冊檢測用戶名；
• 邏輯處理：進行復雜的業務邏輯處理。

1. 2 JS的組成

-ECMAScript：JavaScript語法和基本對象； -DOM：文檔對象模型； -BOM：瀏覽器對象模型。

1.3 文檔註釋

// 單行註釋 、/* 多行註釋*/

1.4 JS代碼書寫位置

• 寫在HTML行內：<div onclick = "alert('行內JS代碼');"></div>
• 寫在HTML內的Script標籤內：<script> alert('內部JS代碼');</script>
• 寫在HTML外部的.js文件內：<script src = 'main.js'></script>

1.5 調試

• alert(); // 彈框
• console.log(); // 輸出到控制檯

1.6 獲取頁面元素

document.getElementById(); // 根據html標籤的id屬性獲取頁面元素
document.getElementByClassName(); // 根據html標籤的class屬性獲取頁面元素，一般獲取到的是元素數組
document.getElementByTagName(); // 根據html標籤名獲取頁面元素，一般獲取到的是元素數組
document.querySelector();  // 根據指定的屬性選擇器及名字獲取單個頁面元素，若頁面中含有多個匹配時，獲取到到的是第一個匹配元素
document.querySelectorAll(); // 根據指定的屬性選擇器及名字獲取多個頁面元素，一般是一個元素數組
複製代碼

1.7 事件

元素el.事件名 = function（）{}; 例如：el.onclick = function(){ // 事件觸發後的相應操做 }; // 點擊事件 window.onload=function(){}; // 頁面加載完畢後纔會執行，由於js是頁面加載到該位置時就會執行，故若js在頁面頂部可能獲取不到頁面元素，可用這個事件進行規避

2. JS基礎語法

2.1 數據類型

• 對象Object:獲取到的元素；
• 數字Number：就是生活中經常使用的數字；
• 字符串String:由單引號或雙引號引發來的0~多個字符。字符串拼接，加號遇到字符串就會執行字符串拼接操做

2.2 變量

聲明:var name; 賦值：name = value； 調用：name 命名規則:不能是ECMAScript規定的關鍵字和保留字、不能以數字開頭、只能是數組(0~9)字母(a-zA-Z)下劃線(_)美圓符($)。 多變量同時聲明：var name1，name2,...;

2.3 函數

• 什麼是函數？ 在JS中函數是第一等公民，具備很高的地位，絕大多數的邏輯處理都是經過函數實現的，固然這裏也包括行爲交互和數據交互。
• 函數是怎樣聲明和使用的？

// 有名聲明
function funcName(形參根據須要配置，多個形參用逗號隔開){
	// 邏輯代碼，有名函數一般是進行對多個邏輯處理操做的抽象
}

// 匿名聲明
function(形參根據須要配置，多個形參用逗號隔開){
	// 邏輯代碼，一般是對事件綁定或是做爲回調函數傳入
}

// 函數調用
// 對於有名函數直接用 函數名(); 便可完成調用
// 匿名函數一般只能被調用一次
複製代碼

2.4 屬性

• 什麼是屬性？
• 屬性都有那麼操做？ 讀操做和寫操做。
• 操做屬性的方法？ .點操做符：el.attr; []方括號操做符：el['attr']
• 經常使用的JS屬性

// id
// className:一般經過操做元素類名實現特效的切換
// value：表單元素特有的屬性
// style:width、backgroundColor...:行內樣式，行內默認什麼也沒有，display控制元素的顯示隱藏，默認是空不是none
// cssText：操做行內樣式，會覆蓋當前的全部樣式，重複的樣式後面的覆蓋前面的
// innerHTML：普通元素的屬性，包含元素標籤
// href：a標籤超連接屬性，獲取到的是絕對路徑
// src：img和script等元素的屬性，獲取到的是絕對路徑，故有時用第三方變量做爲開關
// tagName：獲取到的是大寫字母
複製代碼

2.5 if語句和布爾值

if語句基本語法。 比較運算符。 邏輯運算符。 三元運算符。 數組：length、下標從0開始。

2.6 for循環和this指向

• for語句的基本語法；
• for語句使用場景。
• 變量自增自減。
• for語句多個判斷語句時以最後一個條件爲準。
• for語句在執行到語句時執行，內部的事件監聽事件不能直接使用外部for語句的循環變量。
• for循環的執行順序和死循環。
• this上下文環境對象：在處理函數中，表示當前調用事件的元素，一般是誰調用就指向誰，固然後面會涉及到修改this指向的操做。

2.7 classList

這一對象是用來獲取和添加當前元素的class列表的，是一個僞數組。

• 經過下標獲取當前元素對應的class；
• length獲取當前元素所含有的全部class的個數；
• value獲取當前元素的全部class，字符串；
• el.classList.add(''); 爲元素添加類樣式，並不會覆蓋以前含有的class；
• el.classList.remove('');刪除元素已含有的指定類樣式；
• el.classList.contains('');判斷元素是否含有指定類樣式；
• el.classList.toggle('');切換元素指定的類樣式，當元素含有該樣式就刪除，不然添加。

3.next

下一期會分享關於ECMAScript的一些理論知識和JS的第一等公民的那些事。