返回列表 上一主題 發帖

[教學] (教學第18篇)網頁物件 上篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 正序看帖
打印
tT
發表於 2010-5-18 18:40 | 只看該作者

[教學] (教學第18篇)網頁物件 上篇

網頁物件：document，document物件我們之前已經用過了喔！還記得我們要將資料輸出到網頁上時，使用了write()方法，這個write()方法就是屬於document物件的！

其實，document物件是指：顯示於瀏覽器視窗中的網頁文件，舉凡與網頁相關的設定項目，都是document的屬性。


網頁標題
當我們使用HTML標籤來撰寫網頁文件時，都會使用<TITLE>…</TITLE>這組標籤來放置網頁的主題名稱，就如同應用程式標題列中所顯示的文件檔名一般。


如果要利用JavaScript來設定網頁文件的標題名稱，則必須利用document物件的「title」屬性：
  1. document.title=”網頁文件標題”
複製代碼
實作學習：
利用document物件的「title」屬性設定網頁標題。
7-1.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁標題</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <form>
  7. <input type="button" value="按我" OnClick="document.title='我是JavaScript產生的網頁標題'">
  8. </form>
  9. </BODY>
  10. </HTML>
複製代碼

  • 在網頁原始碼第3行中，我們已經先利用<TITLE>標籤位網頁訂了一個標題「網頁標題」。
  • 網頁原始碼第7行，雖然我們已經為網頁預設了一個標題，但是我們在網頁中佈置了一個按鈕，按下這個按鈕會引發OnClick事件，進而執行『document.title='我是JavaScript產生的網頁標題'』這個JavaScript程式敘述，達到動態變更網頁標題的目的：




  進階研究：閃爍式網頁標題
利用document物件的「title」屬性與setTimeout()方法，撰寫閃爍式網頁標題程式。
7-2.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁標題</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //設定變換的旗標變數
  7. show="no"
  8. //網頁標題切換函式
  9. function titleTxt()
  10. {
  11. //旗標變數為no,網頁標題訂為"歡迎光臨"
  12. if (show=="no")
  13. {
  14. document.title="歡迎光臨"
  15. show="yes"
  16. }
  17. //旗標變數為yes,網頁標題訂為"網頁標題"
  18. else
  19. {
  20. document.title="網頁標題"
  21. show="no"
  22. }
  23. //重複呼叫網頁標題切換函式造成標題閃爍切換效果
  24. setTimeout("titleTxt()", 500)
  25. }
  26. </SCRIPT>
  27. <!-- 網頁載入時呼叫網頁標題切換函式 -->
  28. <BODY OnLoad="titleTxt()">
  29. 注意看!視窗標題列文字正在閃爍變換!!
  30. </BODY>
  31. </HTML>
複製代碼
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
3#
發表於 2010-5-18 18:46 | 只看該作者
網頁前景色
什麼是網頁前景色ㄚ？網頁前景色就是指網頁中文字的預設顏色啦！網頁前景色的設定在HTML裡，也是屬於屬於<BODY>標籤的屬性：
指定網頁前景色
  1. <BODY TEXT=”顏色值”>
複製代碼
TEXT屬性值你可以直接填入顏色的英文單字，也可以使用ＲＧＢ１６進制的顏色碼來設定。

要使用JavaScript程式動態的改變或設定網頁的前景色(網頁文字的預設文字)，必須使用document物件的「fgColor」屬性：
  1. Document.fgColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”
複製代碼
實作學習：
利用document物件的「fgColor」屬性設定網頁前景色。
7-5.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁前景色</TITLE>
  4. </HEAD>
  5. <!--預設網頁前景(文字)顏色為紅色-->
  6. <BODY TEXT="red" BGCOLOR="#808080">
  7. <form>
  8. 請選擇網頁前景(文字)顏色
  9. <!-- 利用document物件的fgColor屬性動態設定前景顏色>
  10. <input type="button" value="粉藍色" onClick="document.fgColor='#CCFFFF'">
  11. <input type="button" value="粉紅色" onClick="document.fgColor='#FFCCCC'">
  12. <input type="button" value="青綠色" onClick="document.fgColor='#CCFF33'">
  13. </form>
  14. </BODY>
  15. </HTML>
