javascript
【前端就业课 第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门
注意：手機（APP）打開，內(nèi)容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監(jiān)督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。
參加1_bit博主前端學習計劃發(fā)文時在頭部記得加上本專欄鏈接，示例如下：
我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html
一、JavaScript 簡介
🐶1_bit：這一節(jié)咱們開始學習什么是 JavaScript。
👸小媛：什么是 JavaScript 呀？
🐶1_bit：JavaScript 簡稱 JS，在 Web 中用作用于給整個頁面添加一些動態(tài)效果，例如動態(tài)改變頁面某個元素的css屬性，或給整個頁面添加較為流程的用戶體驗，基礎(chǔ)的 JS 學習 一般直接在 web 中嵌入即可。
👸小媛：奧，那么厲害，那趕緊學習吧。
二、JavaScript 基礎(chǔ)入門
2.1 JavaScript HelloWorld
🐶1_bit：首先咱們看 JavaScript 的如何改變網(wǎng)頁元素中的內(nèi)容。首先咱們先編寫一個 html，代碼如下。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰(zhàn)課程10 javascript</title> </head> <body><p id="p_id">這里是 p 元素中的內(nèi)容。</p> </body> </html>👸小媛：這個代碼不就是直接會顯示這段話嗎？還有啥功能呢？
🐶1_bit：不急，咱們現(xiàn)在開始添加第一句 JavaScript 代碼，改動如下。
<script>document.write("HelloWorld");</script>
👸小媛：這個就是 JS 的代碼嗎？
🐶1_bit：對的，JS代碼添加在 標簽 <script> </script> 之中，其中以上代碼 document.write("HelloWorld"); 指的就是在當前 文檔中寫入一個字符串，這個字符串就是 HelloWorld。
👸小媛：奧，所以 document 指的就是文檔，write 就是寫入，在 write 圓括號內(nèi)的雙引號中就是指需要寫入的內(nèi)容？
🐶1_bit：是的，其中的小數(shù)點是表示 document 這個對象中的一個方法。
👸小媛：什么是對象什么是方法呢？
document 指的就是當前整個文檔，文檔是一個類，document 指的是當前 html 所以 document 是這個類型的一個對象，也就是具體到某一個事物；類是編程中的一個概念，你可以理解成一個類別。例如顯示生活中的電放鍋是一個類別，“所有”的電放鍋都有做飯和保溫的功能，那么此時就可以把這個電飯鍋當成一個類型，那么你如果具體到某一個電飯鍋，那就是一個對象，你用代碼編程的寫法來使用電飯鍋做飯的功能，那么就可以寫成 電飯鍋.做飯()。
👸小媛：那么這個小數(shù)點可以理解成使用某個功能的意思？
🐶1_bit：對的，然后每個功能基本上都需要使用一個圓括號用于接收參數(shù)。
👸小媛：那什么是參數(shù)呢？
🐶1_bit：參數(shù)的意思就是指你做飯的時候可能用的糙米、白米、五常大米等不同種類的米來做飯，這些參數(shù)指的就是你需要完成這個功能所需要的原料，那么使用電飯鍋做飯的代碼就可以寫成 電飯鍋.做飯("白米")。
👸小媛：那水還要加嗎？
🐶1_bit：當然要加，所以此時就有兩個參數(shù)，這兩個參數(shù)只需要使用逗號分開就可以了，例如示例 電飯鍋.做飯("白米","泉水")。
👸小媛：原來是這樣。
🐶1_bit：對的。所以我們現(xiàn)在回到我們的代碼document.write("HelloWorld");之中就可以理解了，document 指的就是 html 文檔，write 是這個文檔類別對象里面的一個寫入功能，其中寫入內(nèi)容那么就需要一個文本來表示你需要寫入什么，那么這個文本就是 HelloWorld。
👸小媛：那為什么這個文本需要用雙引號引入呢？
🐶1_bit：那是因為在 JS 中規(guī)定，雙引號用于表示字符串，HelloWorld 是字符串所以需要雙引號用來標記。
👸小媛：一定要用雙引號嗎？
🐶1_bit：對的，不然你怎么知道這個 HelloWorld 是一個類還是一個字符串呢？萬一有一個類叫做 HelloWorld 呢？因為這個類在 JS 中是可以自定義的。
👸小媛：原來如此，明白了。
🐶1_bit：那么該代碼的最終效果顯示如下。
👸小媛：還有一個問題，我的 JS 代碼可以換位置嗎？
🐶1_bit：可以，你還可以添加多個，例如。
<script>document.write("HelloWorld 放前面"); </script><p id="p_id"> 這里是 p 元素中的內(nèi)容。 </p><script>document.write("HelloWorld 放后面"); </script>
👸小媛：明白了。
2.2 JavaScript 變量及命名
🐶1_bit：在 JavaScript 中還可以添加變量。
👸小媛：什么是變量？
🐶1_bit：你可以理解成一個容器，用于值的存儲，可以存儲字符串、數(shù)字等。
👸小媛：這個容器有什么用嗎？
🐶1_bit：例如你在一個頁面中，需要知道用戶點擊了這個按鈕多少次，你可以先給予一個變量一個初始值0，每點擊一次那么這個變量的值就加1，那么這個變量就可以作為計數(shù)了。
👸小媛：感覺想要看一個實例。
🐶1_bit：這個不急，之后咱們會有一個示例的。咱們先學習這個變量怎么用。下面是一個示例代碼。
<script>var i=0;var a=10,b=1,c=11;document.write(a+b+c); </script>🐶1_bit：以上代碼中的 var 表示創(chuàng)建一個變量，那么在之后可以寫一個變量名，例如 var i=0; 之中，var 表示變量創(chuàng)建，i 表示變量名稱，等于號表示將等于號右側(cè)的值給予到左側(cè)的變量之中，那么此時 i 的值就等于 0了，還要一個注意的點，這一行代碼寫完后要在末尾添加一個分號，就像語文中的句號一樣，表示這一句話已經(jīng)寫完了。
👸小媛：明白了，那之后呢？
🐶1_bit：之后的代碼例如 var a=10,b=1,c=11; 表示同時一行創(chuàng)建多個變量，這些變量分別是 a、b、c，其中他們的值都在等于號右側(cè)標記了。
👸小媛：明白了，就是多個變量使用逗號進行分隔對吧？
🐶1_bit：對的。最后一行 document.write(a+b+c); 表示將變量 a、b、c 做加法，最終將會在頁面上顯示出值 22。
👸小媛：原來是這樣，明白了。
🐶1_bit：這就是變量，是一個容器，其中存儲的值可以發(fā)生改變。當然我們也可以使用一個變量用于存儲某多個值的運算結(jié)果，例如以下代碼。
<script>var i=0;var a=10,b=1,c=11;i=a+b+c;document.write(i); </script>👸小媛：以上代碼直接用 i 存儲了三個變量相加然后再進行輸出顯示？
🐶1_bit：對的，當然字符串也可以進行加法運算，例如如下代碼。
<script>var i="Hello";var a=" XiaoMing",b="!";i=i+a+b;document.write(i); </script>🐶1_bit：以上代碼 i 是一個字符串變量存儲了 Hello，a存儲了 XiaoMing，b 存儲了一個感嘆號，其中 i=i+a+b; 就表示使用加號將這些字符串進行相連，那么最終的顯示如下。
👸小媛：原來可以這樣呀。
🐶1_bit：對的，你可以想一下，在一個頁面之中，要求用戶填寫一個用戶名，用戶填寫了用戶名 小明 之后，然后點擊確定將會出現(xiàn) “Hello 小明” 字樣，就是這樣做的，但是現(xiàn)在咱們還沒學到如何使用 JavaScript 獲取某個 html 元素的值，所以在此處先不做距離，咱們基本上學完基礎(chǔ)語法后將會有一個示例大全。
👸小媛：迫不及待了。
🐶1_bit：不過咱們學習了這個變量創(chuàng)建后，有一點還是需要注意一下。
👸小媛：是什么？
🐶1_bit：就是變量起名的時候一定要注意某些規(guī)則，因為有時候你若起名一個變量名為 classname 表示一個班級名，那么classname 并不方便閱讀，你可以起名為 className 或者class_name ，當然還可以起名ClassName，其中ClassName 和 className 為駝峰命名法（因為像駝峰），而 class_name為下劃線命名法，你可以在項目中統(tǒng)一某個命名法方便閱讀。
👸小媛：收到。
2.3 運算符
🐶1_bit：接下來咱們來學習一下運算符吧。
👸小媛：加減乘除嗎？剛剛不是學過了嗎？
🐶1_bit：在編程中 JavaScript 的運算符不止這一些呢，還有很多，例如 +=、%、%= 等運算符都還沒學呢。
👸小媛：好勒。
🐶1_bit：首先咱們看看 += 運算符，+= 運算符示例如下。
<script>var i=10,j=11;i+=j;document.write(i); </script>🐶1_bit：以上代碼中 i 等于10，j等于11，那么 i+=j 則與 i=i+j 表達式結(jié)果相等，此時只是省略了 i 這個變量出現(xiàn)于在表達式之中。
👸小媛：原來如此，這就是一個簡單寫法對吧？
🐶1_bit：是的。接下來咱們再看看 % 這個運算符，% 運算符是指取模預(yù)算，也就是取余數(shù)，例如如下代碼示例。
<script>var i=11,j=10;i=i%j;document.write(i); </script>🐶1_bit：以上代碼中，i 是11 j 是10，那么 i%j 則表示 11除10之后取余數(shù)，那么最終值則是1。
👸小媛：明白了，所以 %= 的意思就是也是取模運算咯？
🐶1_bit：對的，這個不難吧？
👸小媛：哈哈哈，挺簡單的。
🐶1_bit：咱們還可以寫成 *=、-= 等，這些都和 += 類似。
👸小媛：明白了。
🐶1_bit：以上的代碼中不止只有 變量 和變量 之間進行運算，還可以在其中添加對應(yīng)的值，例如以下示例。
<script>var i=11,j=10;i=i%j+10+1+9+10;document.write(i); </script>👸小媛：知道了。
🐶1_bit：現(xiàn)在咱們再介紹兩個運算符，++和- -。
👸小媛：這是啥。
🐶1_bit：咱們先看一個示例。
<script>var i=0;document.write(++i+'<br/>');document.write(--i+'<br/>');document.write((i++)+'<br/>');document.write(i+'<br/>');document.write((i--)+'<br/>');document.write(i+'<br/>'); </script>🐶1_bit：其中 ++i 中的 ++ 表示當前這個變量值加1，那么此時在 write 方法中，++i 就表示當前值加 1，那么輸出為 1。
👸小媛：然后第二行輸出是減減（–）所以就為0？
🐶1_bit：對的，為了方便觀看，咱們使用加號與 <br/> 換行標簽進行鏈接，所以第一行顯示 1 第二行顯示 0，這個沒問題吧？
👸小媛：沒問題，那為什么下一行這個++放到了變量 i 的后面？
🐶1_bit：那是因為 ++ 放前面表示先進行運算變量 i 增值，再執(zhí)行 write 輸出方法，如果 ++ 放到變量之后將會先執(zhí)行 write 方法先顯示內(nèi)容再執(zhí)行 i++操作，那么第三行就顯示為0，因為此處寫的是 i++，使用括號是為了讓你能夠方便的查看。
👸小媛：明白了，所以第四行雖然沒做什么操作，但是依舊顯示了1？
🐶1_bit：對的，所以第五行執(zhí)行了會顯示 1，最后一行沒什么操作則顯示了0。
👸小媛：明白了。
🐶1_bit：咱們還有很多對應(yīng)的運算符，這些不再解釋，若有需要則去查看對應(yīng)的運算符即可。
2.4 條件判斷
🐶1_bit：接下來咱們學習 if 判斷。
👸小媛：這個判斷有什么用呢？
🐶1_bit：這個判斷可是有大用，編程中判斷是非常常見的；例如在判斷用戶是否已成年、是否購買過某些商品這些都是需要用判斷來實現(xiàn)；在JavaScript中判斷使用 if 語句。
2.4.1 if 基礎(chǔ)與表達式
👸小媛：那怎么寫呢？
🐶1_bit：你先看看下面的示例。
<script>var i=10;if(i>=18){document.write("已成年");} </script>🐶1_bit：此時創(chuàng)建了一個變量 i，這個變量 i 的值為 10，接著使用 if 判斷這個 i 的值是否大于某一個值。if 的語法很簡單，if 是對一個的關(guān)鍵字，在 if 后接上一對圓括號，在圓括號中寫上對應(yīng)的表達式，這個表達式的為 i>=18。
👸小媛：什么是表達式呢？
🐶1_bit：你可以簡單理解為表達式則是數(shù)值與符號的組合，它是一個式子，這個式子具有一個最終的值，是有意義的。
👸小媛：所以關(guān)鍵點就是說是否具有最終值？
🐶1_bit：對的，如果你亂寫一通基本上是沒有最終值的，在此處 i>=18 就是一個表達式，其中判斷 i的值是否大于關(guān)于 18，如果大于等于將會判斷為真，整個表達式的最終值就是“真”，使用 true 表示。
👸小媛：那如果判斷錯誤呢？
🐶1_bit：判斷錯誤就是最終值為假，使用 false 表示。
👸小媛：所以 true 的意思就是真，false 的意思就是假？
🐶1_bit：對的，在 if 語句中，如果判斷為真，那么就執(zhí)行if 語句圓括號后花括號中的語句內(nèi)容，在以上代碼中，花括號中的代碼是 document.write("已成年");，那么將會執(zhí)行這一段代碼，在網(wǎng)頁中顯示。
👸小媛：那在此處 i 的值 為 10，明顯是不大于18的那將會怎樣呢？
🐶1_bit：那么將會什么都不執(zhí)行。
2.4.2 if else
👸小媛：感覺一點不怎么靈活呀。
🐶1_bit：如果你想在這個條件判斷后顯示未成年的話，那么只需要添加一個分支語句 else 即可，例如如下代碼示例。
<script>var i=10;if(i>=18){document.write("已成年");}else{document.write("未成年");} </script>🐶1_bit：此時將會顯示未成年。
👸小媛：你的意思是說，如果if 語句里面的條件判斷錯誤，那么將會執(zhí)行 else 部分的內(nèi)容？
🐶1_bit：對的。else 是關(guān)鍵字，對應(yīng)后面的花括號中的代碼將會在 條件 判斷錯誤后執(zhí)行，組中將會顯示未成年。
👸小媛：明白了。
2.4.3 邏輯與
🐶1_bit：其中咱們的 if 語句還可以更加靈活的進行判斷，例如編寫一段代碼，判斷這個人是否購買了面包和蔬菜，如果購買了那么將會顯示得到一個優(yōu)惠券，那么此時可以寫成如下示例。
<script>var i=1,j=1;if(i==1&&j==1){document.write("購買了蔬菜和面包獲得優(yōu)惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優(yōu)惠券");} </script>👸小媛：咦？那個&&是什么？
🐶1_bit：這個&&是邏輯與運算符，表示左右兩邊的條件是否同時成立。
🐶1_bit：其中左邊是一個表達式，右邊也是一個表達式，當表達式使用 && 邏輯與 運算符進行連接那么就表示左右兩邊的表達式都要同時為真，那么整個表達式 i==1&&j==1 最終值才正確。
👸小媛：意思說我只有一個表達式對的時候，例如 j 的值為 0，那么這個表達式就不正確了？即時 i 的值為 1？
🐶1_bit：對的，在這里我用 i 表示面包、j用來表示蔬菜，其中數(shù)值1表示是否購買，那么i和j的值都為1則表示都購買，此時表達式內(nèi)容才為真。
👸小媛：明白了，所以最終將會顯示獲得優(yōu)惠券。
2.4.4 邏輯或
🐶1_bit：除了邏輯與之外還有一個邏輯判斷符號叫做邏輯或“||”，這個邏輯或與邏輯與運算符不一樣，邏輯或只需要左右兩邊的表達式其中一個為1，那么整個表達式則判斷成功，例如如下示例。
<script>var i=1,j=0;if(i==1||j==1){document.write("購買了蔬菜或面包獲得優(yōu)惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優(yōu)惠券");} </script>🐶1_bit：此時 j=0 整個表達式都將判斷正確。
👸小媛：明白了，也就是說有一個對了就等于完成任務(wù)了
2.4.5 邏輯混合
🐶1_bit：對的，邏輯與和邏輯或都是邏輯運算符，它可以鏈接多個邏輯運算，例如如下示例。
<script>var i=1,j=1,k=1;if(i==1&&j==1&&k==1){document.write("購買了蔬菜、面包以及醬油獲得優(yōu)惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優(yōu)惠券");} </script>
👸小媛：那這個怎么算的呢？
🐶1_bit：多個邏輯運算符我們記得只需要默認從左到右進行運算即可，先計算i==1&&j==1若等于true，那么此事表達式就是true&&k==1，true表示正確，那么只需要判斷k是否等于1那么將會完成整個式子的判斷。
👸小媛：原來是這樣呀，所以再多的邏輯判斷也是這樣咯？
🐶1_bit：對的。咱們還可以使用邏輯或和邏輯與進行混合的邏輯運算，例如如下示例。
<script>var i=1,j=0,k=1,f=0;if(i==1||j==1&&k==1||f==1){document.write("購買了蔬菜、面包、醬油或玉米獲得優(yōu)惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優(yōu)惠券");} </script>
👸小媛：咦？這個怎么算的？我有點懵圈了。
🐶1_bit：這個其實也很簡單，首先從左往右，第一個表達式是 i==1||j==1，此時 i值是1，j值是0，那么在判斷j值是否等于1時則無關(guān)緊要，因為這兩個表達式中間使用的是邏輯或表達式，只需要其中有一個表達式在正確即可，所以i==1||j==1表達式最終值為 true，接下來表達式就寫成 true&&k==1，其中k值是1，那么整個表達式 true&&k==1 判斷正確，最終只需要和 f==1 表達式進行邏輯或運算即可，此時表大會為 true||f==1，那么最終值則為真，將會執(zhí)行代碼 document.write("購買了蔬菜、面包、醬油或玉米獲得優(yōu)惠券");。
👸小媛：明白了，原來剛開始需要慢慢的對這些表達式進行分析。
2.4.6 if elseif
🐶1_bit：接下來咱們再看看 if 語句的其他語法。
👸小媛：if 語句還有其他語法？
🐶1_bit：對的，例如一個用戶填寫了他孩子的歲數(shù)，對應(yīng)的需要進行不同的商品推薦，此時就可以使用 else if語句。
👸小媛：這個怎么寫呢？
🐶1_bit：這個編寫起來不難，例如如下示例。
<script>var age=3;if(age==1){document.write("牛奶");}else if(age==2){document.write("純牛奶");}else if(age==3){document.write("羊奶");}else if(age>=4 && age<=9){document.write("煉奶");}else if(age>=10 && age<=13 && age!=11){document.write("乳味飲品");}else if(age>=14 && age<=18){document.write("隨便吃喝");}else{document.write("本店沒有成年吃的東西");} </script>👸小媛：else if 后的圓括號是條件嗎？
🐶1_bit：是的，首先判斷 age 是不是等于1，若條件成立，那么將會執(zhí)行 age==1 后的代碼，其他條件下的代碼將不會執(zhí)行；若條件不成立，那么將會跳到 else if 語句中從上往下對條件進行判斷，判斷 age ==2 不成立則會再判斷 age==3，若 age==3 條件成立，那么將會執(zhí)行 age==3 的 else if 判斷后花括號中的代碼內(nèi)容，其他條件不再進行判斷；若所有條件都不成立，那么將會執(zhí)行 else 部分內(nèi)容。
👸小媛：原來是這么回事呀，不過你確定判斷是否相等是使用兩個等于號進行判斷？
🐶1_bit：在 JavaScript 中，兩個等于號是判斷是否相等的。
👸小媛：明白了。
🐶1_bit：還有一點需要注意，咱們對數(shù)值進行判斷，不一定是要寫13之類的數(shù)字，你可以將這些數(shù)值放到一個變量之中進行判斷，例如 a==b 這些寫。
👸小媛：了解了。
2.4.7 if 嵌套
🐶1_bit：咱們現(xiàn)在還需要了解一下，if 語句是可以進行嵌套的，例如一個 if 語句之中嵌套了另外一個 if 語句，并且嵌套的 if 語句是有分支的，這些都是可以的。
👸小媛：舉個例子看看？
🐶1_bit：例如如下示例。
<script>var age=3,sex=1;if(age==1){document.write("牛奶");if(sex==1){document.write("性別為男，可以粗糙一點養(yǎng)。");}else if(sex==2){document.write("性別為女，可以精致一點養(yǎng)")}}else if(age==2){document.write("純牛奶");}else if(age==3){document.write("羊奶");}else if(age>=4 && age<=9){document.write("煉奶");}else if(age>=10 && age<=13 && age!=11){document.write("乳味飲品");}else if(age>=14 && age<=18){document.write("隨便吃喝");}else{document.write("本店沒有成年吃的東西");} </script>
👸小媛：那還可以繼續(xù)往里面嵌套嗎？
🐶1_bit：可以的，但是不是很建議這樣做，不然你會看眼花的。
👸小媛：明白了。
2.4.8 switch 語句
接下來再看一個判斷語句。
還有嗎？
對的，還有一個是 switch 語句，不過大部分的判斷都可以使用 if 語句完成，不過 switch 肯定也要進行學習。
兩者有什么區(qū)別嗎？
你可以理解switch 為對某些條件的語句進行分支，做這一類需求是較為方便，就像菜單一樣，例如如下示例。
<script>var day=1;switch(day){case 1:document.write("星期1");break;case 2:document.write("星期2");break;case 3:document.write("星期3");break;case 4:document.write("星期4");break;case 5:document.write("星期5");break;case 6:document.write("星期6");break;case 7:document.write("星期7");break;default:document.write("你說什么我不懂");} </script>這個代碼看起來跟之前的不是很一樣呀？
對的，switch 語句還是有些卻別的，在 switch 后的圓括號中填寫的是一個值或變量，這個值或變量只要與switch 代碼塊中 case 后的值相等，就對應(yīng)的執(zhí)行相應(yīng)步驟的代碼。
意思說 day 等于 6 就執(zhí)行 case 6 這個部分的代碼內(nèi)容？
對的，其他的則不會執(zhí)行。
那 default 部分是默認的意思嗎？
default 部分表示當所有的casa 值都沒有對應(yīng)時將會執(zhí)行該部分的代碼。
那 break 又是啥？
break 是跳出的意思，例如如果你的 day 值是3，你在 case 3、4、5 時都沒有使用break，此時將會執(zhí)行 case 3、4、5、6 的內(nèi)容，如果你想保證正確就一定要加上 break，當然除非你故意這樣做。
我剛剛試了一下，如果我刪除了 3 4 5 的 break，最終將會執(zhí)行到有 break 的 case 部分為止。
對的，所以這點要注意。
所以我總結(jié)一下，這個 switch語句的語法就是 switch后就是一個表達式或值，接著在對應(yīng)花括號內(nèi)寫上寫上 case 和對應(yīng)的值，接著一個冒號后就是對應(yīng)的代碼內(nèi)容，在最后一句加上 break 即可完成，最后就是 default ，它是所有條件不對時執(zhí)行的部分，也就是等于跟 if 語句的 else 一樣？
對的，理解的不錯。
2.5 函數(shù)
2.5.1 基礎(chǔ)函數(shù)
🐶1_bit：接下來咱們開始學習 JavaScript 的函數(shù)。
👸小媛：是數(shù)學中的函數(shù)嗎？
🐶1_bit：其實函數(shù)你可以理解為一個功能，不嚴謹?shù)恼f，函數(shù)你可以當成是方法，也就是之前說的一個功能。
👸小媛：不是很理解。
🐶1_bit：你可以理解為我們在做一個需求時需要有一個功能是將兩個字符串連接起來，例如用戶輸入一個用戶名，咱們就對他打招呼；這個需求就可以寫成一個函數(shù)，函數(shù)在 JavaScript 中是可以進行調(diào)用的，也就是說可以多次重復(fù)使用的；若你在寫 JavaScript 代碼時，經(jīng)常會使用到一段重復(fù)的代碼，這個代碼恰巧是一個功能，那么你就可以寫成一個函數(shù)重復(fù)使用他，這樣的話就可以不用重復(fù)的打這一段代碼了，就非常方便。
👸小媛：哇，感覺好處挺大的，但是還不懂怎么寫。
🐶1_bit：那咱們就開始弄一下示例吧。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰(zhàn)課程10 javascript 02</title> </head> <body><script>function HiUser(){document.write("Hi");}</script> </body> </html>👸小媛：我運行這一段代碼怎么頁面是空白的啥都沒有？
🐶1_bit：那是因為這是一個函數(shù)，咱們在這里只是創(chuàng)建（定義）好了，但是并沒有使用他。
👸小媛：原來如此。
🐶1_bit：在使用前咱們先看看這個函數(shù)怎么創(chuàng)建吧。
👸小媛：好的。
🐶1_bit：首先我們看到函數(shù)的代碼是。
function hiUser(){document.write("Hi"); }🐶1_bit：其中 function 是表示我在這里創(chuàng)建一個函數(shù)，就跟創(chuàng)建變量的 var 作用類似，表示開始進行對應(yīng)功能的創(chuàng)建，接下來后面的 hiUser 則表示這個函數(shù)的名稱，后面是一對圓括號和花括號，在花括號中則是對應(yīng)這個函數(shù)的代碼。函數(shù)中對應(yīng)的代碼則是這個函數(shù)的功能。
👸小媛：所以這個代碼的功能就是輸出一個 Hi 嗎？
🐶1_bit：對的。
👸小媛：那怎么使用呢？
🐶1_bit：使用也很簡單，只需要在JavaScript 代碼中使用這個函數(shù)名后加一個圓括號就可以了。
<script>function hiUser(){document.write("Hi");}hiUser(); </script>
👸小媛：喔，原來如此，明白了。
2.5.2 函數(shù)參數(shù)
🐶1_bit：其實咱們還可以傳遞參數(shù)進行顯示，例如你傳遞一個用戶名，然后對某個用戶名進行打招呼都可以。
👸小媛：咱么做？
🐶1_bit：你看看下面的示例。
<script>function hiUser(username){document.write("Hi "+username);}hiUser("XiaoMing"); </script>👸小媛：所以 “XiaoMing” 就是一個作為字符串傳進去 hiUser 函數(shù)的參數(shù)？
🐶1_bit：是的，XiaoMing 參數(shù)傳到 hiUser 函數(shù) 后，將會存儲到 username 變量中，那么將會執(zhí)行 document.write("Hi "+username); 代碼，由于 username 值是 XiaoMing ，那么最終將會顯示 Hi XiaoMing。
👸小媛：明白了。多個參數(shù)只需要逗號進行分隔就可以了嗎？
🐶1_bit：現(xiàn)在還不行，因為咱們還需要在函數(shù)中進行更改，你想這個函數(shù)接收兩個參數(shù)，那么就需要在函數(shù)中寫兩個變量對值進行接收。
<script>function hiUser(username,word){document.write(username+word);}hiUser("XiaoMing"," 666!"); </script>👸小媛：所以在函數(shù)接收值后，username 就等于了 XiaoMing，而 word 就等于了 666！，然后再將兩者進行輸出顯示？
🐶1_bit：是的，最終值如下。
2.5.3 函數(shù)返回值
🐶1_bit：其實函數(shù)還有返回值。
👸小媛：什么是返回值？
🐶1_bit：返回值就像你用電飯鍋做飯，電飯鍋是一個功能，你傳入的米和水是參數(shù)，那么最終電飯鍋將會給熱騰騰的米飯給你，這個米飯就是最終的返回值。
👸小媛：哇，那怎么做呢？
🐶1_bit：你看下面示例。
<script>function hiUser(username,word){return username+word;}var histr=hiUser("XiaoMing"," 666!");document.write(histr); </script>🐶1_bit：以上代碼中，hiUser 中的代碼改變成了 return username+word;，其中 return 則是表示返回的意思，return 右側(cè)就是需要返回的值；當代碼運行到此處后，將會把 username+word 的運算結(jié)果返回出來；我們再看代碼 var histr=hiUser("XiaoMing"," 666!");，此時傳入了兩個參數(shù)，并且創(chuàng)建了一個變量 histr，histr 的值則等于 hiUser("XiaoMing"," 666!")，那么在此處就說明 hiUser("XiaoMing"," 666!") 會有一個返回值進行返回，值返回后將該值存儲到 histr 變量之中，最終使用代碼進行輸出顯示 document.write(histr);。
👸小媛：原來是這么回事呀。
🐶1_bit：對的，由于 hiUser("XiaoMing"," 666!") 有返回值，則表示這個函數(shù)調(diào)用本身就是一個值，那么可以直接將代碼寫成如下形式。
<script>function hiUser(username,word){return username+word;}document.write(hiUser("XiaoMing"," 666!")); </script>👸小媛：奧，明白了，因為本身有返回值，所以等 hiUser("XiaoMing"," 666!") 返回值后可以直接輸出內(nèi)容。
🐶1_bit：是的。現(xiàn)在咱們學習了方法后，可以對整個網(wǎng)頁元素進行簡單的動態(tài)調(diào)整了。
👸小媛：真的嗎？
🐶1_bit：對的。
2.6 事件及函數(shù)
🐶1_bit：你還記得之前我跟你講的，點擊按鈕后可以使用變量對其計數(shù)，判斷點了多少次按鈕嗎？
👸小媛：記得，現(xiàn)在要做了嗎？
🐶1_bit：對的，不過咱們還要知道什么是事件。
👸小媛：事件是什么？
🐶1_bit：事件就是一件事，在網(wǎng)頁中，當你點擊按鈕的時候就觸發(fā)了一個事件，這個事件可以通過響應(yīng)一個對應(yīng)的函數(shù)執(zhí)行某些代碼。
👸小媛：舉個例子吧。
🐶1_bit：以下代碼就是事件響應(yīng)函數(shù)的一個示例代碼。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰(zhàn)課程10 javascript 02</title> </head> <body><button onclick="clickf()">這是一個按鈕</button><script>function clickf(){alert("我點了按鈕");}</script> </body> </html>🐶1_bit：我們可以看到在 html 代碼中添加了一個按鈕，這個按鈕寫上了一個 onclick 屬性，onclick代表著點擊，并且賦值為 “clickf()”，那么則表示點擊后將會調(diào)用clickf() 函數(shù)，執(zhí)行對應(yīng)的內(nèi)容。
👸小媛：那在這里的代碼中 alert("我點了按鈕"); 是什么意思？
🐶1_bit：alert是一個系統(tǒng)自帶的函數(shù)，表示彈窗，其中傳入的文本則是彈窗所顯示的內(nèi)容。
👸小媛：原來是這樣的呀，明白了。
🐶1_bit：我們還可以直接把彈窗的代碼寫到 onclick 對應(yīng)的值中。
<button onclick='alert("我點了按鈕");'>這是一個按鈕</button>👸小媛：這樣可以執(zhí)行嗎？而且你用了單引號？
🐶1_bit：在 JavaScript 中單引號和雙引號都可以表示值和字符串，在這里如果我使用了雙引號，那么將會與其中的 alert 彈窗所需要顯示的文本發(fā)生沖突，因為雙引號這些都是成對存在的，為了防止沖突，在此我使用了單引號。
👸小媛：明白了，如果是雙引號那么值錢的 alert 就成了一個字符串了。
🐶1_bit：對的，所以防止這個情況還是使用單引號為好。回到剛剛的案例，我們可以看出，在 onclick 內(nèi)可以直接執(zhí)行JavaScript 的代碼，但是并不方便，所以能寫函數(shù)就寫函數(shù)，如果實在沒必要寫也可以直接在 onclick 內(nèi)部直接寫上代碼。
👸小媛：明白了，現(xiàn)在開始教那個記錄點擊數(shù)的方法吧。
🐶1_bit：這個很簡單，不過咱們還需要明白一個變量作用域的概念。
👸小媛：什么是變量作用域。
🐶1_bit：咱們先看看以下示例。
<body><button onclick="clickf()">這是一個按鈕</button><script>function clickf(){var times=0;times++;alert(times);}</script> </body>🐶1_bit：在函數(shù) clickf() 內(nèi)，times 變量定義為 0，每次執(zhí)行 times++; 代碼使其變量值加1，隨后使用 alert 對值進行顯示；你覺得這個邏輯有問題嗎？
👸小媛：應(yīng)該沒啥問題吧？
🐶1_bit：那你把這個代碼拿去運行看一下。
👸小媛：為什么我每次點擊后都是彈出 1 呢？
🐶1_bit：那是因為每次在這個函數(shù)之中都會執(zhí)行代碼 var times=0;，接下來再加 1 肯定都是 1 了。
👸小媛：竟然是這個原因，那怎么改呢？
🐶1_bit：還需要吧這個 var times=0; 放在外部就可以了，放在外部就表示是一個全局變量，所有的函數(shù)都可以對其進行訪問，就如下代碼所示。
🐶1_bit：你再試試？
👸小媛：成功了，哈哈哈，可以一直加了。
🐶1_bit：那么接下來咱們再做一些好玩的。
👸小媛：啥好玩的？
🐶1_bit：咱們來動態(tài)的改變某些元素的屬性，例如 html 內(nèi)容。
👸小媛：這么利害的嗎？怎么玩？
🐶1_bit：先看一下代碼，我等下給你道來。
<body><button onclick="change()">改變下面這個空的DIV容器內(nèi)容</button><div id="divID"></div><script>function change(){htmlStr='<h1>這里是改變的內(nèi)容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>'document.getElementById('divID').innerHTML = htmlStr}</script> </body>
🐶1_bit：我們可以看到按鈕的 onclick 事件綁定的是 change 函數(shù)，當點擊按鈕后將會執(zhí)行改函數(shù)，在函數(shù)中，創(chuàng)建了一個 htmlStr 變量，這個變量的值是一串 html 代碼，接下來將會使用 document 對象調(diào)用 getElementById 函數(shù)完成接下來的任務(wù)。
👸小媛：那 getElementById 函數(shù)是什么用呢？
🐶1_bit：getElementById 函數(shù)可以通過 ID 獲取到對應(yīng)的 html 文檔的節(jié)點，例如在這里傳入了 div 的ID 值作為參數(shù)，將會取到當前節(jié)點對象，隨后的 innerHTML 則表示當前 div 節(jié)點的 html 元素值，這里使用了等于號對其賦值，那么就表示將會用新的值覆蓋掉之前的值，最終點擊之后顯示結(jié)果如下。
👸小媛：原來如此，那之前本來有值，點擊該按鈕如何進行追加？
🐶1_bit：還記得 += 運算符嗎？
👸小媛：記得，a+=j 就等于 a=a+j。
🐶1_bit：對的，在此咱們也可以這樣做。
<body><button onclick="change()">改變下面這個空的DIV容器內(nèi)容</button><div id="divID"><h1>這里是老舊的值</h1><p>這是<span style="color: red;">舊</span>的值</p></div><script>function change(){htmlStr='<h1>這里是改變的內(nèi)容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>'document.getElementById('divID').innerHTML += htmlStr}</script> </body>
👸小媛：真的耶，點擊按鈕后不會發(fā)現(xiàn)改變，而且我一直點一直都會新增元素。
🐶1_bit：那接下來咱們來做個階梯如何？
👸小媛：啊？！階梯怎么做？
2.7 循環(huán)
2.7.1 for 循環(huán)基礎(chǔ)
🐶1_bit：那咱們現(xiàn)在得學一個叫做 循環(huán) 的知識點。
👸小媛：循環(huán)是啥？
🐶1_bit：循環(huán)可以幫助我們重復(fù)執(zhí)行類似的代碼，并且你可以動態(tài)的更改一些內(nèi)容使其更加靈活。
👸小媛：可以先簡單的舉個例子嗎？
🐶1_bit：例如你想顯示10次“我來了”三個字，那么不需要寫上次 write，也不用寫十個 p 標簽，你可以直接用 js 代碼寫成如下形式。
<script>for(var i=0;i<10;i++){document.write("我來了 <br/>");} </script>🐶1_bit：以上代碼中，for 表示循環(huán)，在其后的圓括號內(nèi)是 var i=0;i<10;i++，其中 var i=0 指的是創(chuàng)建一個變量 i等于0，隨后一個分號結(jié)束；接下來是 i<10，指的是當前循環(huán)體（也就是花括號中的代碼）只有在滿足當前條件才能夠進行循環(huán)；最后是 i++，每次循環(huán)變量 i 的值就加 1。該循環(huán)的圓括號內(nèi)包含了變量的值的初始化、條件以及步長，其中步長指的就是 i++，每次循環(huán)1次該變量就會加1；執(zhí)行順序是先執(zhí)行初始化，初始化只在整個循環(huán)開始時執(zhí)行一次，接著每次循環(huán)是都會判斷 i<10 是否成立，接著將會執(zhí)行 i++，這個 i 也被成為循環(huán)控制變量，指的是控制整個循環(huán)次數(shù)的變量，若你將 i++ 變成 i+=2，那么該循環(huán)的次數(shù)就會發(fā)生改變。
👸小媛：大概明白了，不過循環(huán)到底是啥意思我還沒搞清楚。
🐶1_bit：在以上代碼中，for 循環(huán)會自動的重復(fù)執(zhí)行花括號中的代碼，每次執(zhí)行 i 就加 1，執(zhí)行多次后 i 必將大于 10，大于 10 后循環(huán)將會停止，那么則不會繼續(xù)執(zhí)行。
👸小媛：嗷，明白了，原來是這個意思。
🐶1_bit：那么你刷新頁面將會發(fā)現(xiàn)十個“我來了”就出現(xiàn)了。
2.7.2 for 循環(huán)做階梯
👸小媛：那怎么做階梯呢？
🐶1_bit：這個很簡單，咱們直接上代碼。
<body><h1>開始做階梯</h1><button onclick="step()">點擊增加階梯</button><div id="divID"></div><script>var times=0;//次數(shù)function step(){times++;htmlStr='■';//階梯樣子for(var i=0;i<times;i++){document.getElementById('divID').innerHTML += htmlStr;}document.getElementById('divID').innerHTML +='<br/>';//加完階梯記得換行}</script> </body>👸小媛：哇，好復(fù)雜啊。
🐶1_bit：其實一點都不復(fù)雜，咱們可以看一下，首先<button onclick="step()">點擊增加階梯</button>代碼為一個按鈕的代碼，對應(yīng)的 onclick 事件綁定為 step，接著下面的 JavaScript 代碼中，首先創(chuàng)建了一個全局變量 times 用于記錄按鈕點擊次數(shù)，隨后是一個 step 函數(shù)，這個函數(shù)中 times 每次在該函數(shù)執(zhí)行時都會加 1，接著創(chuàng)建一個 htmlStr 變量賦值為一個方塊（可以省略 var 不寫），用于等下階梯的循環(huán)輸出，接下來 開始 for 循環(huán)，在 for 循環(huán)中重點查看條件 i<times，在此處表示 點幾下創(chuàng)建多少個 方框，也就是循環(huán)的代碼 document.getElementById('divID').innerHTML += htmlStr 將會執(zhí)行多少次，每次執(zhí)行都會在對應(yīng)的 div 中增加多少個方塊，但是方塊不換行將會是一條直線，所以在循環(huán)執(zhí)行完畢后在循環(huán)外對 div 中添加一個換行標簽，所以代碼寫成 document.getElementById('divID').innerHTML +='<br/>';。
👸小媛：原來是這樣，明白了，我運行了一下，果真如此。
🐶1_bit：看吧，階梯做出來了吧。
👸小媛：對了，那個雙斜桿就是注釋吧？用來解釋說明這一段代碼的作用？
🐶1_bit：對的，這個注釋在執(zhí)行時并不會當作成代碼。
三、 變量及作用域
🐶1_bit：之前我們將了變量是用來存儲值的容器，那么你知道什么是作用域嗎？
👸小媛：懂的話就不是你教我了。
🐶1_bit：變量的 作用域值的是這個變量的作用范圍，或者你可以理解為生效范圍。
👸小媛：變量還有作用范圍？
🐶1_bit：對的，就像你家里面有一個密碼箱，里面裝了你最寶貴的東西，那么這個時候你鄰居可以拿你的密碼箱用嗎？
👸小媛：當然不行了。
🐶1_bit：所以這就是作用域的概念，在 JavaScript 中變量作用域就是指這個變量能夠作用的范圍“空間”，否則你亂用不是你作用域的變量將會出錯的。
👸小媛：奧，明白了，那怎么能夠看出來這個作用域是哪里可以用哪里不可以用嗎？
🐶1_bit：那接下來我們就學習如何查看作用域的范圍。
3.1 變量 let 和 var
🐶1_bit：之前咱們學習了聲明創(chuàng)建一個變量使用 var 關(guān)鍵字，一般來說咱們使用 var 用于創(chuàng)建全局變量，而 let 用來創(chuàng)建局部變量。
👸小媛：這是什么意思呢？
🐶1_bit：首先咱們可以看一下以下示例。
<body><script>{var v=10;}{let c=11;}document.write(c);</script> </body>👸小媛：為什么創(chuàng)建變量之外還有一個花括號？
🐶1_bit：這是為了讓你區(qū)分這個 var 和 let 的區(qū)別。剛剛有說 let 使用與定義局部變量，在代碼示例中， let c 遍歷創(chuàng)建處就等于了一個“局部”，與外面進行隔離，此時你再輸出變量 c 的內(nèi)容是輸出不了的，但是可以輸出 var。
👸小媛：你的意思是說使用了 let 就等于加了一把鎖，鎖住了這個 let 的活動空間？
🐶1_bit：對的，是這個意思。
3.2 作用域
🐶1_bit：咱們再看一下下面的這個代碼。
<body><script>var a=10;function test(){let b=11;if(a==10){document.write(a+b);}else{document.write(b);}}test();</script> </body>🐶1_bit：在這個代碼中首先在最外側(cè)創(chuàng)建了一個變量 a，在這里相當于這個變量 a 是一個全局變量，接著創(chuàng)建了一個函數(shù) test，在函數(shù)內(nèi)部使用 let 創(chuàng)建了一個局部變量，接著使用 if 語句判斷變量 a，如果 a 等于10，那么將會輸出 a 加 b 的和，否則將會直接輸出 b 的值；最后直接使用 test() 調(diào)用函數(shù)，最后我們刷新一下這個頁面，發(fā)現(xiàn)顯示出了值為 21，說明 a 值在函數(shù)內(nèi)部也可以去得到。
👸小媛：那代碼寫成以下的情況呢？
<body><p>這里是 html 內(nèi)容</p><script>var a=10;</script><p>這里是 html 內(nèi)容</p><script></script>function test(){let b=11;if(a==10){document.write(a+b);}else{document.write(b);}}</script><p>這里是 html 內(nèi)容</p><script>test();</script> </body>🐶1_bit：放心，這個也是沒問題的，在這里 html 和 JavaScript 是分開的，實際上他們兩個是單獨存在的。
👸小媛：奧，原來是這樣。
四、數(shù)組
4.1 什么是數(shù)組
🐶1_bit：接下來咱們來看一下數(shù)組。
👸小媛：什么是數(shù)組？
🐶1_bit：數(shù)組就是數(shù)據(jù)集合的意思，在之前的學習變量中，我們可以得知，變量是存儲一個值的容器，那么在數(shù)組就是可以存儲多個值的容器。
👸小媛：哇，我明白了，那數(shù)組怎么存值呢？
🐶1_bit：這個很簡單，例如我們創(chuàng)建一個存儲名字的數(shù)組就寫成如下代碼。
<body><script>var arr=["Mr L","Xiaohong","W Wei"];</script> </body>👸小媛：就是多個值用逗號進行分隔？
🐶1_bit：對的，這些值還可以存儲為不同類型的數(shù)據(jù)，例如如下示例。
<body><script>var arr=["Mr L","Xiaohong",11,"W Wei"];</script> </body>4.2 數(shù)組訪問及取值
👸小媛：那這些值怎么用呢？
🐶1_bit：數(shù)組使用非常簡單，你想取第一個字就可以寫成。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];document.getElementById("pID").innerHTML = arr[1];</script> </body>👸小媛：那為什么我顯示的時候是 Xiaohong 呢？
🐶1_bit：那是因為在編程中，數(shù)組的值是從 0 開始數(shù)的，例如你想取 Mr L 那么需要在 arr 后的方括號中寫上 0 就可以了。
👸小媛：明白了，所以取一個數(shù)組值那么就是一個數(shù)組名加上一對方括號，在方括號內(nèi)寫上對應(yīng)的數(shù)值就可以了？
🐶1_bit：對的是這樣的，但是要注意數(shù)值不能夠超過這個數(shù)組內(nèi)元素的個數(shù)，這個個數(shù)成為數(shù)組長度。
👸小媛：明白了。
🐶1_bit：你也可以通過這個索引對數(shù)組的值進行更改。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];arr[2]=90;document.getElementById("pID").innerHTML = arr[2];</script> </body>👸小媛：收到。
4.3 數(shù)組與循環(huán)
🐶1_bit：數(shù)組和循環(huán)其實是一堆好搭檔。
👸小媛：啥？
🐶1_bit：就是他倆可以搭配使用很方便。
👸小媛：怎么說？
🐶1_bit：例如在做一個網(wǎng)站時，網(wǎng)頁的中的一些數(shù)據(jù)可能是需要后端傳遞過來，那么這些數(shù)據(jù)有時候是以數(shù)組的格式呈現(xiàn)，換句話說就直接存在了數(shù)組之中，那么你在前端需要把這些數(shù)據(jù)進行顯示（例如某一個網(wǎng)站的熱門文章），那么你需要一個個去進行手動取到嗎？
👸小媛：感覺很麻煩。
🐶1_bit：對的，所以咱們就可以使用循環(huán)對這些數(shù)據(jù)進行遍歷，這樣就可以得到對應(yīng)的數(shù)據(jù)了。
👸小媛：怎么做呢？
🐶1_bit：很簡單，你看下面示例。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script> </body>🐶1_bit：輸出結(jié)果如下。
👸小媛：咦？在循環(huán)中我發(fā)現(xiàn)你是用了 let 創(chuàng)建了 i 這個局部變量？
🐶1_bit：對的，活學活用。
👸小媛：那那個 arr.length 是啥意思呢？
🐶1_bit：其實這個就是取得當前數(shù)組長度的意思，其實類和對象這個概念貫穿于整個 JavaScript，不過這個是接下來說的知識點，在此就先不將，你只需要知道 arr.length 就是得到當前數(shù)組的長度就ok了。
👸小媛：明白，所以最后面的 arr[i] 該怎么理解呢？
🐶1_bit：你想想，這個 i 值每次都會加1，但是肯定不會超過當前數(shù)組的長度，那么從0加到數(shù)組長度為止，這個 i 值的變化就是 0…1…2…3…這樣放到 arr[] 中不就是在取值嗎？
👸小媛：對喲，原來是這樣，明白了。
4.4 數(shù)組增刪值
🐶1_bit：數(shù)組還可以很快的刪除最后一個元素，例如如下示例。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.pop(); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script> </body>👸小媛：是使用 pop 方法嗎？
🐶1_bit：對的，直接使用 pop 即可對數(shù)組末尾的元素進行刪除。
👸小媛：那刪除首個元素用什么呢？
🐶1_bit：用 shift()，例如如下示例：
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.shift(); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script> </body>👸小媛：那新增呢？
🐶1_bit：新增使用 push()。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.push("新增元素"); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script> </body>
👸小媛：那肯定就還有開頭新增元素的。
🐶1_bit：對的，在數(shù)組開頭新增元素使用unshift()。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.unshift("新增元素"); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script> </body>🐶1_bit：除了這些簡便的方法，JavaScript 還有更多的使用方法，在此不一一做講解，在之后的實戰(zhàn)中將會說明。
👸小媛：明白了。
五、對象
🐶1_bit：在 JavaScript 中對象是很關(guān)鍵的一個概念，你還記得之前有說類和對象這個知識點嗎？
👸小媛：還記得。
🐶1_bit：例如咱們在制作一個網(wǎng)頁游戲時，你會發(fā)現(xiàn)有很多不同類似的 NPC 人物，這些人物都是想不多的屬性，有的可能頭發(fā)長、有的頭發(fā)短、有的大眼睛有的小眼睛…這些人物很多屬性可以通過代碼進行編輯，那編輯一個角色需要從頭到尾都打一遍重復(fù)的代碼嗎？
👸小媛：你是說例如制作一個人需要打代碼，那么很多個人很多代碼是相同的，如果要打那么多代碼就累癱了？
🐶1_bit：對的，所以類就可以很方便的為我們對這一類相同屬性的對象進行工作。例如我創(chuàng)建一個類，他們有名字、發(fā)色、年齡、性別 信息，以后需要創(chuàng)建一個人，那么就表示他是屬于人這個類型的數(shù)據(jù)，那么表示這個變量是人之后，這個變量就賦予了人這個類型的屬性，就不需要一而再再而三的打代碼了。
👸小媛：怎么做呢？
🐶1_bit：你看下面代碼。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;document.write(XiaoMing.name+XiaoMing.sex+XiaoMing.age);</script> </body>👸小媛：我迷糊了。
🐶1_bit：首先我們看 class。
🐶1_bit：class 表示一個類開始創(chuàng)建，其后接著的是一個類名，接著就是一堆花括號，花括號中就是這個類所對應(yīng)的屬性。
👸小媛：所以這樣就是創(chuàng)建一個人有這些類型了？
🐶1_bit：對的。
👸小媛：接著咱們往下看。
🐶1_bit：我們可以看到 ，var Xiaoming 在不看后面其后面代碼時表示創(chuàng)建了一個變量，而 new Human 表示創(chuàng)建一個類，這是表示 XiaoMing 這個變量存儲的值是一個 Human 類的一個對象，那么 XiaoMing 這個變量就有了 Human 這個類的屬性。
👸小媛：原來是這個意思。
🐶1_bit：所以揭曉來可以使用小數(shù)點對其屬性進行調(diào)用，并且賦值，最后進行了輸出。
👸小媛：明白了，那還可以創(chuàng)建多個對象嗎？
🐶1_bit：當然可以，例如下面示例。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;var XiaoHong=new Human();XiaoHong.name='小紅';XiaoHong.sex='女';XiaoHong.age=12;document.write(XiaoMing.name+','+XiaoMing.sex+','+XiaoMing.age+'<br/>');document.write(XiaoHong.name+','+XiaoHong.sex+','+XiaoHong.age+'<br/>');</script> </body>👸小媛：哇，這樣就很方便了。
🐶1_bit：除了對應(yīng)的屬性外，咱們還可以對這個類型創(chuàng)建方法，也就是類函數(shù)。
👸小媛：還可以這樣嗎？
🐶1_bit：當然可以，例如人類還可以進行說話，所以咱們在內(nèi)部創(chuàng)建一個方法叫做 say。
🐶1_bit：當然我這樣寫是不規(guī)范的寫法，你可以直接使用 return 返回這個 hi 字符串即可，在此只是為了做一個示例。
👸小媛：明白了，看來很方便呀。
🐶1_bit：對的，咱們還可以使用循環(huán)遍歷這個對象的屬性。
👸小媛：for 循環(huán)里面使用一個 in 就可以訪問其屬性了呢？
🐶1_bit：這個 in 就表示 k 值進去 XiaoMing 這個對象里面去找到對應(yīng)的屬性值，而 XiaoMing[k] 則是數(shù)組的寫法，其中 k 將會依次得到期屬性 name、sex 以及 age，那么 XiaoMing[k] 就會等于 XiaoMing[name]、XiaoMing[sex]、XiaoMing[age]，這樣既可取到對應(yīng)的值。
👸小媛：哇，這個就跟數(shù)組一樣，對的，但是遍歷不會將方法也給輸出，明白了。
🐶1_bit：在 JavaScript 中還有一個對象數(shù)組，例如如下示例。
<body><p id="pID"></p><script>var data = {name:"XiaoMing", age:18, height:162};for(let k in data){document.write(k+':'+data[k]+' ');}</script> </body>👸小媛：哇，這樣就是給值添加了一個索引，這樣我就知道了這個值是什么數(shù)據(jù)了？
🐶1_bit：對的，記得，這個跟數(shù)組有區(qū)別，在 JavaScript 中這種鍵值對的數(shù)組是使用花括號中引入值的，這個一定要注意，并且是是一對一對的，一個值跟索引之間使用冒號分隔。
👸小媛：明白了。
目錄
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（十一）canvas 基礎(chǔ)
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（十）JavaScript基礎(chǔ)一篇入門
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（九）列表
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（八）表單詳解
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（七）文字及圖片樣式
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（六）表格詳解
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（五）基礎(chǔ)元素
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（四）偽類與偽元素
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（三）一篇文CSS基礎(chǔ)入門
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（二）超鏈接
【前端就業(yè)課 第一階段】HTML5 零基礎(chǔ)到實戰(zhàn)（一）基礎(chǔ)代碼結(jié)構(gòu)詳解
總結(jié)
以上是生活随笔為你收集整理的【前端就业课 第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端就业课 第一阶段】HTML5 零基
- 下一篇： SpringMVC整合Shiro