內容來自莫振杰Web前端開發精品課HTML CSS JavaScript基礎教程章節總結

第24章  JavaScript簡介

  1、HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是網頁的行為；

  2、推薦2個前端開發工具：Hbuilder和vscode。建議初學者使用Hbuilder；

  3、JavaScript常用引入方式有3種：①外部JavaScript；②內部JavaScript；③元素事件JavaScript；

第25章  語法基礎

    對於這一章來說，我們需要清楚這5個概念：變數、資料型別、運算子、表示式、語句。可以根據下圖25-38來理解：

圖25-38  分析圖

  1、變數

  （1）所有變數都是用var宣告的；

  （2）對於變數命名，儘量取有意義的英文名字，以便一眼就可以看出來這是幹嘛的；

  （3）變數的值是可以變的；

  2、資料型別

    在JavaScript中，常見的資料型別有6種：

  （1）數字；

  （2）字串；

  （3）布林值；

  （4）轉義字元；

  （5）未定義值；

  （6）空值；

  3、運算子

    在JavaScript中，常見的運算子有5種：

  （1）算術運算子；

  （2）賦值運算子；

  （3）比較運算子；

  （4）邏輯運算子；

  （5）條件運算子；

  4、表示式與語句

    1+2是一個表示式，而整一句程式碼“

圖25-39  表示式與語句

  5、註釋

//單行註釋

/*多行註釋*/

第26章  流程控制

    這一章我們學習了3種流程控制的結構：順序結構、選擇結構、迴圈結構。為什麼這一章叫做“流程控制”呢？大家好好琢磨“流程控制”這4個字，然後想一下這一章我們都學了什麼就明白了。

  1、選擇結構

選擇結構指的是根據“條件判斷”來決定執行哪一段程式碼。選擇結構有單向選擇、雙向選擇以及多向選擇3種。

在JavaScript中，選擇結構共有2種方式，一種是if語句，另外一種是switch語句。其中if語句又包括：

  （1）單向選擇：if…

  （2）雙向選擇：if…

  （3）多向選擇：if…else if…else…

  （4）if語句的巢狀

  2、迴圈結構

    迴圈語句指的是在“滿足某個條件下”迴圈反覆地執行某些操作的語句。

    在JavaScript中，迴圈語句共有以下3種：

  （1）while語句

  （2）do...while語句

  （3）for語句

第27章  初識函式

    在JavaScript中，函式指的是一個用大括號“{}”括起來的、可重複使用的、具有特定功能的語句塊。如果想要使用函式，一般需要2步：

    ① 定義函式；

    ② 呼叫函式；

  1、函式的定義

    在JavaScript中，函式可以分2種，一種是“沒有返回值的函式”，另外一種就是“有返回值的函式”。

  （1）沒有返回值的函式

    沒有返回值的函式，指的是函式執行完就算了，不會返回任何值。

    語法：

function 函式名(引數1 , 引數2 ,..., 引數n)

{

    ……

}

  （2）有返回值的函式

    有返回值的函式，指的是函式執行完了之後，會用return語句返回一個值，這個返回值可以供我們使用。

    語法：

function 函式名(引數1 , 引數2 ,..., 引數n)

{

    ……

    return 返回值;

}

  2、函式的呼叫

    如果一個函式僅僅是定義而沒有被呼叫的話，則函式本身是不會執行的（認真琢磨這句話，非常重要）。

    JavaScript函式呼叫方式很多，常見有4種：

    ① 直接呼叫；

    ② 在表示式中呼叫；

    ③ 在超連結中呼叫

    ④  在事件中呼叫；

    此外，對於巢狀函式和內建函式，我們稍微看看就行，不需要深入瞭解。

    【後話】：函式的內容是極其複雜的，我們在這一章學到的只是一點皮毛而已。高階部分如this、閉包、類、繼承、遞迴函式、高階函式等，都與函式有關。事實上，函式在JavaScript又被稱為“第一等公民”，可見其重要程度。對於JavaScript進階部分，可以關注綠葉學習網。

第28章  字串物件

    在JavaScript中，字串物件常用的屬性和方法如下表28-1和表28-2所示：

