初識JavaScirpt

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

?瀏覽器執(zhí)行JS簡介

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

• 渲染引擎：用來解析HTML與CSS，俗稱內(nèi)核，比如 chrome 瀏覽器的 blink ，老版本的 webkit
• JS 引擎：也稱為 JS 解釋器。 用來讀取網(wǎng)頁中的JavaScript代碼，對其處理后運(yùn)行，比如 chrome 瀏覽器的 V8

瀏覽器本身并不會執(zhí)行JS代碼，而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼（轉(zhuǎn)換為機(jī)器語言），然后由計(jì)算機(jī)去執(zhí)行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執(zhí)行。

?JS的組成

JavaScript 包括 ECMAScript、DOM、BOM

?ECMAScript

ECMAScript 是由ECMA 國際（ 原歐洲計(jì)算機(jī)制造商協(xié)會）進(jìn)行標(biāo)準(zhǔn)化的一門編程語言，這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為 JavaScript 或 JScript，但實(shí)際上后兩者是 ECMAScript 語言的實(shí)現(xiàn)和擴(kuò)展。

ECMAScript：ECMAScript 規(guī)定了JS的編程語法和基礎(chǔ)核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。

DOM文檔對象模型

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作（大小、位置、顏色等）。

BOM瀏覽器對象模型

BOM (Browser Object Model，簡稱BOM) 是指瀏覽器對象模型，它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等。

1、JS初體驗(yàn)

1.1、行內(nèi)式JS

<input type="button" value="點(diǎn)我試試" onclink="javascript：alert('Hello World')" />

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

1.2、內(nèi)嵌式JS

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

• 可以將多行JS代碼寫到<script>標(biāo)簽中
• 內(nèi)嵌 JS 是學(xué)習(xí)時(shí)常用的方式

1.3、外部JS

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

1. 利于HTML頁面代碼結(jié)構(gòu)化，把單獨(dú)JS代碼獨(dú)立到HTML頁面之外，既美觀，又方便
2. 引用外部JS文件的script標(biāo)簽中間不可以寫代碼
3. 適合于JS代碼量比較大的情況

2、JS基本語法

2.1、注釋

2.1.1、單行注釋

//  單行注釋

• 快捷鍵ctrl + /

2.1.2、多行注釋

/*
	多行注釋
*/    

• 快捷鍵 shift + alt + a
• vscode中修改快捷鍵方式：vscode? 首選項(xiàng)按鈕? 鍵盤快捷方式 ? 查找原來的快捷鍵? 修改為新的快捷鍵? 回車確認(rèn)

2.2、輸入輸出語句

• alert() 主要用來顯示消息給用戶
• console.log() 用來給程序員看自己運(yùn)行時(shí)的消息

2.3、變量

• 變量是用于存放數(shù)據(jù)的容器，我們通過變量名獲取數(shù)據(jù)，甚至數(shù)據(jù)可以修改
• 本質(zhì)：變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間

2.3.1、變量初始化

1. var是一個(gè)JS關(guān)鍵字，用來聲明變量(variable變量的意思)。使用該關(guān)鍵字聲明變量后，計(jì)算機(jī)會自動為變量分配內(nèi)存空間。
2. age 是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間

//聲明變量同時(shí)賦值為18
var age = 18; 
//同時(shí)聲明多個(gè)變量時(shí)，只需要寫一個(gè) var， 多個(gè)變量名之間使用英文逗號隔開。

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

2.3.2、聲明變量特殊情況

2.3.3、變量的命名規(guī)范

1. 由字母(A-Z,a-z)，數(shù)字(0-9)，下劃線(_)，美元符號($)組成，如:usrAge,num01,__name
2. 嚴(yán)格區(qū)分大小寫。 var app; 和 var App; 是兩個(gè)變量
3. 不能以數(shù)字開頭。
4. 不能是關(guān)鍵字，保留字。例如：var,for,while
5. 遵循駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。myFirstName
6. 推薦翻譯網(wǎng)站：有道 愛詞霸

2.4、數(shù)據(jù)類型

JavaScript **是一種弱類型或者說動態(tài)語言。**這意味著不用提前聲明變量的類型，在程序運(yùn)行過程中，類型會被自動確定。

var age = 10; 			 //這是一個(gè)數(shù)字型
var areYouOk = '使得';	//這是一個(gè)字符串
12

• 在代碼運(yùn)行時(shí)，變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的，運(yùn)行完畢之后， 變量就確定了數(shù)據(jù)類型。
• JavaScript 擁有動態(tài)類型，同時(shí)也意味著相同的變量可用作不同的類型

var x = 6;		//x為數(shù)字
var x = "Bill";	//x為字符串

JS 把數(shù)據(jù)類型分為兩類：

• 基本數(shù)據(jù)類型(Number,String,Boolean,Undefined,Null)
• 復(fù)雜數(shù)據(jù)類型(Object)

2.4.1、基本數(shù)據(jù)類型

2.4.2、數(shù)字型Number

