?初識JavaScirpt

JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言（Script 是腳本的意思）
腳本語言：不需要編譯，運行程序中由 js 解釋器( js 引擎）逐行來進行解釋并執行
現在也可以基于 Node.js 技術進行服務器端編程

在這里插入圖片描述

?瀏覽器執行JS簡介

瀏覽器分成兩部分：渲染引擎和 JS 引擎

渲染引擎：用來決議HTML與CSS，俗稱內核，比如 chrome 瀏覽器的 blink ，老版本的 webkit
JS 引擎：也稱為 JS 解釋器，用來讀取網頁中的JavaScript代碼，對其處理后運行，比如 chrome 瀏覽器的 V8

瀏覽器本身并不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼，JS 引擎執行代碼時逐行解釋每一句原始碼（轉換為機器語言），然后由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行，

在這里插入圖片描述

?JS的組成

JavaScript 包括 ECMAScript、DOM、BOM

在這里插入圖片描述

?ECMAScript

ECMAScript 是由ECMA 國際（原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為 JavaScript 或 JScript，但實際上后兩者是 ECMAScript 語言的實作和擴展，

在這里插入圖片描述

ECMAScript：ECMAScript 規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準，

🔥DOM檔案物件模型

檔案物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色等），

🔥BOM瀏覽器物件模型

BOM (Browser Object Model，簡稱BOM) 是指瀏覽器物件模型，它提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等，

1、JS初體驗🔥

1.1、行內式JS

<input type="button" value="點我試試" onclink="alert('Hello World')" />

可以將單行或少量JS代碼寫在HTML標簽的事件屬性中(以on開頭的屬性)，如： onclink
注意單雙引號的使用：在HTML中我們推薦使用雙引號，JS中我們推薦使用單引號
可讀性差，在 HTML 中編入 JS 大量代碼時，不方便閱讀
特殊情況下使用

1.2、內嵌式JS🔥

<script>
     alert('Hello World!');
</script>

可以將多行JS代碼寫到<script>標簽中
內嵌 JS 是學習時常用的方式

1.3、外部JS🔥

<script src="my.js"></script>

利于HTML頁面代碼結構化，把單獨JS代碼獨立到HTML頁面之外，既美觀，又方便
參考外部JS檔案的script標簽中間不可以寫代碼
適合于JS代碼量比較大的情況

2、JS基本語法🔥

2.1、注釋🔥

2.1.1、單行注釋🔥

//  單行注釋

快捷鍵ctrl + /

2.1.2、多行注釋🔥

/*
	多行注釋
*/

快捷鍵 shift + alt + a
vscode中修改快捷鍵方式：vscode? 首選項按鈕? 鍵盤快捷方式 ? 查找原來的快捷鍵? 修改為新的快捷鍵? 回車確認

2.2、輸入輸出陳述句🔥

方法	說明	歸屬
alert(msg);	瀏覽器彈出警示框	瀏覽器
console.log(msg);	瀏覽器控制臺列印輸出資訊	瀏覽器
prompt(info);	瀏覽看彈出輸入框，用戶可以輸入	瀏覽器

alert() 主要用來顯示訊息給用戶
console.log() 用來給程式員看自己運行時的訊息

2.3、變數🔥

變數是用于存放資料的容器，我們通過變數名獲取資料，甚至資料可以修改
本質：變數是程式在記憶體中申請的一塊用來存放資料的空間

2.3.1、變數初始化🔥

var是一個JS關鍵字，用來宣告變數(variable變數的意思)，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，
age 是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間

//宣告變數同時賦值為18
var age = 18; 
//同時宣告多個變數時，只需要寫一個 var， 多個變數名之間使用英文逗號隔開，

var age = 18, address ='火影村',salary = 15000;

2.3.2、宣告變數特殊情況🔥

情況	說明	結果
var age; console.log(age);	只宣告，不賦值	undefined
console.log(age)	不宣告不賦值直接使用	報錯
age = 10;console.log(age);	不宣告只賦值	10

2.3.3、變數的命名規范🔥

由字母(A-Z,a-z)，數字(0-9)，下劃線(_)，美元符號($)組成，如:usrAge,num01,__name
嚴格區分大小寫， var app; 和 var App; 是兩個變數
不能以數字開頭，
不能是關鍵字，保留字，例如：var,for,while
遵循駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，myFirstName
推薦翻譯網站：有道愛詞霸

2.4、資料型別🔥

JavaScript **是一種弱型別或者說動態語言，**這意味著不用提前宣告變數的型別，在程式運行程序中，型別會被自動確定，

var age = 10; 			 //這是一個數字型
var areYouOk = '使得';	//這是一個字串

在代碼運行時，變數的資料型別是由 JS引擎根據 = 右邊變數值的資料型別來判斷的，運行完畢之后，變數就確定了資料型別，
JavaScript 擁有動態型別，同時也意味著相同的變數可用作不同的型別

var x = 6;		//x為數字
var x = "Bill";	//x為字串

JS 把資料型別分為兩類：

基本資料型別(Number,String,Boolean,Undefined,Null)
復雜資料型別(Object)

2.4.1、基本資料型別🔥

簡單資料型別	說明	默認值
Number	數字型，包含整型值和浮點型值，如21，0.21	0
Boolean	布林值型別，如true，false ，等價于1和0	false
Undefined	var a; 宣告了變數a但是沒有賦值，此時a=undefined	undefined（未定義的）
string	字串型別，如“張三”	“”
Null	var a = null;宣告了變數a為空值	null

2.4.2、數字型Number

JavaScript 數字型別既可以用來保存整數值，也可以保存小數(浮點數），

var age = 12;		//整數
var Age = 21.3747;	//小數

2.4.2、數字型進制🔥

最常見的進制有二進制、八進制、十進制、十六進制，

// 1.八進制數字序列范圍：0~7
var num1 = 07; 		//對應十進制的7
var Num2 = 019;		//對應十進制的19
var num3 = 08;		//對應十進制的8


// 2.十六進制數字序列范圍：0~9以及A~F
var num = 0xA;

在JS中八進制前面加0，十六進制前面加 0x

①數字型范圍🔥

JS中數值的最大值：Number.MAX_VALUE
JS中數值的最大值：Number.MIN_VALUE

consol.log(Number.MAX_VALUE);
consol.log(Number.MIN_VALUE);

②數字型的三個特殊值🔥

alert(Infinity); 	//Infinity(無窮大)
alert(-Infinity); 	//-Infinity(無窮小)
alert(NaN);       	//NaN - Not a Number ,代表任何一個非數值

Infinity ，代表無窮大，大于任何數值
-Infinity ，代表無窮小，小于任何數值
Nan ，Not a Number，代表一個非數值

③isNaN🔥

這個方法用來判斷非數字，并且回傳一個值，如果是數字回傳的是false，如果不是數字回傳的是true

在這里插入圖片描述

var userAge = 21;
var isOk = isNan(userAge);
console.log(isNum);		//false,21不是一個非數字

var userName = "andy";
console.log(isNan(userName));	//true,"andy"是一個非數字

2.4.3、字串型String🔥

字串型可以是引號中的任意文本，其語法為 “雙引號” 和 "單引號’’

var strMsg = "我愛北京天安門~";		//使用雙引號表示字串
var strMsg = '我愛北京';			  //使用單引號表示字串

因為 HTML 標簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號，

①字串引號嵌套🔥

JS可以用 單引號嵌套雙引號，或者用 雙引號嵌套單引號（外雙內單，外單內雙）

var strMsg ='我是一個“高富帥”' //可以用 ' ' 包含 " "
var strMsg2 ="我是'高富帥'" //可以用" "  包含  ''

②字串轉義符🔥

類似HTML里面的特殊字符，字串中也有特殊字符，我們稱之為轉義符，

轉義符都是 \ 開頭的，常用的轉義符及其說明如下：

轉義符	解釋說明
\n	換行符，n是newline
\ \	斜杠\
\ ’	’ 單引號
\ ‘’	‘’ 雙引號
\ t	tab 縮進
\ b	空格，b是blank的意思

③字串長度🔥

字串是由若干字符組成的，這些字符的數量就是字串的長度，通過字串的 length 屬性可以獲取整個字串的長度，

//通過字串的length屬性可以獲取整個字串的長度
var strMsg = "我是高富帥！";
alert(strMsg.length);     //顯示6

④字串的拼接🔥

多個字串之間可以使用 + 進行拼接，其拼接方式為 字串 + 任何型別 = 拼接之后的新字串
拼接前會把與字串相加的任何型別轉成字串，再拼接成一個新的字串

注意：字串 + 任何型別 =拼接之后的新字串

//1 字串相加
alert('hello' + ' ' + 'World');  //hello World

//2 數值字串相加
alert('100' + '100'); //100100

//3 數值字串+數值
alert('12'+12); //1212

//4 數值+數值
alert(12+12); //24

+ 號總結口訣：🌏數值相加，字符相連🌏

var  age = 18;
console.log('我今年'+age+'歲');
console.log('我今年'+age+'歲');  //引引加加，最終也是上面的形式

⑤字串拼接加強🔥

console.log('Pink老師' + 18);			//只要有字符就會相連
var age = 18;
// console.log('Pink老師age歲了');		//這樣不行,會輸出 "Pink老師age歲了"

console.log('Pink老師' + age);		 // Pink老師18
console.log('Pink老師' + age + '歲啦');	// Pink老師18歲啦

我們經常會將字串和變數來拼接，因為變數可以很方便地修改里面的值
變數是不能添加引號的，因為加引號的變數會變成字串
如果變數兩側都有字串拼接，口訣==🌏“引引加加 ”，刪掉數字🌏==變數寫加中間

2.4.4、布爾型Boolean🔥

布爾型別有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯），
布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0，

var flag = true;
console.log(flag + 1); // 2 true當加法來看當1來看，flase當0來看

2.4.5、undefined未定義🔥

一個宣告后沒有被賦值的變數會有一個默認值 undefined ( 如果進行相連或者相加時，注意結果）

// 如果一個變數宣告未賦值，就是undefined 未定義資料型別
var str;
console.log(str);				//undefined
var variable = undefined;
console.log(variable + 'Pink'); //variablePink
console.log(variable + 18); //NaN

1.undefined 和字串相加，會拼接字串

2.undefined 和數字相加，最后結果是NaN

2.4.6、空值null🔥

一個宣告變數給 null 值，里面存的值為空

var space = null;
console.log(space + 'pink'); //nullpink
console.llog(space + 1); // 1

2.4.7、typeof🔥

typeof 可用來獲取檢測變數的資料型別

var num = 18;
console.log(typeof num) // 結果 number

不同型別的回傳值

型別	例	結果
string	typeof “小白”	“string”
number	typeof 18	“number”
boolean	typeof true	“boolean”
undefined	typeof undefined	“undefined”
null	typeof null	“object”

2.4.8、字面量

字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值，

數字字面量：8，9，10
字串字面量：‘大前端’，‘后端’
布爾字面量：true、false

通過控制臺的顏色判斷屬于哪種資料型別

黑色	字串
藍色	數值
灰色	undefined 和 null

2.5、資料型別轉換🔥

使用表單、prompt 獲取過來的資料默認是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別，通俗來說，就是把一種資料型別的變數轉換成另外一種資料型別，

我們通常會實作3種方式的轉換：

轉換為字串型別
轉換為數字型
轉換為布爾型

①轉換為字串型🔥

方式	說明	案例
toString()	轉成字串	var num = 1; alert(num.toString());
String()強制轉換	轉成字串	var num = 1; alert(String(num));
加號拼接字串	和字串拼接的結果都是字串	var num =1; alert(num+“我是字串”);

//1.把數字型轉換為字串型 toString()  變數.toString()
var num = 10;
var str = num.toString();
console.log(str);

//2.強制轉換
console.log(String(num));

toString() 和 String() 使用方式不一樣
三種轉換方式，我們更喜歡用第三種加號拼接字串轉換方式，這一方式也稱為隱士轉換

②轉換為數字型🔥

方式	說明	案例
parselnt(string)函式	將string型別轉成整數數值型	parselnt(‘78’)
parseFloat(string)函式	將string型別轉成浮點數數值型	parseFloat(‘78.21’)
Number()強制轉換函式	將string型別轉換為數值型	Number(‘12’)
js 隱式轉換(- * /)	利用算術運算隱式轉換為數值型	‘12’-0

// 1.parseInt()
var age =prompt('請輸入您的年齡');
consolo.log(parseInt(age));  //數字型18
consolo.log(parseInt('3.14'));  //3取整
consolo.log(parseInt('3.94'));  //3,不會四舍五入
consolo.log(parseInt('120px'));  //120,會去掉單位

// 2.parseFloat()
console.log(parseFloat('3.14'));  //3.14
consolo.log(parseFloat('120px'));  //120,會去掉單位


// 3.利用Number(變數)
var str ='123';
console.log(Number(str));
console.log(Number('12'));   

// 4.利用了算術運算 - * /   隱式轉換
console.log('12'-0);  // 12
console.log('123' - '120');  //3
console.log('123' * 1);  // 123

1.注意 parseInt 和 parseFloat ，這兩個是重點

2.隱式轉換是我們在進行算數運算的時候，JS自動轉換了資料型別

③轉換為布爾型

方法	說明	案例
Boolean()函式	其他型別轉成布林值	Boolean(‘true’);

代表空，否定的值會被轉換為false，如 ’ ’ , 0, NaN , null , undefined
其余的值都會被被轉換為true

console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12));   //true

2.6、運算子🔥

運算子（operator）也被稱為運算子，是用于實作賦值、比較和執行算數運算等功能的符號

JavaScript 中常用的運算子有：

算數運算子
遞增和遞減運算子
比較運算子
邏輯運算子
賦值運算子

2.6.1、算術運算子🔥

概念：算術運算使用的符號，用于執行兩個變數或值的算術運算，

運算子	描述	實體
+	加	10 + 20 =30
-	減	10 - 20 =-10
*	乘	10 * 20 =200
/	除	10 / 20 =0.5
%	取余數（取模）	回傳出發的余數 9 % 2 =1

2.6.2、浮點數的精度問題🔥

浮點數值的最高精度是17位小數，但在進行算數計算時其精確度遠遠不如整數

var result = 0.1 +0.2; //結果不是0.3，0.30000000000000004
console.log(0.07 * 100); //結果不是7，而是7.000000000000001

所以不要直接判斷兩個浮點數是否相等

2.6.3、遞增和遞減運算子🔥

遞增（++）

遞減（- -）

放在變數前面時，我們稱為前置遞增(遞減)運算子

放在變數后面時，我們稱為后置遞增(遞減)運算子

注意：遞增和遞減運算子必須和變數配合使用，

①前置遞增運算子🔥

++num num = num + 1

使用口訣:先自加，后回傳值

var num = 10;
alert (++num + 10); // 21

先自加 10+1=11，回傳11，此時num=11

②后置遞增運算子🔥

num ++ num = num +1

使用口訣:先回傳原值，后自加

var num = 10;
alert(10 + num++); // 20

③小結🔥

前置遞增和后置遞增運算子可以簡化代碼的撰寫，讓變數的值 + 1 比以前寫法更簡單
單獨使用時，運行結果相同，與其他代碼聯用時，執行結果會不同
開發時，大多使用后置遞增/減，并且代碼獨占一行

2.6.4、比較(關系)運算子🔥

比較運算子是兩個資料進行比較時所使用的運算子，比較運算后，會回傳一個布林值(true / false)作為比較運算的結果，

運算子名稱	說明	案例	結果
<	小于號	1 < 2	true
>	大于號	1 > 2	false
>=	大于等于號(大于或者等于)	2 >= 2	true
<=	小于等于號(小于或者等于)	3 <= 2	false
==	判等號(會轉型)	37 == 37	true
!=	不等號	37 != 37	false
=== !==	全等要求值和資料型別都一致	37 === ‘37’	false

①===== 小結

符號	作用	用法
=	賦值	把右邊給左邊
==	判斷	判斷兩邊值是否相等(注意此時有隱士轉換)
===	全等	判斷兩邊的值和資料型別是否完全相同

console.log(18 == '18');		//true
console.log(18 === '18');		//false

2.6.5、邏輯運算子🔥

邏輯運算子是用來進行布林值運算的運算子，其回傳值也是布林值

邏輯運算子	說明	案例
&&	“邏輯與”，簡稱"與" and	true && false
\|\|	“邏輯或”，簡稱"或" or	true \|\| false
！	“邏輯非”，簡稱"非" not	！true

邏輯與：兩邊都是 true才回傳 true，否則回傳 false

在這里插入圖片描述

邏輯或：兩邊都為 false 才回傳 false，否則都為true

在這里插入圖片描述

邏輯非：邏輯非（!）也叫作取反符，用來取一個布林值相反的值，如 true 的相反值是 false

var isOk = !true;
console.log(isOk);  // false
//邏輯非（!）也叫作取反符，用來取一個布林值相反的值，如 true 的相反值是 false

2.6.5.1、短路運算(邏輯中斷)🔥

短路運算的原理：當有多個運算式（值）時,左邊的運算式值可以確定結果時,就不再繼續運算右邊的運算式的值

①邏輯與🔥

語法：運算式1 && 運算式2
如果第一個運算式的值為真，則回傳運算式2
如果第一個運算式的值為假，則回傳運算式1

console.log(123 && 456);   //456
console.log(0 && 456);     //0
console.log(123 && 456 && 789);  //789

②邏輯或

語法：運算式1 || 運算式2
如果第一個運算式的值為真，則回傳運算式1
如果第一個運算式的值為假，則回傳運算式2

console.log(123 || 456); //123
console.log(0 || 456);   //456
console.log(123 || 456 || 789);  //123

var num = 0;
console.log(123 || num++);
// 先回傳在加，相當于 (123 || 0)
console.log(num);    // 123

2.6.6、賦值運算子🔥

概念：用來把資料賦值給變數的運算子，

賦值運算子	說明	案例
=	直接賦值	var usrName = ‘我是值’
+= ，-=	加，減一個數后再賦值	var age = 10； age+=5；//15
*=，/=，%=	成，除，取模后再賦值	var age = 2; age*=5; //10

var age = 10;
age += 5;  // 相當于 age = age + 5;
age -= 5;  // 相當于 age = age - 5;
age *= 10; // 相當于 age = age * 10;

2.6.7、運算子優先級🔥

優先級	運算子	順序
1	小括號	()
2	一元運算子	++ – ！
3	算數運算子	*先 / 后 + -**
4	關系運算子	>, >= , < , <=,
5	相等運算子	，！=，=，！==
6	邏輯運算子	先 && 后 \|\|（先與后或）
7	賦值運算子	=
8	逗號運算子	，

1.一元運算子里面的邏輯非優先級很高

2.邏輯與比 邏輯或 優先級高

3.練習題

console.log( 4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true)	// true

var a = 3 > 5 && 2 < 7 && 3 == 4; 
console.log(a); 	//false 

var b = 3 <= 4 || 3 > 1 || 3 != 2; 
console.log(b); 	//true

var c = 2 === "2"; 
console.log(c);  	//false

var d = !c || b && a ;
console.log(d);		//true

2.7、流程控制🔥

流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，這三種結構代表三種代碼執行的順序

2.7.1、分支結構🔥

JS 語言提供了兩種分支結構陳述句：JS 陳述句 switch陳述句

①if陳述句🔥

// 條件成立執行代碼，否則什么也不做
if (條件運算式) {
    //條件成立執行的代碼陳述句
}

案例：進入網吧

彈出一個輸入框，要求用戶輸入年齡，如果年齡大于等于 18 歲，允許進網吧

var usrAge = prompt('請輸入您的年齡:');
if(usrAge >= 18)
{
      alert('您的年齡合法，歡迎來到老子網吧享受學習的樂趣！');
}

②if else 陳述句🔥

// 條件成立，執行if里面代碼，否則執行else里面的代碼
if(條件運算式)
{
    //[如果]條件成立執行的代碼
}
else
    {
        //[否則]執行的代碼
    }

案例：判斷閏年

接收用戶輸入的年份，如果是閏年就彈出閏年，否則彈出是平年

演算法：能被4整除且不能整除100的為閏年（如2004年就是閏年，1901年不是閏年）或者能夠被 400 整除的就是閏年

var year = prompt('請輸入年份');

if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0)
{
   alert('這個年份是閏年');
}
else
{
  alert('這個年份是平年');
}

