Board logo

標題: [教學] (教學第3篇)JavaScript物件說明與日期物件 [打印本頁]
作者: 小誌    時間: 2010-5-9 16:53     標題: (教學第3篇)JavaScript物件說明與日期物件

何謂物件
什麼是物件？舉凡你叫的出名字的『東西』都是物件！『汽車』是不是物件？當然是物件，『地球』是不是物件？『地球』也是個物件，那『日期』呢？你還在思考喔！『地球』、『汽車』我們都看得到，所以我們肯定它們是物件，『日期』是個無形的東西，但是它沒有實體，所以你會遲疑，可是『日期』這個東西確實是存在的，而且你也叫的出名字，因此『日期』他肯定是個物件。

在JavaScript有許多物件喔，別懷疑！我們剛才已經用過一個物件了！是誰？就是『document』，『document』？它是誰ㄚ？它就是網頁ㄚ！我們剛剛不是一直在網頁中輸出資料嗎？沒辦法啦！Javascript是外國人發明的嘛！如果是我們中國人發明的當然就會稱『網頁』而不叫『document』了。

物件的屬性
當您要購買一樣物品，拿買車來說好了，你會考慮什麼？廠牌、ｃｃ數、顏色、安全氣囊….等等，對吧！沒錯，您會把購車的條件規格列出清單，請你記得：在程式的設計過程中，您就是造物者！因此程式物件的外貌要長什麼樣子就由您決定了，而剛剛談的購車條件規格，相對於我們的程式設計就是所謂的物件屬性了。黑色的車是車、紅色的車是車；黑色背景的網頁是網頁、紅色背景的網頁也是網頁，不過規格屬性不同罷了，這樣瞭了嗎？

物件與屬性之間的關係該如何來表示呢？其語法架構如下：
  1. 物件.屬性＝屬性值;
複製代碼
比如說：你希望你車子的顏色是黑的，也就是說你車子的『顏色』屬性必須是黑色的，那我們就可以用下列敘述來表示：
  1. 車子.顏色＝黑色;
複製代碼
那個『.』點就是『的』的意思！

現在小誌利用JavaScript的『視窗（window）』物件來舉個例子（後續我們再來詳談window物件）：『視窗（window）』物件它有一個『location』的屬性，它是用來指定開啟HTML文件的位置(就是網址啦！)，如果我們在JavaScript程式中加入了下列這段敘述，則將會將你目前瀏覽的文件位置轉換到小誌的網站『小誌嗑咖啡』：
  1. window.location="http://blog.twbts.com";
複製代碼
物件的方法
物件的屬性可以讓我們改變物件的特性，那物件的方法呢？物件的方法就是物件所能提供的『功能』！以我們之前使用過的document物件為例，我們利用它的『write()』方法將資料輸出顯示到網頁中，這『write()』方法就是document物件的一項功能！它可將資料『寫』到HTML文件中；屬性與物件在敘述撰寫上看起來很相似，但是方法後方加上了一組『（）』括號：
  1. 物件.屬性;
  2. 物件.方法();
複製代碼
日期物件 Date()
日期物件Date()在我們JavaScript程式中佔有相當重要的地位，要使用日期物件Date()必須先用『new』建構子將其建立出來：
  1. 日期物件名 = new Date();
複製代碼
當我們將日期物件建立出來後，日期物件還不能使用喔！我們還必須透過日期物件的資料擷取方法將年、月、日、時、分、秒等資料擷取出來再作組合與利用，茲將日期物件的擷取方法列表如下：
單位        擷取函數       
年        getYear()        取得年份，回應數字為四位數
月        getMonth()        取得月份，回應數字為1至12
日        getDate()        取得日期，回應數字為1至31
星期        getDay()        取得星期，回應數字為0至6
時        getHours()        取得小時，回應數字為0至23
分        getMinutes()        取得分，回應數字為0至59
秒        getSeconds()        取得秒，回應數字為0至59

       注意！！日期物件Date()的開頭字母『D』是大寫喔！如果寫成小寫程式就出錯了！


實做學習：
撰寫一個JavaScript程式，顯示瀏覽者開始瀏覽網頁的時間，必須包含時、分、秒：
  1. <script language="javascript">
  2. begintime = new Date();
  3. beginhours=begintime.getHours();
  4. beginminutes=begintime.getMinutes();
  5. beginseconds=begintime.getSeconds();
  6. document.write(beginhours+"時"+beginminutes+"分"+beginseconds+"秒");
  7. </script>
複製代碼
1. 利用new建構子建立一個名為begintime的日期物件。
2. 使用相關的日期物件擷取方法取出時分秒數值資料再加以組合利用。
3. 透過document.write() 函式將時間結果輸出至網頁中。
請注意：在程式敘述中的『＋』加號，在此並不是數學運算元，而是一個串接運算元，它會把『＋』加號前後的資料串接起來。



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)