Javascript對象（九）

 

1. 複選框對象：
   
   
   • 格式：

   document.forms[索引].elements[索引].屬性

   document.forms[索引].elements[索引].方法（參數）

   document.表單名稱.單選對象名稱[索引].屬性

   document.表單名稱.單選對象名稱[索引].方法（參數）

   • 屬性：

   checked	設置該對象爲選定狀態
   defaultChecked	對應該對象的默認選定狀態
   form	該對象所在的表單
   name	該對象的name屬性
   type	該對象的type屬性
   value	該對象的value屬性

   • 方法：

   blur()
   click()
   focus()
   handleEvent(事件)

   • 事件處理程序：

   onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
   onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

   • 例：

   <Script>

   function count() {
   var checkCount=0;
   var num = document.form1.elements.length;
   
   for (var i=0; i<num; i++) {
   if (document.form1.elements[i].checked)
       checkCount++;
   }
   alert ("你喜歡 "+ checkCount + "種顏色。")
   }

   </Script>
   <FORM NAME=form1>
   請選擇你喜歡的顏色：<BR>
   <INPUT TYPE="checkbox" NAME="red">紅色
   <INPUT TYPE="checkbox" NAME="green">綠色
   <INPUT TYPE="checkbox" NAME="blue">藍色<BR>
   <INPUT TYPE="button" VALUE="請單擊" onClick=count()>
   </FORM>

2. 選擇對象：
   
   
   • 屬性：

   form	該對象所在的表單
   name	該對象的name屬性
   length	選項的數目
   options	<option>標記
   selectedIndex	所選項目的索引值
   type	該對象的type屬性

   • 方法：

   blur()
   focus()
   handleEvent(事件)

   • 事件處理程序：

   onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
   onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
   