③if else if 陳述句🔥

if(條件運算式1)
{
  陳述句1;
}
else if(條件運算式2)
{
   陳述句2;
}
else if(條件運算式3)
{
  陳述句3;
}
else
{
   //上述條件都不成立執行此處代碼
}

案例:接收用戶輸入的分數，根據分數輸出對應的等級字母 A、B、C、D、E

其中：

90分(含)以上，輸出：A
80分(含)~ 90 分(不含)，輸出：B
70分(含)~ 80 分(不含)，輸出：C
60分(含)~ 70 分(不含)，輸出：D
60分(不含) 以下，輸出： E

 var score = prompt('請您輸入分數:');
        if (score >= 90) {
            alert('寶貝，你是我的驕傲');
        } else if (score >= 80) {
            alert('寶貝，你已經很出色了');
        } else if (score >= 70) {
            alert('你要繼續加油嘍');
        } else if (score >= 60) {
            alert('孩子，你很危險');
        } else {
            alert('可以再努力點嗎，你很棒，但還不夠棒');
        }

2.7.2、三元運算式🔥

語法結構 : 運算式1 ? 運算式2 : 運算式3
執行思路

如果運算式1為true，則回傳運算式2的值,如果運算式1為false，則回傳運算式3的值

案例：數字補0

用戶輸入數字，如果數字小于10，則在前面補0，比如01，09，

