Python開發【第十一篇】：JavaScript
JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器能夠解釋並作出相應的處理。javascript
1、如何編寫
一、JavaScript代碼存在形式html
二、JavaScript代碼存放位置java
- HTML的head中
- HTML的body代碼塊底部(推薦)
因爲Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。python
2、變量
JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量。正則表達式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script
type
=
"text/javascript"
>
/
/
全局變量
name
=
'seven'
;
function func(){
/
/
局部變量
var age
=
18
;
/
/
全局變量
gender
=
"男"
}
<
/
script>
|
JavaScript中代碼註釋：編程
- 單行 //
- 多行 /* */
注意：此註釋僅在Script塊中生效。api
3、數據類型
JavaScript 中的數據類型分爲原始類型和對象類型：數組
- 原始類型
- 數字
- 字符串
- 布爾值
- 對象類型
- 數組
- 「字典」
- ...
特別的，數字、布爾值、null、undefined、字符串是不可變。瀏覽器
null和undefined
一、數字（Number）閉包
JavaScript中不區分整數值和浮點數值，JavaScript中全部數字均用浮點數值表示。
轉換：
- parseInt(..) 將某值轉換成數字，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
- NaN，非數字。可以使用 isNaN(num) 來判斷。
- Infinity，無窮大。可以使用 isFinite(num) 來判斷。
更多數值計算：
Math
二、字符串（String）
字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：能夠訪問字符串任意位置的文本，可是JavaScript並未提供修改已知字符串內容的方法。
常見功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
obj.length 長度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n個字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(
from
, to) 根據索引獲取子序列
obj.
slice
(start, end) 切片
obj.toLowerCase() 大寫
obj.toUpperCase() 小寫
obj.split(delimiter, limit) 分割
obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp) 全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
obj.replace(regexp, replacement) 替換，正則中有g則替換全部，不然只替換第一個匹配項，
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$'：位於匹配子串右側的文本
$$：直接量$符號
|
三、布爾類型（Boolean）
布爾類型僅包含真假，與Python不一樣的是其首字母小寫。
- == 比較值相等
- != 不等於
- === 比較值和類型相等
- !=== 不等於
- || 或
- && 且
四、數組
JavaScript中的數組相似於Python中的列表
常見功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
obj.length 數組的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素
obj.unshift(ele) 頭部插入元素
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) 將數組元素鏈接起來以構建一個字符串
obj.concat(val,..) 鏈接數組
obj.sort( ) 對數組元素進行排序
|
4、其餘
一、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
二、轉義
- decodeURI( ) URl中未轉義的字符
- decodeURIComponent( ) URI組件中的未轉義字符
- encodeURI( ) URI中的轉義字符
- encodeURIComponent( ) 轉義URI組件中的字符
- escape( ) 對字符串轉義
- unescape( ) 給轉義字符串解碼
- URIError 由URl的編碼和解碼方法拋出
三、eval
JavaScript中的eval是Python中eval和exec的合集，既能夠編譯代碼也能夠獲取返回值。
- eval()
- EvalError 執行字符串中的JavaScript代碼
四、正則表達式
一、定義正則表達式
- /.../ 用於定義正則表達式
- /.../g 表示全局匹配
- /.../i 表示不區分大小寫
- /.../m 表示多行匹配
JS正則匹配時自己就是支持多行，此處多行匹配只是影響正則表達式^和$，m模式也會使用^$來匹配換行的內容)
注：定義正則表達式也能夠 reg= new RegExp()
二、匹配
JavaScript中支持正則表達式，其主要提供了兩個功能：
- test(string) 檢查字符串中是否和正則匹配
- exec(string) 獲取正則表達式匹配的內容，若是未匹配，值爲null，不然，獲取匹配成功的數組。
三、字符串中相關方法
五、時間處理
JavaScript中提供了時間相關的操做，時間操做中分爲兩種時間：
- 時間統一時間
- 本地時間（東8區）
更多操做參見：http://www.shouce.ren/api/javascript/main.html
5、語句和異常
一、條件語句
JavaScript中支持兩個中條件語句，分別是：if 和 switch
if語句
switch語句
二、循環語句
JavaScript中支持三種循環語句，分別是：
方式一
方式二
方式三
三、異常處理
|
1
2
3
4
5
6
7
8
9
10
|
try
{
/
/
這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
/
/
若是
try
代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
/
/
e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally
{
/
/
不管
try
中代碼是否有異常拋出（甚至是
try
代碼塊中有
return
語句），
finally
代碼塊中始終會被執行。
}
|
注：主動跑出異常 throw Error('xxxx')
6、函數
一、基本函數
JavaScript中函數基本上能夠分爲一下三類：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/
/
普通函數
function func(arg){
return
true;
}
/
/
匿名函數
var func
=
function(arg){
return
"tony"
;
}
/
/
自執行函數
(function(arg){
console.log(arg);
})(
'123'
)
|
注意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。
二、做用域
JavaScript中每一個函數都有本身的做用域，當出現函數嵌套時，就出現了做用域鏈。當內層函數使用變量時，會根據做用域鏈從內到外一層層的循環，若是不存在，則異常。
切記：全部的做用域在建立函數且未執行時候就已經存在。
|
1
2
3
4
5
6
7
8
9
10
11
|
function f2(){
var arg
=
111
;
function f3(){
console.log(arg);
}
return
f3;
}
ret
=
f2();
ret();
|
View Code
注：聲明提早，在JavaScript引擎「預編譯」時進行。
更多：http://www.cnblogs.com/wupeiqi/p/5649402.html
三、閉包
閉包是指能夠包含自由（未綁定到特定對象）變量的代碼塊。
「閉包」，是指擁有多個變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。
閉包是個函數，而它「記住了周圍發生了什麼」。表現爲由「一個函數」體中定義了「另個函數」
因爲做用域鏈只能從內向外找，默認外部沒法獲取函數內部變量。閉包，在外部獲取函數內部的變量。
|
1
2
3
4
5
6
7
8
9
10
|
function f2(){
var arg
=
[
11
,
22
];
function f3(){
return
arg;
}
return
f3;
}
ret
=
f2();
ret();
|
四、面向對象
|
1
2
3
4
5
6
7
8
9
10
11
|
function Foo (name,age) {
this.Name
=
name;
this.Age
=
age;
this.Func
=
function(arg){
return
this.Name
+
arg;
}
}
var obj
=
new Foo(
'alex'
,
18
);
var ret
=
obj.Func(
"sb"
);
console.log(ret);
|
對於上述代碼須要注意：
- Foo充當的構造函數
- this代指對象
- 建立對象時須要使用 new
上述代碼中每一個對象中均保存了一個相同的Func函數，從而浪費內存。使用原型和能夠解決該問題：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function Foo (name,age) {
this.Name
=
name;
this.Age
=
age;
}
Foo.prototype
=
{
GetInfo: function(){
return
this.Name
+
this.Age
},
Func : function(arg){
return
this.Name
+
arg;
}
}
|