JavaScript入門乾貨

1. Js概述

JavaScript是⼀種弱類型腳本語⾔，都是使⽤ var 定義變量，在js中沒有類的概念，只有對象，所以要掌握js的幾大內置對象；

1. js的引用方式

內部方式

head標籤體中引入script標籤

JS的表單驗證是重點！！⭐

2. JS的由來（爲什麼需要JS）

在1994年還沒有JavaScript的時候，網絡寬帶只有7到10kb，這種網速下執行上面的操作是很費時的；

而之後，出現了一家公司：網景公司，開發了一款瀏覽器叫做領航者瀏覽器，這個瀏覽器植入了livescript，這個就是JavaScript的前身；
這個出現解決了如下問題：

解決了用戶體驗問題；
減輕了服務器壓力；
在瀏覽器端通過js引擎來進行內部校驗，如果用戶信息都符合正則表達式，整個用戶信息才能被提交到後臺；

由於公司的紛爭，由livescript衍生出JavaScript（一般瀏覽器所用）和Jscript（微軟IE瀏覽器所用），但這兩種其實基本差不多，它們的特性如下：

基礎語法：變量、數據類型、函數定義、內置對象等都是差不多的；
BOM編程：基於瀏覽器對象模型編程；
- 瞭解四個對象
DOM編程：（重點⭐⭐）
- Document Object Model：基於文檔對象模型編程
- 具體應用場景：
  - 定時彈出廣告
  - 輪播圖（也要用到定時器）
  - 省市聯動

3. BOM和DOM編程

Js中分爲兩種編程模式：

BOM（基於瀏覽器對象模型編程）
DOM（重點）

1. BOM編程（瞭解即可）

BOM編程需要了解如下四個對象：

js引擎在解析html頁面的時候，將html頁面主要分爲以下四個對象：

窗口對象：window ，所有BOM編程的頂級對象
- 如打開資源文件的方法：open（）；
- 定時器相關的方法；
- 和彈框相關的方法： ⭐
  - alert（“消息對話框”）：彈出的框框只有確定按鈕
  - confirm（”確認提示框“）：彈出的框框有確定和取消兩種按鈕
  - prompt（”輸入提示“）：彈出的框框有個文本輸入框，可以進行文本輸入，下面有個確認按鈕；
地址欄對象：location
- href屬性：更改頁面地址（頁面跳轉）
歷史記錄對象：history
屏幕對象：screen

1. Js基礎語法

1. JS基礎語法和數據類型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var a = 10;
			var a = 20;
			document.write("a的值爲："+ a +"&nbsp;&nbsp;&nbsp;數據類型爲："+typeof(a)+"<br/>");
		</script>
	</head>
	<body>
	</body>
</html>

運行會在頁面上輸出：a的值爲：20 數據類型爲：number

在js中，用var來定義任何類型；
使用var定義變量，同一個變量可以定義多次，後面的會覆蓋前面的，這是js是一個弱類型語言的一個體現；
輸出語句：document.write（）；
查看數據類型的函數：typeof（）；

js中數據類型的分類：

number類型
- 無論是整數還是小數，number類型在瀏覽器中都會被默認轉換爲Number（js內置對象） ；
- 在JavaScript中，一切皆對象，例如：var a = 10，在底層對應的就是：var a = new Number（10）；
string 類型
- 無論是字符還是字符串，在底層都是轉化爲String這個js內置對象；
- 例如：var c = ‘A’等價於：var c = new String（“A”）；
boolean 類型 （不用詳細介紹）
- boolean對應js中的Boolean這個內置對象；
object 類型 （即所有的對象都是這個類型）
- 同樣的，對應Object這個內置對象；

2. js的類型轉換函數

在Java中，可以進行類型的轉換，比如將String類型轉換爲整數對應的就是：parseInt（）這個方法；

同樣的，在js中，也能實現類型的轉換：
（js中還有一個parseFloat（）方法）

		<script>
			var a = "100";
			document.write("a的值爲："+ a +"&nbsp;&nbsp;&nbsp;數據類型爲："+typeof(a)+"<br/>");
			var a = parseInt(a);
			document.write("a的值爲："+ a +"&nbsp;&nbsp;&nbsp;數據類型爲："+typeof(a)+"<br/>");
		</script>

頁面輸出：
a的值爲：100 數據類型爲：string
a的值爲：100 數據類型爲：number

與Java不同的是，如果a中除了數字外還有字母的話，Java會拋出異常，而js中，遇到非數值類型的字符串停止轉換；

3. js中的運算符

這個就無需多講述了，加減乘除而已；
需要注意的是：