JavaScript 數(shù)字類型既可以用來保存整數(shù)值，也可以保存小數(shù)(浮點(diǎn)數(shù)）。

var age = 12;		//整數(shù)
var Age = 21.3747;	//小數(shù)

2.4.2、數(shù)字型進(jìn)制

最常見的進(jìn)制有二進(jìn)制、八進(jìn)制、十進(jìn)制、十六進(jìn)制。

// 1.八進(jìn)制數(shù)字序列范圍：0~7
var num1 = 07; 		//對應(yīng)十進(jìn)制的7
var Num2 = 019;		//對應(yīng)十進(jìn)制的19
var num3 = 08;		//對應(yīng)十進(jìn)制的8
// 2.十六進(jìn)制數(shù)字序列范圍：0~9以及A~F
var num = 0xA;

• 在JS中八進(jìn)制前面加0，十六進(jìn)制前面加 0x

①數(shù)字型范圍

• JS中數(shù)值的最大值：Number.MAX_VALUE
• JS中數(shù)值的最小值：Number.MIN_VALUE

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

②數(shù)字型的三個(gè)特殊值

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

• Infinity ，代表無窮大，大于任何數(shù)值
• -Infinity ，代表無窮小，小于任何數(shù)值
• Nan ，Not a Number，代表一個(gè)非數(shù)值

③isNaN

這個(gè)方法用來判斷非數(shù)字，并且返回一個(gè)值，如果是數(shù)字返回的是false，如果不是數(shù)字返回的是true

var userAge = 21;
var isOk = isNan(userAge);
console.log(isOk);		//false,21不是一個(gè)非數(shù)字
var userName = "andy";
console.log(isNan(userName));	//true,"andy"是一個(gè)非數(shù)字

2.4.3、字符串型String

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

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

因?yàn)?HTML 標(biāo)簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號。

①字符串引號嵌套

JS可以用 單引號嵌套雙引號，或者用 雙引號嵌套單引號（外雙內(nèi)單，外單內(nèi)雙）

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

②字符串轉(zhuǎn)義符

類似HTML里面的特殊字符，字符串中也有特殊字符，我們稱之為轉(zhuǎn)義符。

轉(zhuǎn)義符都是 \ 開頭的，常用的轉(zhuǎn)義符及其說明如下：

③字符串長度

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

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

④字符串的拼接

• 多個(gè)字符串之間可以使用 + 進(jìn)行拼接，其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
• 拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串，再拼接成一個(gè)新的字符串

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

//1 字符串相加
alert('hello' + ' ' + 'World');  //hello World
//2 數(shù)值字符串相加
alert('100' + '100'); //100100
//3 數(shù)值字符串+數(shù)值
alert('12'+12); //1212
//4 數(shù)值+數(shù)值
alert(12+12); //24

• + 號總結(jié)口訣：數(shù)值相加，字符相連

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

⑤字符串拼接加強(qiáng)

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歲啦

• 我們經(jīng)常會將字符串和變量來拼接，因?yàn)樽兞靠梢院芊奖愕匦薷睦锩娴闹?/span>
• 變量是不能添加引號的，因?yàn)榧右柕淖兞繒兂勺址?/span>
• 如果變量兩側(cè)都有字符串拼接，口訣==“引引加加 ”，刪掉數(shù)字==變量寫加中間

2.4.4、布爾型Boolean

• 布爾類型有兩個(gè)值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯(cuò)）。
• 布爾型和數(shù)字型相加的時(shí)候， true 的值為 1 ，false 的值為 0。

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

2.4.5、undefined未定義

