?初識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="javascript: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;
12345
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 = '使得'; //這是一個字符串
12
- 在代碼運行時，變量的數據類型是由 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(isOk); //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'); //undefinedPink
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
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[4] = '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.length-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);
匯總結束，希望對各位朋友有幫助，覺得還不錯的給個點贊支撐支撐