複製代碼
在本例中，我們在網頁中佈置了三個按鈕，按下按鈕會引發OnClick事件，進而執行『document.fgColor='顏色'』這個JavaScript程式敘述，達到動態變更網頁前景色(網頁文字預設顏色)的效果。
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-18 18:44 | 只看該作者
網頁背景色
網頁背景色在HTML裡屬於<BODY>標籤的屬性：
指定網頁背景顏色
  1. <BODY BGCOLOR=”顏色”>
複製代碼
BGCOLOR屬性的顏色值大多使用ＲＧＢ１６進制的顏色碼來設定，例如：要設定為紅色，則顏色碼就是「#FF0000」，當然您也可以用英文單字「RED」來替代啦。

在JavaScript中，要對網頁的背景顏色做設定，則是使用document物件的「bgColor」屬性：
  1. document.bgColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”
複製代碼
實作學習：
利用document物件的「bgColor」屬性設定網頁背景色。
7-3.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁背景色</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <form>
  7. <input type="button" value="綠色背景" onClick="document.bgColor='#00ff00'">
  8. <input type="button" value="藍色背景" onClick="document.bgColor='#0000ff'">
  9. <input type="button" value="紅色背景" onClick="document.bgColor='#ff0000'">
  10. </form>
  11. </BODY>
  12. </HTML>
複製代碼
在本例中，我們在網頁中佈置了三個按鈕，按下按鈕會引發OnClick事件，進而執行『document.bgColor='顏色'』這個JavaScript程式敘述，達到動態變更網頁背景色的效果。



進階研究：連續變換網頁背景色
利用document物件的「bgColor」屬性與setTimeout()方法，撰寫自動且連續不斷變換網頁背景設色的Javascript程式。
7-4.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁背景色</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //設定背景色切換的旗標變數
  7. n=0
  8. //背景色切換函式
  9. function changecolor()
  10. {
  11. if (n == 0 )
  12.    {document.bgColor="olive"}
  13. else if (n == 1 )
  14.     {document.bgColor="teal"}
  15. else if (n == 2 )
  16.      {document.bgColor="red"}
  17. else if (n == 3 )
  18.      {document.bgColor="blue"}
  19. else if (n == 4 )
  20.      {document.bgColor="maroon"}
  21. else if (n == 5 )
  22.      {document.bgColor="navy"}
  23. else if (n == 6 )
  24.       {document.bgColor="lime"}
  25. else if (n == 7 )
  26.       {document.bgColor="fuschia"}
  27. else if (n == 8 )
  28.      {document.bgColor="green"}
  29. else if (n == 9 )
  30.       {document.bgColor="purple"}
  31. else if (n == 10 )
  32.        {document.bgColor="gray"}
  33. else if (n == 11 )
  34.       {document.bgColor="yellow"}
  35. else if (n == 12 )
  36.        {document.bgColor="aqua"}
  37. else if (n == 13 )
  38.         {document.bgColor="black"}
  39. else if (n == 14 )
  40.        {document.bgColor="white"}
  41. else if (n == 15 )
  42.        {document.bgColor="silver"}
  43. n++ //等同n=n+1
  44. //如果旗標變數值大於預設顏色的個數,則將變數內容歸零
  45. if (n>15)
  46. {n=0}
  47. //重複呼叫背景色切換函式
  48. setTimeout("changecolor()", 500)
  49. }
  50. </SCRIPT>
  51. <!-- 網頁載入時呼叫背景色切換函式 -->
  52. <BODY OnLoad="changecolor()">
  53. 不斷變換的背景顏色
  54. </BODY>
  55. </HTML>
複製代碼

7-4.png (13.19 KB)

7-4.png

心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 做該做的事是智慧，做不該做的事是愚癡。
返回列表 上一主題