- JavaScript+jQuery網(wǎng)頁特效設(shè)計(jì)任務(wù)驅(qū)動教程
- 陳承歡
- 10688字
- 2020-01-10 16:36:33
任務(wù)2-2 采用多種方式顯示當(dāng)前的日期
在網(wǎng)頁中以自定義形式顯示當(dāng)前日期及星期數(shù),日期格式為:年-月-日-星期。以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之一如表2-2所示。
表2-2 以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之一
表2-2中的代碼解釋如下。
(1)03行為聲明變量的語句,聲明了4個變量,變量名分別為year、month、day和tempdate。
(2)04行創(chuàng)建一個日期對象示例,其內(nèi)容為當(dāng)前日期和時間,且將日期對象示例賦給變量tempdate。
(3)05行使用日期對象的getFullYear()方法獲取日期對象的當(dāng)前年份數(shù),且賦給變量year。
(4)06行使用日期對象的getMonth方法獲取日期對象的當(dāng)前月份數(shù),且賦給變量month。注意由于月份的返回值是從0開始的索引序號,即1月返回0,其他月份以此類推,為了正確表述月份,需要做加1處理,讓1月顯示為“1月”而不是“0月”。
(5)07行使用日期對象的getDate方法獲取日期對象的當(dāng)前日期數(shù)(即1~31),且賦給變量day。
(6)08行使用文檔對象document的write方法向網(wǎng)頁中輸出當(dāng)前日期,表達(dá)式“year+"年"+month+"月"+day+"日"+" "”使用運(yùn)算符“+”連接字符串,其中year、month、day是變量,"年"、"月"、"日"和" "是字符串。
(7)09行使用關(guān)鍵字new和構(gòu)造函數(shù)Array()創(chuàng)建一個數(shù)組對象weekarray,并且創(chuàng)建數(shù)組對象時指定了數(shù)組的長度為7,即該數(shù)組元素的個數(shù)為7,數(shù)組元素的下標(biāo)(序列號)從0開始,各個數(shù)組元素的下標(biāo)為0~6。此時數(shù)組對象的每一個元素都尚未指定類型。
(8)10~16行分別給數(shù)組對象weekarray的各個元素賦值。
(9)17行使用日期對象的getDay方法獲取日期對象的當(dāng)前星期數(shù),其返回值為0~6,序號0對應(yīng)星期日,序號1對應(yīng)星期一,以此類推,序號6對應(yīng)星期六。
(10)使用“[]”運(yùn)算符訪問數(shù)組元素,即獲取當(dāng)前星期數(shù)的中文表示。
以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之二如表2-3所示。
表2-3 以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之二
表2-3中的代碼解釋如下。
(1)08行使用條件運(yùn)算符保證年份用4位數(shù)表示。
(2)09行通過網(wǎng)頁元素的innerHTML屬性顯示當(dāng)前日期和時間。使用字符串的charAt()顯示星期數(shù)。
以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之三如表2-4所示。
表2-4 以自定義形式顯示當(dāng)前日期及星期數(shù)的JavaScript程序之三
表2-4中的代碼解釋如下。
(1)07~09行分別使用兩種不同的方式定義數(shù)組。
(2)10行中通過訪問數(shù)組元素的方式isMonth[today.getMonth()]獲取當(dāng)前的月份名稱。
(3)11行中通過訪問數(shù)組元素的方式isDay[today.getDay()]獲取當(dāng)前的星期名稱。
知識必備
2.1 JavaScript的運(yùn)算符與表達(dá)式
運(yùn)算符也稱為操作符,JavaScript常用的運(yùn)算符有:算術(shù)運(yùn)算符(包括+、-、*、/、%、++、--)、比較運(yùn)算符(包括<、<=、>、>=、==、!=)、邏輯運(yùn)算符(&&、||、!)、賦值運(yùn)算符(=)、條件運(yùn)算符(?:)以及其他類型的運(yùn)算符。
表達(dá)式是運(yùn)算符和操作數(shù)的組合,表達(dá)式通過求值確定表達(dá)式的值,這個值是操作數(shù)據(jù)實(shí)施運(yùn)算所確定的結(jié)果。由于表達(dá)式是以運(yùn)算符為基礎(chǔ)的,所以表達(dá)式可以分為算術(shù)表達(dá)式、字符串表達(dá)式、賦值表達(dá)式、邏輯表達(dá)式等。
1.JavaScript的算術(shù)運(yùn)算符
算術(shù)運(yùn)算符用于執(zhí)行變量或數(shù)值之間的算術(shù)運(yùn)算。給定y=5,表2-5解釋了這些算術(shù)運(yùn)算符。
表2-5 JavaScript的算術(shù)運(yùn)算符及示例
2.JavaScript的賦值運(yùn)算符
賦值運(yùn)算符用于給JavaScript變量賦值。給定x=10和y=5,表2-6解釋了這些賦值運(yùn)算符。
表2-6 JavaScript的賦值運(yùn)算符及示例
3.JavaScript的連接運(yùn)算符
+運(yùn)算符用于把文本值或字符串變量連接起來。如果需要把兩個或多個字符串變量連接起來,則使用+運(yùn)算符。
例如:
txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;
在以上語句執(zhí)行后,變量txt3包含的值是"What a very nice day"。
注意 要想在兩個字符串之間增加空格,需要把空格插入一個字符串之中。
例如:
txt1="What a very ";
或者把空格插入表達(dá)式中。
例如:
txt3=txt1+" "+txt2;
在以上語句執(zhí)行后,變量txt3包含的值均為
"What a very nice day"
對字符串和數(shù)字進(jìn)行加法運(yùn)算,其運(yùn)算規(guī)則是:如果把數(shù)字與字符串相加,結(jié)果將成為字符串。
例如:
x=5+"5" ; document.write(x);
運(yùn)算結(jié)果為:55
例如:
x="5"+5 ; document.write(x);
運(yùn)算結(jié)果為:55
4.JavaScript的比較運(yùn)算符
比較運(yùn)算符確定變量或它們的值之間的關(guān)系。在邏輯語句中使用比較運(yùn)算符,通過比較變量或它們的值來計(jì)算出表達(dá)式的值是為true還是為false。
給定x=5,表2-7解釋了比較運(yùn)算符。
表2-7 JavaScript的比較運(yùn)算符及示例
可以在條件語句中使用比較運(yùn)算符對值進(jìn)行比較,然后根據(jù)結(jié)果執(zhí)行不同的語句。例如:
if(hour<12)document.write("上午好!");
注意 當(dāng)JavaScript兩個不同類型的值進(jìn)行比較時,首先會將其弱化成相同的類型。因?yàn)樘O果不能和梨做比較,所以false、undefined、null、0、""、NaN都弱化成false。這種強(qiáng)制轉(zhuǎn)化并不是一直存在的,只有當(dāng)作為表達(dá)式使用的時候才存在。
例如:
var someVar =0 ; alert(someVar == false) ; //顯示 true
5.JavaScript的邏輯運(yùn)算符
邏輯運(yùn)算符用于測定變量或值之間的邏輯關(guān)系,其值為true或false。
給定x=6及y=3,表2-8解釋了邏輯運(yùn)算符。
表2-8 JavaScript的邏輯運(yùn)算符及示例
6.JavaScript的條件運(yùn)算符
JavaScript還包含了基于某些條件對變量進(jìn)行賦值的條件運(yùn)算符。語法格式如下。
variablename=(condition)?value1:value2
例如:
tax=(salary>1500)?1:0;
如果變量salary中的值大于1500,則向變量tax賦值1,否則賦值0。
條件運(yùn)算符(?:)是一個三元運(yùn)算符,它由2個符號和3個運(yùn)算數(shù)組成,兩個符號分別位于3個運(yùn)算數(shù)之間。第1個運(yùn)算數(shù)是布爾型,通常由一個表達(dá)式計(jì)算而來,第2個運(yùn)算數(shù)和第3個運(yùn)算數(shù)可以是任意類型的數(shù)據(jù),或者是任何形式的表達(dá)式。條件運(yùn)算符的運(yùn)算規(guī)則是:如果第1個運(yùn)算數(shù)為true,那么條件表達(dá)式的值就是第2個運(yùn)算數(shù)的值;如果第1個運(yùn)算數(shù)是false,那么條件表達(dá)式的值就是第3個運(yùn)算數(shù)的值。
對于條件表達(dá)式“typeof(x)=='string'?eval(x):x”,如果typeof(x)的返回值是string,則條件表達(dá)式的值就是eval(x),即當(dāng)x是字符串時,當(dāng)作表達(dá)式進(jìn)行處理,即條件表達(dá)式的值為表達(dá)式的計(jì)算結(jié)果;否則直接將變量x的值作為條件表達(dá)式的值。
2.2 JavaScript的語句及其規(guī)則
JavaScript語句向?yàn)g覽器發(fā)出命令,告訴瀏覽器該做什么。
1.分號
分號用于分隔JavaScript語句,通常在每條可執(zhí)行的語句結(jié)尾添加分號。使用分號的另一用處是在一行中編寫多條語句。最好的代碼編寫習(xí)慣是統(tǒng)一加入分號,因?yàn)闆]有分號,有些瀏覽器就不能正確運(yùn)行。
提示 在JavaScript中,每行結(jié)尾的分號是可選的。ECMAScript則允許開發(fā)者自行決定是否以分號結(jié)束一行代碼。如果沒有分號,ECMAScript就把折行代碼的結(jié)尾看作該語句的結(jié)尾(與Visual Basic和VBScript相似),但其前提是沒有破壞代碼的語義。
根據(jù)ECMAScript標(biāo)準(zhǔn),下面兩行代碼都是正確的。
var test1 = "red" var test2 = "blue" ;
2.JavaScript代碼
JavaScript代碼是JavaScript語句的序列,瀏覽器會按照編寫順序來執(zhí)行每條語句。
3.JavaScript代碼塊
JavaScript語句通過代碼塊的形式進(jìn)行組合,代碼塊由左花括號“{”開始,由右花括號“}”結(jié)束,程序語句被封裝在左括號和右括號之間。
代碼塊的作用是使語句序列按其順序執(zhí)行,JavaScript函數(shù)是將語句組合在塊中的典型示例。
4.JavaScript區(qū)分大小寫
JavaScript對大小寫敏感,變量、函數(shù)名、運(yùn)算符以及其他一切對象都是區(qū)分大小寫的。變量test與變量TEST是不同的,同樣,函數(shù)getElementById與getElementbyID也是不同的。
5.空格
JavaScript會忽略多余的空格,可以向腳本添加空格來提高其可讀性。
下面的兩行代碼是等效的。
var name="李明"; var name = "李明" ;
6.對代碼行進(jìn)行折行
可以在文本字符串中使用反斜杠\對代碼行進(jìn)行換行。以下代碼會正確顯示。
document.write("Hello \ World!");
但以下的折行則是不允許的。
document.write \ ("Hello World!");
提示 JavaScript是腳本語言,瀏覽器會在讀取代碼時逐行地執(zhí)行腳本代碼。但傳統(tǒng)編程語言會在執(zhí)行前對所有代碼進(jìn)行編譯。
2.3 JavaScript的條件語句
JavaScript的條件語句用于基于不同的條件來執(zhí)行不同的語句。編寫程序代碼時,經(jīng)常需要為不同的決定執(zhí)行不同的動作,可以在代碼中使用條件語句來完成該任務(wù)。
在JavaScript中,可以使用以下條件語句。
(1)if語句:只有當(dāng)指定條件為true時,才使用該語句來執(zhí)行代碼。
(2)if…else…語句:當(dāng)條件為true時執(zhí)行代碼,當(dāng)條件為false時執(zhí)行其他代碼。
(3)if…else if…else…語句:使用該語句來選擇多個代碼塊之一來執(zhí)行。
(4)switch語句:使用該語句來選擇多個代碼塊之一來執(zhí)行。
1.if語句
只有當(dāng)指定條件為true時,該語句才會執(zhí)行代碼。語法格式:
if (條件) { // 當(dāng)條件為 true 時執(zhí)行的代碼 }
注意 應(yīng)使用小寫的if。使用大寫字母(IF)會產(chǎn)生JavaScript錯誤。
例如:
當(dāng)時間小于20:00時,問候語顯示為“Good day”。
if (time { x="Good day"; }
該語句不包含else,只有在指定條件為true時才執(zhí)行代碼。
2.if…else…語句
使用if…else…語句在條件為true時執(zhí)行代碼,在條件為false時執(zhí)行其他代碼。語法格式:
if (條件) { // 當(dāng)條件為 true 時執(zhí)行的代碼 } else { // 當(dāng)條件為 false 時執(zhí)行的代碼 }
例如:
當(dāng)時間小于20:00時,顯示問候語"Good day",否則顯示問候語"Good evening"。
if (time<20) { x="Good day"; } else { x="Good evening"; }
3.if…else if…else…語句
使用if…else if…else…語句來選擇多個代碼塊之一來執(zhí)行。
語法格式:
if (條件 1) { // 當(dāng)條件 1 為 true 時執(zhí)行的代碼 } else if (條件 2) { // 當(dāng)條件 2 為 true 時執(zhí)行的代碼 } else { // 當(dāng)條件 1 和條件 2 都不為 true 時執(zhí)行的代碼 }
例如:
時間小于10:00時,顯示問候語Good morning,時間小于20:00時,顯示問候語Good day,否則顯示問候語Good evening。
if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; }
4.switch語句
使用switch語句來選擇要執(zhí)行的多個代碼塊之一。
語法格式:
switch(n) { case 1: // 執(zhí)行代碼塊 1 break; case 2: // 執(zhí)行代碼塊 2 break; default: // n 與 case 1 和 case 2 不同時執(zhí)行的代碼 }
首先設(shè)置表達(dá)式n(通常是一個變量),隨后表達(dá)式的值會與結(jié)構(gòu)中每個case的值進(jìn)行比較。如果存在匹配項(xiàng),則與該case關(guān)聯(lián)的代碼塊會被執(zhí)行。使用break來阻止代碼自動向下一個case運(yùn)行,跳出switch語句。
switch語句中的表達(dá)式不一定是條件表達(dá)式,可以是普通的表達(dá)式,其值可以是數(shù)值、字符串或布爾值。執(zhí)行switch語句時,首先將表達(dá)式的值與一組數(shù)據(jù)進(jìn)行比較,當(dāng)表達(dá)式的值與所列數(shù)據(jù)值相等時,執(zhí)行其中的語句塊;如果表達(dá)式的值與所有列出的數(shù)據(jù)值都不相等,就會執(zhí)行default后的語句塊;如果沒有default關(guān)鍵字,就會跳出switch語句執(zhí)行switch語句后面的語句。
例如:
顯示今日的周名稱。注意Sunday=0、Monday=1、Tuesday=2等。
var day=new Date().getDay(); switch (day) { case 0: x="Today it's Sunday"; break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; }
5.default關(guān)鍵詞
使用default關(guān)鍵詞來指定匹配不存在時執(zhí)行的操作。
例如:
如果今天不是周六或周日,則會輸出默認(rèn)的消息。
var day=new Date().getDay(); switch (day) { case 6: x="Today it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x="Looking forward to the Weekend"; }
2.4 JavaScript的函數(shù)
函數(shù)是由事件驅(qū)動的,或者當(dāng)它被調(diào)用時執(zhí)行可重復(fù)使用的代碼塊。函數(shù)是功能相對獨(dú)立的代碼塊,該代碼塊中的語句被作為一個整體來執(zhí)行。
函數(shù)是那些只能由事件或是函數(shù)調(diào)用來執(zhí)行的腳本的容器,因此,在瀏覽器最初加載和執(zhí)行包含在網(wǎng)頁中的腳本時,函數(shù)并沒有被執(zhí)行。函數(shù)的目的是包含那些要完成某個任務(wù)的腳本,這樣就能夠隨時執(zhí)行該腳本和運(yùn)行該任務(wù)。
例如:
<script> function openWin( ) { alert("感謝你光臨本網(wǎng)站"); } </script> <button onclick="openWin ( )">單擊這里</button>
1.JavaScript函數(shù)的語法格式
函數(shù)就是包含在花括號中的代碼塊,前面使用了關(guān)鍵詞function,其語法格式如下。
function functionName() { // 這里是要執(zhí)行的代碼 }
當(dāng)調(diào)用該函數(shù)時,會執(zhí)行函數(shù)內(nèi)的代碼。
可以在某事件發(fā)生時直接調(diào)用函數(shù)(如用戶單擊按鈕時),并且可由JavaScript在任何位置進(jìn)行調(diào)用。
提示 JavaScript對大小寫敏感。關(guān)鍵字function必須是小寫的,并且必須以與函數(shù)名稱相同的大小寫來調(diào)用函數(shù)。
2.調(diào)用帶參數(shù)的函數(shù)
函數(shù)能夠通過函數(shù)的參數(shù)來接收數(shù)據(jù),函數(shù)可以有一個或多個形式參數(shù),函數(shù)調(diào)用基于函數(shù)的形式參數(shù)可以有一個或多個實(shí)際參數(shù)。形式參數(shù)(形參,parameter)和實(shí)際參數(shù)(實(shí)參,argument)常會被弄混,形參是函數(shù)定義的組成部分,而實(shí)參則是在調(diào)用函數(shù)時用到的表達(dá)式。
在調(diào)用帶參數(shù)的函數(shù)時,可以向其傳遞值,這些值被稱為參數(shù)值。這些參數(shù)值可以在函數(shù)內(nèi)使用。可以傳送任意多個參數(shù),由逗號“,”分隔,其形式如下。
functionName(argument1 , argument2)
聲明函數(shù)時,將參數(shù)作為變量來聲明。
例如:
function functionName( var1 , var2 ) { // 這里是要執(zhí)行的代碼 }
變量和參數(shù)必須以一致的順序出現(xiàn),第一個變量就是第一個被傳遞的參數(shù)的給定值,以此類推。包含1個參數(shù)的函數(shù)示例如下所示。
<script> function openWin(msg) { alert(msg) ; } </script> <button onclick="openWin('感謝你光臨本網(wǎng)站')" >單擊這里</button>
包含2個參數(shù)的函數(shù)示例如下所示。
<script> function displayInfo(name , job) { alert("歡迎" + name + job); } </script> <button onclick=" displayInfo( '張三' , '工程師' )">單擊這里</button>
上面的函數(shù)會在按鈕被單擊時出現(xiàn)提示信息:"歡迎張三工程師"。
可以使用不同的參數(shù)來調(diào)用該函數(shù),出現(xiàn)不同的提示信息。
例如:
<button onclick=" displayInfo('李四' , '教授')">單擊這里</button> <button onclick=" displayInfo('王五' , '會計(jì)師')">單擊這里</button>
根據(jù)單擊的按鈕不同,會出現(xiàn)不同的提示信息:"歡迎李四教授"或"歡迎王五會計(jì)師"。
3.調(diào)用有返回值的函數(shù)
有時,我們希望函數(shù)將值返回調(diào)用它的地方,使用return語句就可以實(shí)現(xiàn)。在使用return語句時,函數(shù)會停止執(zhí)行,并返回指定的值。
語法格式:
function myFunction() { var x=5; return x; }
上面的函數(shù)會返回5。
提示 整個JavaScript并不會停止執(zhí)行,只是函數(shù)執(zhí)行結(jié)束。JavaScript將繼續(xù)執(zhí)行調(diào)用語句后面的代碼。
函數(shù)調(diào)用將被返回值取代:var myVar=myFunction();
myVar變量的值是5,也就是函數(shù)“myFunction()”所返回的值。
即使不把它保存為變量,也可以使用返回值。
例如:
document.getElementById("demo").innerHTML=myFunction();
網(wǎng)頁中“demo”元素的內(nèi)容將是5,也就是函數(shù)“myFunction()”所返回的值。可以使返回值基于傳遞到函數(shù)中的參數(shù)。
例如:計(jì)算兩個數(shù)字的乘積,并返回結(jié)果。
function myFunction(a,b) { return a*b ; } document.getElementById("demo").innerHTML=myFunction(4,3) ;
網(wǎng)頁中“demo”元素的內(nèi)容將是12。
如果只是希望退出函數(shù),也可以使用return語句,返回值是可選的。
4.JavaScript的全局函數(shù)
JavaScript有以下7個全局函數(shù),用于完成一些常用的功能:eval()、parseInt()、parseFloat()、isNaN()、isFinite()、escape()、unescape()。
(1)eval()。
該函數(shù)用于計(jì)算某個字符串,并執(zhí)行其中的JavaScript代碼。語法格式為:eval(str),對表達(dá)式str進(jìn)行運(yùn)算,返回表達(dá)式str的運(yùn)算結(jié)果,其中參數(shù)str可以是任何有效的表達(dá)式。例如,eval(document.body.clientWidth-90)。
(2)parseInt()。
該函數(shù)將字符串的首位字符轉(zhuǎn)化為整型數(shù)字,如果字符串不是以數(shù)字開頭,那么將返回NaN。例如,表達(dá)式parseInt("2abc")返回?cái)?shù)字2,表達(dá)式parseInt("abc")返回NaN。
語法格式為:parseInt(string,radix),參數(shù)radix可以是2~36的任意整數(shù),當(dāng)radix為0或10時,提取的整數(shù)以10為基數(shù)表示,即返回10、20、30、…、100、110、120…該函數(shù)也可以用于將字符串轉(zhuǎn)換為整數(shù)。
(3)parseFloat()。
該函數(shù)將字符串的首位字符轉(zhuǎn)化為浮點(diǎn)型數(shù)字,如果字符串不是以數(shù)字開頭,那么將返回NaN。例如,表達(dá)式parseFloat("2.6abc")返回?cái)?shù)字2.6,表達(dá)式parseFloat("abc")返回NaN。
(4)isNaN()。
該函數(shù)主要用于檢驗(yàn)?zāi)硞€值是否為NaN。例如,表達(dá)式isNaN("NaN")的值為true,表達(dá)式isNaN(123)的值為false。
(5)isFinite()。
該函數(shù)用于檢查其參數(shù)是否是無窮大。語法格式為:isFinite(number)。
如果number是有限數(shù)字(或可轉(zhuǎn)換為有限數(shù)字),那么返回true。如果number是NaN(非數(shù)字),或者是正、負(fù)無窮大的數(shù),則返回false。例如,表達(dá)式isFinite(123)的值為true,表達(dá)式isFinite("NaN")的值為false。
(6)escape()。
該函數(shù)用于對字符串進(jìn)行編碼,這樣就可以在所有的計(jì)算機(jī)上讀取該字符串。語法格式為:escape(str),其返回值為已編碼的string的副本。其中某些字符被替換成了十六進(jìn)制的轉(zhuǎn)義序列。例如,表達(dá)式escape("a(b)|d")的值為a%28b%29%7Cd。
(7)unescape()。
該函數(shù)可對通過escape()編碼的字符串進(jìn)行解碼。語法格式為:unescape(str),其返回值為string被解碼后的一個副本。該函數(shù)的工作原理是:通過找到形式為%xx和%uxxxx的字符序列(x表示十六進(jìn)制的數(shù)字),用Unicode字符\u00xx和\uxxxx替換這樣的字符序列進(jìn)行解碼。
例如,表達(dá)式unescape(escape("a(b)|d"))的值為a(b)|d。
注意 ECMAScript v3已從標(biāo)準(zhǔn)中刪除了escape()和unescape()函數(shù),并反對使用它,因此應(yīng)該用decodeURI()和decodeURIComponent()取而代之。
2.5 JavaScript的String(字符串)對象
JavaScript的字符串對象是存儲字符(如"Good")的變量。
字符串可以是引號中的任意文本,可以使用單引號或雙引號,也可以在字符串中使用引號,只要不匹配包圍字符串的引號即可。
例如:
var answer="Nice to meet you!" ; var answer="He is called 'Bill'" ; var answer='He is called "Bill"' ;
String對象的屬性、方法及示例如表2-9所示。
表2-9 String對象的屬性與方法
注意 String對象的substring()和substr()的區(qū)別。
String對象的substring()方法的一般形式為substring(indexStart,indexEnd),即從字符串中截取子串,兩個參數(shù)分別是截取子串的起始和終止字符的索引值,截取的子串不包含索引值較大的參數(shù)對應(yīng)的字符。若忽略indexEnd,則字符串的末尾是終止值。若indexStart=indexEnd,則返回空字符串。
String對象的substr()方法的一般形式為substr(start,length),即從start索引開始,向后截取length個字符。若省略length,則一直截取到字符串尾;若length設(shè)定的個數(shù)超過了字符串的結(jié)尾,則返回到字符串結(jié)尾的子字符串。
2.6 JavaScript的Math(數(shù)學(xué))對象
Math對象包含用于各種數(shù)學(xué)運(yùn)算的屬性和方法,Math對象的內(nèi)置方法可以在不使用構(gòu)造函數(shù)創(chuàng)建對象時直接調(diào)用。調(diào)用形式為Math.數(shù)學(xué)函數(shù)(參數(shù))。
例如,計(jì)算cos(π/6)可以寫成:Math.cos(Math.PI/6)。
1.?dāng)?shù)學(xué)值
JavaScript提供了8種可被Math對象訪問的數(shù)學(xué)值。
(1)常數(shù):Math.E。
(2)圓周率:Math.PI。
(3)2的平方根:Math.SQRT2。
(4)1/2的平方根:Math.SQRT1_2。
(5)2的自然對數(shù):Math.LN2。
(6)10的自然對數(shù):Math.LN10。
(7)以2為底的e的對數(shù):Math.LOG2E。
(8)以10為底的e的對數(shù):Math.LOG10E。
2.?dāng)?shù)學(xué)方法
除了可以被Math對象訪問的數(shù)學(xué)值以外,還有幾個函數(shù)(方法)可以使用,如表2-10所示。
表2-10 Math對象的函數(shù)(方法)
2.7 JavaScript的Date(日期)對象
日期對象主要用于從系統(tǒng)中獲得當(dāng)前的日期和時間,設(shè)置當(dāng)前日期和時間,在時間、日期同字符串之間轉(zhuǎn)換。
1.定義日期
Date對象用于處理日期和時間。可以通過new關(guān)鍵詞來定義Date對象。
以下代碼定義了名稱為d的Date對象:var d=new Date()。
提示 Date對象自動使用當(dāng)前的日期和時間作為其初始值。
2.操作日期
通過使用針對日期對象的方法,可以很容易地對日期進(jìn)行操作。例如:為日期對象設(shè)置一個特定的日期(2020年10月1日)。
var d=new Date() ; d.setFullYear(2020 , 9 , 1) ; document.write(d) ;
注意 表示月份的參數(shù)為0~11。也就是說,如果希望把月設(shè)置為10月,則參數(shù)應(yīng)該是9。
下面的示例代碼將日期對象設(shè)置為5天后的日期。
var d=new Date() ; d.setDate(d.getDate()+5) ; document.write(d) ;
注意 如果增加天數(shù)會改變月份或者年份,那么日期對象會自動完成這種轉(zhuǎn)換。
3.比較日期
日期對象也可用于比較兩個日期。
例如:將當(dāng)前日期與2020年10月1日進(jìn)行比較。
var d=new Date(); d.setFullYear(2020 , 10 , 1); var today = new Date(); if (d>today) { alert("今天在 2020 年 10 月 1 日之前") ; }
4.Date對象的函數(shù)
Date對象的函數(shù)(方法)及示例如表2-11所示。
表2-11 Date對象的函數(shù)(方法)
2.8 JavaScript的計(jì)時方法
通過使用JavaScript的計(jì)時方法,可以在一個設(shè)定的時間間隔之后執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計(jì)時事件。
JavaScritp中使用計(jì)時事件的兩個關(guān)鍵方法是setTimeout()和clearTimeout()。
1.setTimeout()方法
setTimeout()用于指定未來的某個時間執(zhí)行代碼,即經(jīng)過指定時間間隔后調(diào)用函數(shù)或運(yùn)算表達(dá)式。
語法格式:
var t=setTimeout("javascript 語句" , 毫秒數(shù)) ;
setTimeout()方法會返回某個值。在上面的語句中,值被儲存在名為t的變量中。如果希望取消這個setTimeout(),就可以使用這個變量名來指定它。
setTimeout()的第1個參數(shù)是含有JavaScript語句的字符串。這個語句可能諸如"alert('5 seconds!')",或者對函數(shù)進(jìn)行調(diào)用,諸如alertMsg()"。
第2個參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第1個參數(shù)。
提示 1000毫秒等于1秒。
2.clearTimeout()方法
clearTimeout()用于取消setTimeout()。
例如:在網(wǎng)頁上顯示一個鐘表。
<script> function startTime() { var today=new Date() ; var h=today.getHours() ; var m=today.getMinutes() ; var s=today.getSeconds() ; m=checkTime(m) ; s=checkTime(s) ; document.getElementById('txtTime').innerHTML=h+":"+m+":"+s ; t=setTimeout('startTime()' , 500) ; } function checkTime(i) { if (i<10){ i="0" + i ; } return i ; } </script> <button onclick="startTime()">單擊這里</button> <div id="txtTime"></div>
3.setInterval()方法
setInterval()方法可按照指定的周期(以毫秒計(jì))來調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval()方法會不停地調(diào)用函數(shù),直到clearInterval()被調(diào)用或窗口被關(guān)閉。由setInterval()返回的值可用作clearInterval()方法的參數(shù)。
語法格式:
setInterval(code , millisec)
兩個參數(shù)都是必需參數(shù),其中參數(shù)code表示要調(diào)用的函數(shù)或要執(zhí)行的代碼串,millisec表示周期性執(zhí)行或調(diào)用code之間的時間間隔,以毫秒計(jì)。
4.clearInterval()方法
clearInterval()方法可取消由setInterval()設(shè)置的毫秒時間。
語法格式:
clearInterval(id_of_setinterval)
參數(shù)id_of_setinterval必須是由setInterval()返回的ID值。
2.9 JavaScript的RegExp對象及其方法
RegExp對象表示正則表達(dá)式,它是對字符串執(zhí)行模式匹配的強(qiáng)大工具。當(dāng)檢索某個文本時,可以使用一種模式來描述要檢索的內(nèi)容,RegExp就是這種模式。簡單的模式可以是一個單獨(dú)的字符,更復(fù)雜的模式包括了更多的字符,并可用于解析、格式檢查、替換等。RegExp對象可以規(guī)定字符串中的檢索位置,以及要檢索的字符類型等。
1.創(chuàng)建RegExp對象
(1)直接量語法。
正則表達(dá)式的直接量語法格式如下。
/pattern/attributes
(2)創(chuàng)建RegExp對象的語法。
創(chuàng)建RegExp對象的語法格式如下。
new RegExp(pattern , attributes) ;
(3)RegExp對象的參數(shù)說明。
參數(shù)pattern表示一個字符串,指定了正則表達(dá)式的模式或其他正則表達(dá)式。
參數(shù)attributes表示一個可選的字符串,包含屬性“g”“i”和“m”,分別用于指定全局匹配、不區(qū)分大小寫的匹配和多行匹配。ECMAScript標(biāo)準(zhǔn)化之前,不支持m屬性。如果pattern是正則表達(dá)式,而不是字符串,則必須省略該參數(shù)。
(4)RegExp對象的返回值。
一個新的RegExp對象具有指定的模式和標(biāo)志。如果參數(shù)pattern是正則表達(dá)式而不是字符串,那么RegExp()構(gòu)造函數(shù)將用與指定的RegExp相同的模式和標(biāo)志創(chuàng)建一個新的RegExp對象。
如果不使用new運(yùn)算符,而將RegExp()作為函數(shù)調(diào)用,那么它的行為與用new運(yùn)算符調(diào)用時一樣,只是當(dāng)pattern是正則表達(dá)式時,它只返回pattern,而不再創(chuàng)建一個新的RegExp對象。
(5)創(chuàng)建RegExp對象時拋出的異常。
①SyntaxError:如果pattern不是合法的正則表達(dá)式,或attributes含有“g”“i”和“m”之外的字符,創(chuàng)建RegExp對象時會拋出該異常。
②TypeError:如果pattern是RegExp對象,但沒有省略attributes參數(shù),就拋出該異常。
2.創(chuàng)建RegExp對象的修飾符
創(chuàng)建RegExp對象的修飾符如表2-12所示。
表2-12 創(chuàng)建RegExp對象的修飾符
(1)g修飾符。
g修飾符用于執(zhí)行全局匹配(查找所有匹配而非在找到第一個匹配后停止)。所有主流瀏覽器都支持g修飾符。
例如,對字符串中的“is”進(jìn)行全局搜索。
var str="Is this all there is?" ; var patt1=/is/g ; document.write(str.match(patt1));
由于字符串str中第1個“Is”首字母為大寫,所以搜索結(jié)果中不包含第1個“Is”,只包括其后的2個“is”。
(2)i修飾符。
i修飾符用于執(zhí)行對大小寫不敏感的匹配。所有主流瀏覽器都支持i修飾符。
例如,對字符串中的“is”進(jìn)行全局且不區(qū)分大小寫的搜索。
var str="Is this all there is? "; var patt1=/is/gi ; document.write(str.match(patt1));
搜索結(jié)果中包含全部的3個“is”。
3.正則表達(dá)式的模式符
(1)帶方括號的模式表達(dá)式。
方括號用于查找某個范圍內(nèi)的字符。帶方括號的模式表達(dá)式如表2-13所示。
表2-13 帶方括號的模式表達(dá)式
(2)模式表達(dá)式中的元字符。
元字符(Metacharacter)是擁有特殊含義的字符,模式表達(dá)式中的元字符如表2-14所示。
表2-14 模式表達(dá)式中的元字符
(3)模式表達(dá)式中的量詞。
模式表達(dá)式中的量詞如表2-15所示。
表2-15 模式表達(dá)式中的量詞
4.RegExp對象的屬性
RegExp對象的屬性如表2-16所示。
表2-16 RegExp對象的屬性
5.RegExp對象的方法
RegExp對象有3種方法:test()、exec()和compile()。
(1)test()方法。
test()方法用于檢測一個字符串是否匹配某個模式,或者檢索字符串中的指定值,返回值是true或false。
例如:
<script type="text/javascript"> var patt1=new RegExp("r"); document.write(patt1.test("javascript")) ; </script>
由于該字符串中存在字母“r”,以上代碼的輸出將是:true。
(2)exec()方法。
exec()方法用于檢索字符串中的正則表達(dá)式的匹配,或者檢索字符串中的指定值,返回值是被找到的值。如果沒有發(fā)現(xiàn)匹配,則返回null。
語法格式:
RegExpObject.exec(str)
其中參數(shù)str為必需參數(shù),表示要檢查的字符串。
exec()方法的功能非常強(qiáng)大,它是一個通用的方法,而且使用起來也比test()方法以及支持正則表達(dá)式的String對象的方法更為復(fù)雜。
如果exec()找到了匹配的文本,則返回一個結(jié)果數(shù)組。否則,返回null。此數(shù)組的第0個元素是與正則表達(dá)式相匹配的文本,第1個元素是與RegExpObject的第1個子表達(dá)式相匹配的文本(如果有的話),第2個元素是與RegExpObject的第2個子表達(dá)式相匹配的文本(如果有的話),以此類推。除了數(shù)組元素和length屬性之外,exec()方法還返回兩個屬性。index屬性聲明匹配文本的第1個字符的位置,input屬性則存放被檢索的字符串string。可以看得出,在調(diào)用非全局的RegExp對象的exec()方法時,返回的數(shù)組與調(diào)用方法String.match()返回的數(shù)組是相同的。
但是,當(dāng)RegExpObject是一個全局正則表達(dá)式時,exec()的行為就稍微復(fù)雜一些。它會在RegExpObject的lastIndex屬性指定的字符處開始檢索字符串string。當(dāng)exec()找到了與表達(dá)式相匹配的文本時,在匹配后,它將把RegExpObject的lastIndex屬性設(shè)置為匹配文本的最后一個字符的下一個位置。也就是說,可以通過反復(fù)調(diào)用exec()方法來遍歷字符串中的所有匹配文本。當(dāng)exec()再也找不到匹配的文本時,它將返回null,并把lastIndex屬性重置為0。
如果在一個字符串中完成了一次模式匹配之后要開始檢索新的字符串,就必須手動把lastIndex屬性重置為0。
無論RegExpObject是否是全局模式,exec()都會把完整的細(xì)節(jié)添加到它返回的數(shù)組中。這就是exec()與String.match()的不同之處,后者在全局模式下返回的信息要少得多。因此可以這么說,在循環(huán)中反復(fù)調(diào)用exec()方法是唯一一種獲得全局模式的完整模式匹配信息的方法。
例如:全局檢索字符串中的字母a。
<script type="text/javascript"> var str = "javascript"; var patt = new RegExp("a","g"); var result; while ((result = patt.exec(str)) != null) { document.write(result+" | "); document.write(result.lastIndex+" | "); } </script>
輸出結(jié)果為a|2|a|4|
(3)compile()方法。
compile()方法用于改變RegExp,或者在腳本執(zhí)行過程中編譯正則表達(dá)式,也可以用于改變和重新編譯正則表達(dá)式。既可以改變檢索模式,也可以添加或刪除第2個參數(shù)。
語法格式:
RegExpObject.compile(regexp , modifier)
其中參數(shù)regexp表示正則表達(dá)式,參數(shù)modifier用于規(guī)定匹配的類型。“g”用于全局匹配,“i”用于不區(qū)分大小寫,“gi”用于全局不區(qū)分大小寫的匹配。
例如:在字符串中全局搜索“to”,并用“for”替換,然后使用compile()方法改變正則表達(dá)式,用“he”替換“me”。
<script type="text/javascript"> var str="good luck to me,good luck to you"; patt=/to/g; str2=str.replace(patt,"for"); document.write(str2+"<br />"); patt=/me/; patt.compile(patt); str2=str.replace(patt,"he"); document.write(str2); </script>
輸出結(jié)果為
good luck for me,good luck for you good luck to he,good luck to you
2.10 支持正則表達(dá)式的String對象的方法
1.search()方法
search()方法用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串。
語法格式:
stringObject.search(regexp)
其中參數(shù)regexp可以是需要在stringObject中檢索的子串,也可以是需要檢索的RegExp對象。如果要執(zhí)行忽略大小寫的檢索,則追加標(biāo)志i。
其返回值是stringObject中第一個與regexp相匹配的子串的起始位置。如果沒有找到任何匹配的子串,則返回-1。
search()方法不執(zhí)行全局匹配,它將同時忽略標(biāo)志g和regexp的lastIndex屬性,并且總是從字符串的開始進(jìn)行檢索,這意味著它總是返回stringObject的第一個匹配的位置。
例如:分別檢索“a”“R”。
<script type="text/javascript"> var str="javascript" ; document.write(str.search(/a/)) ; document.write(" | ") ; document.write(str.search(/R/)) ; //區(qū)分大小寫 document.write(" | ") ; document.write(str.search(/R/i)) //不區(qū)分大小寫 </script>
輸出結(jié)果為
1|-1|6
2.match()方法
可在字符串內(nèi)檢索指定的值,或找到一個或多個正則表達(dá)式的匹配。該方法類似于indexOf()和lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
語法格式如下。
(1)stringObject.match(searchvalue)。
其中參數(shù)searchvalue指定要檢索的字符串值。
(2)stringObject.match(regexp)。
其中參數(shù)regexp規(guī)定要匹配的模式的RegExp對象。如果該參數(shù)不是RegExp對象,則需要首先把它傳遞給RegExp構(gòu)造函數(shù),將其轉(zhuǎn)換為RegExp對象。
其返回值為存放匹配結(jié)果的數(shù)組,該數(shù)組的內(nèi)容依賴于regexp是否具有全局標(biāo)志g。
match()方法將檢索字符串stringObject,以找到一個或多個與regexp匹配的文本。這個方法的行為在很大程度上依賴于regexp是否具有標(biāo)志g。如果regexp沒有標(biāo)志g,那么match()方法就只能在stringObject中執(zhí)行一次匹配。如果沒有找到任何匹配的文本,match()將返回null。否則,它將返回一個數(shù)組,其中存放了與它找到的匹配文本有關(guān)的信息。該數(shù)組的第0個元素存放的是匹配文本,而其余元素存放的是與正則表達(dá)式的子表達(dá)式匹配的文本。除了這些常規(guī)的數(shù)組元素之外,返回的數(shù)組還含有兩個對象屬性,index屬性聲明匹配文本的起始字符在stringObject中的位置,input屬性聲明對stringObject的引用。如果regexp具有標(biāo)志g,則match()方法將執(zhí)行全局檢索,找到stringObject中的所有匹配子字符串。若沒有找到任何匹配的子串,則返回null。如果找到了一個或多個匹配子串,則返回一個數(shù)組。不過全局匹配返回的數(shù)組的內(nèi)容與前者大不相同,它的數(shù)組元素中存放的是stringObject中的所有匹配子串,而且也沒有index屬性或input屬性。
注意 在全局檢索模式下,match()不提供與子表達(dá)式匹配的文本的信息,也不聲明每個匹配子串的位置。如果需要這些全局檢索的信息,可以使用RegExp.exec()方法。
例如:使用全局匹配的正則表達(dá)式來檢索字符串中的所有數(shù)字。
<script type="text/javascript"> var str="39 plus 2 equal 41" document.write(str.match(/\d+/g)) </script>
輸出結(jié)果為:39,2,41
3.replace()方法
replace()方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達(dá)式匹配的子串。
語法格式如下。
stringObject.replace(regexp/substr , replacement)
其中參數(shù)regexp/substr指定子字符串或要替換的模式的RegExp對象,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉(zhuǎn)換為RegExp對象。參數(shù)replacement為一個字符串值,指定了替換文本或生成替換文本的函數(shù)。
返回值為一個新的字符串,是用replacement替換了regexp的第一次匹配或所有匹配之后得到的。
字符串stringObject的replace()方法執(zhí)行查找并替換的操作。它將在stringObject中查找與regexp相匹配的子字符串,然后用replacement來替換這些子串。如果regexp具有全局標(biāo)志g,那么replace()方法將替換所有匹配的子串;否則,它只替換第一個匹配子串。
replacement可以是字符串,也可以是函數(shù)。如果它是字符串,那么每個匹配都將由字符串替換。但是replacement中的$字符具有特定的含義。表2-17說明從模式匹配得到的字符串將用于替換。
表2-17 參數(shù)replacement中的$字符的含義
注意 ECMAScript v3規(guī)定,replace()方法的參數(shù)replacement可以是函數(shù)而不是字符串。在這種情況下,每個匹配都調(diào)用該函數(shù),它返回的字符串將作為替換文本使用。該函數(shù)的第一個參數(shù)是匹配模式的字符串。接下來的參數(shù)是與模式中的子表達(dá)式匹配的字符串,可以有0個或多個這樣的參數(shù)。接下來的參數(shù)是一個整數(shù),聲明了匹配在stringObject中出現(xiàn)的位置。最后一個參數(shù)是stringObject本身。
示例1:確保匹配字符串大寫字符的正確性。
<script type="text/javascript"> text = "javascript"; document.write(text.replace(/javascript/i, "JavaScript")); </script>
輸出結(jié)果為JavaScript。
示例2:將所有的雙引號替換為單引號。
<script type="text/javascript"> name = '"a", "b"'; document.write(name.replace(/"([^"]*)"/g, "'$1'")); </script>
輸出結(jié)果為'a','b'。
示例3:將字符串中所有單詞的首字母都轉(zhuǎn)換為大寫。
name = 'aaa bbb ccc'; uw=name.replace(/\b\w+\b/g , function(word){ return word.substring(0,1).toUpperCase()+word.substring(1);} ); document.write(uw)
輸出結(jié)果為Aaa Bbb Ccc。
4.split()方法
用于把一個字符串分割成字符串?dāng)?shù)組。語法格式如下。
stringObject.split(separator,howmany)
其中參數(shù)separator是必需參數(shù),該參數(shù)為字符串或正則表達(dá)式,從該參數(shù)指定的位置分割stringObject。參數(shù)howmany是可選參數(shù),該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù),返回的子串不會多于這個參數(shù)指定的數(shù)組;如果沒有設(shè)置該參數(shù),整個字符串都會被分割,不考慮它的長度。
返回值為一個字符串?dāng)?shù)組。該數(shù)組是通過在separator指定的邊界處將字符串stringObject分割成子串創(chuàng)建的。返回的數(shù)組中的字符串不包括separator自身。如果separator是包含子表達(dá)式的正則表達(dá)式,那么返回的數(shù)組中包括與這些子表達(dá)式匹配的字串(但不包括與整個正則表達(dá)式匹配的文本)。
如果把空字符串("")用作separator,那么stringObject中的每個字符之間都會被分割。String.split()執(zhí)行的操作與Array.join執(zhí)行的操作相反。
例如:按照不同的方式來分割字符串。
<script type="text/javascript"> var str="How are you?" document.write(str.split("") + "<br />") //把句子分割成單詞 document.write(str.split("") + "<br />") //把單詞分割為字母 document.write(str.split(" ",2)) //返回一部分字符,這里只返回前兩個單詞 </script>
輸出結(jié)果為
How,are,you? H,o,w, ,a,r,e, ,y,o,u,? How,are
下列表達(dá)式將分割結(jié)構(gòu)為更復(fù)雜的字符串:
"2:3:4:5".split(":") //將返回["2", "3", "4", "5"] "|a|b|c".split("|") //將返回["", "a", "b", "c"]
可以把句子分割成單詞。
var words = sentence.split(' ')
或者使用正則表達(dá)式作為separator。
var words = sentence.split(/\s+/)
2.11 JavaScript和jQuery的使用比較
網(wǎng)頁中有以下HTML代碼:<div id="demo"></div>,分別使用JavaScript方式和jQuery方式實(shí)現(xiàn)在該標(biāo)簽位置輸出文本信息。
(1)使用JavaScript方式實(shí)現(xiàn)。
JavaScript允許通過id查找HTML元素,然后改變HTML元素的內(nèi)容。
function displayInfo( ) { var obj=document.getElementById("demo") ; obj.innerHTML="JavaScript" ; } displayInfo() ;
(2)使用jQuery方式實(shí)現(xiàn)。
jQuery允許通過CSS選擇器來選取元素,然后設(shè)置HTML元素的內(nèi)容。
function displayInfo() { $("#demo").html("jQuery") ; }
jQuery的主要函數(shù)是$()函數(shù)(jQuery函數(shù))。如果向該函數(shù)傳遞DOM對象,它會返回jQuery對象,帶有向其添加的jQuery功能。jQuery使用$("#id")代替document.getElementById("id"),即通過id獲取元素。使用$("tagName")代替document.getElementByTagName("tagName"),即通過標(biāo)簽名稱獲取HTML元素。
上面代碼的最后一行,DOM文檔對象$(document)被傳遞到j(luò)Query。當(dāng)向jQuery傳遞DOM對象時,jQuery會返回jQuery對象。
ready()是jQuery對象的一個方法,由于在JavaScript中函數(shù)就是對象,因此可以把displayInfo作為變量傳遞給jQuery的ready方法。
提示 jQuery返回jQuery對象,與已傳遞的DOM對象不同。jQuery對象擁有的屬性和方法與DOM對象的不同。不能在jQuery對象上使用DOM的屬性和方法。
引導(dǎo)訓(xùn)練
- 兩周自制腳本語言
- 深入淺出Spring Boot 2.x
- Magento 2 Development Cookbook
- Java深入解析:透析Java本質(zhì)的36個話題
- PostgreSQL Replication(Second Edition)
- Java Web開發(fā)就該這樣學(xué)
- Learning YARN
- Illustrator CS6設(shè)計(jì)與應(yīng)用任務(wù)教程
- 工業(yè)機(jī)器人離線編程
- Machine Learning for Developers
- Java EE架構(gòu)設(shè)計(jì)與開發(fā)實(shí)踐
- Microsoft Exchange Server 2016 PowerShell Cookbook(Fourth Edition)
- Clojure for Finance
- 計(jì)算機(jī)程序的構(gòu)造和解釋(JavaScript版)
- Backbone.js Patterns and Best Practices