Python開發【第十一篇】:JavaScript
JavaScript是一門編程語言,瀏覽器內置了JavaScript語言的解釋器,所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之,瀏覽器可以解釋並做出相應的處理。
一、如何編寫
1、JavaScript代碼存在形式
1 2 3 4 5 6 7 |
<! - - 方式一 - - >
<script type "text/javascript" src = "JS文件" >< / script>
<! - - 方式二 - - >
<script type "text/javascript" >
Js代碼內容
< / script> |
2、JavaScript代碼存放位置
- HTML的head中
- HTML的body代碼塊底部(推薦)
由於Html代碼是從上到下執行,如果Head中的js代碼耗時嚴重,就會導致用戶長時間無法看到頁面,如果放置在body代碼塊底部,那麽即使js代碼耗時嚴重,也不會影響用戶看到頁面效果,只是js實現特效慢而已。
1 2 3 4 |
<script src = "https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q" >< / script>
<script>
alert( ‘123‘ );
< / script>
|
二、變量
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塊中生效。
三、數據類型
JavaScript 中的數據類型分為原始類型和對象類型:
- 原始類型
- 數字
- 字符串
- 布爾值
- 對象類型
- 數組
- “字典”
- ...
特別的,數字、布爾值、null、undefined、字符串是不可變。
// null、undefined null是JavaScript語言的關鍵字,它表示一個特殊值,常用來描述“空值”。 undefined是一個特殊值,表示變量未定義。
1、數字(Number)
JavaScript中不區分整數值和浮點數值,JavaScript中所有數字均用浮點數值表示。
轉換:
- parseInt(..) 將某值轉換成數字,不成功則NaN
- parseFloat(..) 將某值轉換成浮點數,不成功則NaN
特殊值:
- NaN,非數字。可使用 isNaN(num) 來判斷。
- Infinity,無窮大。可使用 isFinite(num) 來判斷。
更多數值計算:
常量 Math.E 常量e,自然對數的底數。 Math.LN10 10的自然對數。 Math.LN2 2的自然對數。 Math.LOG10E 以10為底的e的對數。 Math.LOG2E 以2為底的e的對數。 Math.PI 常量figs/U03C0.gif。 Math.SQRT1_2 2的平方根除以1。 Math.SQRT2 2的平方根。 靜態函數 Math.abs( ) 計算絕對值。 Math.acos( ) 計算反余弦值。 Math.asin( ) 計算反正弦值。 Math.atan( ) 計算反正切值。 Math.atan2( ) 計算從X軸到一個點的角度。 Math.ceil( ) 對一個數上舍入。 Math.cos( ) 計算余弦值。 Math.exp( ) 計算e的指數。 Math.floor( ) 對一個數下舍人。 Math.log( ) 計算自然對數。 Math.max( ) 返回兩個數中較大的一個。 Math.min( ) 返回兩個數中較小的一個。 Math.pow( ) 計算xy。 Math.random( ) 計算一個隨機數。 Math.round( ) 舍入為最接近的整數。 Math.sin( ) 計算正弦值。 Math.sqrt( ) 計算平方根。 Math.tan( ) 計算正切值。
2、字符串(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個組內容;
$&:當前匹配的內容;
$`:位於匹配子串左側的文本;
$‘:位於匹配子串右側的文本
$$:直接量$符號
|
3、布爾類型(Boolean)
布爾類型僅包含真假,與Python不同的是其首字母小寫。
- == 比較值相等
- != 不等於
- === 比較值和類型相等
- !=== 不等於
- || 或
- && 且
4、數組
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( ) 對數組元素進行排序
|
四、其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、轉義
- decodeURI( ) URl中未轉義的字符
- decodeURIComponent( ) URI組件中的未轉義字符
- encodeURI( ) URI中的轉義字符
- encodeURIComponent( ) 轉義URI組件中的字符
- escape( ) 對字符串轉義
- unescape( ) 給轉義字符串解碼
- URIError 由URl的編碼和解碼方法拋出
3、eval
JavaScript中的eval是Python中eval和exec的合集,既可以編譯代碼也可以獲取返回值。
- eval()
- EvalError 執行字符串中的JavaScript代碼
4、正則表達式
1、定義正則表達式
- /.../ 用於定義正則表達式
- /.../g 表示全局匹配
- /.../i 表示不區分大小寫
- /.../m 表示多行匹配
JS正則匹配時本身就是支持多行,此處多行匹配只是影響正則表達式^和$,m模式也會使用^$來匹配換行的內容)
1 2 3 4 5 var
pattern = /^Java\w*/gm;
var
text =
"JavaScript is more fun than \nJavaEE or JavaBeans!"
;
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)
註:定義正則表達式也可以 reg= new RegExp()
2、匹配
JavaScript中支持正則表達式,其主要提供了兩個功能:
- test(string) 檢查字符串中是否和正則匹配
1 2 3 4 5 n =
‘uui99sdf‘
reg = /\d+/
reg.test(n) --->
true
# 只要正則在字符串中存在就匹配,如果想要開頭和結尾匹配的話,就需要在正則前後加 ^和$
- exec(string) 獲取正則表達式匹配的內容,如果未匹配,值為null,否則,獲取匹配成功的數組。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 獲取正則表達式匹配的內容,如果未匹配,值為
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)
3、字符串中相關方法
1 2 3 4 5 6 7 8 |
obj.search(regexp) 獲取索引位置,搜索整個字符串,返回匹配成功的第一個位置(g模式無效)
obj.match(regexp) 獲取匹配內容,搜索整個字符串,獲取找到第一個匹配內容,如果正則是g模式找到全部
obj.replace(regexp, replacement) 替換匹配替換,正則中有g則替換所有,否則只替換第一個匹配項,
$數字:匹配的第n個組內容;
$&:當前匹配的內容;
$`:位於匹配子串左側的文本;
$‘:位於匹配子串右側的文本
$$:直接量$符號
|
5、時間處理
JavaScript中提供了時間相關的操作,時間操作中分為兩種時間:
- 時間統一時間
- 本地時間(東8區)
更多操作參見:http://www.shouce.ren/api/javascript/main.html
五、語句和異常
1、條件語句
JavaScript中支持兩個中條件語句,分別是:if 和 switch
if語句switch(name){ case ‘1‘: age = 123; break; case ‘2‘: age = 456; break; default : age = 777; }
2、循環語句
JavaScript中支持三種循環語句,分別是:
var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); }
var names = ["alex", "tony", "rain"]; for(var index in names){ console.log(index); console.log(names[index]); }
while(條件){ // break; // continue; }
3、異常處理
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‘)
六、函數
1、基本函數
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中封裝了所有實際參數。
2、作用域
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();
|
function f2(){ var arg= [11,22]; function f3(){ console.log(arg); } arg = [44,55]; return f3; } ret = f2(); ret();
註:聲明提前,在JavaScript引擎“預編譯”時進行。
更多:http://www.cnblogs.com/wupeiqi/p/5649402.html
3、閉包
閉包是指可以包含自由(未綁定到特定對象)變量的代碼塊。
「閉包」,是指擁有多個變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。
閉包是個函數,而它「記住了周圍發生了什麽」。表現為由「一個函數」體中定義了「另個函數」
由於作用域鏈只能從內向外找,默認外部無法獲取函數內部變量。閉包,在外部獲取函數內部的變量。
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();
|
4、面向對象
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;
}
}
|
Python開發【第十一篇】:JavaScript