javascript
学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)
1、編程語言、ECMA、JavaScript、瀏覽器的發展史
1.1 編程語言
編程
- 編程：
- 就是讓計算機為解決某個問題而使用某種程序設計語言編寫程序代碼，并最終得到結果的過程。
- 計算機程序：
- 就是計算機所執行的一系列的指令集合，而程序全部都是用我們所掌握的語言來編寫的，所以人們要控制計算機一定要通過計算機語言向計算機發出命令。
計算機語言
-
計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞信息的媒介。
-
計算機語言的種類非常的多，總的來說可以分成機器語言，匯編語言和高級語言三大類。
-
實際上計算機最終所執行的都是 機器語言，它是由“0”和“1”組成的二進制數，二進制是計算機語言的基礎。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1FUILawB-1619832519409)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網頁編程/01-JavaScript基礎語法資料/JavaScript基礎第01天/4-筆記/images/圖片1.png)]
編程語言
編程語言：可以通過類似于人類語言的“語言”來控制計算機，讓計算機為我們做事情，這樣的語言就叫做編程語言（Programming Language）。編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程語言的格式和詞匯不一樣），必須遵守。如今通用的編程語言有兩種形式：匯編語言和高級語言。| 匯編語言 | 匯編語言和機器語言實質是相同的，都是直接對硬件操作，只不過指令采用了英文縮寫的標識符，容易識別和記憶。 |
| 高級語言 | 高級語言主要是相對于低級語言而言，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有C語言、C++、Java、C#、Python、PHP、JavaScript、Go語言、Objective-C、Swift等。 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jX4d8dFV-1619832519419)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網頁編程/01-JavaScript基礎語法資料/JavaScript基礎第01天/4-筆記/images/圖片2.png)]
翻譯器
高級語言所編制的程序不能直接被計算機識別，必須經過轉換才能被執行，為此，我們需要一個翻譯器。翻譯器可以將我們所編寫的源代碼轉換為機器語言，這也被稱為二進制化。編程語言和標記語言區別
| 編程語言 | 編程語言有很強的邏輯和行為能力。在編程語言里, 你會看到很多 if else 、for 、while等具有邏輯性和行為能力的指令，這是主動的。 |
| 標記語言 | 標記語言（html）不用于向計算機發出指令，常用于格式化和鏈接。標記語言的存在是用來被讀取的, 他是被動的。 |
總結
1.2 ECMA
? ECMAScript是由網景的布蘭登·艾奇開發的一種腳本語言的標準化規范；最初命名為Mocha，后來改名為LiveScript，最后重命名為JavaScript。1995年12月，升陽與網景聯合發表了JavaScript。1996年11月，網景公司將JavaScript提交給歐洲計算機制造商協會進行標準化。ECMA-262的第一個版本于1997年6月被Ecma組織采納。ECMA Script是ECMA-262標準化的腳本語言的名稱。盡管JavaScript和JScript與ECMAScript兼容，但包含超出ECMA Script的功能。
? ECMAScript是一種可以在宿主環境中執行計算并能操作可計算對象的基于對象的程序設計語言。ECMAScript最先被設計成一種Web腳本語言，用來支持Web頁面的動態表現以及為基于Web的客戶機—服務器架構提供服務器端的計算能力。但作為一種腳本語言， ECMAScript具備同其他腳本語言一樣的性質，即“用來操縱、定制一個已存在系統所提供的功能，以及對其進行自動化”。
1.3 JavaScript
? JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格。 [1]
? JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。 [2]
? JavaScript的標準是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015。
運行模式
JavaScript是一種屬于網絡的高級腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。 [6]
1.4 瀏覽器
瀏覽器是用來檢索、展示以及傳遞Web信息資源的應用程序。Web信息資源由統一資源標識符( Uniform Resource Identifier，URI)所標記，它是一張網頁、一張圖片、一段視頻或者任何在Web上所呈現的內容。使用者可以借助超級鏈接( Hyperlinks)，通過瀏覽器瀏覽互相關聯的信息。 [1]
瀏覽器窗口各部分功能如下。
1、地址欄：用于輸入網站的地址，IE瀏覽器通過識別地址欄中的信息，正確連接用戶要訪問的內容。如要登錄“網址之家”網，只需在地址欄中輸入網址之家的網址：http://www.hao123.com，然后按[Enter]鍵或單擊地址欄右側的按鈕即可。在地址欄中還附帶了IE中常用命令的快捷按鈕，如刷新?、停止(x)等，前進、后退按鈕設置在地址欄前方 [2] 。
2、菜單欄：由“文件” “編輯” “查看” “收藏夾” “工具”和“幫助”菜單組成。每個菜單中包含了控制IE工作的相關命令選項，這些選項包含了瀏覽器的所有操作與設置功能 [2] 。
3、選項卡：從Internet Explorer8版本開始，IE瀏覽器可以使用多選項卡瀏覽方式，以選項卡的方式打開網站的頁面 [2] 。
4、頁面窗口：是IE瀏覽器的主窗口，訪問的網頁內容顯示在此。頁面中有些文字或對象具有超鏈接屬性，當鼠標指針放上去之后會變成手狀，單擊鼠標左鍵，瀏覽器就會自動跳轉到該鏈接指向的網址；單擊鼠標右鍵，則會彈出快捷菜單，可以從中選擇要執行的操作命令 [2] 。
5、狀態欄：實時顯示當前的操作和下載Web頁面的進度情況。正在打開網頁時，還會顯示網站打開的進度。另外，通過狀態欄還可以縮放網頁 [2] 。
瀏覽器的種類很多，但是主流的內核只有四種，各種不同的瀏覽器，就是在主流內核的基礎上，添加不同的功能構成 [3] 。
1、Trident內核
代表產品為Internet Explorer，又稱其為IE內核。Trident（又稱為MSHTML），是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器有：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。
2、Gecko內核
代表作品為Mozilla Firefox。Gecko是一套開放源代碼的、以C++編寫的網頁排版引擎，是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9 [3] 。
3、WebKit內核
代表作品有Safari、Chrome。WebKit是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用于Mac OS系統，它的特點在于源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高，導致一些編寫不標準的網頁無法正常顯示 [3] 。
4、Presto內核
代表作品Opera。Presto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版 [3] 。
2、基本語法：值、變量、運算、語句等等
2.1 變量
? 聲明變量
/*** 1、聲明變量* var 是一個JS關鍵字，用來聲明變量(variable),使用該關鍵字聲明變量后，計算機會自動為變量分配內存空間* age 是程序員定義的變量名，通過變量名就可以訪問分配的空間* var 變量名;*/ var age;? 賦值
/*** 2、賦值* 變量賦值 變量名=值;*/ age=18;? 變量初始化
/*** 3、變量初始化* 聲明變量并賦值，就是變量的初始化*/var name='zs'; **變量的語法擴展** /*** 4、變量的語法擴展* 1.更新變量* 2.同時聲明多個變量* 3.聲明變量的特殊情況*/ var num=18; num=81; // 變量重新被賦值，原值被覆蓋var age=10,name='zs',sex='Man'; // 同時聲明多個變量，使用英文逗號隔開var a; console.log(a); // 只聲明，不賦值 結果：undefined console.log(b); // 不聲明，不復制，直接使用 結果：報錯 c=10; console.log(c); // 不聲明，只賦值 結果：10? 變量的命名規則
/*** ## 變量的命名規則* 由字母(A-Z a-z)、數字(0-9)、下劃線(_)、美元符號($)組成。* 嚴格區分大小寫。* 不能以數字開頭。* 不能是關鍵字、保留字。* 變量名必須有意義。 * 遵守駝峰式命名法。首字母小寫，后面單詞的首字母需要大寫*/ // Good: var userAge,num01,_name; // true var app ; var App; //屬于兩個變量 var userName; //true （駝峰式命名法） // Bad: var 18age; // false var var,for,while; //false var MMD,BBD,nl; // false nl=>age2.2 值
? 變量(值)是用來存儲值的所在處，它們有名字和數據類型。變量的數據類型決定了如何將代表這些值的位存儲到計算機的內存中。JavaScript 是一種弱類型或者說動態語言
JS 把數據類型分為兩類：
- 簡單數據類型 （Number,String,Boolean,Undefined,Null）
- 復雜數據類型 （object)
基本數據類型
JavaScript 中的簡單數據類型及其說明如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DiXQfTYH-1619832519424)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網頁編程/01-JavaScript基礎語法資料/JavaScript基礎第01天/4-筆記/images/圖片16.png)]
-
數字型 Number
var age=21; // 整數 var Age=21.3747; // 小數數字型進制
/*** 1、數字型進制* 最常見的進制有二進制、八進制、十進制、十六進制。*/ var num1=07; // 對用十進制7 var num3=080; // 十進制=>80 var num=0xA; // 十六進制數字序列范圍：0~9以及A~F數字型范圍
/*** 2、數字型范圍* 最大值：Number.MAX_VALUE* 最小值：Number.MIN_VALUE*/ console.log(Number.MAX_VALUE); // 結果：1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 結果：5e-32數字型的三個特殊值
/*** 3、數字型的三個特殊值* Infinity => 無窮大* -Infinity => 無窮小* NaN => Not a Number*/ console.log(Infinity > num); // 大于任何數值 console.log(-Infinity < num); // 小于任何數值 console.log(NaN('a')); // 不是一個數值isNaN
/*** 4、isNaN* 用來判斷一個變量是否為非數字的類型，返回true或者false*/ var userAge=21; console.log(isNaN(userAge)); // false,21 不是一個非數字 var userName='andy'; console.log(userName); // true,"andy" 是一個非數字 -
字符串型 String
字符串引號嵌套
/*** 1、字符串引號嵌套* JS 可以使用單引號嵌套雙引號，或者雙引號嵌套單引號 （外雙內單，外單內雙）*/ // Good: var strMsg='我們是"苦逼的"程序員'; var strMsg2="我們是'高尚的'工程師"; // Bad: var badQuotes='What on earth?"; // 報錯，不能單雙引號搭配字符串轉義符
/*** 2.字符串轉義符* 類似HTML里面的特殊字符，字符串中也有特殊字符，稱為轉義符。* 轉義符都是 \ 開頭的，常用的轉義符及其說明如下：* \n => 換行符* \\ => 斜杠* ' => 單引號* " => 雙引號* \t => tab縮進* \b => 空格*/ console.log('\tThis\bis\bthe\bjavascript,\nHelllo\bworld!');字符串長度
/*** 3、字符串長度* 字符串是由若干個字符組成的，這些字符的數量就是字符串的長度。* 通過自負床的length屬性可以獲取整個字符串的長度。*/ var strMsg="我們是帥氣多金的程序員！"; console.log(strMsg.length); // 12字符串拼接
/*** 4.字符串拼接* 多個字符串之間可以使用+進行拼接，* 拼接方式：字符串+任何類型=拼接之后的字符串* 拼接前會把字符串相加大的任何類型轉成字符串，再拼接成一個新的字符串* 口訣：數值相加，字符相連*/ // 字符串 "相加" console.log('hello'+' '+'world'); // hello world // 數值字符串 "相加" console.log('100'+'100'); // 100100 // 數值字符串 + 數值 console.log('110'+120); // 110120字符串拼接加強
/*** 5、字符串拼接加強* 經常會將字符串和變量來拼接，變量可以很方便的修改里面的值* 變量是不能添加引號的，因為加引號的變量會變成字符串* 如果變量兩側都有字符串拼接，口訣：引引相加，刪掉數字，變量寫在中間*/ // Good: console.log('小花' + 18); // 只要有字符就會相連 var age = 18; console.log('小花' + age); // pink老師18 console.log('小花' + age + '歲啦'); // pink老師18歲啦 // Bad: console.log('小花age歲啦'); // 這樣不行哦布爾型Boolean
/*** 6、布爾型Boolean* 布爾型有兩個值：true||false,其中true表示真（對），false表示假（錯）* 布爾型和數字型相加的時候，true為值1，false為值0。*/ console.log(true+1); // 2 console.log(false+1); // 1Undefined和 Null
/*** 7、undefined和Null*/ // 一個聲明后沒有被賦值的變量會有一個默認值undfined(如果進行相連或相加時，結果如下：) var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN// 一個聲明變量給null值，里面存的值為空 var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
類型轉換
使用表單、prompt 獲取過來的數據默認是字符串類型的，此時就不能直接簡單的進行加法運算，而需要轉換變量的數據類型。
轉換為字符串
| toString() | 轉成字符串 | var num=1;alert(num.toString()); |
| String() 強制轉換 | 轉成字符串 | var num=1;alert(String(num)); |
| + 拼接字符串 | 和字符串拼接的結構都是字符串 | var num=1;alert(num+‘字符串’)； |
-
toString() 和 String() 使用方式不一樣。
-
三種轉換方式，更多第三種加號拼接字符串轉換方式， 這一種方式也稱之為隱式轉換。
轉換為數字型（重點）
| parseInt(string) | 將string類型轉成整數數值型 | parseInt(‘78’) |
| parseFloat(string) | 將string類型轉成浮點數值型 | parseFloat(‘78.21’) |
| Number(string) 強制轉換 | 將string類型轉成數值型 | Number(‘12’) |
| （- * /） js 隱式轉換 | 利用算術運算符轉換為數值型 | ‘12’-0 |
- 注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點
- 隱式轉換是我們在進行算數運算的時候，JS 自動轉換了數據類型
? 轉換為布爾型
| Boolean()函數 | 其他類型轉成布爾值 | Boolean(‘true’) |
-
代表空、否定的值會被轉換為 false ，如 ‘’、0、NaN、null、undefined
-
其余值都會被轉換為 true
2.3 運算
算數運算符
-
算術運算符概述
概念：算術運算使用的符號，用于執行兩個變量或值的算術運算。
運算符描述實例 + 加+ 10 + 20 = 30 - =減 10 - 20 = -10 * 乘 10 * 20 = 200 / 除 10 / 20 = 0.5 % 取余（取模） 9 % 2 = 1 -
浮點數的精度問題
/*** 浮點數精度問題* 浮點數值的最高精度是17為小數，但在進行算術計算時其精確度遠遠不如整數* 注意：不要判斷兩個浮點數的算術結果是否相等*/ var result=0.1 + 0.2; // 結果：0.30000000000000004 不是0.3 console.log(0.07 * 100); // 結果：7.000000000000001 不是7 -
表達式和返回值
表達式：是由數字、運算符、變量等以能求得數值的有意義排列方法所得的組合
簡單理解：是由數字、運算符、變量等組成的式子
表達式最終都會有一個結果，返回給開發者，稱為返回值
遞增和遞減運算符
-
遞增和遞減運算符概述
如果需要反復給數字變量添加或減去1，可以使用遞增（++）和遞減（ – ）運算符來完成。
/*** 在JavaScript中，遞增（++）和遞減（--）既可放在變量前面，還可放在變量后面。* 放在變量前面時，我們可以稱為前置遞增（遞減）運算符，* 放在變量后面時，我們可以稱為后置遞增（遞減）運算符。* 注：遞增和遞減運算符必須和變量配合使用。*/ -
遞增運算符
- 前置遞增 / 遞減 運算符
- 后置遞增 / 遞減運算符
比較運算符
-
比較運算符概述
概念：比較運算符（關系運算符）是兩個數據進行比較時所使用的運算符，比較運算后，會返回一個布爾值（true / false）作為比較運算的結果。
運算符名稱說明案例結果 < 小于 1 < 2 true > 大于 1 > 2 false <= 小于等于 2 <= 2 true >= 大于等于 3 >= 2 true == 判等 17 == 17 true != 不等 17 != 17 false === !== 全等/不全等 37 === ‘37’ false -
等號比較
符號作用用法 = 賦值 把右邊的 值給左邊 == 判斷 判斷兩邊的值是否相等（注意有隱式轉換） === 全等 判斷兩邊的值和數據類型是否完全相同
邏輯運算符
-
邏輯運算符概述
概念：邏輯運算符是用來進行布爾值運算的運算符，其返回值也是布爾值。后面開發中經常用于多個條件的判斷
邏輯運算符說明案例 && 邏輯與，簡稱 ’與‘ and true && false || 邏輯或，簡稱 ’或‘ or true || false ！ 邏輯非，簡稱 ’非‘ not !true -
邏輯與&&
兩邊都是 true才返回 true，否則返回 false
?
-
邏輯或 ||
兩邊都是 true才返回 true，否則返回 false
?
-
邏輯非 ！
邏輯非（!）也叫作取反符，用來取一個布爾值相反的值，如 true 的相反值是 false
var isOk = !true; console.log(isOk); // false -
短路運算（邏輯中斷）
短路運算的原理：當有多個表達式（值）時,左邊的表達式值可以確定結果時,就不再繼續運算右邊的表達式的值;
-
邏輯與
/*** 邏輯與* 語法：表達式1 && 表達式2* - 如果表達式1的值為真，則返回表達式2* - 如果表達式1的值為假，則返回表達式1*/ console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(123 && 456 && 789); // 789 -
邏輯或
/** * 邏輯或 * 語法：表達式1 || 表達式2 * - 如果表達式1的值為真，則返回表達式1 * - 如果表達式1的值為假，則返回表達式2 */ console.log(123 || 456); // 123 console.log(0 || 456); // 456 console.log(123 || 456 || 789); // 123
-
賦值運算符
概念：用來把數據賦值給變量的運算符。| = | 直接賦值 | var userName=‘值’； |
| +=、-= | 加、減一個數后，再賦值 | var age=10; age+=5; // 15 |
| *=、/=、%= | 乘、除、取模 后，再賦值 | var age=2;age*=5；// 10 |
運算符優先級
| 1 | 小括號 | （） |
| 2 | 一元運算符 | ++，–，！ |
| 3 | 算術運算符 | 先*， /， % ；后 +， - |
| 4 | 關系運算符 | > ， = ，<， <= |
| 5 | 相等運算符 | == ， !=， === ， !== |
| 6 | 邏輯運算符 | 先 &&， 后 || |
| 7 | 賦值運算符 | = |
| 8 | 逗號運算符 | ， |
- 一元運算符里面的邏輯非優先級很高
- 邏輯與比邏輯或優先級高
2.4 語句
順序流程控制
順序結構是程序中最簡單、最基本的流程控制，它沒有特定的語法結構，程序會按照代碼的先后順序，依次執行，程序中大多數的代碼都是這樣執行的。
?
分支流程控制
-
分支結構
由上到下執行代碼的過程中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的過程），從而得到不同的結果
JS 語言提供了兩種分支結構語句：if 語句、switch 語句
-
if 語句
- 語法結構
-
執行流程
-
if else語句（雙分支語句）
-
語法結構
// 條件成立 執行 if 里面代碼，否則執行else 里面的代碼 if (條件表達式) {// [如果] 條件成立執行的代碼 } else {// [否則] 執行的代碼 } -
執行流程
-
-
if else if 語句(多分支語句)
-
語法結構
// 適合于檢查多重條件。 if (條件表達式1) {語句1； } else if (條件表達式2) {語句2； } else if (條件表達式3) {語句3；.... } else {// 上述條件都不成立執行此處代碼 } -
執行邏輯
-
三元表達式
-
語法結構
表達式1 ? 表達式2 : 表達式3; -
執行思路
- 如果表達式1為 true ，則返回表達式2的值，如果表達式1為 false，則返回表達式3的值
- 簡單理解： 就類似于 if else （雙分支） 的簡寫
switch分支流程控制
-
語法結構
switch 語句也是多分支語句，它用于基于不同的條件來執行不同的代碼。當要針對變量設置一系列的特定值的選項時，就可以使用 switch。
/*** switch分支* switch 語句也是多分支語句，它用于基于不同的條件來執行不同的代碼。* 當要針對變量設置一系列的特定值的選項時，就可以使用 switch。* 注意： 執行case 里面的語句時，如果沒有break，則繼續執行下一個case里面的語句。*/ switch( 表達式 ){ case value1:// 表達式 等于 value1 時要執行的代碼break;case value2:// 表達式 等于 value2 時要執行的代碼break;default:// 表達式 不等于任何一個 value 時要執行的代碼 }-
switch ：開關 轉換 ， case ：小例子 選項
-
關鍵字 switch 后面括號內可以是表達式或值， 通常是一個變量
-
關鍵字 case , 后跟一個選項的表達式或值，后面跟一個冒號
-
switch 表達式的值會與結構中的 case 的值做比較
-
如果存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 語句代碼執行結束
-
如果所有的 case 的值都和表達式的值不匹配，則執行 default 里的代碼
-
-
switch 語句和 if else if 語句的區別
- 一般情況下，它們兩個語句可以相互替換
- switch…case 語句通常處理 case為比較確定值的情況， 而 if…else…語句更加靈活，常用于范圍判斷(大于、等于某個范圍)
- switch 語句進行條件判斷后直接執行到程序的條件語句，效率更高。而if…else 語句有幾種條件，就得判斷多少次。
- 當分支比較少時，if… else語句的執行效率比 switch語句高。
- 當分支比較多時，switch語句的執行效率比較高，而且結構更清晰。
循環
1. for循環
-
語法結構
/*** for循環* 執行過程：* 1.初始化變量，初始化操作在整個 for 循環只會執行一次。* 2.執行條件表達式，如果為true，則執行循環體語句，否則退出循環，循環結束。*/ for(初始化變量; 條件表達式; 操作表達式 ){//循環體 }名稱作用 初始化變量 通常被用于初始化一個計數器，該表達式可以使用 var 關鍵字聲明新的變量，這個變量幫我們來記錄次數。 條件表達式 用于確定每一次循環是否能被執行。如果結果是 true 就繼續循環，否則退出循環。 操作表達式 用于確定每一次循環是否能被執行。如果結果是 true 就繼續循環，否則退出循環。
斷點調試：
斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。斷點調試可以幫助觀察程序的運行過程 斷點調試的流程： 1、瀏覽器中按 F12--> sources -->找到需要調試的文件-->在程序的某一行設置斷點 2、Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。 3、摁下F11，程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。2. 雙重for循環
-
雙重 for 循環概述
循環嵌套是指在一個循環語句中再定義一個循環語句的語法結構，例如在for循環語句中，可以再嵌套一個for 循環，這樣的 for 循環語句我們稱之為雙重for循環。
-
雙重 for 循環語法
/*** 雙重for循環* 1 內層循環可以看做外層循環的循環體語句* 2 內層循環執行的順序也要遵循 for 循環的執行順序 * 3 外層循環執行一次，內層循環要執行全部次數*/ for (外循環的初始; 外循環的條件; 外循環的操作表達式) {for (內循環的初始; 內循環的條件; 內循環的操作表達式) { 需執行的代碼;} } -
for 循環小結
- for 循環可以重復執行某些相同代碼
- for 循環可以重復執行些許不同的代碼，因為我們有計數器
- for 循環可以重復執行某些操作，比如算術運算符加法操作
- 隨著需求增加，雙重for循環可以做更多、更好看的效果
- 雙重 for 循環，外層循環一次，內層 for 循環全部執行
- for 循環是循環條件和數字直接相關的循環
3. while循環
while語句的語法結構如下：
/*** while 循環* 執行思路：* 1 先執行條件表達式，如果結果為 true，則執行循環體代碼；如果為 false，則退出循環，執行后面代碼* 2 執行循環體代碼* 3 循環體代碼執行完畢后，程序會繼續判斷執行條件表達式，如條件仍為true，則會繼續執行循環體，直到循環條件為 false 時，整個循環過程才會結束* 注：使用 while 循環時一定要注意，它必須要有退出條件，否則會成為死循環*/ while (條件表達式) {// 循環體代碼 }4. do-while循環
do… while 語句的語法結構如下：
/*** do-while循環* 執行思路：* 1 先執行一次循環體代碼 * 2 再執行條件表達式，如果結果為 true，則繼續執行循環體代碼，如果為 false，則退出循環，繼續執行后面代碼* 注：先再執行循環體，再判斷，do…while循環語句至少會執行一次循環體代碼*/ do {// 循環體代碼 - 條件表達式為 true 時重復執行循環體代碼 } while(條件表達式);5. continue、break
continue 關鍵字用于立即跳出本次循環，繼續下一次循環（本次循環體中 continue 之后的代碼就會少執行一次）。
3、各種類型的函數、參數與原理
函數的聲明方式
-
自定義函數方式（命名函數）
// 函數關鍵字function自定義函數方式 function fn(){...} fn();// 函數調用（函數體上下都可以用）- 因為有名字，所以也被稱為命名函數
- 調用函數的代碼既可以放到聲明函數的前面，也可以放在聲明函數的后面
-
函數表達式方式（匿名函數）
//利用函數表達式定義函數，后面跟分號結尾 var fn=function(){...}; fn(); // 函數調用（函數體下才能用）- 因為函數沒有名字，所以也被稱為匿名函數
- 這個fn 里面存儲的是一個函數
- 函數表達式方式原理跟聲明變量方式是一致的
- 函數調用的代碼必須寫到函數體后面
函數的參數
? 函數參數語法
/*** 函數參數語法* 形參：函數定義時設置接受調用時傳入* 實參：函數調用時傳入小括號內的真實數據* 參數的作用：在函數內部某些值不固定,可以通過參數調用函數時傳遞不同的值進去* 1. 調用的時候實參值是傳遞給形參的* 2. 形參簡單理解為：不用聲明的變量* 3. 實參和形參的多個參數之間用逗號（,）分隔*/ // 帶參數的函數聲明 function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數，用逗號分隔// 函數體 } // 帶參數的函數調用 函數名(實參1, 實參2, 實參3...);函數形參和實參數量不匹配時
| 實參個數 = 形參個數 | 輸出正確結果 |
| 實參個數 > 形參個數 | 只取到形參的個數 |
| 實參個數 < 形參個數 | 多的形參定義為undfined，結果為NaN |
小結：
- 函數可以帶參數也可以不帶參數
- 聲明函數的時候，函數名括號里面的是形參，形參的默認值為 undefined
- 調用函數的時候，函數名括號里面的是實參
- 多個參數中間用逗號分隔
- 形參的個數可以和實參個數不匹配，但是結果不可預計，我們盡量要匹配
函數返回值
? return 語句
/*** 函數返回值* 函數調用整體代表的數據；函數執行完成后可以通過return語句將指定數據返回。* - 在使用 return 語句時，函數會停止執行，并返回指定的值* - 如果函數沒有 return ，返回的值是 undefined*/ // 聲明函數 function 函數名（）{...return 需要返回的值； } // 調用函數 函數名(); // 此時調用函數就可以得到函數體內return 后面的值break ,continue ,return 的區別
- break ：結束當前的循環體（如 for、while）
- continue ：跳出本次循環，繼續執行下次循環（如 for、while）
- return ：不僅可以退出循環，還能夠返回 return 語句中的值，同時還可以結束當前的函數體內的代碼
arguments的使用
arguments 是一個類似數組的對象, 對應于傳遞給函數的參數。
? 當不確定有多少個參數傳遞的時候，可以用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函數的一個內置對象。所有函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。arguments展示形式是一個偽數組，因此可以進行遍歷。偽數組具有以下特點：
-
具有 length 屬性
-
按索引方式儲存數據
-
不具有數組的 push , pop 等方法
注意：在函數內部使用該對象，用此對象獲取函數調用時傳的實參。
function fn(arguments){console.log(arguments); }-
arguments.callee
指向當前執行的函數。
-
arguments.caller **
指向調用當前函數的函數。
-
arguments.length
指向傳遞給當前函數的參數數量。
arguments 對象可以與剩余參數、默認參數和結構賦值參數結合使用。
在嚴格模式下,剩余參數剩余參數、默認參數和結構賦值參數的存在不會改變 arguments 對象的行為,但是在非嚴格模式下就有所不同了。
-
函數的原理
/*** 函數的原理* 1、函數名：函數名時函數開始地址的一個標簽* 2、參數：函數的參數是給函數處理的資料，是函數的變量。函數的參數可以有不止一個，也可以沒有* 3、本地變量：本地變量是只在本函數中有效，函數結束后酒不可用的變量，本地變量對其他函數不可見。* 4、靜態變量：靜態變量是直到結果都一直有效的變量。函數內的靜態變量對其他模塊/函數不可見。* 5、全局變量：全局變量是函數外申請的變量。如果多個函數用到這個全局變量，最好直接采用傳參的方式。配置文件保存到全局變量中是個不錯的點子。* 6、返回地址：返回地址是一個不直接使用的隱含的參數。簡而言之，就是函數執行完之后去執行指令的地址。* 7、返回值：返回值是主要的方法傳遞執行結果給上層函數，大多數語言都只允許有一個返回值。* */4、預編譯、暗示全局變量
預編譯
預編譯階段發生變量聲明和函數聲明，沒有初始化行為（賦值），匿名函數不參與預編譯 ； 只有在解釋執行階段才會進行變量初始化 ；
預編譯(函數執行前)
預編譯(腳本代碼塊script執行前)
查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined
查找函數聲明，函數名作為全局對象的屬性，值為函數引用
預編譯小結
- 預編譯兩個小規則
- 函數聲明整體提升-(具體點說，無論函數調用和聲明的位置是前是后，系統總會把函數聲明移到調用前面）
- 變量 聲明提升-(具體點說，無論變量調用和聲明的位置是前是后，系統總會把聲明移到調用前，注意僅僅只是聲明，所以值是undefined）
總結
以上是生活随笔為你收集整理的学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ngrinder 入库mysql_scr
- 下一篇： Mondrian in Action