JavaScript基礎大總結

初識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);

匯總結束，希望對各位朋友有幫助，覺得還不錯的給個點贊支撐支撐

前，一個典型的前端項目技術框架的選型主要包括以下三個方面：

JS模塊化框架。(Require/Sea/ES6 Module/NEJ)
前端模板框架。(React/Vue/Regular)
狀態管理框架。(Flux/Redux)
系列文章將從上面三個方面來介紹相關原理，并且嘗試自己造一個簡單的輪子。

本篇介紹的是 JS模塊化 。

JS模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為CommonJS、AMD和CMD。有關三者的區別，大家基本都多少有所了解，而且資料很多，這里就不再贅述。

模塊化的核心思想：

拆分。將js代碼按功能邏輯拆分成多個可復用的js代碼文件（模塊）。
加載。如何將模塊進行加載執行和輸出。
注入。能夠將一個js模塊的輸出注入到另一個js模塊中。
依賴管理 。前端工程模塊數量眾多，需要來管理模塊之間的依賴關系。

根據上面的核心思想，可以看出要設計一個模塊化工具框架的關鍵問題有兩個：一個是如何將一個模塊執行并可以將結果輸出注入到另一個模塊中；另一個是，在大型項目中模塊之間的依賴關系很復雜，如何使模塊按正確的依賴順序進行注入，這就是依賴管理。

下面以具體的例子來實現一個簡單的 基于瀏覽器端 的 AMD 模塊化框架（類似NEJ）,對外暴露一個define函數，在回調函數中注入依賴，并返回模塊輸出。要實現的如下面代碼所示。

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

1. 模塊如何加載和執行

先不考慮一個模塊的依賴如何處理。假設一個模塊的依賴已經注入，那么如何加載和執行該模塊，并輸出呢？

在瀏覽器端，我們可以借助瀏覽器的 script 標簽來實現 JS模塊文件 的引入和執行，對于 文本模塊文件 則可以直接利用 ajax 請求實現。

具體步驟如下：

第一步，獲取 模塊文件的絕對路徑 。
要在瀏覽器內加載文件，首先要獲得對應模塊文件的完整網絡絕對地址。由于 a標簽 的href屬性總是會返回絕對路徑，也就是說它具有把相對路徑轉成絕對路徑的能力，所以這里可以利用該特性來獲取模塊的絕對網絡路徑。需要指出的是，對于使用相對路徑的依賴模塊文件，還需要遞歸先獲取當前模塊的網絡絕對地址，然后和相對路徑拼接成完整的絕對地址。代碼如下：

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);
}

第二步， 加載和執行模塊文件 。

對于JS文件，利用 script 標簽實現。代碼如下：

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的回調函數, args為所有依賴模塊的數組
 * callback.apply(window, args);
 */
script.onload = script.onreadystatechange = null;
} 
};
}

對于文本文件，直接用 ajax 實現。代碼如下：

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);

2. 模塊依賴管理

一個模塊的加載過程如下圖所示。

狀態管理
從上面可以看出，一個模塊的加載可能存在以下幾種可能的狀態。

加載(load)狀態，包括未加載(preload)狀態、加載(loading)狀態和加載完畢(loaded)狀態。
正在加載依賴(pending)狀態。
模塊回調完成(finished)狀態。
因此，需要為每個加載的模塊加上狀態標志(status)，來識別目前模塊的狀態。

依賴分析
在模塊加載后，我們需要解析出每個模塊的絕對路徑(path)、依賴模塊(deps)和回調函數(callback)，然后也放在模塊信息中。模塊對象管理邏輯的數據模型如下所示。
```
{
path: 'http://asdas/asda/a.js',
deps: [{}, {}, {}],
callback: function(){ },
status: 'pending'
}
```
依賴循環
模塊很可能出現循環依賴的情況。也就是a模塊和b模塊相互依賴。依賴分為 強依賴 和 弱依賴。 強依賴 是指，在模塊回調執行時就會使用到的依賴；反之，就是 弱依賴 。對于 強依賴，會造成死鎖，這種情況是無法解決的。但 弱依賴 可以通過現將一個空的模塊引用注入讓一個模塊先執行，等依賴模塊執行完后，再替換掉就可以了。 強依賴 和 弱依賴 的例子如下：

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

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

3. 對外暴露define方法