如果數字大于10，則不需要補，比如20

var figuer = prompt('請輸入0~59之間的一個數字');
        var result = figuer < 10 ? '0' + figuer : figue
        alert(result);

2.7.3、switch🔥

switch(運算式){
  case value1:
     //運算式等于 value1 時要執行的代碼
     break;
  case value2:
     //運算式等于value2 時要執行的代碼
     break;
  default:
     //運算式不等于任何一個value時要執行的代碼
        
}

switch ：開關轉換， case ：小例子選項
關鍵字 switch 后面括號內可以是運算式或值，通常是一個變數
關鍵字 case , 后跟一個選項的運算式或值，后面跟一個冒號
switch 運算式的值會與結構中的 case 的值做比較
如果存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 陳述句代碼執行結束
如果所有的 case 的值都和運算式的值不匹配，則執行 default 里的代碼
執行case 里面的陳述句時，如果沒有break，則繼續執行下一個case里面的陳述句

// 用戶在彈出框里面輸入一個水果，如果有就彈出該水果的價格， 如果沒有該水果就彈出“沒有此水果”
        var fruit = prompt('請您輸入查詢的蘋果');
        switch (fruit) {
            case '蘋果':
                alert('蘋果的價格為3.5元/千克');
                break;
            case '香蕉':
                alert('香蕉的價格為3元/千克');
                break;
            default:
                alert('沒有這種水果');
        }