表28-1  字串物件的屬性

表28-2  字串物件的方法

    實際上，字串物件的屬性和方法還有很多，不過我們只需要掌握上面這些就夠了，不需要浪費時間和精力去記憶其他沒用的東西。對於初學者來說，可能很多人會問上表中的屬性和方法都有什麼用。其實字串更多的是結合其他技術一起使用，等真正到了實戰開發的時候就知道了。所以我們一定要認真掌握上面的每一種屬性和方法，把基礎打好。

第29章  陣列物件

    在JavaScript中，我們可以使用“陣列”來儲存一組“相同資料型別”（一般情況下）的資料型別。

    陣列的建立一般用簡寫形式，如[1,2,3,4,5]。陣列的獲取和賦值，都是使用下標的方式，特別注意一點：陣列的下標是從0開始，而不是從1開始的。

    其中，陣列常用的屬性和方法如下表29-1和表29-2所示：

表29-1  陣列的屬性

表29-2  陣列的方法

    對於陣列來說，最常用的方法是2個：push()和join()。如果小夥伴們覺得上面方法太多記不住，可以只記住這2個，其他的等需要的時候再回來查一下就行。

第30章  時間物件

    對於日期時間物件的方法來說，getXxx()用於獲取時間，setXxx()用於設定時間。

表30-5  用於獲取時間的getXxx()

表30-6  用於設定時間的setXxx()

第31章  數學物件

對於Math物件的屬性來說，我們只需要掌握Math.PI就行。對於Math物件的方法來說，我們需要掌握表31-5中這些方法就行了。

表31-5  Math物件常用方法

第32章  DOM基礎

1、DOM是什麼？

    對於DOM，我們總結出以下幾點：

  （1）DOM操作，可以簡單理解成：元素操作；

  （2）一個HTML文件就是一棵節點樹，頁面中的每一個元素就是一個樹節點；

  （3）每一個元素就是一個節點，而每一個節點就是一個物件。我們在操作元素時，就是把這個元素看成一個物件，然後用這個物件的屬性和方法進行操作；

2、節點型別

    DOM節點共有12種類型，不過常見的只有3種（其他不用管）：

  （1）元素節點，nodeType值為1

  （2）屬性節點，nodeType值為2

  （3）文字節點；nodeType值為3

3、獲取元素

    在JavaScript中，我們可以通過6種方式來獲取指定元素：

  （1）getElementById()

  （2）getElementsByTagName()

  （3）getElementsByClassName()

  （4）querySelector()和querySelectorAll()

  （5）getElementsByName()

  （6）document.title和document.body

    雖然這些方法名又長又臭，不過根據英文意思來記憶就很輕鬆啦。此外對於這些獲取元素的方式，有幾點需要我們注意的：

  （1）只有getElementsByTagName()可以操作動態DOM，其他的都不行

  （2）querySelector()表示選取滿足選擇條件的第1個元素，querySeletorAll()表示選取滿足條件的所有元素

  （3）當你選取的只有一個元素時，querySelector()和querySelectorAll()是等價的

  （4）getElementsByName只用於表單元素，準確來說一般用於單選按鈕和複選框

  （5）getElementsByTagName()、getElementsByClassName()、getElementsByName()這3個方法返回的都是一個類陣列（elements嘛），想要準確獲取其中一個元素，可以使用陣列下標來實現

4、DOM操作

表32-2  DOM操作的方法

在HTML中直接新增元素，這是靜態方法。而使用JavaScript新增元素，這是動態方法。這一章介紹的這些就是動態方法，也叫動態DOM操作。動態DOM操作在實際開發中用途是非常廣的。

第33章  DOM進階

  1、HTML屬性操作

    在JavaScript中，有2種操作HTML元素屬性的方式，一種是用“物件屬性”，另外一種是用“物件方法”。不管是用哪種方式，都涉及2種操作：①獲取HTML屬性值；②設定HTML屬性值。

  （1）“物件屬性”方式

obj.attr        //獲取值

obj.attr = "值"   //設定值

  （2）“物件方法”方式