對于define函數，需要遍歷所有的未處理js腳本(包括內聯和外聯 )，然后執行模塊的加載。這里對于內聯和外聯腳本中的define，要做分別處理。主要原因有兩點：

內斂腳本不需要加載操作。
內斂腳本中define的模塊的回調輸出是不能作為其他模塊的依賴的。

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) { // 內斂腳本直接進行模塊依賴檢查。
} else { // 外聯腳本的首先要監聽腳本加載
}
}
}
};

上面就是對實現一個模塊化工具所涉及核心問題的描述。

OM

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

BOM

BOM（Browser Object Model）：瀏覽器對象模型
其實就是操作瀏覽器的一些能力
我們可以操作哪些內容
獲取一些瀏覽器的相關信息（窗口的大?。?/li>
操作瀏覽器進行頁面跳轉
獲取當前瀏覽器地址欄的信息
操作瀏覽器的滾動條
瀏覽器的信息（瀏覽器的版本）
讓瀏覽器出現一個彈出框（alert/confirm/prompt）
BOM 的核心就是 window 對象
window 是瀏覽器內置的一個對象，里面包含著操作瀏覽器的方法

獲取瀏覽器窗口的尺寸

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

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

瀏覽器的彈出層

alert 是在瀏覽器彈出一個提示框

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

這個彈出層只是一個提示內容，只有一個確定按鈕
點擊確定按鈕以后，這個提示框就消失了

confirm 是在瀏覽器彈出一個詢問框

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

這個彈出層有一個詢問信息和兩個按鈕
當你點擊確定的時候，就會得到 true
當你點擊取消的時候，就會得到 false

prompt 是在瀏覽器彈出一個輸入框

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

這個彈出層有一個輸入框和兩個按鈕
當你點擊取消的時候，得到的是 null
當你點擊確定的時候得到的就是你輸入的內容

瀏覽器的地址信息

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

location.href

location.href 這個屬性存儲的是瀏覽器地址欄內 url 地址的信息

console.log(window.location.href)

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

window.location.href = './index.html'
// 這個就會跳轉頁面到后面你給的那個地址

location.reload

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

window.location.reload()

注意： 不要寫在全局，不然瀏覽器就會一直處在刷新狀態

瀏覽器的歷史記錄

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

history.back

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

history.forword

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

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

window 中有一個對象叫做 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 獲取到的是當前計算機的操作系統

console.log(window.navigator.platform)

瀏覽器的 onload 事件

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

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

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

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

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

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

瀏覽器的 onscroll 事件

這個 onscroll 事件是當瀏覽器的滾動條滾動的時候觸發
或者鼠標滾輪滾動的時候出發

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

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

瀏覽器滾動的距離

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

scrollTop

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

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

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

scrollLeft

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

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

兩個之間的區別和之前的 scrollTop 一樣

定時器

在 js 里面，有兩種定時器，倒計時定時器 和 間隔定時器

倒計時定時器

倒計時多少時間以后執行函數
語法： setTimeout(要執行的函數，多長時間以后執行)
會在你設定的時間以后，執行函數

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

時間是按照毫秒進行計算的，1000 毫秒就是 1秒鐘
所以會在頁面打開 1 秒鐘以后執行函數
只執行一次，就不再執行了
返回值是，當前這個定時器是頁面中的第幾個定時器

間隔定時器

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

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

時間和剛才一樣，是按照毫秒進行計算的
每間隔 1 秒鐘執行一次函數
只要不關閉，會一直執行
返回值是，當前這個定時器是頁面中的第幾個定時器

定時器的返回值

設置定時器的時候，它的返回值是部分 setTimeout 和 setInterval 的
只要有一個定時器，那么就是一個數字

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

關閉定時器

我們剛才提到過一個 timerId，是表示這個定時器是頁面上的第幾個定時器
這個 timerId 就是用來關閉定時器的數字
我們有兩個方法來關閉定時器 clearTimeout 和 clearInterval

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

關閉以后，定時器就不會再執行了

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

關閉以后定時器就不會再執行了
原則上是
clearTimeout 關閉 setTimeout
clearInterval 關閉 setInterval
但是其實是可以通用的，他們可以混著使用

在線咨詢

上一篇：Java 將HTML轉為XML
下一篇：案例復盤：QQ紅包的趣味新玩法是怎么設計的？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商