3、斷點除錯🔥

瀏覽器中按 F12–> sources -->找到需要除錯的檔案–>在程式的某一行設定斷點(在行數點一下)
重繪瀏覽器
Watch: 監視，通過watch可以監視變數的值的變化，非常的常用
F11: 程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化

4、回圈🔥

4.1、for回圈🔥

在程式中，一組被重復執行的陳述句被稱之為回圈體，能否繼續重復執行，取決于回圈的終止條件，由回圈體及回圈的終止條件組成的陳述句，被稱之為回圈陳述句

for(初始化變數;條件運算式;操作運算式)
{
   //回圈體
}

1.輸入10句"娘子晚安哈！"

//基本寫法
for(var i = 1; i<=10; i++  )
    {
         console.log('娘子晚安哈');
    }
// 用戶輸入次數
var num = prompt('請輸入次數:');
for(var i = 1; i<= num ;i++)
    {
        console.log('娘子晚安哈');
    }

2.求1-100之間所有整數的累加和

// 求1-100所以的整數和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    var sum = sum + i;
}
console.log(sum);

3.求1-100之間所有數的平均值

 // 3.求1-100之間所有數的平均值
var sum = 0;
for (var i = 1; i <= 100; i++) {
    var sum = sum + i;
}
console.log(sum / 100);