3. 選項對象：選擇對象的子對象
   
   
   • 格式：

   <option value="值" selected>文字</option>

   new Option([文字[,值[,defaultSelected[,selected]]]])

   • 屬性：

   selected	判斷該選項是否被選取
   defaultSelected	指定該選項爲默認選定狀態
   index	所有選項所構成的數組索引值
   length	選項的數目
   text	該選項顯示的文字
   value	所選項傳到服務器的值

   • 例1：

   <Script>

   var url = new Array(3);
   url[0] = "http://www.yam.org.tw/";
   url[1] = "http://www.kimo.com/";
   url[2] = "http://chinese.yahoo.com/";
   
   function goto(form) {
   var i = form.menu.selectedIndex;
   if (i>0) {
   location = url[i-1];
   }
   }

   </Script>
   <FORM>
   <SELECT NAME="menu" onChange="goto(this.form)">
   <OPTION>你喜歡哪一個搜索引擎?
   <OPTION STYLE="color:red">◆蕃薯藤
   <OPTION STYLE="color:red">◇奇摩
   <OPTION STYLE="color:red">◆中文雅虎
   </SELECT>
   </FORM>

   • 例2：

   <Script>
   
   function getText() {
   sel = document.forms[0].weekday
   ans = sel.options[sel.selectedIndex].text
   return ans;
   }

   </Script>
   <FORM>請選擇...
   <SELECT name=weekday>
   <OPTION VALUE="Monday">星期一
   <OPTION VALUE="Tuesday">星期二
   <OPTION VALUE="Wednesday">星期三
   <OPTION VALUE="Thursday">星期四
   <OPTION VALUE="Friday">星期五
   <OPTION VALUE="Saturday">星期六
   <OPTION VALUE="Sunday">星期日
   </SELECT><P>
   <INPUT TYPE="button" VALUE="取出選項的文字"
   onClick="alert(getText())">
   <INPUT TYPE="button" VALUE="取出選項的值"
   onClick="alert(this.form.weekday.value)"><BR>
   </FORM>

   • 例3：

   <FORM NAME="form1">
   你最喜歡哪一種水果?
   <INPUT TYPE="text" NAME="fruit">
   <A HREF="#" onClick="javascript:open('1.htm','','width=100')">
   查詢</A>
   </FORM>

   <Script> /* -------- 1.htm -------- */
   
   function choice() {
   sel = document.forms[0].elements[0];
   document.form1.fruit.value =
   sel.options[sel.selectedIndex].text;
   self.close();
   }

   </Script>

   <FORM>
   <SELECT onChange="choice()">
   <OPTION>請選擇
   <OPTION>西瓜
   <OPTION>香蕉
   </SELECT>
   </FORM>

   • 例4：

   <Script>

   function createOptions(){
   var option = new Option(document.form1.select1.value)
   document.form1.select2.options[2] = option;
   }
   
   </script>

   <form name="form1">
   <select name="select1" size="10">
   <option>可選擇項目 <option>---------------
   <option value="香蕉">香蕉 <option value="葡萄">葡萄
   <option value="蘋果">蘋果 <option value="梨子">梨子
   </select>

   <input type="button" value="-->" onClick="createOptions()">
   <select name="select2" size="10">
   <option>選擇項目 <option>---------------
   </select>
   </form>

   • 例5：

   <Script>

   function createOptions(){
   sel1 = document.form1.select1;
   sel2 = document.form1.select2;
   var num = sel1.selectedIndex;
   var option = new Option(sel1.options[num].text);
   sel2.options[2] = option;
   }
   
   </script>

   <form name="form1">
   <select name="select1" size="10">
   <option>可選擇項目 <option>---------------
   <option value="香蕉">香蕉 <option value="葡萄">葡萄
   <option value="蘋果">蘋果 <option value="梨子">梨子
   </select>

   <input type="button" value="-->" onClick="createOptions()">
   <select name="select2" size="10">
   <option>選擇項目 <option>---------------
   </select>
   </form>

   • 例6：

   <Script>

   function createOptions(){
   sel1 = document.form1.select1;
   sel2 = document.form1.select2;
   var num = sel1.selectedIndex;
   var option = new Option(sel1.options[num].text);
   var item = sel2.options.length;
   sel2.options[item] = option;
   }
   
   </script>

   <form name="form1">

   <select name="select1" size="10">
   <option>可選擇項目 <option>---------------
   <option value="香蕉">香蕉 <option value="葡萄">葡萄
   <option value="蘋果">蘋果 <option value="梨子">梨子
   </select>

   <input type="button" value="-->" onClick="createOptions()">
   <select name="select2" size="10">
   <option>選擇項目 <option>---------------
   </select>
   </form>

   • 例7：

   <Script>

   function createOptions(){
   
   sel1 = document.form1.select1;
   sel2 = document.form1.select2;
   var num = sel1.selectedIndex;
   if (num > 1) {
   var option = new Option(sel1.options[num].text);
   var item = sel2.options.length;
   sel2.options[item] = option;
   }
   sel1.selectedIndex = 10000;
   }

   function delOptions() {
   var num = document.form1.select2.selectedIndex;
   if (num>1)
   document.form1.select2.options[num] = null;
   else
   document.form1.select2.selectedIndex = 10000;
   }
   
   </script>
   <form name="form1">
   <select name="select1" size="10"
   onDblClick="createOptions()">
   <option>可選擇項目 <option>---------------
   <option value="香蕉">香蕉 <option value="葡萄">葡萄
   <option value="蘋果">蘋果 <option value="梨子">梨子
   </select>
   <input type="button" value="選擇" onClick="createOptions()">
   <select name="select2" size="10">
   <option>選擇項目 <option>---------------
   </select>
   <input type="button" value="刪除" onClick="delOptions()">
   </form>
   