• 一個(gè)聲明后沒有被賦值的變量會有一個(gè)默認(rèn)值 undefined ( 如果進(jìn)行相連或者相加時(shí)，注意結(jié)果）

// 如果一個(gè)變量聲明未賦值，就是undefined 未定義數(shù)據(jù)類型
var str;
console.log(str);				//undefined
var variable = undefined;
console.log(variable + 'Pink'); //undefinedPink
console.log(variable + 18); //NaN 

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

2.undefined 和 數(shù)字相加，最后結(jié)果是NaN

2.4.6、空值null

• 一個(gè)聲明變量給 null 值，里面存的值為空

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

2.4.7、typeof

• typeof 可用來獲取檢測變量的數(shù)據(jù)類型

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

不同類型的返回值

2.4.8、字面量

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

• 數(shù)字字面量：8，9，10
• 字符串字面量：‘大前端’，‘后端’
• 布爾字面量：true、false

通過控制臺的顏色判斷屬于哪種數(shù)據(jù)類型

2.5、數(shù)據(jù)類型轉(zhuǎn)換

使用表單、prompt 獲取過來的數(shù)據(jù)默認(rèn)是字符串類型的，此時(shí)就不能直接簡單的進(jìn)行加法運(yùn)算，而需要轉(zhuǎn)換變量的數(shù)據(jù)類型。通俗來說，就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另外一種數(shù)據(jù)類型。

我們通常會實(shí)現(xiàn)3種方式的轉(zhuǎn)換：

• 轉(zhuǎn)換為字符串類型
• 轉(zhuǎn)換為數(shù)字型
• 轉(zhuǎn)換為布爾型

①轉(zhuǎn)換為字符串型

//1.把數(shù)字型轉(zhuǎn)換為字符串型 toString()  變量.toString()
var num = 10;
var str = num.toString();
console.log(str);

//2.強(qiáng)制轉(zhuǎn)換
console.log(String(num));

• toString() 和 String() 使用方式不一樣

• 三種轉(zhuǎn)換方式，我們更喜歡用第三種加號拼接字符串轉(zhuǎn)換方式，這一方式也稱為隱士轉(zhuǎn)換

②轉(zhuǎn)換為數(shù)字型

// 1.parseInt()
var age =prompt('請輸入您的年齡');
consolo.log(parseInt(age));  //數(shù)字型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.利用了算術(shù)運(yùn)算 - * /   隱式轉(zhuǎn)換
console.log('12'-0);  // 12

1.注意 parseInt 和 parseFloat ，這兩個(gè)是重點(diǎn)

2.隱式轉(zhuǎn)換是我們在進(jìn)行算數(shù)運(yùn)算的時(shí)候，JS自動轉(zhuǎn)換了數(shù)據(jù)類型

③轉(zhuǎn)換為布爾型

• 代表空，否定的值會被轉(zhuǎn)換為false，如 ’ ’ , 0, NaN , null , undefined
• 其余的值都會被被轉(zhuǎn)換為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、運(yùn)算符

運(yùn)算符（operator）也被稱為操作符，是用于實(shí)現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號

JavaScript 中常用的運(yùn)算符有：

• 算數(shù)運(yùn)算符
• 遞增和遞減運(yùn)算符
• 比較運(yùn)算符
• 邏輯運(yùn)算符
• 賦值運(yùn)算符

2.6.1、算術(shù)運(yùn)算符

概念：算術(shù)運(yùn)算使用的符號，用于執(zhí)行兩個(gè)變量或值的算術(shù)運(yùn)算。

2.6.2、浮點(diǎn)數(shù)的精度問題

浮點(diǎn)數(shù)值的最高精度是17位小數(shù)，但在進(jìn)行算數(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)

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

所以不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等

2.6.3、遞增和遞減運(yùn)算符

遞增（++）

遞減（- -）

放在變量前面時(shí)，我們稱為前置遞增(遞減)運(yùn)算符

放在變量后面時(shí)，我們稱為后置遞增(遞減)運(yùn)算符

注意：遞增和遞減運(yùn)算符必須和變量配合使用。

①前置遞增運(yùn)算符

++num num = num + 1

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

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

先自加 10+1=11，返回11，此時(shí)num=11

②后置遞增運(yùn)算符

num ++ num = num +1

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

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

③小結(jié)

• 前置遞增和后置遞增運(yùn)算符可以簡化代碼的編寫，讓變量的值 + 1 比以前寫法更簡單
• 單獨(dú)使用時(shí)，運(yùn)行結(jié)果相同，與其他代碼聯(lián)用時(shí)，執(zhí)行結(jié)果會不同
• 開發(fā)時(shí)，大多使用后置遞增/減，并且代碼獨(dú)占一行

2.6.4、比較(關(guān)系)運(yùn)算符

比較運(yùn)算符是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符，比較運(yùn)算后，會返回一個(gè)布爾值(true / false)作為比較運(yùn)算的結(jié)果。

①===== 小結(jié)

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

2.6.5、邏輯運(yùn)算符

邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值

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

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

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

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

2.6.5.1、短路運(yùn)算(邏輯中斷)

短路運(yùn)算的原理：當(dāng)有多個(gè)表達(dá)式（值）時(shí),左邊的表達(dá)式值可以確定結(jié)果時(shí),就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值

①邏輯與

• 語法：表達(dá)式1 && 表達(dá)式2
• 如果第一個(gè)表達(dá)式的值為真，則返回表達(dá)式2
• 如果第一個(gè)表達(dá)式的值為假，則返回表達(dá)式1

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

②邏輯或

• 語法：表達(dá)式1 || 表達(dá)式2
• 如果第一個(gè)表達(dá)式的值為真，則返回表達(dá)式1
• 如果第一個(gè)表達(dá)式的值為假，則返回表達(dá)式2

console.log(123 || 456); //123
console.log(0 || 456);   //456
console.log(123 || 456 || 789);  //123
var num = 0;
console.log(123 || num++);
// 先返回在加，相當(dāng)于 (123 || 0)
console.log(num);    // 123

2.6.6、賦值運(yùn)算符

概念：用來把數(shù)據(jù)賦值給變量的運(yùn)算符。

var age = 10;
age += 5;  // 相當(dāng)于 age = age + 5;
age -= 5;  // 相當(dāng)于 age = age - 5;
age *= 10; // 相當(dāng)于 age = age * 10;

2.6.7、運(yùn)算符優(yōu)先級

1.一元運(yùn)算符里面的邏輯非優(yōu)先級很高

2.邏輯與 比 邏輯或 優(yōu)先級高

3.練習(xí)題

console.log( 4 >= 6 || '人' != '阿凡達(dá)' && !(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、流程控制

流程控制主要有三種結(jié)構(gòu)，分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)代表三種代碼執(zhí)行的順序

2.7.1、分支結(jié)構(gòu)

JS 語言提供了兩種分支結(jié)構(gòu)語句：JS 語句 switch語句

①if語句

// 條件成立執(zhí)行代碼，否則什么也不做
if (條件表達(dá)式) {
    //條件成立執(zhí)行的代碼語句
}

案例：進(jìn)入網(wǎng)吧

彈出一個(gè)輸入框，要求用戶輸入年齡，如果年齡大于等于 18 歲，允許進(jìn)網(wǎng)吧

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

②if else 語句

// 條件成立，執(zhí)行if里面代碼，否則執(zhí)行else里面的代碼
if(條件表達(dá)式)
{
    //[如果]條件成立執(zhí)行的代碼
}
else
    {
        //[否則]執(zhí)行的代碼
    }

案例：判斷閏年

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

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

var year = prompt('請輸入年份');
if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0)
{
   alert('這個(gè)年份是閏年');
}
else
{
  alert('這個(gè)年份是平年');
}

③if else if 語句

if(條件表達(dá)式1)
{
  語句1;
}
else if(條件表達(dá)式2)
{
   語句2;
}
else if(條件表達(dá)式3)
{
  語句3;
}
else
{
   //上述條件都不成立執(zhí)行此處代碼
}

案例:接收用戶輸入的分?jǐn)?shù)，根據(jù)分?jǐn)?shù)輸出對應(yīng)的等級字母 A、B、C、D、E