4.求1-100之間所有偶數和奇數的和

//    4.求1-100之間所有偶數和奇數的和
var sum1 = 0;
var sum2 = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 0) {
        sum1 = sum1 + i;
    } else {
        sum2 = sum2 + i;
    }
}
console.log('偶數和為' + sum1);
console.log('奇數和為' + sum2);

5.求1-100之間所有能被3整除的數字的和

// 5.求1-100之間所有能被3整除的數字的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        sum += i;
    }
}
console.log(sum);

6.要求用戶輸入班級人數，之后依次輸入每個學生的成績，最后列印出該班級總的成績以及平均成績，

var num = prompt('請輸入班級總的人數:'); // num 班級總的人數
var sum = 0; // 總成績
var average = 0; // 平均成績
for (var i = 1; i <= num; i++) {
     var score = prompt('請輸入第' + i + '個學生的成績');
    //這里接收的是str，必須轉換為數值
     sum = sum + parseFloat(score);         
}
average = sum / num;
alert('班級總的成績是：' + sum);
alert('班級總的平均成績是：' + average);

7.一行列印5個星星

我們采取追加字串的方式，這樣可以列印到控制臺上

var star = '';
for (var i = 1; i <= 5; i++) {
     star += '☆';
 }
console.log(star);

4.2、雙重for回圈🔥