4. 文本區域對象：
   
   
   • 屬性：

   defaultValue	對應該對象的默認值
   form	該對象所在的表單
   name	該對象的name屬性
   type	該對象的type屬性
   value	該對象的value屬性

   • 方法：

   blur()
   select()
   focus()
   handleEvent(事件)

   • 事件處理程序：

   onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
   onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

   • 例1：

   <Script>

   function isTooLong(elm){
   if (elm.length > 50) {
       alert("留言內容太長，請修改後再發送....");
       return false;
   }
   }
   
   </script>

   <FORM onSubmit="return isTooLong(this.msg.value)">
   <TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
   歡迎留言，不過請長話短說....
   </textarea><BR>
   <INPUT TYPE="submit" VALUE="留言完畢">
   </FORM>

   • 例2：

   <STYLE>
   INPUT {background-color:'99FFFF';color:"red"}
   TEXTAREA {background-color:'99FFFF';color:"red"}
   </STYLE>
   <BODY BGCOLOR="99FFFF">
   <FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:[email protected]?subject=不錯">
   <TABLE>
   <CAPTION>讀者回函</CAPTION>
   <TR><TD>姓　　名：
   <TD><INPUT TYPE="text" NAME="userName">
   <TR><TD>電子郵件：
   <TD><INPUT TYPE="text" NAME="email">
   <TR><TD VALIGN="top">內　　容：
   <TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
   我非常喜歡你的書，加油!!!
   </TEXTAREA>
   <TR><TD COLSPAN="2" ALIGN="center">
   <INPUT TYPE="submit" VALUE="填好了">
   </TABLE>
   </FORM>
   </BODY>
   

5. 文件上傳對象：
   
   
   • 屬性：

   form	該對象所在的表單
   name	該對象的name屬性
   type	該對象的type屬性
   value	該對象的value屬性

   • 方法：

   blur()
   select()
   focus()
   handleEvent(事件)

   • 事件處理程序：

   onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
   onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

• Cookie對象：

是 一種以文件（Cookie文件）的形式保存在客戶端硬盤的Cookies文件夾中的用戶數據信息（Cookie數據）。Cookie文件由所訪問的Web 站點建立，以長久的保存客戶端與Web站點間的會話數據，並且該Cookie數據只允許被所訪問的Web站點進行讀取。

• Cookie文件的格式：

NS：Cookie.txt
IE：用戶名@域名.txt

• 寫入Cookie：

格式：

document.cookie = " 關鍵字 = 值 [ ; expires = 有效日期 ] [;...]"

備註：

1. 有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT
2. Wdy / Mon：英文星期 / 月份；
3. 還包含path、domain、secure屬性；
4. 每個Web站點（domain）可建立20個Cookie數據；
5. 每個瀏覽器可存儲300個Cookie數據，4k字節；
6. 客戶有權禁止Cookie數據的寫入。
   

例1：

<Script>

var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );

document.cookie = "name=Hubert;expires=" + expireDay.toGMTString();
document.write("已經將 Cookie 寫入你的硬盤中了!<br>");
document.write("內容是：", document.cookie, "<br>");
document.write("這個 Cookie 的有效時間是：");
document.write(expireDay.toGMTString());

</Script>

例2：

<Script>

var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );

function setCookie(Key,value) {
document.cookie = Key + "=" + value + ";expires=" + expireDay.toGMTString();
}

setCookie("NAME","HUBERT");
document.write("累計的 Cookies 如下：<BR>");
document.write(document.cookie);

</Script>

• 讀取Cookie：

格式：

document.cookie

例

<Script>

function getCookie(Key){
var search = Key + "=";
begin = document.cookie.indexOf(search);
if (begin != -1) {
    begin += search.length;
    end = document.cookie.indexOf(";",begin);
    if (end == -1) end = document.cookie.length;
    return document.cookie.substring(begin,end);
}
}

document.write("嗨！ ",getCookie("name"), " 歡迎光臨..")

</Script>

• 刪除Cookie：

格式：

document.cookie = " 關鍵字 = ; expires = 當前日期"

例：

<Script>

var today = new Date();

function delCookie(Key) {
document.cookie = Key + "=;expires=today.toGMTString";
}

document.write("現有的 Cookies 如下：<BR>");
document.write(document.cookie, "<BR>");
delCookie("name");
document.write("刪除後的 Cookies 如下：<BR>");
document.write(document.cookie);

</Script>