其中：

1. 90分(含)以上 ，輸出：A
2. 80分(含)~ 90 分(不含)，輸出：B
3. 70分(含)~ 80 分(不含)，輸出：C
4. 60分(含)~ 70 分(不含)，輸出：D
5. 60分(不含) 以下，輸出： E

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

2.7.2、三元表達(dá)式

• 語法結(jié)構(gòu) : 表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3
• 執(zhí)行思路

如果表達(dá)式1為true，則返回表達(dá)式2的值,如果表達(dá)式1為false，則返回表達(dá)式3的值

案例：數(shù)字補(bǔ)0
用戶輸入數(shù)字，如果數(shù)字小于10，則在前面補(bǔ)0，比如01，09，

如果數(shù)字大于10，則不需要補(bǔ)，比如20

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

2.7.3、switch

switch(表達(dá)式){
    case value1:
     //表達(dá)式等于 value1 時(shí)要執(zhí)行的代碼
     break;
  case value2:
     //表達(dá)式等于value2 時(shí)要執(zhí)行的代碼
     break;
  default:
     //表達(dá)式不等于任何一個(gè)value時(shí)要執(zhí)行的代碼
        
}

• switch ：開關(guān) 轉(zhuǎn)換 ， case ：小例子 選項(xiàng)
• 關(guān)鍵字 switch 后面括號內(nèi)可以是表達(dá)式或值， 通常是一個(gè)變量
• 關(guān)鍵字 case , 后跟一個(gè)選項(xiàng)的表達(dá)式或值，后面跟一個(gè)冒號
• switch 表達(dá)式的值會與結(jié)構(gòu)中的 case 的值做比較
• 如果存在匹配全等(===) ，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行，并在遇到 break 時(shí)停止，整個(gè) switch 語句代碼執(zhí)行結(jié)束
• 如果所有的 case 的值都和表達(dá)式的值不匹配，則執(zhí)行 default 里的代碼
• 執(zhí)行case 里面的語句時(shí)，如果沒有break，則繼續(xù)執(zhí)行下一個(gè)case里面的語句

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

3、斷點(diǎn)調(diào)試

1. 瀏覽器中按 F12–> sources -->找到需要調(diào)試的文件–>在程序的某一行設(shè)置斷點(diǎn)(在行數(shù)點(diǎn)一下)
2. 刷新瀏覽器
3. Watch: 監(jiān)視，通過watch可以監(jiān)視變量的值的變化，非常的常用
4. F11: 程序單步執(zhí)行，讓程序一行一行的執(zhí)行，這個(gè)時(shí)候，觀察watch中變量的值的變化

4、循環(huán)

4.1、for循環(huán)

在程序中，一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句，被稱之為循環(huán)語句

for(初始化變量;條件表達(dá)式;操作表達(dá)式)
{
   //循環(huán)體
}

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

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

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

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

3.求1-100之間所有數(shù)的平均值

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

4.求1-100之間所有偶數(shù)和奇數(shù)的和

//    4.求1-100之間所有偶數(shù)和奇數(shù)的和
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('偶數(shù)和為' + sum1);
console.log('奇數(shù)和為' + sum2);

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

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

6.要求用戶輸入班級人數(shù)，之后依次輸入每個(gè)學(xué)生的成績，最后打印出該班級總的成績以及平均成績。

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

7.一行打印5個(gè)星星

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

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

4.2、雙重for循環(huán)

循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個(gè)for 循環(huán)，這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。

for(外循環(huán)的初始;外循環(huán)的條件;外形循環(huán)的操作表達(dá)式){
  for(內(nèi)循環(huán)的初始;內(nèi)循環(huán)的條件;內(nèi)循環(huán)的操作表達(dá)式){
        需執(zhí)行的代碼;
    }
}

• 內(nèi)層循環(huán)可以看做外層循環(huán)的語句
• 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序
• 外層循環(huán)執(zhí)行一次，內(nèi)層循環(huán)要執(zhí)行全部次數(shù)

①打印五行五列星星

核心：

• 內(nèi)層循環(huán)負(fù)責(zé)一行打印五個(gè)星星
• 外層循環(huán)負(fù)責(zé)打印五行

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

②打印n行n列的星星

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

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

③打印倒三角形

• 一共有10行，但是每行的星星個(gè)數(shù)不一樣，因此需要用到雙重 for 循環(huán)
• 外層的 for 控制行數(shù) i ，循環(huán)10次可以打印10行
• 內(nèi)層的 for 控制每行的星星個(gè)數(shù) j
• 核心算法： 每一行星星的個(gè)數(shù)： j = i ; j <= 10; j++
• 每行打印完畢后，都需要重新?lián)Q一行

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

4.3、while循環(huán)

while(條件表達(dá)式){
  //循環(huán)體代碼
}

執(zhí)行思路：

• 先執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼
• 執(zhí)行循環(huán)體代碼
• 循環(huán)體代碼執(zhí)行完畢后，程序會繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時(shí)，整個(gè)循環(huán)過程才會結(jié)束

注意：

• 使用 while 循環(huán)時(shí)一定要注意，它必須要有退出條件，否則會稱為死循環(huán)
• while 循環(huán)和 for 循環(huán)的不同之處在于 while 循環(huán)可以做較為復(fù)雜的條件判斷，比如判斷用戶名和密碼

①打印人的一生

從1歲到99歲

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

②計(jì)算 1 ~ 100 之間所有整數(shù)的和

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

4.4、do while循環(huán)