回圈嵌套是指在一個回圈陳述句中再定義一個回圈陳述句的語法結構，例如在for回圈陳述句中，可以再嵌套一個for 回圈，這樣的 for 回圈陳述句我們稱之為雙重for回圈，

for(外回圈的初始;外回圈的條件;外形回圈的操作運算式){
    for(內回圈的初始;內回圈的條件;內回圈的操作運算式){
        需執行的代碼;
    }
}

內層回圈可以看做外層回圈的陳述句
內層回圈執行的順序也要遵循 for 回圈的執行順序
外層回圈執行一次，內層回圈要執行全部次數

①列印五行五列星星

核心：

內層回圈負責一行列印五個星星
外層回圈負責列印五行

var star = '';
for(var j = 1;j<=5;j++)
{
   for (var i = 1; i <= 5; i++)
   {
     star += '☆'
   }
    //每次滿5個星星就加一次換行
    star +='\n'  
}
console.log(star);

②列印n行n列的星星

要求用戶輸入行數和列數，之后在控制臺列印出用戶輸入行數和列數的星星

var star = '';
var row = prompt('請輸入行數');
var col = prompt('請輸入列數');
for (var j = 1; j <= col; j++) {
    for (var i = 1; i <= row; i++) {
        star += '☆';
    }
    star += '\n';
}
console.log(star);

③列印倒三角形

在這里插入圖片描述

一共有10行，但是每行的星星個數不一樣，因此需要用到雙重 for 回圈
外層的 for 控制行數 i ，回圈10次可以列印10行
內層的 for 控制每行的星星個數 j
核心演算法：每一行星星的個數： j = i ; j <= 10; j++
每行列印完畢后，都需要重新換一行

var star = '';
var row = prompt('請輸入行數');
var col = prompt('請輸入列數');
for (var i = 1; i <= row; i++) {
    for (var j = i; j <= col; j++) {
        star += '☆';
    }
    star += '\n';
}
console.log(star);

4.3、while回圈🔥

while(條件運算式){
  //回圈體代碼
}

執行思路：

先執行條件運算式，如果結果為 true，則執行回圈體代碼；如果為 false，則退出回圈，執行后面代碼
執行回圈體代碼
回圈體代碼執行完畢后，程式會繼續判斷執行條件運算式，如條件仍為true，則會繼續執行回圈體，直到回圈條件為 false 時，整個回圈程序才會結束

注意：

使用 while 回圈時一定要注意，它必須要有退出條件，否則會稱為死回圈
while 回圈和 for 回圈的不同之處在于 while 回圈可以做較為復雜的條件判斷，比如判斷用戶名和密碼

①列印人的一生

從1歲到99歲

var age = 0;
while (age <= 100) {
    age++;
    console.log('您今年' + age + '歲了');
}

②計算 1 ~ 100 之間所有整數的和

var figure = 1;
        var sum = 0;
        while (figure <= 100) {
            sum += figure;
            figure++;
        }
        console.log('1-100的整數和為' + sum);

4.4、do while回圈🔥

do {
  //回圈體代碼-條件運算式為true的時候重復執行回圈一代碼
}while(條件運算式);

執行思路：

先執行一次回圈體代碼
再執行運算式，如果結果為true，則繼續執行回圈體代碼，如果為false，則退出回圈，繼續執行后面的代碼
先執行再判斷回圈體，所以dowhile回圈陳述句至少會執行一次回圈體代碼

需求：彈出一個提示框，你愛我嗎？如果輸入我愛你，就提示結束，否則，一直詢問

do {
	var love = prompt('你愛我嗎？');
} while (love != '我愛你');
	alert('登錄成功');

4.5、continue 關鍵字🔥

continue 關鍵字用于立即跳出本次回圈，繼續下一次回圈（本次回圈體中 continue 之后的代碼就會少執行一次），

例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     console.log('這個包子有蟲子，扔掉');
     continue; // 跳出本次回圈，跳出的是第3次回圈 
  }
  console.log('我正在吃第' + i + '個包子呢');
}

4.6、break關鍵字🔥

break 關鍵字用于立即跳出整個回圈

例如，吃5個包子，吃到第3個發現里面有半個蟲子，其余的也不吃了

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個for 回圈，跳到整個for下面的陳述句
   }
   console.log('我正在吃第' + i + '個包子呢');
 }

5、陣列🔥