obj.getAttribute("attr")        //獲取值

obj.setAttribute("attr","值")    //設定值

對於操作HTML屬性的2種方式，我們總結一下：

   ①“物件屬性方式”和“物件方法方式”，這兩種方式都不僅可以操作靜態HTML的屬性，也可以操作動態DOM的屬性；

   ②只有“物件方法方式”才可以操作自定義屬性；

  2、CSS屬性操作

  （1）獲取值

getComputedStyle(obj).attr

  （2）設定值

obj.style.attr = "值";        //使用style物件

obj.style.cssText = "值"      //使用cssText屬性

  3、DOM遍歷

表33-2  DOM遍歷的屬性

  4、innerHTML和innerText

    在JavaScript中，我們可以使用innerHTML屬性很方便地獲取和設定一個元素的“內部元素”，也可以使用innerText屬性獲取和設定一個元素的“內部文字”。

第34章  事件基礎

    事件操作是JavaScript的核心，不懂事件操作，JavaScript等於白學。在JavaScript中，事件呼叫方式有2種：①在script標籤中呼叫；②在元素中呼叫。

表34.2  滑鼠事件

表34.3  鍵盤事件

表34.4  表單事件

表34.5  編輯事件

表11.6  頁面事件

    上面列出來的都是JavaScript中最常用的事件，對於不常用的，我們已經捨棄掉了。學完這些，我們可以自己嘗試開發一下各種效果了，如圖片輪播、Tab選項卡、回頂部等。

    此外，這些事件大多數都是針對PC端的，像移動端還有一些特殊的事件如touchstart、touchend、touchemove等，這個可以關注綠葉學習網的移動Web開發教程。

第35章  事件進階

  1、事件監聽器

    在JavaScript中，想要給元素新增一個事件，其實我們有2種方式：①事件處理器；②事件監聽器。

obj.addEventListener("click", function () {……);}, false);

obj.onclick = function () {……};

    如果想要為一個元素新增多個相同事件，必須要用事件監聽器，而不能用事件處理器。

  （1）繫結事件

    語法：

obj.addEventListener(type , fn , false)

  （2）解綁事件

    語法：

    obj.removeEventListener(type , fn , false);

    說明：

    removeEventListener()只能解除“事件監聽器”新增的事件，如果要解除“事件處理器”新增的事件，需要用“obj.事件名 = null;”方法來實現。

  2、event物件

    當一個事件發生的時候，這個事件有關的詳細資訊都會臨時儲存到一個指定的地方，這個地方就是event物件。

表35-3  event物件的屬性

  3、this

在事件操作中，可以這樣理解：哪個DOM物件（元素節點）呼叫了this所在的函式，那麼this指向的就是哪個DOM物件。

第36章  window物件

    一個視窗就是一個window物件，這個窗口裡面的HTML文件就是一個document物件，document物件是window物件的子物件。

表36-5  window物件下的重要子物件

  1、視窗操作

  （1）開啟視窗

window.open(url, target)

  （2）關閉視窗

window.close()

  2、對話方塊

表36-6  3種對話方塊

  3、定時器

    在JavaScript中，我們可以使用setTimeout()方法來“一次性”地呼叫函式，並且可以使用clearTimeout()來取消執行setTimeout()。

    我們也可以使用setInterval()方法來“重複性”地呼叫函式，並且可以使用clearInterva()來取消執行setInterval()。

  4、location物件

表36-7  location物件的屬性

  5、navigator物件

    在JavaScript中，我們可以使用window物件下的子物件navigator來獲取瀏覽器的型別。

第37章  document物件

    document物件其實是window物件下的一個子物件來的，它操作的是HTML文件裡所有的內容。document物件常用的屬性和方法如下：

表37-3  document物件常用的屬性

表37-4  document物件常用的方法

小夥伴們邊學邊練，不知不覺看完這本書的時候，應該已經對HTML、CSS、JavaScript有了基本的掌握，能夠製作出簡單的頁面了。

要想成為一名合格的前端開發人員，接下來要學習更多的前端技術，如：jQuery、HTML5、CSS3等。