do {
  //循環(huán)體代碼-條件表達(dá)式為true的時(shí)候重復(fù)執(zhí)行循環(huán)一代碼
}while(條件表達(dá)式);

執(zhí)行思路：

1. 先執(zhí)行一次循環(huán)體代碼
2. 再執(zhí)行表達(dá)式，如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為false，則退出循環(huán)，繼續(xù)執(zhí)行后面的代碼
3. 先執(zhí)行再判斷循環(huán)體，所以dowhile循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼

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

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

4.5、continue 關(guān)鍵字

continue 關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次）。

例如，吃5個(gè)包子，第3個(gè)有蟲子，就扔掉第3個(gè)，繼續(xù)吃第4個(gè)第5個(gè)包子

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

4.6、break關(guān)鍵字

break 關(guān)鍵字用于立即跳出整個(gè)循環(huán)

例如，吃5個(gè)包子，吃到第3個(gè)發(fā)現(xiàn)里面有半個(gè)蟲子，其余的也不吃了

for (var i = 1; i <= 5; i++) {
  if (i == 3) {
       break; // 直接退出整個(gè)for 循環(huán)，跳到整個(gè)for下面的語句
   }
   console.log('我正在吃第' + i + '個(gè)包子呢');
 }

5、數(shù)組

數(shù)組(Array)是指一組數(shù)據(jù)的集合，其中的每個(gè)數(shù)據(jù)被稱作元素，在數(shù)組中可以存放任意類型的元素。數(shù)組是一種將一組數(shù)據(jù)存儲在單個(gè)變量名下的優(yōu)雅方式。

//普通變量一次只能存儲一個(gè)值
var num = 10;
//數(shù)組一次可以存儲多個(gè)值
var arr =[1,2,3,4,5];

5.1、創(chuàng)建數(shù)組

JavaScript 中創(chuàng)建數(shù)組有兩種方式：

• 利用 new 創(chuàng)建數(shù)組
• 利用數(shù)組字面量創(chuàng)建數(shù)組

①利用 new 創(chuàng)建數(shù)組

var 數(shù)組名 = new Array();
var arr = new Array(); //創(chuàng)建一個(gè)新的空數(shù)組

• 這種方式暫且了解，等學(xué)完對象再看
• 注意 Array()，A要大寫

②利用數(shù)組字面量創(chuàng)建數(shù)組

// 1.利用數(shù)組字面量方式創(chuàng)建空的數(shù)組 
var 數(shù)組名 =[];
// 2.使用數(shù)組字面量方式創(chuàng)建帶初始值的數(shù)組
var 數(shù)組名 =['小白','小黑','小黃','瑞奇'];
// 3.數(shù)組中可以存放任意類型的數(shù)據(jù)，例如字符串，數(shù)字，布爾值等
var arrStus =['小白'，12,true,28.9];

• 數(shù)組的字面量是方括號 []
• 聲明數(shù)組并賦值稱為數(shù)組的初始化
• 這種字面量方式也是我們以后最多使用的方式

5.2、數(shù)組的索引（下標(biāo)）

索引 (下標(biāo)) ：用來訪問數(shù)組元素的序號（數(shù)組下標(biāo)從 0 開始）

//定義數(shù)組
var arrStus = [1,2,3];
//獲取數(shù)組中的第2個(gè)元素
alert(arrStus[1]);

5.3遍歷數(shù)組

我們可以通過 for 循環(huán)索引遍歷數(shù)組中的每一項(xiàng)

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

// for循環(huán)遍歷數(shù)組
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

5.4、數(shù)組的長度

使用“數(shù)組名.length”可以訪問數(shù)組元素的數(shù)量（數(shù)組長度）

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

注意：

• 此處數(shù)組的長度是數(shù)組元素的個(gè)數(shù) ，不要和數(shù)組的索引號混淆
• 當(dāng)我們數(shù)組里面的元素個(gè)數(shù)發(fā)生了變化，這個(gè) length 屬性跟著一起變化

5.5、案例

1.請將 [“關(guān)羽”,“張飛”,“馬超”,“趙云”,“黃忠”,“劉備”,“姜維”]; 數(shù)組里的元素依次打印到控制臺

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

2.求數(shù)組 [2,6,1,7, 4] 里面所有元素的和以及平均值

• ①聲明一個(gè)求和變量 sum。
• ①遍歷這個(gè)數(shù)組，把里面每個(gè)數(shù)組元素加到 sum 里面。
• ①用求和變量 sum 除以數(shù)組的長度就可以得到數(shù)組的平均值。

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; //此時(shí)i為5
//      average = sum / arr.length;
console.log('和為' + sum);
console.log('平均值為' + average);

3.求數(shù)組[2,6,1,77,52,25,7]中的最大值

• ①聲明一個(gè)保存最大元素的變量 max。
• ②默認(rèn)最大值可以取數(shù)組中的第一個(gè)元素。
• ③遍歷這個(gè)數(shù)組，把里面每個(gè)數(shù)組元素和 max 相比較。
• ④如果這個(gè)數(shù)組元素大于max 就把這個(gè)數(shù)組元素存到 max 里面，否則繼續(xù)下一輪比較。
• ⑤最后輸出這個(gè) 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]; // 用來保存最大元素,默認(rèn)最大值是數(shù)組中的第一個(gè)元素
// 從0 開始循環(huán)數(shù)組里的每個(gè)元素
for(var i = 0;i< arrNum.length; i++){
    // 如果數(shù)組里當(dāng)前循環(huán)的元素大于 maxNum，則保存這個(gè)元素和下標(biāo)
    if(arrNum[i] > maxNum){
        maxNum = arrNum[i]; // 保存數(shù)值到變量 maxNum
    }
}

