JavaScript基礎

一句話概括就是，js是一門獨立的語言，瀏覽器具有js的解釋器。

代碼存在形式
常見的JavaScript代碼有兩種存在方式：
方式一：Script代碼塊，只能在當前頁面使用
應用場景：所有功能只當前頁面需要。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title> 
        <script>
            function GetData(){
                var i = document.getElementById('user')
                alert(i.value);
            }
        </script>     
    </head>
    <body>
        <input type="text" id="user">
        <input type="button" οnclick="GetData();" value="check me">
    </body>
</html>

方式二：獨立js文件，可以被多個引入之後使用。
應用場景：多個頁面公共功能可以放入文件，避免重複編寫。
commons.js

function GetData(){
    var i = document.getElementById('user')
    alert(i.value);
}

s1.html

    <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <script src="commons.js"></script>
            </head>
            <body>
                <input type="text" id="user">
                <input type="button" οnclick="GetData();" value="check me">
            </body>
        </html>

推薦位置
瀏覽器在解析HTML、CSS、JavaScript文件時，是按照從上到下逐步解釋並執行，如果JavaScript代碼或文件放在head中可能會有因爲耗時（網絡請求或代碼）導致頁面顯示速度太慢，影響用戶感受，所有建議將js代碼都放在body標籤的底部。

註釋
單行：//
多行：/* */
變量
JavaScript中，局部變量必須以var開頭，如果未使用var，則默認表示聲明的是全局變量。
數字(Number)
javascript中不區分整數和浮點數，所有數字均用浮點數來表示。

字符串轉換成數字：
parseInt(…) 將某值轉換成數字，不成功則NaN
parseFloat(…) 將某值轉換成浮點數，不成功則NaN

特殊值：
NaN，非數字，可用isNaN(num)來判斷
Infinity，無窮大，可使用isFinity(num)來判斷

字符串

obj = "xueguoxiang" 創建字符串
obj.charAt(n): 返回字符串中的第n個字符 
obj.substring(from,to): 根據索引值獲取子序列，n<=子序列<m
obj.length : 獲取當前字符串長度
obj.trim() : 移除空白
obj.trimLeft() : 移除左空白
obj.triRight() : 移除右空白
obj.concat(value, ...) : 拼接
obj.indexOf(substring, start) : 子序列位置
obj.lastIndexOf(substring, start): 子序列位置
obj.slice(start, end): 切片
obj.toLowerCase():	大寫
obj.toUpperCase(): 小寫
obj.split(delimiter, limit): 分割，根據delimiter分割，limit表示取分割後的幾個

計時器
setInterval(“執行代碼”, 時間間隔)
布爾類型(Boolean)
布爾類型僅包含真假，與python不同的是其首字母是大寫。
==：比較值相等
!=：不等於
= = =：比較值和類型都相等
!= = =：比較值和類型都不等於
||：或
&&：且

數組
js中的數組類似於python中的數組

常見功能：

obj.length 數組長度
obj.push(ele) 在尾部追加內容
obj.pop() 尾部獲取一個元素
obj.unshift() 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
	obj.splice(n,0,val) 指定位置插入元素
	obj.splice(n,1,val) 指定位置替換元素
	obj.splice(n,1) 指定位置刪除元素
obj.slice() 切片
obj.reverse() 反轉
obj.join(sep) 將數組元素連接起來以構建一個字符串，ex:sep='-' 
obj.concat(val, ...) 連接數組
obj.sort() 對數組元素進行排序

字典
ex: a = {‘k1’:‘v1’, ‘k2’:‘v2’}

for循環

//第一種方式：循環的元素是索引
a = [11,22,33,44]
for(var item in a){
	console.log(a[item]);
}

a = {'k1':'v1', 'k2':'v2'}
for(var item in a){
	console.log(a[item]); // item是key，a[item]是values
}

//第二種方式：不支持字典的循環
for(var i=0; i<10; i++){
	
}

a = [11,22,33,44]
for(var i=0; i<a.length; i++){
		
}

條件語句

if(條件){
	
}else if(條件){
	
}else{
	
}

函數
普通函數

function function_name(a,b,c){
	
}

//調用
function_name(1,2,3)

匿名函數

//例子
setInterval(function(){
	console.log(123);
}, 5000);

自執行函數

//例子
(function func(arg){
})(1)

序列化

JSON.stringify(obj) 序列化，把一個對象轉換成字符串
JSON.parse(str) 反序列化，把字符串轉換成對象

轉義

decodeURI()          URI中未轉義的字符
decodeURIComponent() URI組件中的未轉義字符
encodeURI()          URI中的轉義字符
encodeURIComponent() 轉義URI組件中的字符

