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

24章  JavaScript簡介

  1HTML是網頁的結構,CSS是網頁的外觀,而JavaScript是網頁的行為;

  2、推薦2個前端開發工具:Hbuildervscode。建議初學者使用Hbuilder

  3JavaScript常用引入方式有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是一個表示式,而整一句程式碼“var a=1+2;”就是一個語句。

25-39  表示式與語句

  5、註釋

//單行註釋

/*多行註釋*/

26章  流程控制

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

  1、選擇結構

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

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

  1)單向選擇:if

  2)雙向選擇:ifelse

  3)多向選擇:ifelse ifelse

  4if語句的巢狀

  2、迴圈結構

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

    JavaScript中,迴圈語句共有以下3種:

  1while語句

  2do...while語句

  3for語句

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  字串物件的屬性

屬性

說明

length

獲取字串的長度

表28-2  字串物件的方法

方法

說明

toLowerCase()toUpperCase()

大小寫轉換

charAt()

獲取某一個字元

substring()

擷取字串

replace()

替換字串

split()

分割字串

indexOf()lastIndexOf()

檢索字串的位置

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

29章  陣列物件

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

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

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

29-1  陣列的屬性

屬性

說明

length

獲取陣列的長度

29-2  陣列的方法

方法

說明

slice()

擷取陣列部分

unshift()

新增陣列元素,在開頭新增

push()

新增陣列元素,在末尾新增

shift()

刪除陣列元素,在開頭刪除

pop()

刪除陣列元素,在末尾刪除

sort()

陣列大小比較

reverse()

陣列顛倒順序

join()

將陣列元素連線成字串

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

30章  時間物件

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

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

方法

說明

getFullYear()

獲取年份,取值為4位數字

getMonth()

獲取月份,取值為0(一月)到11(十二月)之間的整數

getDate()

獲取日數,取值為1~31之間的整數

getHours()

獲取小時數,取值為0~23之間的整數

getMinutes()

獲取分鐘數,取值為0~59之間的整數

getSeconds()

獲取秒數,取值為0~59之間的整數

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

方法

說明

setFullYear()

可以設定年、月、日

setMonth()

可以設定月、日

setDate()

可以設定日

setHours()

可以設定時、分、秒、毫秒

setMinutes()

可以設定分、秒、毫秒

setSeconds()

可以設定秒、毫秒

31章  數學物件

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

表31-5  Math物件常用方法

方法

說明

max(a,b,,n)

返回一組數中的最大值

min(a,b,,n)

返回一組數中的最小值

sin(x)

正弦

cos(x)

餘弦

tan(x)

正切

asin(x)

反正弦

acos(x)

反餘弦

atan(x)

反正切

atan2(x)

反正切

floor(x)

向下取整

ceil(x)

向上取整

random()

生成隨機數

32章  DOM基礎

1DOM是什麼?

    對於DOM,我們總結出以下幾點:

  1DOM操作,可以簡單理解成:元素操作;

  2)一個HTML文件就是一棵節點樹,頁面中的每一個元素就是一個樹節點;

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

2、節點型別

    DOM節點共有12種類型,不過常見的只有3種(其他不用管):

  1)元素節點,nodeType值為1

  2)屬性節點,nodeType值為2

  3)文字節點;nodeType值為3

3、獲取元素

    JavaScript中,我們可以通過6種方式來獲取指定元素:

  1getElementById()

  2getElementsByTagName()

  3getElementsByClassName()

  4querySelector()querySelectorAll()

  5getElementsByName()

  6document.titledocument.body

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

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

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

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

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

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

4DOM操作

表32-2  DOM操作的方法

方法

說明

createElement()

建立元素節點

createTextNode()

建立文字節點

appendChild

插入元素,在父元素最後一個子元素後面插入

insertBefore()

插入元素,在父元素任意一個子元素前面插入

removeChild()

刪除元素

cloneNode()

複製元素

replaceChild()

替換元素

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

33章  DOM進階

  1HTML屬性操作

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

  1)“物件屬性”方式

obj.attr        //獲取值

obj.attr = ""   //設定值

  2)“物件方法”方式

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

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

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

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

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

  2CSS屬性操作

  1)獲取值

getComputedStyle(obj).attr

  2)設定值

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

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

  3DOM遍歷

表33-2  DOM遍歷的屬性

屬性

說明

parentNode

查詢父元素

childNodesfirstChildlastChild

查詢子元素,包含文字節點

childrenfirstElementChildlastElementChild

查詢子元素,不包含文字節點

previousSiblingnextSibling

查詢兄弟元素,包含文字節點

previousElementSiblingnextElementSibling

查詢兄弟原始,不包含文字節點

  4innerHTMLinnerText

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

34章  事件基礎

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

表34.2  滑鼠事件

事件

說明

onclick

滑鼠單擊

onmouseover

滑鼠移入

onmouseout

滑鼠移出

onmousedown

滑鼠按下

onmouseup

滑鼠鬆開

onmousemove

滑鼠移動

表34.3  鍵盤事件

事件

說明

onkeydown

鍵盤按下

onkeyup

鍵盤松開

表34.4  表單事件

事件

說明

onfocus

獲取焦點

onblur

失去焦點

onselect

選擇文字

onchange

選擇某一項觸發(單選框、複選框、下拉選單)

表34.5  編輯事件

事件

說明

oncopy

用於防止文字被複制

onselectstart

用於防止文字被選取

oncontextmenu

用於禁止滑鼠右鍵

11.6  頁面事件

事件

說明

window.onload

頁面載入完畢觸發

window.onunload

離開頁面觸發

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

    此外,這些事件大多數都是針對PC端的,像移動端還有一些特殊的事件如touchstarttouchendtouchemove等,這個可以關注綠葉學習網的移動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;”方法來實現。

  2event物件

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

表35-3  event物件的屬性

屬性

說明

type

事件型別

keyCode

鍵碼值

shiftKey

是否按下shift

ctrlKey

是否按下Ctrl

altKey

是否按下Alt

  3this

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

36章  window物件

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

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

子物件

說明

document

文件物件,用於操作頁面元素

location

地址物件,用於操作URL地址

navigator

瀏覽器物件,用於獲取瀏覽器版本資訊

  1、視窗操作

  1)開啟視窗

window.open(url, target)

  2)關閉視窗

window.close()

  2、對話方塊

表36-6  3種對話方塊

方法

說明

alert()

僅提示文字,沒有返回值

confirm()

具有提示文字,返回“布林值”(truefalse

prompt()

具有提示文字,返回“字串”

  3、定時器

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

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

  4location物件

表36-7  location物件的屬性

屬性

說明

href

當前頁面地址

search

當前頁面地址“?”後面的內容

hash

當前頁面地址“#”後面的內容

  5navigator物件

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

37章  document物件

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

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

屬性

說明

document.title

獲取文件的title

document.body

獲取文件的body

document.URL

當前文件的URL

document.referrer

返回使瀏覽者到達當前文件的URL

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

方法

說明

document.getElementById()

通過id獲取元素

document.getElementsByTagName()

通過標籤名獲取元素

document.getElementsByClassName()

通過class獲取元素

document.getElementsByName()

通過name獲取元素

document.querySelector()

通過選擇器獲取元素,只獲取第1

document.querySelectorAll()

通過選擇器獲取元素,獲取所有

document.createElement()

建立元素節點

document.createTextNode()

建立文字節點

document.write()

輸出內容

document.writeln()

輸出內容並換行

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

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