4.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素轉(zhuǎn)換為字符串

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

• ①需要一個(gè)新變量 str 用于存放轉(zhuǎn)換完的字符串。
• ②遍歷原來的數(shù)組，分別把里面數(shù)據(jù)取出來，加到字符串變量 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.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 轉(zhuǎn)換為字符串，并且用 | 或其他符號分割

• ①需要一個(gè)新變量用于存放轉(zhuǎn)換完的字符串 str。
• ①遍歷原來的數(shù)組，分別把里面數(shù)據(jù)取出來，加到字符串里面。
• ①同時(shí)在后面多加一個(gè)分隔符。

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、數(shù)組中新增元素

①通過修改 length 長度新增數(shù)組元素

• 可以通過修改 length 長度來實(shí)現(xiàn)數(shù)組擴(kuò)容的目的
• 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 的空間沒有給值，就是聲明變量未給值，默認(rèn)值就是 undefined

②通過修改數(shù)組索引新增數(shù)組元素

• 可以通過修改數(shù)組索引的方式追加數(shù)組元素
• 不能直接給數(shù)組名賦值，否則會覆蓋掉以前的數(shù)據(jù)
• 這種方式也是我們最常用的一種方式

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

5.7、數(shù)組中新增元素

1.新建一個(gè)數(shù)組，里面存放10個(gè)整數(shù)（ 1~10）， 要求使用循環(huán)追加的方式輸出： [1,2,3,4,5,6,7,8,9,10]

• ①使用循環(huán)來追加數(shù)組。
• ②聲明一個(gè)空數(shù)組 arr。
• ③循環(huán)中的計(jì)數(shù)器 i 可以作為數(shù)組元素存入。
• 由于數(shù)組的索引號是從0開始的， 因此計(jì)數(shù)器從 0 開始更合適，存入的數(shù)組元素要+1。

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

2.將數(shù)組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素選出來，放入新數(shù)組

• ①聲明一個(gè)新的數(shù)組用于存放新數(shù)據(jù)。
• ②遍歷原來的數(shù)組，找出大于等于 10 的元素。
• ③依次追加給新數(shù)組 newArr。

實(shí)現(xiàn)代碼1：

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

實(shí)現(xiàn)代碼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) {
        // 給新數(shù)組
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

5.8、刪除指定數(shù)組元素

將數(shù)組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一個(gè)不包含 0 的新數(shù)組。

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 = [];   // 空數(shù)組的默認(rèn)的長度為 0 
// 定義一個(gè)變量 i 用來計(jì)算新數(shù)組的索引號
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的數(shù)
    if (arr[i] != 0) {
        // 給新數(shù)組
        // 每次存入一個(gè)值，newArr長度都會 +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

5.9、翻轉(zhuǎn)數(shù)組

將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內(nèi)容反過來存放

// 把舊數(shù)組索引號的第4個(gè)取過來(arr.length - 1),給新數(shù)組索引號第0個(gè)元素(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、數(shù)組排序

冒泡排序

將數(shù)組 [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++){ //外層循環(huán)管趟數(shù)，5個(gè)數(shù)共交換4躺
    for (var j = 0; j <= arr.length - i - 1; j++){
        //里層循環(huán)管每一趟交換的次數(shù)
        //前一個(gè)和后面一個(gè)數(shù)組元素相比較
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }  
    }
}
console.log(arr);

匯總結(jié)束，希望對各位朋友有幫助，覺得還不錯(cuò)的給個(gè)點(diǎn)贊支撐支撐

define([ '/lib/util.js', //絕對路徑
'./modal/modal.js', //相對路徑
'./modal/modal.html',//文本文件], function(Util, Modal, tpl) { /*
 * 模塊邏輯
 */
return Module;
})

var a = document.createElement('a');
a.id = '_defineAbsoluteUrl_';
a.style.display = 'none';document.body.appendChild(a);function getModuleAbsoluteUrl(path) {
a.href = path; return a.href;
}function parseAbsoluteUrl(url, parentDir) { var relativePrefix = '.',
parentPrefix = '..',
result; if (parentDir && url.indexOf(relativePrefix) === 0) { // 以'./'開頭的相對路徑
return getModuleAbsoluteUrl(parentDir.replace(/[^\/]*$/, '') + url);
} if (parentDir && url.indexOf(parentPrefix) === 0) { // 以'../'開頭的相對路徑
return getModuleAbsoluteUrl(parentDir.replace(/[\/]*$/, '').replace(/[\/]$/, '').replace(/[^\/]*$/, '') + url);
} return getModuleAbsoluteUrl(url);
}

var head = document.getElementsByTagName('head')[0] || document.body;

function loadJsModule(url) { 
 var script = document.createElement('script');
script.charset = 'utf-8';
script.type = 'text/javascript';
script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { /*
 * 加載邏輯, callback為define的回調(diào)函數(shù), args為所有依賴模塊的數(shù)組
 * callback.apply(window, args);
 */
script.onload = script.onreadystatechange = null;
} 
};
}

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'),
textContent = '';
xhr.onreadystatechange = function(){ var DONE = 4, OK = 200; if(xhr.readyState === DONE){ if(xhr.status === OK){
textContent = xhr.responseText; // 返回的文本文件
} else{ console.log("Error: "+ xhr.status); // 加載失敗
}
}
}
xhr.open('GET', url, true);// url為文本文件的絕對路徑xhr.send(null);