js中的true使用1來代替；
js中也能使用三元運算符，跟Java中的使用規則一樣；

4. js中的流程控制語句

（1）：順序結構語句；
（2）：選擇結構語句；
- if、else結構
- switch語句
  - 這裏和Java稍微有一點區別，js裏面case後面的內容可以是常量、變量、表達式，而Java中case後面只能跟常量；
- 循環結構
  - 跟Java裏面的沒啥區別；

5. js中的for - in 語句

js中的for-in語句，類似於java中的增強for循環語句，目的是：

簡化數組和對象屬性的遍歷；

js中的for - in語句格式爲：

for(var 變量名 in 數組對象/自定義對象){
	輸出這個變量即可；
}

可以看到可以是數組對象或者自定義的對象；

下面看一個實操代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js之for-in語句</title>
<script>
	//js中數組--->Array
	var arr = [10,20,30,40] ;
	//普通for循環的方式
	for(var i = 0 ; i < arr.length ; i ++){
		document.write(arr[i]+"&nbsp;&nbsp;")
	}
	//打印一條分割線
	document.write("<hr/>") ;
	//用for -in語句來實現遍歷
	for(var i in arr){
		document.write(arr[i]+"&nbsp;&nbsp;");
	}
	document.write("<hr/>") ;
	//自定義一個Person對象,注意js中方法的形參不能帶類型，否則報錯；⭐⭐
	function Person(name,age){//this代表當前對象的地址在引用
		this.name =name ;
		this.age = age ;
	}
	//創建一個對象
	var p = new Person("Bob",20) ;
	//將Person對象的屬性遍歷出來：for-in :對象名[變量]
	for(var i in p){
		//輸出對象的屬性
		document.write(p[i]+"<br/>") ;
	}
</script>
	</head>
	<body>
	</body>
</html>

網頁輸出：
10 20 30 40

10 20 30 40

Bob

20

2. js內置對象

所謂js內置對象就是js中提供的一些已有對象，它們包含大量的方法來供我們操作；

1. Date對象

作用就是：獲取系統時間年份/月份/時分秒

在Java中，獲取系統時間需要使用Date類；具體操作如下：

在js中，獲取系統時間的具體操作爲：

		<script>
		var data = new Date();
		document.write(data);
		</script>

頁面輸出：
Wed Nov 13 2019 12:06:00 GMT+0800 (中國標準時間)

但這個格式不是我們想要的格式，這時就需要用到Date對象的一些內置方法；

		<script>
		var data = new Date();
		document.write(data.getFullYear() + "年");
		document.write(data.getMonth() + "月");
		document.write(data.getDay() + "日");
		</script>

輸出：
2019年10月3日

類似還有獲取時分秒的方法，這裏就不再詳述；

1. 網頁時鐘的實現

要實現網頁時鐘，我們需要如下步驟：

創建日期對象；
拼接時間字符串；
獲取span標籤對象 id = “spanTip”；
設置span標籤對象innerHTML屬性或者innerText屬性；
設置定時器

具體完整代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>網頁時鐘</title>
<script>
	function genDate(){
		//1. 創建date對象
		var date = new Date() ;
		//2. 拼接時間字符串
		var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
					+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+"-"+date.getMinutes()+"-"+
					date.getSeconds() ;
	
		//3. 獲取span標籤對象
		var spanTip = document.getElementById("span_tip") ;
		//4. 設置span標籤對象的innerHTML屬性
		spanTip.innerHTML = dateStr ;
	}


//定時器:網頁定時器
/**
 * window.setTimeout("任務()",毫秒) ;//經過多少毫秒後執行一次任務
 * window.setInterval("任務()",毫秒);//每經過多少毫秒重複執行任務
 */
window.setInterval("genDate()",1000) ;
</script>
	</head>
	<body>
當前系統時間是：<span id="span_tip"></span>
	</body>
</html>

網頁輸出會輸出對應時間，而且每秒更新一次；

2. String 對象（字符串對象）

3. Array 對象（數組對象）

1. 語法規則

js中數組的特點：

js數組可以存放任意類型的數據；
js中不存在數組越界；

三種定義方式：

arrayObj = new Array（）； ————不指定數組長度

  <script>
  		var arr = new Array();
  		arr[0] = 1;
  		arr[1] = false;
  		arr[2] = "hello";
  		alert(arr.length);
  		for(var i=0; i<arr.length; i++) {
  			document.write(arr[i]+"<br/>");
  		}
  		</script>


> **網頁輸出：** 
> 先彈出一個提示框，內容爲：3
> 然後輸出那三個內容；