陣列(Array)是指一組資料的集合，其中的每個資料被稱作元素，在陣列中可以存放任意型別的元素，陣列是一種將一組資料存盤在單個變數名下的優雅方式，

//普通變數一次只能存盤一個值
var num = 10;
//陣列一次可以存盤多個值
var arr =[1,2,3,4,5];

5.1、創建陣列🔥

JavaScript 中創建陣列有兩種方式：

利用 new 創建陣列
利用陣列字面量創建陣列

①利用 new 創建陣列🔥

var 陣列名 = new Array();
var arr = new Array(); //創建一個新的空陣列

這種方式暫且了解，等學完物件再看
注意 Array()，A要大寫

②利用陣列字面量創建陣列🔥

// 1.利用陣列字面量方式創建空的陣列 
var 陣列名 =[];
// 2.使用陣列字面量方式創建帶初始值的陣列
var 陣列名 =['小白','小黑','小黃','瑞奇'];
// 3.陣列中可以存放任意型別的資料，例如字串，數字，布林值等
var arrStus =['小白'，12,true,28.9];

陣列的字面量是方括號 []
宣告陣列并賦值稱為陣列的初始化
這種字面量方式也是我們以后最多使用的方式

5.2、陣列的索引（下標）🔥

索引 (下標) ：用來訪問陣列元素的序號（陣列下標從 0 開始）

//定義陣列
var arrStus = [1,2,3];
//獲取陣列中的第2個元素
alert(arrStus[1]);

5.3遍歷陣列🔥

我們可以通過 for 回圈索引遍歷陣列中的每一項

// 陣列索引訪問陣列中的元素
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

// for回圈遍歷陣列
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

5.4、陣列的長度🔥

使用“陣列名.length”可以訪問陣列元素的數量（陣列長度）

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

注意：

此處陣列的長度是陣列元素的個數 ，不要和陣列的索引號混淆
當我們陣列里面的元素個數發生了變化，這個 length 屬性跟著一起變化

5.5、案例

1.請將 [“關羽”,“張飛”,“馬超”,“趙云”,“黃忠”,“劉備”,“姜維”]; 陣列里的元素依次列印到控制臺

var arr = ["關羽","張飛","馬超","趙云","黃忠","劉備","姜維"]; 
// 遍歷  從第一個到最后一個
for(var i = 0; i < arr.length; i++ )  { 
   console.log( arr[i] );
}

2.求陣列 [2,6,1,7, 4] 里面所有元素的和以及平均值

①宣告一個求和變數 sum，
①遍歷這個陣列，把里面每個陣列元素加到 sum 里面，
①用求和變數 sum 除以陣列的長度就可以得到陣列的平均值，

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
}
average = sum / i; //此時i為5
//      average = sum / arr.length;
console.log('和為' + sum);
console.log('平均值為' + average);

3.求陣列[2,6,1,77,52,25,7]中的最大值

①宣告一個保存最大元素的變數 max，
②默認最大值可以取陣列中的第一個元素，
③遍歷這個陣列，把里面每個陣列元素和 max 相比較，
④如果這個陣列元素大于max 就把這個陣列元素存到 max 里面，否則繼續下一輪比較，
⑤最后輸出這個 max，

 var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];
        var temp;
        for (var i = 0; i < arr.length; i++) {
            if (max < arr[i]) {
                temp = max;
                max = arr[i];
                arr[i] = temp;
            }
        }
        console.log('最大值為' + max);


方法二：

var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用來保存最大元素,默認最大值是陣列中的第一個元素
// 從0 開始回圈陣列里的每個元素
for(var i = 0;i< arrNum.length; i++){
    // 如果陣列里當前回圈的元素大于 maxNum，則保存這個元素和下標
    if(arrNum[i] > maxNum){
        maxNum = arrNum[i]; // 保存數值到變數 maxNum
    }
}

4.將陣列 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素轉換為字串

思路：就是把里面的元素相加就好了，但是注意保證是字符相加

①需要一個新變數 str 用于存放轉換完的字串，
②遍歷原來的陣列，分別把里面資料取出來，加到字串變數 str 里面，

var arr = ['red','green','blue','pink'];
var str ='';
for(var i = 0; i < arr.length; i++){
    str += arr[i];
}
console.log(str);
// redgreenbluepink

5.將陣列 [‘red’, ‘green’, ‘blue’, ‘pink’] 轉換為字串，并且用 | 或其他符號分割

①需要一個新變數用于存放轉換完的字串 str，
①遍歷原來的陣列，分別把里面資料取出來，加到字串里面，
①同時在后面多加一個分隔符，

var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var separator = '|';
for (var i = 0; i < arr.length; i++) {
   str += arr[i] + separator;
}
console.log(str);
// red|green|blue|pink

5.6、陣列中新增元素🔥

①通過修改 length 長度新增陣列元素

可以通過修改 length 長度來實作陣列擴容的目的
length 屬性是可讀寫的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引號是 4，5，6 的空間沒有給值，就是宣告變數未給值，默認值就是 undefined

②通過修改陣列索引新增陣列元素

可以通過修改陣列索引的方式追加陣列元素
不能直接給陣列名賦值，否則會覆寫掉以前的資料
這種方式也是我們最常用的一種方式

