數位書香: (17)網頁物件上篇

網頁物件：document，document物件我們之前已經用過了喔！還記得我們要將資料輸出到網頁上時，使用了write()方法，這個write()方法就是屬於document物件的！
其實，document物件是指：顯示於瀏覽器視窗中的網頁文件，舉凡與網頁相關的設定項目，都是document的屬性。

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

如果要利用JavaScript來設定網頁文件的標題名稱，則必須利用document物件的「title」屬性：

document.title=”網頁文件標題”

實作學習：
利用document物件的「title」屬性設定網頁標題。

<HTML>
<HEAD>
<TITLE>網頁標題</TITLE>
</HEAD>
<BODY>
<form>
<input type="button" value="按我" OnClick="document.title='我是JavaScript產生的網頁標題'">
</form>
</BODY>
</HTML>

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

進階研究：閃爍式網頁標題
利用document物件的「title」屬性與setTimeout()方法，撰寫閃爍式網頁標題程式。

<HTML>
<HEAD>
<TITLE>網頁標題</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
//設定變換的旗標變數
show="no"
//網頁標題切換函式
function titleTxt()
{
//旗標變數為no,網頁標題訂為"歡迎光臨"
if (show=="no")
{
document.title="歡迎光臨"
show="yes"
}
//旗標變數為yes,網頁標題訂為"網頁標題"
else
{
document.title="網頁標題"
show="no"
}
//重複呼叫網頁標題切換函式造成標題閃爍切換效果
setTimeout("titleTxt()", 500)
}
</SCRIPT>
<BODY OnLoad="titleTxt()">
注意看!視窗標題列文字正在閃爍變換!!
</BODY>
</HTML>

網頁背景色
網頁背景色在HTML裡屬於<BODY>標籤的屬性：
指定網頁背景顏色

<BODY BGCOLOR=”顏色”>

BGCOLOR屬性的顏色值大多使用ＲＧＢ１６進制的顏色碼來設定，例如：要設定為紅色，則顏色碼就是「#FF0000」，當然您也可以用英文單字「RED」來替代啦。

在JavaScript中，要對網頁的背景顏色做設定，則是使用document物件的「bgColor」屬性：

document.bgColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”

實作學習：
利用document物件的「bgColor」屬性設定網頁背景色。

<HTML>
<HEAD>
<TITLE>網頁背景色</TITLE>
</HEAD>
<BODY>
<form>
<input type="button" value="綠色背景" onClick="document.bgColor='#00ff00'">
<input type="button" value="藍色背景" onClick="document.bgColor='#0000ff'">
<input type="button" value="紅色背景" onClick="document.bgColor='#ff0000'">
</form>
</BODY>
</HTML>

在本例中，我們在網頁中佈置了三個按鈕，按下按鈕會引發OnClick事件，進而執行『document.bgColor='顏色'』這個JavaScript程式敘述，達到動態變更網頁背景色的效果。

網頁前景色
什麼是網頁前景色ㄚ？網頁前景色就是指網頁中文字的預設顏色啦！網頁前景色的設定在HTML裡，也是屬於屬於<BODY>標籤的屬性：
指定網頁前景色

<BODY TEXT=”顏色值”>

TEXT屬性值你可以直接填入顏色的英文單字，也可以使用ＲＧＢ１６進制的顏色碼來設定。

要使用JavaScript程式動態的改變或設定網頁的前景色(網頁文字的預設文字)，必須使用document物件的「fgColor」屬性：

Document.fgColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”

實作學習：
利用document物件的「fgColor」屬性設定網頁前景色。

<HTML>
<HEAD>
<TITLE>網頁前景色</TITLE>
</HEAD>
<BODY TEXT="red" BGCOLOR="#808080">
<form>
請選擇網頁前景(文字)顏色
<!-- 利用document物件的fgColor屬性動態設定前景顏色>
<input type="button" value="粉藍色" onClick="document.fgColor='#CCFFFF'">
<input type="button" value="粉紅色" onClick="document.fgColor='#FFCCCC'">
<input type="button" value="青綠色" onClick="document.fgColor='#CCFF33'">
</form>
</BODY>
</HTML>

在本例中，我們在網頁中佈置了三個按鈕，按下按鈕會引發OnClick事件，進而執行『document.fgColor='顏色'』這個JavaScript程式敘述，達到動態變更網頁前景色(網頁文字預設顏色)的效果。

Powerpoint

2019年4月25日星期四

(17)網頁物件上篇

沒有留言:

張貼留言

版權宣告

Powerpoint

2019年4月25日 星期四

(17)網頁物件 上篇

沒有留言:

張貼留言

2019年4月25日星期四

(17)網頁物件上篇