arrayObj = new Array（[size]） ————指定數組長度
- 這種方式下，就算下標越界，也不存在錯誤，在js中，是不存在數組越界這種情況的；

arrayObj = new Array（[element0[, element1[…]]]）； ————最常用⭐

  <script>
  		var arr = [1,"hello",false,new Object()];
  		for(var i=0; i<arr.length; i++) {
  			document.write(arr[i]+"<br/>");
  		}
  		</script>


> **輸出：** 
> 1 
> hello 
> false 
> [object Object]

2. 常用內置函數

join（）函數：拼接字符串；

		<script>
		var arr = ["php","C++", "java", "python"];
		var str = arr.join("、");
		document.write(str);
		</script>

輸出：
php、C++、java、python

reverse（）函數：反轉數組中的元素；

4. 其他內置對象

js中還有一些其他的內置對象：如Math、

5. Js的原型屬性：prototype

作用是：爲內置對象追加自己定義的方法；

（此時就需要使用js的原型屬性來解決這個問題，注意：更改源碼也不能追加自己的方法喲）
追加的格式爲：

內置對象.prototype.追加方法名 = function() {}

下面看個栗子：

		<script>
		var arr =[1,2,3];
		//爲所有的Array對象追加searchIndex這個方法；
		Array.prototype.searchIndex = function(target) {
			for(var i=0; i<this.length; i++) {
				if(this[i] == target) {
					return i;
				}
			}
			return -1;
		}
		var index = arr.searchIndex(3);
		document.write(index);
		</script>

網頁輸出：
2

3. js自定義對象

自定義對象有四種定義方式，分別如下；

1. 有參構造

分兩個步驟：

		（1）定義對象：function 對象(屬性){...}
		（2）創建對象：var 對象名 = new 對象(實際參數);

具體案例：

		<script>
		function Person(name, age) {
			//追加屬性
			this.name = name;
			this.age = age;
			//追加方法
			this.print = function() {
				document.write(name + "&nbsp&nbsp" + age);
			}
		}
		//創建對象
		var per = new Person("yy", 20);
		//調用對象方法
		per.print();
		</script>

輸出：
yy 20

2. 無參構造

		<script>
		function Person() {
			
		}
		var p = new Person();
		//追加屬性
		p.name = "李四";
		p.age = 20;
		//追加方法
		p.print = function() {
			document.write(p.name + "&nbsp&nbsp" + p.age);
		}
		p.print();
		</script>

輸出：
李四 20

3. 利用Object對象（最常用⭐）

		<script>
            //直接將Object對象看成你想要的任意對象，之後你追加屬性和方法即可；
		var p = new Object();
		//追加屬性
		p.name = "李四";
		p.age = 20;
		//追加方法
		p.print = function() {
			document.write(p.name + "&nbsp&nbsp" + p.age);
		}
		p.print();
		</script>

輸出：
李四 20

4. 字面值的方式：json格式⭐

json的格式爲： （{}內的東西就叫json對象）

		{"key" : value(Object)}

簡單的格式：(簡單或複雜都是由基本格式而來)

		{"name":"張三", "age":20, "password":"123456"}

複雜的格式（json裏面嵌套json）：

		{"key":{
            "key":value
		}
		}

具體使用：

		<script>
		var p = {
			"name" : "YY",
			"age" : 20,
			"print" : function() {
				document.write(p.name + "&nbsp&nbsp" + p.age);
			}
		};
		p.print();
		</script>

網頁輸出：
YY 20

json的使用解決了前後端交互的一些問題，例如後臺給前端返回List/Map這類集合數據的時候，前端是無法直接處理的；我們應該將List/Map轉化爲json對象再傳給前端；

4. Js中的函數

在js中，定義函數的格式爲：

function 函數名(形式參數列表) {
    具體業務;
}

注意點：

（1）：形式參數中不能加上數據類型（var），否則報錯；

		<script>
		function add(var a, var b) {
			var s = a+b;
			document.write(s);
		}
		add(10,30);
		</script>

運行上面後將會報錯；

（2）：在js中，不存在方法重載的概念，後面同名的函數將會覆蓋前面的函數；
（3）：在js中，不需要寫返回值，但可以有return語句；
（4）：無論形式參數個數大於還是小於實際參數，函數都會被調用；
（5）：函數中默認存在一個數組：arguments，作用是：將函數中實參和形參一一綁定；

js中，函數的調用分爲單獨調用和賦值調用:

單獨調用：即直接調用函數；（如 add(10,30); ）

賦值調用：把函數調用的結果賦值給一個變量；

		<script>
		function add(a, b) {
			var s = a+b;
			return s;
		}
		var res = add(10,30);
		document.write(res);
		</script>