2019年2月7日 星期四

(03)JavaScript物件說明與日期物件

何謂物件

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

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

物件的屬性

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

物件與屬性之間的關係該如何來表示呢?其語法架構如下:
  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

實做學習:

撰寫一個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() 函式將時間結果輸出至網頁中。
請注意:在程式敘述中的『+』加號,在此並不是數學運算元,而是一個串接運算元,它會把『+』加號前後的資料串接起來。


沒有留言:

張貼留言