//強(qiáng)依賴的例子
//A模塊
define(['b.js'], function(B) { 
 // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊
B.demo = 1; // 其他邏輯});//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊
A.demo = 1; // 其他邏輯});

// 弱依賴的例子
// A模塊
define(['b.js'], function(B) { 
 // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊
function test() {
B.demo = 1;
} return {testFunc: test}
});//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊
function test() {
A.demo = 1;
} return {testFunc: test}
});

var handledScriptList = [];
window.define = function(deps, callback) { var scripts = document.getElementsByTagName('script'),
defineReg = /s*define\s*\(\[.*\]\s*\,\s*function\s*\(.*\)\s*\{/,
script; for (var i = scripts.length - 1; i >= 0; i--) {
script = list[i]; if (handledScriptList.indexOf(script.src) < 0) {
handledScriptList.push(script.src); if (script.innerHTML.search(defineReg) >= 0) { // 內(nèi)斂腳本直接進(jìn)行模塊依賴檢查。
} else { // 外聯(lián)腳本的首先要監(jiān)聽腳本加載
}
}
}
};

OM

• 今天開始我們開始使用 js 去操作瀏覽器和頁面中的 html 元素了

BOM

• BOM（Browser Object Model）： 瀏覽器對象模型
• 其實(shí)就是操作瀏覽器的一些能力
• 我們可以操作哪些內(nèi)容
• 獲取一些瀏覽器的相關(guān)信息（窗口的大小）
• 操作瀏覽器進(jìn)行頁面跳轉(zhuǎn)
• 獲取當(dāng)前瀏覽器地址欄的信息
• 操作瀏覽器的滾動條
• 瀏覽器的信息（瀏覽器的版本）
• 讓瀏覽器出現(xiàn)一個(gè)彈出框（alert/confirm/prompt）
• BOM 的核心就是 window 對象
• window 是瀏覽器內(nèi)置的一個(gè)對象，里面包含著操作瀏覽器的方法

獲取瀏覽器窗口的尺寸

• innerHeight 和 innerWidth
• 這兩個(gè)方法分別是用來獲取瀏覽器窗口的寬度和高度（包含滾動條的）

var windowHeight = window.innerHeight
console.log(windowHeight)
?
var windowWidth = window.innerWidth
console.log(windowWidth)

瀏覽器的彈出層

• alert 是在瀏覽器彈出一個(gè)提示框

window.alert('我是一個(gè)提示框')

• 這個(gè)彈出層只是一個(gè)提示內(nèi)容，只有一個(gè)確定按鈕
• 點(diǎn)擊確定按鈕以后，這個(gè)提示框就消失了

• confirm 是在瀏覽器彈出一個(gè)詢問框

var boo = window.confirm('我是一個(gè)詢問框')
console.log(boo)

• 這個(gè)彈出層有一個(gè)詢問信息和兩個(gè)按鈕
• 當(dāng)你點(diǎn)擊確定的時(shí)候，就會得到 true
• 當(dāng)你點(diǎn)擊取消的時(shí)候，就會得到 false

• prompt 是在瀏覽器彈出一個(gè)輸入框

var str = window.prompt('請輸入內(nèi)容')
console.log(str)

• 這個(gè)彈出層有一個(gè)輸入框和兩個(gè)按鈕
• 當(dāng)你點(diǎn)擊取消的時(shí)候，得到的是 null
• 當(dāng)你點(diǎn)擊確定的時(shí)候得到的就是你輸入的內(nèi)容

瀏覽器的地址信息

• 在 window 中有一個(gè)對象叫做 location
• 就是專門用來存儲瀏覽器的地址欄內(nèi)的信息的

location.href

• location.href 這個(gè)屬性存儲的是瀏覽器地址欄內(nèi) url 地址的信息

console.log(window.location.href)

• 會把中文編程 url 編碼的格式
• location.href 這個(gè)屬性也可以給他賦值

window.location.href = './index.html'
// 這個(gè)就會跳轉(zhuǎn)頁面到后面你給的那個(gè)地址

location.reload

• location.reload() 這個(gè)方法會重新加載一遍頁面，就相當(dāng)于刷新是一個(gè)道理

window.location.reload()

• 注意： 不要寫在全局，不然瀏覽器就會一直處在刷新狀態(tài)

瀏覽器的歷史記錄

• window 中有一個(gè)對象叫做 history
• 是專門用來存儲歷史記錄信息的

history.back

• history.back 是用來會退歷史記錄的，就是回到前一個(gè)頁面，就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.back()
• 前提是你要有上一條記錄，不然就是一直在這個(gè)頁面，也不會回退

history.forword

• history.forword 是去到下一個(gè)歷史記錄里面，也就是去到下一個(gè)頁面，就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.forward()
• 前提是你要之前有過回退操作，不然的話你現(xiàn)在就是最后一個(gè)頁面，沒有下一個(gè)

瀏覽器的版本信息（了解）

• window 中有一個(gè)對象叫做 navigator
• 是專門用來獲取瀏覽器信息的

navigator.userAgent

• navigator.userAgent 是獲取的瀏覽器的整體信息

console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

navigator.appName

• navigator.appName 獲取的是瀏覽器的名稱

console.log(window.navigator.appName)

navigator.appVersion

• navigator.appVersion 獲取的是瀏覽器的版本號

console.log(window.navigator.appVersion)

navigator.platform

• navigator.platform 獲取到的是當(dāng)前計(jì)算機(jī)的操作系統(tǒng)

console.log(window.navigator.platform)

瀏覽器的 onload 事件

• 這個(gè)不再是對象了，而是一個(gè)事件
• 是在頁面所有資源加載完畢后執(zhí)行的

window.onload = function () {
    console.log('頁面已經(jīng)加載完畢')
}

在 html 頁面中把 js 寫在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 還沒有加載
      // 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
      
      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 頁面中把 js 寫在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 已經(jīng)加載完畢了
      // 在這里就可以獲取到 div，寫不寫 window.onload 就無所謂了
      
      window.onload = function () {
        // 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </body>
</html>

瀏覽器的 onscroll 事件

• 這個(gè) onscroll 事件是當(dāng)瀏覽器的滾動條滾動的時(shí)候觸發(fā)
• 或者鼠標(biāo)滾輪滾動的時(shí)候出發(fā)

window.onscroll = function () {
 console.log('瀏覽器滾動了')
}

• 注意：前提是頁面的高度要超過瀏覽器的可視窗口才可以

瀏覽器滾動的距離

• 瀏覽器內(nèi)的內(nèi)容既然可以滾動，那么我們就可以獲取到瀏覽器滾動的距離
• 思考一個(gè)問題？
• 瀏覽器真的滾動了嗎？
• 其實(shí)我們的瀏覽器是沒有滾動的，是一直在那里
• 滾動的是什么？是我們的頁面
• 所以說，其實(shí)瀏覽器沒有動，只不過是頁面向上走了
• 所以，這個(gè)已經(jīng)不能單純的算是瀏覽器的內(nèi)容了，而是我們頁面的內(nèi)容
• 所以不是在用 window 對象了，而是使用 document 對象

scrollTop

• 獲取的是頁面向上滾動的距離
• 一共有兩個(gè)獲取方式
• document.body.scrollTop
• document.documentElement.scrollTop

window.onscroll = function () {
 console.log(document.body.scrollTop)
 console.log(document.documentElement.scrollTop)
}

• 兩個(gè)都是獲取頁面向上滾動的距離
• 區(qū)別：
• IE 瀏覽器
• 沒有 DOCTYPE 聲明的時(shí)候，用這兩個(gè)都行
• 有 DOCTYPE 聲明的時(shí)候，只能用 document.documentElement.scrollTop
• Chrome 和 FireFox
• 沒有 DOCTYPE 聲明的時(shí)候，用 document.body.scrollTop
• 有 DOCTYPE 聲明的時(shí)候，用 document.documentElement.scrollTop
• Safari
• 兩個(gè)都不用，使用一個(gè)單獨(dú)的方法 window.pageYOffset

scrollLeft

• 獲取頁面向左滾動的距離
• 也是兩個(gè)方法
• document.body.scrollLeft
• document.documentElementLeft

window.onscroll = function () {
 console.log(document.body.scrollLeft)
 console.log(document.documentElement.scrollLeft)
}

• 兩個(gè)之間的區(qū)別和之前的 scrollTop 一樣

定時(shí)器

• 在 js 里面，有兩種定時(shí)器，倒計(jì)時(shí)定時(shí)器 和 間隔定時(shí)器

倒計(jì)時(shí)定時(shí)器

• 倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)
• 語法： setTimeout(要執(zhí)行的函數(shù)，多長時(shí)間以后執(zhí)行)
• 會在你設(shè)定的時(shí)間以后，執(zhí)行函數(shù)

var timerId = setTimeout(function () {
 console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1

• 時(shí)間是按照毫秒進(jìn)行計(jì)算的，1000 毫秒就是 1秒鐘
• 所以會在頁面打開 1 秒鐘以后執(zhí)行函數(shù)
• 只執(zhí)行一次，就不再執(zhí)行了
• 返回值是，當(dāng)前這個(gè)定時(shí)器是頁面中的第幾個(gè)定時(shí)器

間隔定時(shí)器

• 每間隔多少時(shí)間就執(zhí)行一次函數(shù)
• 語法： setInterval(要執(zhí)行的函數(shù)，間隔多少時(shí)間)

var timerId = setInterval(function () {
 console.log('我執(zhí)行了')
}, 1000)

• 時(shí)間和剛才一樣，是按照毫秒進(jìn)行計(jì)算的
• 每間隔 1 秒鐘執(zhí)行一次函數(shù)
• 只要不關(guān)閉，會一直執(zhí)行
• 返回值是，當(dāng)前這個(gè)定時(shí)器是頁面中的第幾個(gè)定時(shí)器

定時(shí)器的返回值

• 設(shè)置定時(shí)器的時(shí)候，它的返回值是部分 setTimeout 和 setInterval 的
• 只要有一個(gè)定時(shí)器，那么就是一個(gè)數(shù)字

var timerId = setTimeout(function () {
 console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
?
var timerId2 = setInterval(function () {
 console.log('間隔定時(shí)器')
}, 1000)
?
console.log(timerId) // 1
console.log(timerId2) // 2

關(guān)閉定時(shí)器

• 我們剛才提到過一個(gè) timerId，是表示這個(gè)定時(shí)器是頁面上的第幾個(gè)定時(shí)器
• 這個(gè) timerId 就是用來關(guān)閉定時(shí)器的數(shù)字
• 我們有兩個(gè)方法來關(guān)閉定時(shí)器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {
 console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
clearTimeout(timerId)

• 關(guān)閉以后，定時(shí)器就不會再執(zhí)行了

var timerId2 = setInterval(function () {
 console.log('間隔定時(shí)器')
}, 1000)
coearInterval(timerId2)

• 關(guān)閉以后定時(shí)器就不會再執(zhí)行了
• 原則上是
• clearTimeout 關(guān)閉 setTimeout
• clearInterval 關(guān)閉 setInterval
• 但是其實(shí)是可以通用的，他們可以混著使用