var arr = ['red', 'green', 'blue', 'pink'];
arr[3] = 'hotpink';
console.log(arr);

5.7、陣列中新增元素

1.新建一個陣列，里面存放10個整數（ 1~10），要求使用回圈追加的方式輸出： [1,2,3,4,5,6,7,8,9,10]

①使用回圈來追加陣列，
②宣告一個空陣列 arr，
③回圈中的計數器 i 可以作為陣列元素存入，
由于陣列的索引號是從0開始的，因此計數器從 0 開始更合適，存入的陣列元素要+1，

var arr = [];
for (var i = 0; i < 10; i++){
    arr[i] = i + 1;
}
console.log(arr);

2.將陣列 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素選出來，放入新陣列

①宣告一個新的陣列用于存放新資料，
②遍歷原來的陣列，找出大于等于 10 的元素，
③依次追加給新陣列 newArr，

實作代碼1：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定義一個變數 用來計算 新陣列的索引號
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 給新陣列
        newArr[j] = arr[i];
        // 索引號 不斷自加
        j++;
    }
}
console.log(newArr);

實作代碼2：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 給新陣列
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

5.8、洗掉指定陣列元素🔥

將陣列[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一個不包含 0 的新陣列，

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){
    if(arr[i] != 0){
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

//老師代碼
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];   // 空陣列的默認的長度為 0 
// 定義一個變數 i 用來計算新陣列的索引號
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的數
    if (arr[i] != 0) {
        // 給新陣列
        // 每次存入一個值，newArr長度都會 +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

5.9、翻轉陣列🔥

將陣列 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內容反過來存放

// 把舊陣列索引號的第4個取過來(arr.length - 1),給新陣列索引號第0個元素(newArr.length)

var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){
    newArr[newArr.length] = arr[i];
}
console.log(newArr);

5.10、陣列排序🔥

冒泡排序

將陣列 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序，輸出： 1，2，3，4，5

var arr = [5,4,3,2,1];
for (var i = 0; i <= arr.lengtg-1; i++){ //外層回圈管趟數，5個數共交換4躺
    for (var j = 0; j <= arr.length - i - 1; j++){
        //里層回圈管每一趟交換的次數
        //前一個和后面一個陣列元素相比較
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }  
    }
}
console.log(arr);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291325.html

標籤：其他

上一篇：復制付費文案的解決方法

下一篇：SpringBoot實戰開發后臺管理-架構說明和開發

JavaScript基礎大總結

?初識JavaScirpt

?瀏覽器執行JS簡介

?JS的組成

?ECMAScript

🔥DOM檔案物件模型

🔥BOM瀏覽器物件模型

1、JS初體驗🔥

1.1、行內式JS

1.2、內嵌式JS🔥

1.3、外部JS🔥

2、JS基本語法🔥

2.1、注釋🔥

2.1.1、單行注釋🔥

2.1.2、多行注釋🔥

2.2、輸入輸出陳述句🔥

2.3、變數🔥

2.3.1、變數初始化🔥

2.3.2、宣告變數特殊情況🔥

2.3.3、變數的命名規范🔥

2.4、資料型別🔥

2.4.1、基本資料型別🔥

2.4.2、數字型Number

2.4.2、數字型進制🔥

①數字型范圍🔥

②數字型的三個特殊值🔥

③isNaN🔥

2.4.3、字串型String🔥

①字串引號嵌套🔥

②字串轉義符🔥

③字串長度🔥

④字串的拼接🔥

2.4.4、布爾型Boolean🔥

2.4.5、undefined未定義🔥

2.4.6、空值null🔥

2.4.7、typeof🔥

2.4.8、字面量

2.5、資料型別轉換🔥

①轉換為字串型🔥

②轉換為數字型🔥

③轉換為布爾型

2.6、運算子🔥

2.6.1、算術運算子🔥

2.6.2、浮點數的精度問題🔥

2.6.3、遞增和遞減運算子🔥

①前置遞增運算子🔥

②后置遞增運算子🔥

③小結🔥

2.6.4、比較(關系)運算子🔥

①===== 小結

2.6.5、邏輯運算子🔥

2.6.5.1、短路運算(邏輯中斷)🔥

①邏輯與🔥

②邏輯或

2.6.6、賦值運算子🔥

2.6.7、運算子優先級🔥

2.7、流程控制🔥

2.7.1、分支結構🔥

①if陳述句🔥

②if else 陳述句🔥

③if else if 陳述句🔥

2.7.2、三元運算式🔥

2.7.3、switch🔥

3、斷點除錯🔥

4、回圈🔥

4.1、for回圈🔥

4.2、雙重for回圈🔥

①列印五行五列星星

②列印n行n列的星星

③列印倒三角形

4.3、while回圈🔥

①列印人的一生

②計算 1 ~ 100 之間所有整數的和

4.4、do while回圈🔥

4.5、continue 關鍵字🔥

4.6、break關鍵字🔥

5、陣列🔥

5.1、創建陣列🔥

①利用 new 創建陣列🔥

②利用陣列字面量創建陣列🔥