- JavaScript腳本特效編程給力起飛
- 茍英等編著
- 2971字
- 2019-06-19 18:08:58
2.3 常用對象
JavaScript的一個重要功能就是面向對象的功能，通過基于對象的程序設計，可以用更直觀、模塊化和可重復使用的方式進行程序開發。
一組包含數據的屬性和對屬性中包含數據進行操作的方法，稱為對象。比如要設定網頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍色。
下面介紹一些JavaScript的常用內置對象。
2.3.1 字符串對象
1. 轉義字符串對象
在JavaScript中，有一些特殊的字符串對象，主要包括引號、回車符號、換行，等等。下面列出這些字符的實現方法。
雙引號，\"
單引號，\'
反斜杠，\\
退格，\b
Tab，\t
換行，\n
回車，\r
走紙換頁，\f
下面的語句就可以實現以上的特殊字符，那在編寫JavaScript程序過程中，通過反斜杠加上特殊的字符就實現了特殊字符在頁面中表現的方法，請看下面的示例。
例2-18
<html> <head> <title></title> </head> <body> <p align="left">轉義字符的引用</p> <script language="javascript"> <!— yuju="大哥說\"我錯了\"" Alert(yuju) //--> </script> </body> </html>
顯示效果如圖2-16所示。
圖2-16 轉義字符雙引號的使用
2. 字符串對象的定義
var s = "這是我的字符串對象";
定義了s這個字符串之后，就有了一個字符串對象，可以訪問它的長度屬性（length），這個屬性不需要定義，它是一個內置的屬性。訪問的方式如下：
alert(s.length)
下面的例子使用了字符串對象的長度屬性來計算字符串的長度。
例2-19
<html> <head> <script languge="javascript"> var txt="Hello China!" alert(txt.length) </script> </head> </html>
輸出結果為12，如圖2-17所示。
圖2-17 字符串長度
3. 字符串對象的方法
■ toUpperCase()方法
下面的例子使用字符串對象的toUpperCase()方法將字符串轉換為大寫。
例2-20
<html> <head> <script languge="javascript"> var txt="Hello world!" document.write(txt.toUpperCase()) </script> </head> </html>
輸出為“HELLO WORLD!”，如圖2-18所示。
圖2-18 字符串轉換為大寫
■ toLowerCase
toLowerCase() 方法用于把字符串轉換為小寫。請看下面的例2-21。
例2-21
<html>
<head>
<title></title>
</head>
<body>
<p align="left">轉義字符的引用</p>
<script language="javascript">
<!--
yuju="THIS IS A BIG DOG"
document.writeln("大寫：")
document.writeln(yuju)
re=yuju.toLowerCase()
document.writeln("<br>小寫："+re)
//-->
</script>
</body>
</html>
顯示結果分別為大寫和小寫的“THIS IS A BIG DOG”和“this is a big dog”，如圖2-19所示。
圖2-19 字符串轉換為小寫
■ “+”加法
該方法將兩個字符串連接起來，在實際的應用中常涉及到，請看下面的例2-22。
例2-22
<html> <head> <title></title> </head> <body> <p align="left">轉義字符的引用</p> <script language="javascript"> <!-- yuju="大哥說錯了" cd="小李也不對" document.write(yuju+cd) //--> </script> </body> </html>
顯示結果為“大哥說錯了小李也不對”，如圖2-20所示。
圖2-20 字符串相加
■ charAt
該方法從字符串中返回一個字符，這個方法在應用的時候，通常會設置一個起始位置的參數，然后傳回位于該字符串對象位置的字符值。在使用的時候，系統認為字符串起始位置為0。
該方法的調用方式如下：
String.charat(index)
其中，index表示返回的字符位置。
請看下面的例子。
例2-23
<html> <head> <title></title> </head> <body> <p align="left">轉義字符的引用</p> <script language="javascript"> <!-- yuju="媽媽說好了" cd=yuju.charAt(2) document.write(cd) //--> </script> </body> </html>
顯示結果為字符位置為2的“說”，如圖2-21所示。
圖2-21 返回指定字符
■ indexOf
該方法從一個特定的位置開始查找設置的字符、返回一個字符或是字符串上起始位置值，如果在特定位置找不到用戶設置的字符串對象，則返回-1，這在利用JavaScript設置查找數據的格式化過程中非常有用。在后面的綜合部分，系統常利用該方法來完成檢索和數據檢驗方面的工作。這里只簡單介紹一下其用法。
string1.indexOf(string2,index)
其中，string2表示需檢索的字符串值，是必需的；index表示可選的整數參數，規定在字符串中開始檢索的位置，它的合法取值是0~string1object.length-1。
例2-24
<html>
<head>
<title></title>
</head>
<body>
<p align="left">轉義字符的引用</p>
<script language="javascript">
<!--
yuju="字符串對象"
cd="對象"
re=yuju.indexOf(cd)
document.write(re)
ls=yuju.indexOf(cd,5)
document.write("<br>"+ls)
//-->
</script>
</body>
</html>
顯示結果為3和-1，如圖2-22所示。
圖2-22 返回字符串位置值
■ lastindexOf
該方法的使用與上面的indexOf的使用一樣，只是該方法從字符串對象的尾部開始搜索。將上面的例子稍加改動，看看這兩個方法的不同之處。
例2-25
<html> <head> <title></title> </head> <body> <p align="left">轉義字符的引用</p> <script language="javascript"> <!-- yuju="字符串對象" cd="對象" re=yuju.lastindexOf(cd) document.write(re) //--> </script> </body> </html>
顯示結果為3，如圖2-23所示。
圖2-23 lastindexOf方法
■ substring
該方法為字符串截取方法，在設置的時候一般會設置兩個參數指定截取的位置，然后將兩個參數間的字符串返回給設置的變量。當兩個參數相等的時候，就返回一個空字符串。在涉及的運行中，一般可以不管參數的大小和前后的位置，它截取的順序都是從最小的參數開始，截取到最大參數位置。如果沒有指定最后的參數，系統默認截取到字符串對象的末尾。
該方法的調用格式如下：
string.substring(start,stop)
其中，start必須有，是一個非負的整數，規定要提取的字符串的第一個字符在string中的位置；stop可選，是一個非負的整數，比要提取的字符串的最后一個字符在string中的位置多1，如果省略該參數，那么返回的字符串會一直到字符串的結尾。
例2-26
<html> <head> <title></title> </head> <body> <p align="left">轉義字符的引用</p> <script language="javascript"> <!-- yuju="字符串對象" cd="對象" re=yuju.substring(3,5) document.writeln(re) //--> </script> </body> </html>
顯示結果為“對象”，如圖2-24所示。
圖2-24 substring方法
■ anchor
利用該方法在頁面中創建和顯示一個HTML超文本目標。在利用該方法的時候，必須在文檔中建立一個錨點，然后調用write方法在文檔中寫出該鏈接錨點，達到在頁面中快速定位的目的。
該方法的調用格式如下：
string.anchor(anchorname)
例2-27
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的<a href="#anc">引用</a></p>
<script language="javascript">
<!--
zifu="this is anchor"
anc=zifu.anchor("anc")
document.write("anc")
//-->
</script>
</body>
</html>
顯示結果如圖2-25所示。
圖2-25 anchor方法
■ big
該方法將設置的字符轉換為大字體格式，在功能的實現上，與HTML語言的<big>一樣。在頁面中顯示時，會將設置的字符串對象大號顯示。
請看下面的示例。
例2-28
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的引用</p>
<script language="javascript">
<!--
zifu="您好"
document.write(zifu)
anc=zifu.big("anc")
document.write(anc)
//-->
</script>
</body>
</html>
顯示結果如圖2-26所示。
圖2-26 big方法
■ bold
該方法將設置的文本粗體顯示。在功能的實現中與HTML標簽中的<b>相似。這些方法實質上是JavaScript格式的控制語言。
該方法的應用格式如下：
String.bold()
請看下面的示例。
例2-29
<html> <head> <title></title> </head> <body> <p align="left">字符的引用</p> <script language="javascript"> <!-- zifu="字符的引用" anc=zifu.bold() document.write(anc) //--> </script> </body> </html>
顯示結果如圖2-27所示。
圖2-27 bold方法
下面看看其他的一些格式變化：
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的引用</p>
<script language="javascript">
<!--
zifu="字符的引用"
anc1=zifu.bold()
document.write(anc1)
anc2=zifu.italics()
document.write("<br>"+anc2)
anc3=zifu.sub()
document.write("<br>"+anc3)
anc4=zifu.sup()
document.write("<br>"+anc4)
anc5=zifu.fontsize(7)
document.write("<br>"+anc5)
anc6=zifu.fontcolor("red")
document.write("<br>"+anc6)
//-->
</script>
</body>
</html>
顯示的格式有多種，如圖2-28所示。
圖2-28 字符格式引用
字符串對象的屬性和方法還有很多，這里就不一一講述了，大家可以查看相關的對象手冊。
2.3.2 Date對象
Date對象保存從1970年1月1日0時0分0秒0毫秒到記錄時間的毫秒值。在JavaScript中創建Date對象的語法有如下三種。
1. 無參創建
var dt=new Date();
當使用這種方式創建的時候，日期對象保存的是系統的當前時間。
2. 通過值創建
var dt=new Date(dateVal);
這種方式表示創建一個指定時間，dateVal可以是一個數字，也可以是一個字符串。如果是數字，表示日期是從1970年1月1日0時0分0秒0毫秒加上dateVal；如果是字符串，如“2008-8-8”(也可以是 d1 = new Date("8-8, 2008 11:13:00"))，表示指定的時間，當然使用這種方式必須符合日期的格式。
3. 通過多個參數創建
var dt=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);
其中：
■ year：必選項。完整的年份，比如“1976”（而不是76）。
■ month：必選項。表示的月份，0~11之間的整數（1月至12月）。
■ date：必選項。表示日期，1~31之間的整數。
■ hours：可選項。如果提供了minutes參數則必須給出。表示小時，0~23的整數（午夜到11pm）。
■ minutes：可選項。如果提供了seconds參數則必須給出。表示分，0~59的整數。
■ seconds：可選項。如果提供了milliseconds參數則必須給出。表示秒，0~59的整數。
■ ms：可選項。表示毫秒，0~999的整數。
Date對象常用的方法可以分為三組，分別用于得到日期相應部分的值（表2-1）、設置日期相應部分的值（表2-2）和將日期轉換為字符串（表2-3）。
表2-1 get組方法
表2-2 set組方法
表2-3 to組方法
通過下面的示例了解Date對象的基本用法。
例2-30
<html>
<head>
<title>單擊事件</title>
<script type="text/javascript">
function disDate(){
//創建日期對象，得到當前時間
var now = new Date();
//得到年、月、日、時、分、秒、毫秒、星期數
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var ms = now.getMilliseconds();
var day = now.getDay();
var strDay = "";
switch(day){
case 1:
strDay = "星期一"; break;
case 2:
strDay = "星期二"; break;
case 3:
strDay = "星期三"; break;
case 4:
strDay = "星期四"; break;
case 5:
strDay = "星期五"; break;
case 6:
strDay = "星期六"; break;
case 0:
strDay = "星期天"; break;
}
var nowStr = year + "年" + month + "月" + date + "日 "
+ hour + "時" + minute + "分" + second + "秒"
+ ms + "毫秒 "+strDay;
//年分加1
now.setFullYear(year+1);
var nextStr = now.toLocaleString();
alert("當前時間是："+nowStr+"\n\n一年后的今天是："+nextStr);
}
</script>
</head>
<body>
<input type="button" value="一年后的今天是？" onClick="disDate()" />
</body>
</html>
運行效果如圖2-29所示，單擊按鈕后效果如圖2-30所示。
圖2-29 Date對象的使用（一）
圖2-30 Date對象的使用（二）
2.3.3 Math對象
Math對象用于復雜的數據計算，JavaScript中Math對象常用屬性如表2-4所示、常用方法如表2-5所示。
表2-4 Math對象常用屬性
表2-5 Math對象常用方法
例2-31通過計算圓的周長和面積演示了Math對象屬性和方法的使用。
例2-31
……
<script type="text/javascript">
function calc(){
//接受用戶輸入
var r = prompt("請輸入圓的半徑：");
//計算周長
var zc = 2 * Math.PI * r;
//計算面積
var mj = Math.PI * Math.pow(r,2);
alert("半徑為"+r+"的圓的周長是：" + zc + "\n\n半徑為" + r
+ "的圓的面積是：" + mj);
}
</script>
</head>
<body>
<input type="button" value="圓周長和面積計算器" onClick="calc()" />
</body>
</html>
在例中使用了一個prompt函數，用于接受用戶輸入圓的半徑，當運行此頁面的時候會出現如圖2-31所示的效果，單擊按鈕出現如圖2-32所示的對話框，當輸入半徑后得到最后運算結果，如圖2-33所示。
圖2-31 Math對象的使用（一）
圖2-32 Math對象的使用（二）
圖2-33 Math對象的使用（三）
- 深度實踐OpenStack：基于Python的OpenStack組件開發
- ServiceNow Application Development
- Learning Cython Programming
- Reporting with Visual Studio and Crystal Reports
- Linux核心技術從小白到大牛
- HoloLens Beginner's Guide
- Servlet/JSP深入詳解
- Elastic Stack應用寶典
- Mastering Python Networking
- Access 2010數據庫應用技術（第2版）
- Swift 4 Protocol-Oriented Programming（Third Edition）
- Extreme C
- Visual Basic程序設計習題與上機實踐
- 編寫高質量代碼：改善Objective-C程序的61個建議
- Python數據可視化之美：專業圖表繪制指南（全彩）