Web前端開發精品課HTML CSS JavaScript基礎教程JavaScript部分知識點總結
內容來自莫振杰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 字串物件的屬性
屬性 |
說明 |
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基礎
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操作的方法
方法 |
說明 |
createElement() |
建立元素節點 |
createTextNode() |
建立文字節點 |
appendChild |
插入元素,在父元素最後一個子元素後面插入 |
insertBefore() |
插入元素,在父元素任意一個子元素前面插入 |
removeChild() |
刪除元素 |
cloneNode() |
複製元素 |
replaceChild() |
替換元素 |
在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遍歷的屬性
屬性 |
說明 |
parentNode |
查詢父元素 |
childNodes、firstChild、lastChild |
查詢子元素,包含文字節點 |
children、firstElementChild、lastElementChild |
查詢子元素,不包含文字節點 |
previousSibling、nextSibling |
查詢兄弟元素,包含文字節點 |
previousElementSibling、nextElementSibling |
查詢兄弟原始,不包含文字節點 |
4、innerHTML和innerText
在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端的,像移動端還有一些特殊的事件如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物件的屬性
屬性 |
說明 |
type |
事件型別 |
keyCode |
鍵碼值 |
shiftKey |
是否按下shift鍵 |
ctrlKey |
是否按下Ctrl鍵 |
altKey |
是否按下Alt鍵 |
3、this
在事件操作中,可以這樣理解:哪個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() |
具有提示文字,返回“布林值”(true或false) |
prompt() |
具有提示文字,返回“字串” |
3、定時器
在JavaScript中,我們可以使用setTimeout()方法來“一次性”地呼叫函式,並且可以使用clearTimeout()來取消執行setTimeout()。
我們也可以使用setInterval()方法來“重複性”地呼叫函式,並且可以使用clearInterva()來取消執行setInterval()。
4、location物件
表36-7 location物件的屬性
屬性 |
說明 |
href |
當前頁面地址 |
search |
當前頁面地址“?”後面的內容 |
hash |
當前頁面地址“#”後面的內容 |
5、navigator物件
在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等。