關注【程序員大陽】學習更多零基礎教程阿里云開發者“藏經閣”海量電子手冊免費下載 走進JavaScript的世界.... 在網頁中使用JS........................................................ 理解JS中的語句............................................................17 JS之使用開發者工具.....................................................21 JS之注釋......................................................... JS之輸出語句.................................................................27 JS之字面量詳解.............................................................31 JS之變量的概念、定義、使用...................................34 變量的賦值...................................... JS語句與變量的機械意義...........................................40 JS數據類型之數字類型...............................................43 JS數據類型之字符串類型...........................................46 JS數據類型之布爾類型詳解.......................................49 算術操作符...................................... 關系操作符...................................... 布爾操作符............................... 順序結構................................... 選擇結構基礎知識................... 選擇結構與代碼塊................... 為什么程序需要循環............... 函數:經驗的復用體..................... 揭開JS函數的面紗................................................. 函數的參數.................................. 函數執行過程詳解...................... 零基礎JavaScript入門教程(1)--走進JavaScr從今天開始，我們就進入一個全新的編程階段：JavaScript語言的學習。JavaScript又簡稱JS，后面我們都用JS來代指JavaScript了。雖然JS是一門獨立的語言，但是在初學者階段，我們還是在瀏覽器中運行、調試JS，這樣比較方便。強烈建議學習JS之前，先學習HTML和CSS。查看我的《零基礎HTML入門教程》和《零基礎CSS入門教程》來進行前置學習。2.JS的歷史JS誕生于1995年，現在已經26歲了，正值壯年，想必比我們很多讀者的年齡都大。它并不是一個新鮮事物，剛誕生的時候也不算特別出名、特別流行。但是隨著互聯網的發展，尤其是Ajax技術的興起，JS語言具備了席卷互聯網瀏覽器的力量。可以這么說吧，網頁前端開發的核心就是JS。一個JS語言學的好的人，絕對是不愁找到一個理想的工作3.JS的地位JS在網頁前端開發中占據了絕對的統治地位，與后端開發語言C/C++/C#/Java/Python百花齊放不同，前端編程語言可以說一家獨大，都是用JS的。一些大家可能耳熟能詳的知名框架jQuery、BootStrap、Vue、React，都是基于JS進行封裝的。所以學習網頁開發，學習Web，絕對繞不開JS，JS在前端的地位，就是至尊王者。4.JS與HTML、CSS的區別之前在講HTML和CSS的時候，我們舉過一個字。HTML表示內容，就像家里有哪些家具家電，比如床、茶幾、沙發、餐桌、電視、屋門。CSS表示內容的樣式，比如家具家電的顏色、尺寸、位置。那么還缺少啥呢，還缺功能，比如電視機，它不光是個電視，不光有顏色、尺寸、擺放位置，它還能打開、能關閉、能播放、能換臺。遙控器一按，咔嚓就打開了，這就是它的功能。再比如屋門，它能干啥？它能打開，能關閉，能上鎖，能開鎖，這就是它的功能。這些功能部分，或者說交互部分，就是JS負責的。大家想必能發現，之前HTML、CSS，基本都是表述的靜態的外觀，而JS，則負責處理動態的交互。5.JS是真正的編程語言之前我們學習的HTML、CSS，其實不算正兒八經的編程語言，他們更像是一種設計語言，用一些規則來描述內容、描述樣式。而JS則完全不同，它是一門正兒八經的編程語言，它有變量、有數據類型、有流程控制、有對象有數組，有異常處理。它的能力千變萬化，是他就是他，是他就是他，少年英雄小哪吒！開個玩笑，因為大家還沒接觸真正的編程語言，所以大家就了解下，JS就像哪吒，擁有鬧海的強大能力！6.JS的組成部分JS其實有三大塊，一個是語言核心，一個是BOM，一個是DOM，語言核心就是JS作為一門編程語言基本的功能部分，BOM就是它擁有的操作咱們瀏覽器的能力，DOM就是它操作我們網頁文檔H這塊大家簡單了解下，以后會具體一點一點的學習。7.小結JS來了，你準備好了嗎。零基礎JavaScript入門教程(2)--在網頁中使用JS上一篇，給大家聊了很多關于JS的事情，大家想必已經迫不及待，想知道如何在網頁中使用JS。本篇就來介紹下。2.網頁中使用JS還記得如何在網頁中使用CSS么，可以這樣：}你好我們通過在頭部，放置了<style>標簽，然后就可以在<style>標簽中編寫CSS代碼了。差不多的是，我們可以通過在頭部，放置<script>標簽，來編寫JS代碼，如下：}你好<script>和</script>中間，就是我們編寫的js代碼了。alert(1);這句代碼的意思是在網頁上顯示一個彈窗，彈窗的內容是1。所以上面代碼效果如下：我們的JS已經在網頁中成功運行了！3.小結本篇只要掌握，可以通過script標簽，在網頁中引入JS代碼就OK了，至于JS代碼如何編寫，這是我們以后需要學習的內容。零基礎JavaScript入門教程(3)--網頁代碼執行順序與script標簽的位置上一篇講解了在網頁中，如何通過script標簽，插入JS代碼。本篇來揭示下，網頁上的代碼，到底是如何執行的。然后根據執行的情況，我們的script標簽，放在哪里是最合適的。2.代碼執行順序首先查看下面的代碼：你好我們設置了網頁的標題，通過JS代碼彈窗顯示數字1，網頁內容區域是你好。我們打開該網頁，發現效果如下：從上圖我們可以清晰的發現，網頁已經加載了標題，執行了alert(1);代碼顯示了彈窗，但是body區域的你好卻沒有顯示出來。這是為何呢？其實非常簡單，我們的瀏覽器在處理網頁時，是自上而下，依次加載網頁代碼的，這點非常重要，所以在上面的例子中，先顯示了網頁，然后執行了alert(1);，此時由于我們沒有點擊確定，所以alert(1);并未執行完成，所以下面的body部分瀏覽器并未加載。所以在點擊確定之前，body區域是無法顯示內容的。3.script標簽的位置根據上面的討論，如果將script標簽放到head區域，則會導致網頁先加載script里面的代碼，然后再加載body區域。如果script里面的代碼比較多，執行時間比較長，那么body就會等待一段時間才能顯示出來。此時網頁會顯示一片空白，用戶體驗無疑非常糟糕。所以我們推薦的做法是：將script標簽放到body內部最后邊，也就是貼近</body>的前方。如下：你好我們預覽該代碼，可以發現在顯示彈窗前，已經加載body的你好了。4.小結網頁代碼都是自上而下，瀏覽器一次加載執行。所以script放置的最佳位置，是body的最后頭。零基礎JavaScript入門教程(4)--瀏覽器禁用JS腳本時處理方法就目前的現狀而言，不支持JS的瀏覽器，幾乎已經找不到了。但是也不排除這種情況的存在性。另外比較常見的情況是，瀏覽器禁用了JS功能，這個還是比較常見的。例如在Chrome瀏覽器中，如下圖，選擇【不允許網站使用JavaScript】即可禁用JS：那么，當瀏覽器不支持、或者禁用了JS時，咋辦呢。此時我們應該至少提示用戶，您現在瀏覽器不支持或者禁用了JS。2.使用noscript標簽我們可以使用noscript標簽，來加載網頁不支持JS腳本時提示信息，如下：您好，您的瀏覽器不支持或者禁用了JavaScript，導致本網站某些功能無法正常使用，請知曉。當瀏覽器沒禁用JS時，上述文本內容不會顯示。當我們禁用了JS時，上述內容就會在網頁顯示出來。大家可以使用Chrome瀏覽器嘗試下。3.小結由于現在幾乎所有網站，都采用了JS技術，所以一般也沒人會去禁用JS功能。所以本節課的內容實用性不強，之所以講解本節課，是讓大家理解，瀏覽器本身默認支持JS，但是也可以選擇禁用JS功能。零基礎JavaScript入門教程(5)--理解JS中的1.什么是語句本篇我們來學習JS中的語句，理解JS語句的寫法。首先在自然語言，例如我們的漢語中，句子就是一句完整的話，一般一個漢語句子使用句號、問號或者嘆號結尾。英語也差不多，英語的句子是由單詞組成的，一般也是由句號、問號或嘆號結尾。那么自然語言，為什么要有句子呢。就是因為每個句子，是整個內容的一小段，我們一句話一句話的說，別人才好一句話一句話的理解。如果不分句子直接說一大堆沒有停頓，誰能理解的了？同樣，JS語言也是由語句組成的，JS分成一個一個的語句，計算機才能一句一句的理解執行。2.JS語句分割上面我們講了，自然語言的句子，一般是使用句號、問號、或者嘆號結尾，也就是說，當我們看到句號、問號或者嘆號時，就知道一個句子結束了，這些符號就是自然語言語句的分割符號。JS語言中，使用分號;作為語句的分割。之前我們學過了alert(1)表示在網頁上彈窗顯示數字1，那么完整的語句應該寫作alert(1);，注意最后有一個分號，表示當前語句結束了。所以我們可以編寫如下代碼，讓網頁先彈窗顯示1，再彈窗顯示2。此時我們打開網頁，可以看到網頁會先后彈窗1，然后彈窗2。那么如果我們不用分號分割，代碼如下：我們運行代碼，會發現網頁并不能正常彈窗，這是因為代碼沒有正常分割，我們計算機瀏覽器理解不了這樣的代碼了。3.JS語句分行雖然下面的寫法是正確的：但是如果把很多行代碼都放到一行，會顯得很凌亂。我們從代碼格式化、美觀易懂的角度出發，習慣上，每行我們只放一句JS代碼如下：大家以后在編寫JS程序時，也應該記住，每行只寫一句JS代碼。4.沒有分號的情況看如下代碼：雖然沒有寫分號，但是兩個語句之家分行了，而且我們使用瀏覽器查看該網頁，也能正常彈窗展示數字。這種寫法是不符合規范的，不建議使用。另外這種方式雖然能正常運行，但是瀏覽器在分析這樣的代碼時，需要花費額外的時間去推測分號的位置，這會浪費瀏覽器的性能。也就是說，如果有分號，瀏覽器會很容易確定語句如何分割。如果沒有分號，瀏覽器得嘗試根據代碼的情況分割語句。綜上所述，雖然有時候沒有分號，JS也能正常運行，但是強烈建議使用分號。5.小結JS中的語句使用分號分割，建議每行代碼只有一條語句，且都使用分號結束語句。零基礎JavaScript入門教程(6)--JS之使用開發者工具在上一篇中，我們曾經演示過一個錯誤實例：兩句代碼，由于沒使用分號分割，導致瀏覽器無法識別，所以程序無法正常運行。這段代碼比較簡單，我們比較容易分析它的問題。但是代碼如果復雜起來，有成千上萬行代碼，當其中一句有問題時，我們該如何知道是哪里出了問題，出了什么問題呢？此時就要借助瀏覽器自帶的開發者工具了，既然瀏覽器要執行JS代碼，所以瀏覽器肯定知道哪些語句不能正常執行。所以瀏覽器提供了開發者工具，以便告知開發者的問題。當然開發者工具的功能遠不止如此，我們暫時先學習下開發者工具的控制臺功能，開發者工具的控制臺，可以查看錯誤提示信息。2.打開開發者工具在Chrome瀏覽器或IE瀏覽器中，都可以直接按【F12】打開開發者工具，如下圖是Chrome瀏覽器的開發者工具控制臺：然后下圖是IE瀏覽器的控制臺：可以看到，兩個控制臺都給出了錯誤提示信息，然后也告訴開發者，代碼的問題是第10行。我們VSCode每行代碼左邊有行號，我們看下，如下是我的VSCode編寫代碼的截圖，第10行正好是有問題的代碼位置。3.小結平常我也是經常編寫JS代碼，習慣性上就是在查看網頁JS運行效果時，同步打開開發者工具控制臺，查看代碼運行情況。所以建議大家也養成這樣的習慣，學會使用開發者工具的控制臺，查看代碼運行信息。零基礎JavaScript入門教程(7)--JS之注釋在之前HTML、CSS注釋的講解中，我們已經充分理解到：注釋的內容，計算機不再識別并運行，僅僅起到一個提示作用。注釋一般是給程序員自己看的，屬于一種補充說明，沒有實際執行的效果。HTML注釋格式如下：《春曉》春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。其中<!--hr表示一個水平分割線-->部分即為注釋，瀏覽器不會識別并運行這段代碼。HTML注釋就3.回顧CSS注釋CSS注釋格式如下：/*藍色文本*/}其中/*藍色文本*/部分即為CSS注釋，瀏覽器不會識別和運行這行代碼。CSS注釋就是被/*和*/包裹的部分。4.JS單行注釋JS的注釋有兩種：單行注釋和多行注釋，先看下面的例子：在上面的示例中，//表示單行注釋，其后的內容是注釋，瀏覽器不會執行。而alert(2);前面沒有//，會正常運行。5.JS多行注釋JS多行注釋的語法跟CSS相同，使用/**/來處理，例如：這是多行注釋中間的部分所以不論我這里寫多少行都被注釋掉了不會執行的，放心吧，哈哈中間的幾行漢子，都被注釋了，因為被多行注釋包裹。6.小結注釋很重要，之所以先講注釋，是因為后面的例子，我們為了更好的讓大家學習理解，使用了大量的注釋來做說明。所以大家要明白兩種注釋的意思。零基礎JavaScript入門教程(8)--JS之輸出語句之前我們只講過一個JS語句：alert，用于彈窗顯示信息。一般這種程序顯示信息的語句，可以稱之為輸出語句，意思是程序輸出信息給用戶看。JS常用的輸出語句有3種，今天逐一介紹下。2.彈窗輸出可以使用alert()語句進行彈窗輸出，括號中間的內容，即為彈窗顯示的信息。此處需要格外注意的是，如果輸出數字，可以直接寫到括號中，如果要輸出英文字母或者漢字，則需要使用雙引號將英文或漢字包裹起來。至于為何要使用雙引號包裹，我們后續章節會詳細解析，現在我們只需要記住如下示例：alert("你好啊");運行代碼后，會先彈窗顯示數字123，然后彈窗顯示漢字你好啊。3.網頁內容輸出可以通過document.write()語句，將括號中的信息輸出到網頁內容部分。同樣，當括號內是數字時，可以直接寫數字，而當括號內是英文或者漢字時，需要用雙引號包裹起來。如下示例：/將你好啊輸出到網頁內容document.write("你好啊");body區域已經有網頁原有內容<br>，然后又通過document.write向網頁內容區域輸出了123和你好啊，所以最終運行效果如下：4.控制臺輸出一般來說，彈窗輸出用于給用戶展示一些重要提示信息，例如登錄用戶名或者密碼錯誤。而使用document.write的方式，輸出到網頁內容區域，這種用法很少，因為直接在body里面寫內容豈不是更方便，為啥還要用document.write，多此一舉。還有一種輸出方式，其實是前端開發人員最常用的，就是開發者工具的控制臺輸出。也就是輸出的信息不在網頁上顯示，而是顯示到控制臺，這種方式一般是程序員調試使用的。如下代碼：/將你好啊輸出到控制臺console.log("你好啊");運行后，我們按【F12】打開控制臺，如下圖：可見，console.log()會將括號中間的信息，輸出到控制臺顯示。5.小結alert用來彈窗提示，但是瀏覽器提供的彈窗太丑了，所以并不常用。document.write用于輸出到網頁內容區域，這種方式不如直接在body中寫內容方便，所以也不常用。console.log可以將信息打印到控制臺，網頁上并不會顯示，程序員會通過該語句調試程序，使用頻率還是很高的。零基礎JavaScript入門教程(9)--JS之字面量本篇來介紹一個非常非常重要的概念——字面量。不光在JS編程語言中會有字面量的概念，在C/C++/C#/Java/Python等語言中，同樣存在字面量的概念，可以說它是編程語言的重要基石概念。2.何為字面量字面一詞，比較好理解，就是文字表面上的東西，沒有什么內在含義。而量，一般指數量、重量的衡量。在JS語言中，字面量的意思，就是所見即所得，字面量真正的含義就是所看到的東西。我們舉一個例子：/字面量456上面的數字123和456，就是表示的兩個數字，就是它字面的意思，所以叫字面量。3.什么不是字面量這樣一說，好像這節課啥也沒講，123本來就是123嗎，還搞出一個字面量的概念干啥。不要著急，再看一個例子：這個例子只有一行代碼alert(123);，其中123是字面量，就代表數字123。但是alert就不是字面量了，它不是一個普通的單詞，而是一個功能代碼，它的作用是將后面括號的內容彈窗輸出。4.字符串字面量那么我就想要一個普普通的單詞alert怎么辦，OK，為了區分英文單詞是字面量，還是特定功能的程序代碼，JS語言的發明者想了個辦法，就是直接寫的單詞是程序代碼，而用雙引號包裹起來的，是字面量：距離如下：/程序代碼/字面量"alert"5.字面量的類型到此，我們學過兩種字面量了，數字字面量，字符串字面量：/數字字面量/字符串字面量"alert"大家一定要理解，為啥字符串字面量要用引號包裹起來，是因為如果我們直接寫alert，那么JS語言會認為alert是程序代碼，要執行，要彈窗。而"alert"則表示一個普通的英語單詞，一段普通的字符。6.小結如果大家覺得這節課的概念特別難懂，也沒事，馬上我們就會學習到變量，通過變量和字面量的對比，我們就能加深理解了。零基礎JavaScript入門教程(10)--JS之變量的概念、定義、使用1.什么是變量變量其實是數學中的概念，例如在函數f(x)=x+1中，x就是一個變量，因為它沒有固定的值，可以表示一個改變的數字。那么，在JS語言中，同樣可以設定變量，變量可以存儲變化的值，從而方便我們的程序進行各種運2.字面量和變量字面量，例如123，它的值就是字面的值，是固定的，不能變化，所以字面量不是變量。而變量，則完全不同，可以存儲變化的值。3.如何表示變量同樣是x，有時候我們希望x就是一個英文字母，也就是說就是一個普通的字面量，那么可以用"x"來表示。雙引號包裹的x就是一個普通的字符串字面量，它的含義就是普通的字符串"x"。變量x，可以使用關鍵字var指定。注意關鍵字是JS語言特殊關鍵的詞匯，表達一種特殊的含義。此處的var是我們接觸到的第一個關鍵字，用來定義變量。如下："x"/這是一個普通的字面量，其含義就是一個字母xvarx;/此處x是一個變量，可以存儲各種值"name"/這是一個普通的字面量，其含義就是一個單詞namevarname;/此處x是一個變量，可以存儲各種值4.再論字符串使用引號包裹問題學到這里，我們應該終于要明白了，為什么字符串字面量，非得用引號包裹起來。因為直接寫x也好，直接寫a也好，它代表的是一個變量。而用引號包裹起來，它表示的是字面量，這兩種是完全不同的含義。所以從形式上一定要區分開，程序才能識別不同的含義。5.變量的定義和使用使用var定義變量后，可以通過變量名直接使用變量，如下：vara;/定義了一個變量aa//使用a我們定義了一個變量a，a就是變量的名字，所以后續我們想使用a時，可以直接寫a。6.變量必須先定義后使用注意，變量必須先定義后使用，就像人必須先出生，才能做事。事物必須先存在，才能發展。如果還沒定義，就直接使用變量會報錯！如下代碼：vara;/定義了一個變量aa/使用ab/使用未定義的變量b運行上面的程序，控制臺報錯如下：看錯誤提示：bisnotdefined，很明顯錯誤提示為b沒定義。也就是咱們的程序運行的時候，不知道b是個啥，所以就報錯了。而a，我們通過vara已經告訴程序了，a是一個變量，所以就可以叫a出來溜溜，出來使用了！7.小結世界因變化而豐富，程序因變量而多彩，古之人誠不欺我也！零基礎JavaScript入門教程(11)--變量的賦值上一篇我們介紹了變量的概念、定義和基本使用方法。其實變量，本質上是內存中一塊存儲空間的名字，這塊存儲空間中存儲的具體內容，就是變量的值。那么變量的值為什么是可變的呢，這個就好理解了，我們把存儲空的內容換掉，變量的值不就變化2.變量的賦值操作將值存入變量對應的存儲空間，這樣的操作叫做賦值操作，JS語言中，賦值操作使用=符號。此處務必注意，這個=符號跟咱們之前學習的數學中的=符號，含義完全不同。數學中的=表示左右兩邊相等，而JS中的=表示將右邊的值賦給左邊的變量。我們舉個例子：3.變量定義與變量賦值的區別變量的定義，是告訴計算機，我要設定一個變量。變量的賦值，是告訴計算機，我要給我之前設定的某個變量，給他一個確定的值。注意，可以先定義，后賦值。也可以同時定義，并賦值。如下：varx;/定義了一個變量，此時沒有值x=1;/給變量賦值14.未定義直接賦值的情況JS里面，如果一個變量，沒有通過var定義，直接給它賦值，也是可以執行的：x=1;/未使用var定義過，這種方法強烈建議不要使用，打個比方，我們如果要開公司，應該先注冊公司有個營業執照，然后再去運作。這種未經定義，直接就使用的行為，不符合代碼規范，也會引起一些不必要的麻煩。所以JS語言雖然支持這種寫法，但是我們不要使用這種寫法。當然這種寫法會在大型項目中，帶來一些意想不到的麻煩，這個我們初學階段就不必了解太深了。5.小結在JS代碼varx=1;中，var用來定義變量，x是變量的名字，1是變量的值，=是賦值符號。這行代碼是將1這個值，賦給左邊x這個變量。執行該語句后，x變量的值變為1。零基礎JavaScript入門教程(12)--JS語句與變量的機械意義什么是機械，簡單理解，就是人類制造的一些有用的設備裝置。2.編程相關的電腦機械電腦上的機械裝置有很多，比如鼠標、鍵盤、屏幕、USB接口、網線接口、顯卡、內存條、CPU。大家都知道，CPU是核心，CPU越先進越貴，電腦運算速度越快。內存也很重要，內存越大，電腦能同時跑的程序越多，越不會卡頓。大家需要格外注意的是，咱們的JS語言，相關的電腦機械，主要就是CPU和內存條。CPU是干啥的，是干活的，是負責執行程序的。內存條是干啥的，是存儲的，是否則存儲程序過程中的數據的。一個公司要運作，需要工人干活，需要車間辦公、倉庫存貨。同理，一個程序要運行，需要CPU干活（執行語句需要內存辦公存貨（內存是一個空間）。3.JS語句的機械意義看下面的JS代碼：當程序運行的時候，CPU負責執行這些語句，先執行第1條語句，執行后a的值為1，然后執行第2條語句，執行后a變為2，最后執行第3條語句，a的值變為3。所以CPU性能越高，這三條語句就執行的越快。這就是JS語句執行的機械意義——CPU來執行。從本篇開始，我們代碼示例直接寫了JS部分。如果實際運行的話，還是需要將JS代碼放入4.JS變量的機械意義變量可以用來存儲可變的值，那么這些值存到哪兒去了呢？就是存在內存中的。看下面的代碼：我們逐行分析下，變量變化，及對應的內存空間變化情況。當執行完varb=1;時，b變量對應的內存空間中，存儲的值是1，如下圖：上圖中的黑框，表示b對應的內存空間，然后執行varb=1后，空間中存的值為1。當執行完b=2;后，b變量對應的存儲空間里面的值是2了，所以變為：這就是JS變量的機械意義——變量名對應內存上的一塊空間，變量值是該內存空間存儲的內容，變量賦值操作就是改變變量對應空間的值。5.題外話JS變量賦值時內存變化這塊，我用詞比較謹慎，因為存在的情況可能不止一種。這個留待以后有機會探究，作為初學者大家簡單理解就行。零基礎JavaScript入門教程(13)--JS數據類型之數字類型1.數據類型我們的世界是需要分類的，比如顏色分為紅色、藍色、黃色、綠色；語言分為漢語、英語、法語、俄語；性別分為男性、女性。分類，能夠讓我們更好的理解事物，管理事物。JS語言，作為一種程序設計語言，在運行過程中，就是不斷的處理各種數據。之前我們學習的變量，變量存儲的內容就是數據。為了方便處理、管理、應用數據，JS語言對數據進行了分類。今天我們介紹下最簡單的數據類型—其他常用的編程語言，例如C/C++/Java/Python等，也都對數據進行了分類。而且這些語言分類的方式差不多，所以學習了JS語言的數據類型之后，再學其他語言的數據類型，會輕松很多，會有一種理所當然的感覺。2.數字類型顧名思義，數據類型指的就是數字，整數是數字、小數也是數字。在下面的例子中，變量a/b/c存儲的都是數字類型的數據。再次提醒再次提醒，我們代碼示例只寫了JS部分。如果實際運行的話，還是需要將JS代碼放入<script>標簽中運行的。3.數字類型的功能既然數字單獨成為一種類型，肯定得有它的特點和功能，否則沒必要單獨給它一個分類了。數字類型的基本特點，就是可以用來計數。例如：varstudentScore=98;/學生的分數是98varage=24;/年齡是24歲大家注意，我們變量的命名，盡量的不要使用a/b/c這種，而是要讓它的名字具備一定的含義。就像電腦這個名字，使用電的電腦，很形象；就像電動車，使用電驅動的車子，含義很清楚。所以我們的變量命名，也得很明確，另外還得注意，盡量使用英文命名變量，這樣咱們的程序才是世界通用的。數字類型最常用的功能，應該是進行加減乘除等數學運算了。如下：console.log(sum);/輸出為3當執行varsum=1+2;時，首先計算兩個數字1和2的和，計算結果為3，然后賦值給變量sum。然后我們通過console.log(sum);，將sum的值輸出到控制臺。所以運行網頁，打開控制臺，效果如下：注意console.log()的作用，是將括號中的內容輸出到控制臺上。當括號中間是字面量時，會直接將字面量輸出到控制臺。當括號中間是變量時，會將變量的值輸出到控制臺。4.小結我們的程序，很多時候就是處理數據的，所以數字類型會經常使用到。零基礎JavaScript入門教程(14)--JS數據類型之字符串類型上一篇我們介紹了JS中的數字類型，實際上數字類型還不是JS語言中最常用的數據類型。最常用的數據類型應該是字符串類型。2.何為字符串那么啥是字符串呢，比如我們網頁上顯示的人的姓名：張三，這個張三很明顯不是數字，而是一段文本；再比如網頁上顯示一個英文單詞hello，這個hello也不是數字，它也是一段文本；再比如某人的QQ密碼是pass1234，這個密碼中雖然有數字，但是也有字母，這個密碼無法參與數學運算，其實它也是一段文本。像這樣的一段文本，數字類型無法存儲，我們可以使用字符串類型來存儲它們。代碼如下：字符串使用雙引號包裹，執行上面的代碼后，三個變量存儲的數據類型就都是字符串類型。3.字符串的格式其實，JS支持使用雙引號，或者單引號表示字符串，所以下面的代碼的意思，跟上面的代碼一模一樣：在JS語言中，字符串使用雙引號或者單引號表達，都是可以的，這兩種方式沒有優劣之分。我個人是比較喜歡雙引號的，因為其他語言大多數是采用雙引號來表示字符串，所以我也習慣了使用雙引號。4.為啥要使用引號我們再次討論這個問題，就是為啥要使用引號來表示字符串，咱們不使用引號行么？答案是不行，我們看下面的例子：我們定義了變量a，它的值是數字123。然后我們把a的值賦給了b，所以b的值也變為123。然后我們把字符串"a"的值賦給b，所以b的值變為字符串"a"。從上面的例子我們可以看出，如果不使用引號，我們是無法區分a到底是變量，還是字符串的。所以一定要使用引號，至于為啥選擇使用引號這種符合，這是人家JS語言創造者設定的，咱們既然使用人家的語言，就得遵循人家的規則。5.小結字符串類型可以存儲一段文本，不管是漢字還是英文還是數字，都可以使用字符串存儲。但是務必注意，以下兩個變量的值是不同的：a是字符串類型，b是數字類型。b能夠進行數學運算，而a不能進行數學運算，因為它不是數字。零基礎JavaScript入門教程(15)--JS數據類型之布爾類型詳解之前兩篇文章，我們先后講解了數字類型和字符串類型，數字類型用于表示數值，字符串類型可以表示一段文本。本節我們來講解下布爾類型，它用來表達真假。相較于數字類型、字符串類型，布爾類型更加抽象，我給大家講一些來龍去脈的東西，讓大家好理解一些。2.布爾類型是干啥的布爾類型只有兩個值：true表示真，false表示假，用來存儲判斷的結果。舉個例子，數字1大于數字2嗎？結果是假的，所以這個結果用布爾類型表示就是false。再舉個例子，2000年是閏年嗎？結果是真的，所以這個結果用布爾類型表示就是true。3.布爾類型是必須的嗎？首先，據我所學習過的語言，包括C/C++/OC/C#/Java/Python/JavaScript，并不是所有語言都有布爾類型，但是大多數語言有布爾類型。可見，布爾類型不是必須的。布爾類型只有兩個值，所以我們完全可以用數字0表示假的，用數字1表示真的。或者我們用字符串"真"表示真的結果，字符串"假"表示假的結果。這些都是可以的，并且有些語言真是這么做的。4.那為什么還需要布爾類型雖然不用布爾類型，也能表達真假，但是容易出問題。例如我們使用變量sex表達是否是男性，true表示判斷結果為真的，是男性；false表示判斷結果為假的，是女性。代碼如下：//用布爾類型表示判斷男性的結果varsex=true;/判斷結果為真的，是男性sex=false;/判斷結果是假的，是女性因為布爾類型，只有兩個值，所以要么是男性，要么不是男性是女性，所以我們的程序表達的意義很明確。那么如果我們不使用布爾類型，而是約定使用數字1表示男性，0表示女性，如下：//用數字類型表示性別varsex=1;/1表示男性sex=0;/0表示女性上面的代碼是沒有問題的，也能通過1或0區分性別。但是我們也可以不小心寫成了：那sex值為2和3，很明顯這個是不正確的，因為我們程序設計的意圖就是用sex表示性別，出現這樣的代碼很不幸，沒人能理解。大家不要覺得可笑，因為凡事可能必會發生，這是墨菲定律！做一個總結吧，使用布爾類型，不是真就是假，非常明確。而使用其他類型，我們還有很多控制不了的結果。所以使用布爾類型表達判斷結果，是最合適的。因為我們的程序需要不斷的判斷結果，例如用戶名密碼是否正確，例如是否確定清空購物車，例如銀行卡余額是否足夠支付當前商品。所以非常有必要創建一種數據類型，來存儲判斷的結果。這個大家以后會慢慢體會到布爾類型的好處的。5.小結布爾類型只有兩個值true，fase，數字類型和字符串類型的值是無限的。布爾類型比較抽象不好理解，大家如果暫時不能理解也不要著急，以后在學習使用中我們會無數次的接觸它，從而揭開它神秘的面紗零基礎JavaScript入門教程(16)--JS數據類型之undefined之前我們講了3種常見的數據類型：數字、字符串、布爾，如下：varvara=1;/數字類型varb="1";/字符串類型varc=true;/布爾類型那么，如果尚未給變量賦值，變量是什么類型呢，如下：varvard;/未賦值變量2.undefined類型由于未給變量賦值，所以此時變量也不知道自己當前是啥類型，JS給未賦值的變量單獨設計了一個看如下代碼：varvara=1;/數字類型varb="1";/字符串類型varc=true;/布爾類型vard;/未賦值變量運行網頁后，控制臺輸出如下。可見：未賦值變量的值為undefined。3.變量未聲明的情況大家需要區分的是，變量未聲明，和未賦值還不是一個事。變量未聲明，就是根本沒有這個變量，所以使用變量會報錯。而變量未賦值，已經有這個變量了，但是還沒有值而已，所以可以使用變量，而它的值是指定的如下：varvard;/未賦值變量此時查看控制臺，d是可以輸出的，而e根本沒使用var聲明過，也就是不存在這個變量，所以會報錯。4.小結未賦值的變量，JS語言給他設計了一個特殊的值undefined，代表該變量的值沒有設置過。零基礎JavaScript入門教程(17)--算術操作符在數學中，我們有加減乘除等計算符號，用來進行數學計算。在程序的世界里，也少不了數學計算，也需要計算符號。計算機程序語言里面的計算符號，一般可以稱為操作符。本篇來學習基本加減乘除相關的計算符號，可以稱之為算術操作符。2.加減乘除操作符加減乘除操作符，可以進行加減乘除運算，例如：varc=1*2;/乘法vard=1/2;/除法注意，乘法操作符是*，而除法操作符是/，不是我們習慣上的×和÷,這是我為啥呢？哈哈，簡單一點理解，我們鍵盤上沒有×和÷,所以選擇了比較像的*和/代替了。操作符除了可以對數字類型的字面量進行操作，還可以對變量進行操作，如下:在上面的代碼中，首先給a賦值1，然后給b賦值2，然后計算a+b的結果為3，然后將3賦值給c，所以最后c的值為3。3.算術操作符的運算結果需要注意的事，算術操作符操作的對象是數字類型的字面量或變量，而運算的結果是數字類型的值。如果是形如varc=a+b;這樣的語句，是要先計算=右側的運算結果，然后將結果賦值給左邊的變量的。4.遞增、遞減操作符在編程中，讓變量的值加1，減1，是非常常見的操作：由于變量值加1，減1操作太頻繁了，JS提供了遞增、遞減操作符來快速實現加1、減1效果。a++/a的值加1b--;/b的值減1console.log(b);/輸出9所以能提高程序員編寫代碼的效率。5.小結算術操作符是非常簡單，容易理解的，大家練習一下應該就能夠掌握。零基礎JavaScript入門教程(18)--關系操作符1.什么是關系關系有聯系的意思，表達了事務之間的相關作用、相互影響的狀態。在JS程序中，也需要進行關系判斷，比如判斷兩個數值的大小。本篇就來講解，如何通過關系操作符來進行關系判斷。2.關系操作符常用的關系操作有6種，包括大于、小于、大于等于、小于等于、等于、不等于，對應的JS操作符如下：注意，跟數學符號還是有所不同的，尤其是JS中=表示賦值，而==表示判斷左右兩邊的值是否相等。3.關系操作符的運算結果之前講過算術操作符，其運算結果是數值。那么關系操作符，運算結果是什么呢，例如1>2，其運算結果是什么？其實關系運算，就是一種判斷，1>2的判斷結果，要么是正確、要么是錯誤。之前我們正好學過一種數據類型，表達真假兩個方面含義，就是布爾類型，布爾類型只有兩個值true、false，正好可以對應關系運算的結果。在JS語言中，關系運算的結果是布爾類型，當判斷成立時，關系運算結果為true；當判斷不成立時，關系運算的結果為false。所以我們看下上面運算的結果：consoleconsole.log(1>2);/falseconsole.log(1<2);/trueconsole.log(1!=2);/true我們打開網頁驗證結果：4.使用變量存儲關系運算結果既然關系運算的結果是布爾類型的true或false值，那么該值自然可以用變量存儲。如下：console.log(result);/輸出false這行代碼先執行右側，1>2不成立，所以運算結果是false。然后將false賦值給result，所以result存儲的就是布爾類型的false。5.小結有一些語言，關系運算的結構是用數字表示的，例如C語言。但是更多的語言，選擇使用布爾類型存儲關系運算結果，這樣更合理。因為使用數字可能會有歧義，你看到數字不一定能馬上明確這是一個數學數字還是一個判斷結果。而布爾類型是單獨定義的類型，有單獨的值true、false，所以它肯定不會跟數字混淆，一看就知道是判斷結果。所以采用布爾類型，很合理！零基礎JavaScript入門教程(19)--布爾操作符我們在使用用戶名、密碼登錄某網站時，首先網站得判斷用戶名和密碼都不能為空，如果有一個為空網站就會提示我們用戶名和密碼都不能為空。之前我們已經學習過了，表示判斷可以使用關系操作符，如果使用變量username表示用戶名，使用變量password表示密碼，則可以使用關系操作符判斷用戶名不為空、密碼不為空：但是，如果判斷兩個同時都不為空呢？2.布爾運算(邏輯運算)上面的兩個判斷結果都是布爾類型，判斷兩個結果同時成立，其實就是對布爾類型進行運算，這種運算被稱為布爾運算，也就是高中時候學習過的邏輯運算。看到這里不要慌，看似高大上的概念，其實就是不是、并且、或者的簡單邏輯而已。布爾運算也就分為非、與、或三種，我們來詳細解釋下。非，表示相反的意思，JS語言中對應的布爾操作符是!，我們直接看例子，這樣比較好理解：看完上面的例子，應該能體會，布爾運算是對布爾值的運算，而布爾值只有true、false兩個，所以布爾運算就是對這兩個值進行運算。非運算會把true變為false，把false變為true，就這么簡單。與，表示一起、并列的意思，JS語言中對應的布爾操作符是&&。既然表示一起，那么只有當兩個結果都是真時，與運算結果才是真的，只要有一個結果是假的，那么與運算結果就是假的了。看例子：varvarusername="張三";/用戶名varpassword="123456";/密碼/判斷用戶名和密碼是否都不為空第1行、第2行代碼很好理解，就是給兩個變量賦值。第3行比較復雜，首先我們先計算賦值右邊的部分，里面有布爾運算符&&。然后布爾運算兩邊是username!=""和password!=""，因為然后對兩個true進行與運算&&，與運算中兩者均是真，則與運算結果為真。此時兩個結果都是真，所以與運算結果是真的，即為true。所以最后，result的值為tru或，表示或者的意思，JS語言中對應的布爾操作符是||。既然是或者，那么兩個結果只要有一個是真，那么或運算的結果就是真的；兩個結果都是假的，或運算結果才是假。看例子：varvarusername="張三";/用戶名varpassword="123456";/密碼/判斷用戶名或密碼是否有為空的上面的例子中，第1行、第2行對變量進行賦值，第3行將或運算的結果賦值給result。因為或運算兩邊是判斷字符串空，兩個字符串都不是空，所以或運算的對象是false、false，當兩個結果都是假的時，或運算結果為假，所以最終result的值為false。3.小結或運算||，a||b，a和b中至少有一個true，結果為true；其實就是咱們說的不是、并且、或者的意思。零基礎JavaScript入門教程(20)--順序結構JS語言程序的基本結構可以分為三類：順序結構、選擇結構、循環結構。今天我們來學習下最簡單的一種：順序結構。所謂順序結構，就是JS代碼會從上直下，按順序依次執行。2.實例看例子：這段代碼，一共有4條JS語句，會按自上而下的順序依次執行。所以，先把1賦值給a，然后將2賦值給b，然后將a+b的計算結果3賦值給c，然后在控制臺打印c，所以控制臺會顯示3，效果如下：3.小結順序結構非常簡單，但卻是整個程序世界的基石，也是基本的運行規則。我們的文字書寫順序是自左而右，自上而下；我們JS程序順序結構的執行順序是自上而下，但是一些語句并不是自左而右執行的，例如賦值語句，是先計算右側的結果，再賦值給左側的變量，是自右而左的。零基礎JavaScript入門教程(21)--選擇結構基礎知識上一篇我們講解了JS語言最基本的結構——順序結構，JS代碼在一般情況下，會自上而下，依次執行每一行代碼。但是，正如生活肯定不會總是一帆風順，總是充滿著機遇和選擇。我們的程序也不會一直就平淡的執行，在很多時候需要根據不同的情況做出不同的選擇。為了模擬現實社會中的不同情形下的選擇，JS語言提供了選擇結構。當然，選擇是如此重要，所以不僅JS語言，其他高級語言如C/C++/Java/Python/C#等，也都具備選擇結構，而且不約而同使用了同一個關鍵字：if。2.條件判斷JS語言的選擇結構依據if條件判斷語句實現，格式如下：是不是很容易看懂？當條件成立時，會運行語句1，否則運行程序2。那么如何算是條件成立，其實就是看條件的值，如果是布爾值true，則為成立，如果是布爾值false，則不成立。我們來看一個例子，判斷根據年齡判斷一個人是否成年：alert("已成年");alert("未成年");運行結果如下：分析這段程序，首先給age賦值30，然后判斷age>于判斷結果true，所以執行if后面的代碼即alert("已成年");，所以網頁彈窗顯示已成年。3.條件判斷代碼的縮進問題首先注意，下面兩種寫法都是正確的：//寫法1alert("已成年");alert("未成年");//寫法2alert("已成年");alert("未成年");但是放眼望去，想必也能發現寫法2的代碼更加條理，也更容易理解，這是因為寫法2合理利用了縮進。習慣上，我們可以將if、else后面代碼縮進一個tab鍵（一般是4個空格）的距離，這樣看起來代碼更加美觀。如果此時使用的是VSCode編輯器的話，可以直接按【Alt+Shift+F】，編輯器會自動將代碼格式化為標準的縮進距離。4.小結生活中處處存在選擇，小到選擇衣服、選擇食品，大到選擇學校、選擇城市、選擇工作；同樣，程序中也是處處需要選擇，需要通過條件判斷語句if實現選擇！零基礎JavaScript入門教程(22)--選擇結構與代碼塊選擇結構的if、else語句，其影響力只限于之后的一行代碼，例如：alert("已成年");//會執行該行代碼alert("未成年");alert("需要保護");//會執行該行代碼我們的本意是，當用戶age>=18，則顯示已成年；否則顯示未成年、然后再顯示需要保護。上述代碼運行后，實際會顯示已成年，然后顯示需要保護，這是因為if、else的影響力只能限于它倆之后一行代碼，而alert("需要保護");是不歸它倆管理的，所以不論條件判斷是否成立，都會執行alert("需要保護");。所以上述代碼，實際應該寫作下面的格式，我們一眼就能看出最后一行代碼是不歸else管理的，是跟else沒關系的。alert("已成年");/條件判斷成立時執行alert("未成年");/條件判斷不成立時執行alertalert("需要保護");/不歸if、else管理，不論條件判斷是否成立，都會執行2.代碼塊此時，一種之前我沒單獨講過的技術——代碼塊，就可以提上日程，給大家論道論道了。JS提供了一種技術，通過大括號包裹起來的代碼，可以視為一個整塊，例如：{}這一塊代碼，執行了一個加法運算，在正常的順序結構中，其實代碼塊沒啥具體的意義，因為本來就是自上而下執行。就算把代碼放到代碼塊中，也不會影響代碼的執行順序。3.選擇結構遇到代碼塊但是當我們學習到選擇結構時，代碼塊就大有用途了。因為代碼塊可以將若干行代碼合為一個塊，表達一個集體的概念。所以我們可以在if、else后面寫代碼塊，這樣if、else就可以控制后面若干行代碼了。如下：alert("已成年");alert("未成年");alertalert("需要保護");}由于if、else后面都使用了代碼塊，所以它倆的影響范圍會覆蓋其后代碼塊中的全部代碼。當上面代碼執行時，由于age>=18成立，所以執行if后面代碼塊的內容，而else后面代碼塊中的兩行代碼屬于else的控制范圍，所以不會執行。4.尊重業界普遍規則在程序員界，大家普遍認為，通過使用代碼塊，可以讓代碼更清晰，功能更完善。所以哪怕我們的if、else只是要控制一句代碼，也強烈建議使用代碼塊！5.小結代碼塊，甚好！零基礎JavaScript入門教程(23)--選擇結構的選擇其實不止if、else一種形式，根據具體需求的不同，還有其他用法，本篇就來具體說明下JS選擇結構中的3種具體的使用形式。2.只有if假如我們只需要根據年齡判斷未成年人，只有未成年人時彈窗顯示信息，成年人時不做處理，那么可以只寫if語句，如下：alert("未成年人");}這種情況下，只有if條件成立時，執行代碼塊里面的語句。3.使用if與else如果年齡屬于未成年人時彈窗提示未成年人信息，年齡不屬于未成年人時彈窗提示已成年信息，則需要同時使用if與else，如下：alert("未成年人");alert("已成年");}在上面的代碼中，如果if后面的條件成立，則執行if后緊跟的代碼塊，如果不成立，則執行else后面的代碼塊。4.使用if、elseif與else還有更復雜的情況，例如根據根據分數判斷成績的情況，小于60是不及格60-79是及格，80-89是良好，90以上是優秀，此時可以寫作：alert("不及格");alert("及格");alert("優秀")}程序會從上往下運行，先判斷score<60，不成立才進行第二個判斷score<80，還不成立才判斷score<90，此時成立了，所以執行后面緊跟的代碼塊{alert("良好");}。所以上面的程序會彈窗顯示良好。5.小結JS語言中選擇結構的三種形式，使用頻率都挺高，需要熟練聯系、掌握。零基礎JavaScript入門教程(24)--為什么程序需要循環1.人與計算機計算機比人聰明嗎？并不是的，計算機執行任務都是依靠程序來實現的，而程序則是人編寫的，所以計算機本質上只是在執行人類安排的任務。那么為什么計算機現在這么火熱，各行各業，各個領域，都滲透著計算機的身影。那是因為計算機處理問題，不知疲倦，而且還不會馬虎犯錯。所以計算機在處理全新的工作上，跟人比是沒有優勢的，因為計算機不會處理全新的工作，需要人類通過編寫程序指導計算機如何去處理。但是計算機在處理重復性的工作上，跟人相比優勢巨大，因為這個工作是重復性的，所以人只需要交給計算機一次（編寫一次程序計算機就能不知疲倦且不會馬虎的一直按指定規則處理。這就是當前階段，計算機存在的意義。2.為什么程序需要循環程序是人類編寫的，用來解決的也是工作生活中的種種問題。計算機的優勢就是不知疲倦的重復，那么程序如何來實現重復這件事呢，就是通過循環。循環的意思，就是做完一遍，再拉一遍，againandagain，循環往復。所以程序語言，一定要有循環結構，不然這門語言的能力就太有限了~JS語言，不外乎如是，也支持循環結構。3.什么是循環那么什么是循環呢，舉幾個例子：走一步是一件事情，那么走100步，就是把走一步這件事循環執行100次。上一節課是一件事情，那么上20節課，就是把上一節課這件事情循環20次。循環就是把一件事情重復執行若干次！具體到JS程序里面，循環就是把一些語句，重復執行若干次。既然是把指定的一些語句執行若干次，那么這些語句很自然的，可以用一個代碼塊包裹起來，表示一個整體。然后我們可以指定這個整體的執行次數，就能實現循環了。4.小結循環在生活中無處不在，我們每天都要做起床、吃飯、睡覺這樣的事情，日復一日的循環。每個人都要生老病死，生生世世的循環。程序，也是不斷處理各種各樣的循環。零基礎JavaScript入門教程(25)--循環語句之while上一篇我們講了循環語句存在的必要性，本篇我們來介紹通過while實現循環。我們已知，循環就是把一件事情，循環重復做若干次。一件事情，這個比較好表達，就是一段程序語句，我們可以通過一個包含若干語句的代碼塊表達。那么如何控制這件事情做若干次呢，我們可以設置一個變量，初始值為1，事情每做一次，變量值就加1，那么當變量值達到指定次數時，我們就不再做這件事情了。這種思想就是while語句設計思想。2.while語句格式while語句格式如下：whilewhile(條件){語句；}當條件滿足時，會執行語句。每次執行完語句，會再次檢查條件。直到條件不符合時，循環執行結束。執行過程為：條件判斷成立--執行語句--條件判斷成立--執行語句.....條件判斷不成立，不再執行語句，結束循環。3.while語句實例我們通過一個例子來具體說明下，假設我們想在控制臺輸出10次hello字符串。代碼如下：}上述代碼執行后，會在控制臺輸出10次hello。具體執行過程，上來i值為1，判斷小于10成立，所以執行代碼塊；因為代碼塊中有i++，所以每次執行完代碼塊i的值加1，此時變為2；2依然小于10成立，繼續執行代碼塊，i值變為3。就這樣i一直在加1，直到i的值為11，此時判斷i<=10不成立，循環結束。4.其他實例循環語句非常重要，所以此處多舉幾個例子，大家要反復練習掌握。}}varsum=0;/存儲和}varcount=0;/保存個數}}5.小結從循環開始，程序結構變得復雜，一定要多加練習。零基礎JavaScript入門教程(26)--循環語句之for上一篇我們介紹了JS語言中，while循環語句的具體實現方式。我們仔細觀察下面的例子：}}我們會發現，變量i對于循環的控制及其重要。i的初值為1，每次循環執行前判斷i的值是否還能滿足條件，每次循環結束后讓i的值發生變化，最終i的值不滿足條件是跳出循環。我們再觀察一個例子：varsum=0;/存儲和}也是變量i，有一個初值1，然后循環條件判斷是i<=1000，然后每次循環后i變化(i++)。所以，我們其實已經可以發現，JS語言中的循環，是有一個基本套路的。2.for循環for循環將循環變量的賦初值、條件判斷、循環后變量的變化放到一起，這樣我們對循環的控制就一例如，如果想輸出1-100內的偶數，使用for循環后，代碼如下：}}我們來解釋下代碼的執行過程：1.進入for循環語句后，通過vari=1定義變量i并賦初值1。2.然后判斷i<=100，判斷為真，則執行循環體，即執行大括號中間的代碼。3.每次執行完循環體后，執行i++循環，不成立跳出循環。所以上述代碼，和本文開頭使用while的代碼意義完全相同。3.for循環的意義for循環讓我們的思路更清晰，我們在思考一件事情的時候，應該是先整體再局部，先考慮好整個事情的起因、經過、結束等大問題，再去考慮事情的細節。同樣，我們使用for來循環處理一件事，先考慮循環整體從哪里開始，執行多少次，什么時候退出。然后再確定每次循環做什么，這是一種更好的整體化思想。我們可以非常直觀的看到循環的整體情況。如果使用while循環，我們不得不去大括號外部的前方尋找賦初值的語句，去大括號內部的后方尋找i變化的語句，這會消耗我們的精力。4.總結鑒于for循環的優勢，實際開發過程中，for循環的使用頻率，也是遠遠高于while循環的，我這里也強烈推薦大家使用for循環。零基礎JavaScript入門教程(27)--使用break結束循環考慮這樣的使用場景，我們需要編寫程序，計算1至10000以內，第一個既能被123，又能被18整除的數字。按照我們之前學習的技術，可以使用for循環處理，代碼如下：/從1到10000遍歷/同時被123和18整除}}此時我們打開瀏覽器控制臺，發現輸出如下。我們是想找第一個符合要求的數字，也就是找到738就可以了，但是實際上程序還在繼續尋找，直到i大于10000才結束運行。也就是說，i從739開始，到10000，這些工作都是白干，沒啥意思，浪費了計算機的計算能力。所以我們需要找到738后，就提前結束循環。2.使用break跳出循環break的作用就是，當程序執行break這句代碼時，會跳出break所在的循環語句，即直接跳出for/while循環。我們改造代碼如下：/從1到10000遍歷/同時被123和18整除break;/跳出循環}/xxx當i的值達到738后，滿足了if條件判斷，所以執行console.log(i);輸出i的值，然后執行break;跳出for循環，所以就會跳到//xxx處執行循環外面的后續語句。3.在while中使用break上面的示例中，我們演示了在for循環中使用break，while循環同樣可以使用break，代碼如下：/同時被123和18整除break;//跳出循環}}4.小結使用break，可以提前結束我們的工作，不必固執的執行到底。例如我們需要招聘一個JavaScript軟件開發工程師，我們找到1個后就可以結束該招聘工作了，而不是永無止境的招聘下去。零基礎JavaScript入門教程(28)--使用continue跳過本次循環上一篇學習了break語句，可以直接結束本次循環。JS語言中還提供了continue語句，用來跳過本次循環，在一些特殊的場景也能用到，本篇我們就來學習下。2.代碼示例如果我們想輸出1-100以內，能夠被13整除的數字，可以如下處理。/從1到100遍歷}}如果我們想輸出不能被13整除的數字，可以借用continue如下處理。/從1到100遍歷continue;/結束本次循環}}解釋下上面的代碼，當發現i%13==0成立時，也就是i能被13整除時，執行continue語句跳過本次循環，也就是不在執行后面的console.log(i);，轉而執行進入下一次循環，也就是執行i++，然后再次進入循環體。也就是說，當執行continue語句后，循環體大括號內部continue后面的代碼不再執行，轉而執行進入下一次循環。3.小結break是直接結束整個循環，continue是跳過本次循環后直接進入下一次循環，意義不同。零基礎JavaScript入門教程(29)--函數:經驗的復用體1.程序世界的經驗我一直認為，開發程序就是為了解決現實社會中的問題。所以程序中的很多概念，就是現實社會中事物的投影。我們可以用下面一段代碼，在網頁上輸出學習單車的經驗。//騎單車的經驗document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡");我們可以從網頁上學習這樣的經驗：2.代碼塊的應用既然是一個事情的經驗，那么整理到一個地方會更好一些。我們可以使用代碼塊，將完成一件事的相關代碼包裹起來。//騎單車的經驗{document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡");}通過代碼塊，同種事情或者說同一個經驗，相關的代碼聚集到一起，更加條理。3.使用代碼塊存儲經驗的問題使用代碼塊后，代碼顯得很整潔。但是考慮這么一個場景吧，3個小伙伴都想學習騎單車，我們需要寫這樣的代碼：documentdocument.write("張三學習騎單車:");{document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡");}document.write("李四學習騎單車:");{document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡");}}document.write("趙五學習騎單車:");{document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡");}這就好比，每次有人學開車，我們都要把這些經驗完整的復述一遍，其實很麻煩。其實我們完全可以將經驗保存為一本單車秘籍，每當有人學車的時候，我們就拿出秘籍交給他。秘籍其實就是記錄了經驗，方便重復使用。在程序世界中，同樣可以使用函數作為代碼的秘籍。4.函數:經驗的復用體在編程語言中使用函數的目的，就是方便復用代碼中的經驗。生活中，我們的經驗可以存儲在大腦里，也可以寫到紙上，也可以錄音或者保存為視頻。這些經驗，其實就是一些操作步驟的整合。編程中，我們的經驗需要靠函數存儲，函數包含了若干行代碼，通過代碼塊包裹為一個整體。函數除了包括一個代碼塊，其實還需要一個名字。例如騎單車函數，保存的是騎單車的經驗。5.對于函數寫法的推斷經過上面的分析，函數有一個名稱，還包括一個代碼塊，所以函數大致的模樣猜測如下：這是一個函數:函數名這是一個函數:函數名{函數代碼函數代碼函數代碼}例如騎單車函數，用JS的來寫，差不多就是下面的樣子：這是一個函數:這是一個函數:騎單車{document.write("1.調整合理的座椅高度");document.write("2.坐到自行車座位上");document.write("3.嘗試用腳蹬踏板，練習車感");document.write("4.感覺自行要倒的時候，將車把向倒的方向慢慢弄轉動，嘗試找回平衡"