//下面這三個應用在登錄之後保存登錄信息的場景下面，將數據經過轉義之後，保存在cookie中
escape()             對字符串轉義
unescape()           給轉義字符串解碼
URIError()           由URI的編碼和解碼方式拋出

encodeURI和decodeURI的例子
encodeURIComponent和decodeURIComponent的例子
自動登錄並點贊

### 1、首先登錄任何頁面，獲取cookie
i1 = requests.get(url="http://dig.chouti.com/help/service")
### 2、用戶登錄，攜帶上一次的cookie，後臺對cookie中的gpsd進行授權
i2 = requests.post(
	url="http://dig.chouti.com/login",
	data = {
		'phone': '86手機號',
		'password': '密碼',
		'oneMonth': ""
	},
	cookies = i1.cookies.get_dict()
)
### 3、點贊（只需攜帶已經被授權的gpsd即可）
gpsd = i1.cookies.get_dict()['gpsd']
i3 = requests.post(
	url = requests.post(
		url = "http://dig.chouti.com/link/vote?linksId=8979998",
		cookies = {'gpsd': gpsd}
	)
)
print(i3.text)

eval
JavaScript中的eval是Python中eval和exec的集合，既可以編譯代碼也可以獲取返回值。
```
eval()
EvalError() 執行字符串中的JavaScript代碼
```

時間
Date類

var d = new Date()；// d 代表了當前時間
d.getXXX 獲取
d.setXXX 設置

作用域
其他語言：以代碼塊作爲作用域
python：以函數作爲作用域
JavaScript：
1、以函數作爲作用域
2、函數的作用域在函數未被調用之前就已經創建
3、函數的作用域存在作用域鏈，並且也是在被調用之前創建

//1
name = "73";
function func(){
	//var name = "bob";
	function inner(){
		//var name = "peter";
		console.log(name);
	}
	inner();
}
func();

//2
name = "73";
function func(){
	var name = "bob";
	function inner(){
		console.log(name);	
	}
	return inner;
}
var ret = func();
ret(); //bob

//3
name = "73";
function func(){
	var name = "bob";
	function inner(){
		console.log(name);	
	}
	var name = "peter";
	return inner;
}
var ret = func();
ret(); //peter

4、函數內部局部變量提前聲明

function func(){
	console.log(xxoo);
	var xxoo = 'xue';
}
func(); //undefined

JavaScript面向對象

//1、this代指對象（相當於python self）
//2、創建對象時，new 函數()
function Foo(n){
	this.name = n;
	this.sayName = function(){
		console.log(this.name);
	}
}
var obj = new Foo('xue');
obj.sayName()

在python的面向對象中，創建對象時，內存空間存儲形式如下

JavaScript創建對象時如下所示

可以看到，JavaScript每創建一個對象時，內部都保存了一次函數，而python沒有，這樣做完全沒有必要，那怎麼改呢，看下面

//原型
function Foo(n){
	this.name = n;
}
//Foo的原型，這樣做的好處是：由於Foo類只創建一次，Foo的原型也就只創建一次
Foo.prototype = {
	'sayName': function(){
		console.log(this.name);
	}
}
obj1 = new Foo('xue');
obj1.sayName();
obj2 = new Foo('bob');
obj2.sayName();

//現在這樣就和python很類似了

詞法分析 ×××（非常重要）

結果：

正則表達式
1、定義正則表達式
/…/ 用於定義正則表達式
/…/g 表示全局匹配
/…/i 表示不區分大小寫
/…/m 表示多行匹配
JS正則匹配時本身就是支持多行，此處多行匹配只是影響正則表達式^和 $KaTeX parse error: Expected group after '^' at position 9: ，m模式也會使用^̲$ 來匹配換行的內容

var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
res = pattern.exec(text)
res = pattern.exec(text)
res = pattern.exec(text)

2、匹配
JavaScript中支持正則表達式，其主要提供了兩個功能：

test(string) 檢查字符串中是否和正則匹配

n = 'uui99sdf'
reg = /\d+/
reg.test(n) # true

# 只要正則在字符串中存在就匹配，如果想要開頭和結尾匹配的話，就需要在正則前後加^和$

exec(string) 獲取正則表達式匹配的內容，如果未匹配，值爲null，否則，獲取匹配成功的數組

獲取正則表達式匹配的內容，如果未匹配，值爲null，否則，獲取匹配成功的數組

非全局模式
	獲取匹配結果數組，注意：第一個元素是第一個匹配的結果，後面元素是正則子匹配(正則內容分組匹配)
	var pattern = /\bJava\w*\b/;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);

	var pattern = /\b(Java)\w*\b/;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);
全局模式
	需要反覆調用exec方法，來一個一個獲取結果，直到匹配獲取結果爲null表示獲取完畢
	var pattern = /\bJava\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);

	var pattern = /\b(Java)\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);