Javascript基礎部分（四）DOM物件和內建物件

4.1與使用者互動

在window物件的方法中，有一些事專門用於處理輸入與輸出資訊的，從而實現頁面與使用者的互動。

（1）、alert（）

alert（）向用戶彈出一個資訊對話方塊，這種模態的對話方塊只是顯示一些訊息和一個“確定”按鈕。模態：意味著指令碼暫時停止執行，頁面與使用者的互動也被暫時停止，直到使用者關閉對話方塊為止。alert()方法示例：
alert（“this is my message”）;

lert()沒有返回值。

（2）、confirm()

confirm()也彈出一個模態對話方塊，但為使用者提供了一個選擇，可以單擊“確定”或者“”“取消”按鈕。單擊確定按鈕函式返回值為真，單擊取消按鈕函式返回值為假。

呼叫： var answer = confirm(“are you happy to continue?”);

（3）、promt（）

A)、promt()是開啟模態對話方塊的另一種方式，它允許使用者輸入資訊。呼叫方式：

var answer = promt(“what is your full name？”)；

B)、promt()方法還可以有第二個可選引數，表示預設的輸入內容，從而避免使用者直接點選“確定”按鈕而不輸入任何內容。呼叫方式：

var answer = promt（“what is your full name？”，“john doe”）；

C)、promt()對話方塊的返回值取決於使用者進行了什麼操作。

（1）、輸入資訊，點選“確定”按鈕或回車鍵，返回值就是使用者輸入的字串。

（2）、沒有在對話方塊裡輸入，就點選“確定”按鈕或回車鍵，返回值就是呼叫promt（）方法設定的第二個可選引數的值。（如果有的話）

（3）如果使用者直接關閉了對話方塊（也就是點選“取消”按鈕或按ESC鍵），返回值就是null;

4.2根據id選擇元素

A)、getElementById();

例：<div id = “div1”>

.....DIV元素的內容....

</div>

在javascript程式碼裡，把相應的id作為引數呼叫getElementById()方法，就可以訪問這個<div>

var myDiv = document.getElementById(“div1”);

這樣就得到了頁面的特定的元素，能夠訪問它的全部屬性和方法。

B)、innerHTML屬性

innerHTML屬性對於很多DOM物件來說都是一個很好用的屬性，可以讀取或設定特定頁面元素內部的HTML內容。

假設HTML頁面包含如下元素：

<div if = “ div1”>

<p>here is some original text.</p>

</div>

(1)利用getElementById()和innerHTML()的組合就可以訪問這個<div>元素裡的HTML內容

var myDivContents = document.getElementById(“div1”).innerHTML   

這樣變數myDivContents現在會包含如下字串：

“<p>here is some original text.</p>”

(2)、還可以利用innerHTML設定選定元素的內容

document.getElementById(“div1”).innerHTML = “<p>here is some new instead!</p>”;

4.3訪問瀏覽器歷史記錄

Javascript裡，瀏覽器的歷史記錄是以window.history物件代表的，它基本上就是訪問過的URL列表。可通過這個方法使用這個列表，但是不能直接的修改這些URL。

History擁有三個方法和一個屬性：屬性是length,表示使用者訪問過的頁面的數量。

（1）、forward（)方法和backward()方法相當於點選瀏覽器的“前進”和“後退”按鈕，可以得到歷史列表裡下一個或前一個頁面。

（2）第三個方法是go(),它只有一個引數，是正的或負的整數，可以跳到歷史記錄列表裡的相對位置：

history.go(-3);    //回退三個頁面

history.go(2); //前進兩個頁面。

4.4使用location物件

Location物件包含當前載入頁面的URL資訊。

（1）、使用location物件導航

利用location物件有兩種方式可以幫助使用者導航至新頁面。

a)、直接設定物件的href屬性。

location.href  = ‘www.newpage.com’; //這種方法轉移頁面後，原始頁面還在瀏覽器記錄裡面。

B)、用新的URL直接替換當前頁面，即把當前頁面從歷史記錄列表裡刪除，可以使用location物件的replace()方法。

location.replace(‘www.newpage.con’);

(2)、重新整理頁面

要在瀏覽器裡重新載入當前頁面，也就是相當於使用者點選“重新整理”按鈕，我們可以使用reload()方法：

location.reload();

4.5瀏覽器資訊navigator物件

Location物件包含了瀏覽器當前URL的資訊，而navigator物件包含了瀏覽器程式本身的資料。

4.6日期和時間

Date物件用於處理日期和時間。與前面的物件不同的是，DOM裡並沒有現成的Date物件，而是要我們自己在需要時建立自己的Date物件。每個Date物件都代表不同的日期和時間。

4.7利用Math物件簡化運算

Math物件不需要建立就可以使用，它是已經存在的，直接呼叫它就可以使用了。

注：關鍵字with，通過使用with可以減少一些枯燥的鍵盤輸入工作。

例：with（Math）

{

var myrand = random();

var biggest = max(3,4,5);

}

在這個例子裡我們只使用方法的名稱就呼叫了Math.random、Math.max()方法，因為呼叫這些方法的程式碼塊與Math物件實現了關聯。