我們要開始學習內建的 JavaScript 對象,以及如何使用它們。從下一節開始,我們將具體地依次講解的這些內建的 JavaScript 對象。
1、 字符串對象
例子1:計算字符串長度
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
</body>
</html>
例子2:為字符串添加樣式
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
</body>
</html>
indexOf() 方法
如何使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置。
match() 方法
如何使用 match() 來查找字符串中特定的字符,並且如果找到的話,則返回這個字符。
<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>
如何替換字符串中的字符 – replace()
如何使用 replace() 方法在字符串中用某些字符替換另一些字符。
<html>
<body>
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))
</script>
</body>
</html>
2、JavaScript Date(日期)對象
定義日期
Date 對象用於處理日期和時間。
可以通過 new 關鍵詞來定義 Date 對象。以下代碼定義瞭名為 myDate 的 Date 對象:
var myDate=new Date()
註釋:Date 對象自動使用當前的日期和時間作為其初始值。
操作日期
通過使用針對日期對象的方法,我們可以很容易地對日期進行操作。
在下面的例子中,我們為日期對象設置瞭一個特定的日期 (2008 年 8 月 9 日):
var myDate=new Date()
myDate.setFullYear(2008,7,9)
註意:表示月份的參數介於 0 到 11 之間。也就是說,如果希望把月設置為 8 月,則參數應該是 7。
在下面的例子中,我們將日期對象設置為 5 天後的日期:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
註意:如果增加天數會改變月份或者年份,那麼日期對象會自動完成這種轉換。
比較日期
日期對象也可用於比較兩個日期。
下面的代碼將當前日期與 2008 年 8 月 9 日做瞭比較:
var myDate=new Date();
myDate.setFullYear(2008,7,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
getTime()
getTime() 返回從 1970 年 1 月 1 日至今的毫秒數。
<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write("從 1970/01/01 至今已過去 " + d.getTime() + " 毫秒");
</script>
</body>
</html>
setFullYear()
如何使用 setFullYear() 設置具體的日期。
<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html>
toUTCString()
如何使用 toUTCString() 將當日的日期(根據 UTC)轉換為字符串。
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>
getDay()
如何使用 getDay() 和數組來顯示星期,而不僅僅是數字。
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
</script>
</body>
</html>
顯示一個鐘表
如何在網頁上顯示一個鐘表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<p id="txt"></p>
</body>
</html>
3、JavaScript Array(數組)對象
合並兩個數組 – concat()
如何使用 concat() 方法來合並兩個數組。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
</body>
</html>
用數組的元素組成字符串 – join()
如何使用 join() 方法將數組的所有元素組成一個字符串。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</script>
</body>
</html>
文字數組 – sort()
如何使用 sort() 方法從字面上對數組進行排序。
<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>
數字數組 – sort()
如何使用 sort() 方法從數值上對數組進行排序。
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a – b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
4、JavaScript Boolean(邏輯)對象
創建 Boolean 對象
使用關鍵詞 new 來定義 Boolean 對象。下面的代碼定義瞭一個名為 myBoolean 的邏輯對象:
var myBoolean=new Boolean()
5、JavaScript Math(算數)對象
round()
如何使用 round()。
random()
如何使用 random() 來返回 0 到 1 之間的隨機數。
max()
如何使用 max() 來返回兩個給定的數中的較大的數。
min()
如何使用 min() 來返回兩個給定的數中的較小的數。
6、JavaScript RegExp 對象
定義 RegExp
RegExp 對象用於存儲檢索模式。
通過 new 關鍵詞來定義 RegExp 對象。以下代碼定義瞭名為 patt1 的 RegExp 對象,其模式是 "e":
var patt1=new RegExp("e");
當您使用該 RegExp 對象在一個字符串中檢索時,將尋找的是字符 "e"。
RegExp 對象的方法
RegExp 對象有 3 個方法:test()、exec() 以及 compile()。
test()
test() 方法檢索字符串中的指定值。返回值是 true 或 false。
例子:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由於該字符串中存在字母 "e",以上代碼的輸出將是:
true
TIY
exec()
exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
例子 1:
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由於該字符串中存在字母 "e",以上代碼的輸出將是:
e
TIY
compile()
compile() 方法用於改變 RegExp。
compile() 既可以改變檢索模式,也可以添加或刪除第二個參數。
例子:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由於字符串中存在 "e",而沒有 "d",以上代碼的輸出是:
truefalse
7、JavaScript HTML DOM 對象
• Previous Page
• Next Page
除瞭內置的 JavaScript 對象以外,你還可以使用 JavaScript 訪問並處理所有的 HTML DOM 對象。
更多 JavaScript 對象
點擊以下鏈接,可以獲得以下對象的更多信息,包括它們的集合、屬性、方法以及事件。
對象 描述
Window
JavaScript 層級中的頂層對象。Window 對象表示瀏覽器窗口。每當 <body> 或者 <frameset> 標簽出現,Window 對象就會被自動創建。
Navigator
包含客戶端瀏覽器的信息。
Screen
包含客戶端顯示屏的信息。
History
包含瞭瀏覽器窗口訪問過的 URL。
Location
包含瞭當前URL的信息。
HTML DOM
HTML DOM 是 W3C 標準(是 HTML 文檔對象模型的英文縮寫,Document Object Model for HTML)。
HTML DOM 定義瞭用於 HTML 的一系列標準的對象,以及訪問和處理 HTML 文檔的標準方法。
通過 DOM,可以訪問所有的 HTML 元素,連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除,同時也可以創建新的元素。
HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。
點擊下面的鏈接,可獲得更多關於如何使用 JavaScript 來訪問和處理 DOM 對象的知識:
對象 描述
Document
代表整個 HTML 文檔,用來訪問頁面中的所有元素。
Anchor
代表 <a> 元素。
Area
代表圖像地圖中的 <area> 元素。
Base
代表 <base> 元素。
Body
代表圖像地圖中的 <body> 元素。
Button
代表 <button> 元素。
Event
代表事件的狀態
Form
代表 <form> 元素
Frame
代表 <frame> 元素
Frameset
代表 <frameset> 元素
Iframe
代表 <iframe> 元素
Image
代表 <img> 元素
Input button
代表 HTML 表單中的按鈕
Input checkbox
代表 HTML 表單中的選擇框
Input file
代表 HTML 表單中的 fileupload 。
Input hidden
代表 HTML 表單中的隱藏域。
Input password
代表 HTML 表單中的密碼域。
Input radio
代表 HTML 表單中的單選框。
Input reset
代表 HTML 表單中的重置按鈕。
Input submit
代表 HTML 表單中的確認按鈕。
Input text
代表 HTML 表單中的文本輸入域。
Link
代表 <link> 元素
Meta
代表 <meta> 元素
Object
代表一個 <Object> 元素
Option
代表 <option> 元素
Select
代表 HTML 表單中的選擇列表。
Style
代表某個單獨的樣式聲明。
Table
代表 <table> 元素。
TableData
代表 <td> 元素。
TableRow
代表 <tr> 元素。
Textarea
代表 <textarea> 元素。
摘自:jiqikewang的專欄