ตอนที่คุณเริ่มเปิด Browser ขึ้นมา มันจะสร้างและเปิดหน้าต่างขึ้นมา 1 หน้า
เพื่อเริ่มต้นที่ Startup Page ของคุณใช่ไหมครับ
นี่เป็นวิธีการที่ธรรมดาที่สุดในการสร้าง window object
ส่วนใหญ่แล้ว window นี้จะเปิดอยู่ตลอดถ้าคุณยังไม่ออกจากโปรแกรมไปซะก่อน
เมื่อคุณ พิมพ์ http://www.sanook.com ลงไป Site นี้ก็จะมาแทนที่ (replace)
Startup page ของคุณ แต่ก็ยังคงเป็นหน้าต่างเดิม เพี่ยงแต่เปลี่ยน document เท่านั้น
และในขณะที่คุณเล่น net เพลินๆ สมมุติว่าน้องชายมาขอส่ง page ไปหาแฟน คุณก็จะเปิดหน้าต่างใหม่
ด้วย Ctrl-n หรือไม่ก็ ไปเลือก New window ใน pull-down menu จะได้ไม่ต้อง replace site
ที่คุณกำลังไปชมอยู่ แต่ในการเขียน Homepage เราคงสั่งให้ผู้ใช้เปิดหน้าต่างเองไม่ได้ จริงไหมครับ
ใน JavaScript ก็มี methods ที่ใช้ในการเปิดปิดหน้าต่างอยู่ คือ open() กับ close()
คำสั่ง open จะใช้สำหรับเปิด window ใหม่ขึ้นมา มีวิธีใช้ดังนี้ครับvariable=open(url,name,[option]) variable ก็คือชื่อตัวแปรที่จะใช้เรียกเจ้า window นี้ คุณต้องตั้งชื่อให้มันครับurl ก็คือ URL ของ document ที่จะเปิดใน window[option] เป็นการกำหนดลักษณะของ window จะไม่ใส่ก็ได้ครับname ก็อาจนำไปใช้เป็น target ของ tag <a> และ <form> ก็ได้ครับ
ตัวอย่างการสร้าง window ใหม่
<![CDATA[
exam=window.open("http://www.sanook.com","sanook")
]]>
ปิดด้วยคำสั่งนี้ครับ
<![CDATA[
exam.close()
]]>
ตาราง option ในการเปิดหน้าต่างครับ
Option ค่าที่เป็นได้ Description toolbar yes no มี toolbar หรือไม่ location yes no แสดง location หรือไม่ directories yes no มี directory button หรือไม่ status yes no มี statusbar หรือไม่ menubar yes no มี menubar หรือไม่ scrollbar yes no มี scrollbar หรือไม่ resizeable yes no เพิ่ม,ลดขนาดของ window ได้หรือไม่ width integer ความกว้างของ window ในหน่วย pixel height integer ความสูงของ window ในหน่วย pixel outerWidth integer Outer width ของ window outerHeight integer Outer height ของ window left integer ระยะทางจาก ขอบซ้ายของหน้าจอ top integer ระยะทางจาก ขอบบนของหน้าจอ alwayRaised yes no Creatw a raise,floating window. z-lock yes no Create a window which stays in background.
*** คุณจะใช้ 1 และ 0 แทน yes และ no ก็ได้นะครับ ***
ตัวอย่างการใช้ Option ครับ
C omunicating
W ith the
U ser
Methods ที่น่าเล่นอีกประเภทหนึ่งก็คือ การโต้ตอบกับผู้ใช้ ซึ่งก็มีอยู่ 3 Method คือ
alert(),confirm() และ prompt() ครับalert() ใช้แสดงข้อความและปุ่ม OK เพื่อบอกอะไรซักอย่างกับผู้ใช้ผ่านทาง dialog boxconfirm() จะคล้ายๆกับ alert() แต่จะมีปุ่ม Cancle เพิ่มขึ้นมา สำหรับถามผู้ใช้ ว่าแน่ใจหรือไม่
ถ้าผู้ใช้กด OK จะคืนค่าเป็น true ถ้าผู้ใช้กด Cancle จะคืนค่าเป็น falseprompt() ใช้แสดงข้อความแล้วก็ ช่องใส่ข้อมูลให้ผู้ใช้กรอกข้อความ
<![CDATA[
<input type=button value="Alert"
onclick="window.alert('An alert dialog box')">
<input type=button value="Confirm"
onclick="window.confirm('An confirm dialog box')">
<input type=button value="Prompt"
onclick="prompt('A prompt dialog box','Type something!')">
]]>
D isplaying
S tatus
I nformation
ใน Object window มี properties ที่ใช้ควบคุมข้อความใน statusbar อยู่ 2 ตัวครับwindow.defaultStatus เป็นข้อความ Default ของ windowwindow.status เป็นข้อความที่ประกฏขึ้นเป็นครั้งคราว (อย่างเช่น เวลาคุณเอา mouse ไปทับ links)
ส่วนการใช้ก็เอาข้อความไปใส่เลย (มอง properties เป็นตัวแปร string ได้เลยครับ)
U sing the
W indow
S ynonyms
ในการอ้างอิงถึง window คุณไม่จำเป็นต้องใช้เพียงคำว่า window หรือแค่ชื่อที่คุณตั้งไว้ก็ได้
เนื่องจาก window มี properties ที่ใช้แทน window ได้เช่นself จะหมายถึง
window ปัจจุบันที่กำลังอ้างอิงอยู่ parent ใช้กับกรณีที่มีหลาย frame โดยหมายถึง
node แม่ของมัน opener ก็คือ window ที่เปิด window ปัจจุบันขึ้นมา
top หมายถึง window ที่อยู่ node ระดับบนสุด
W orking with
T imeouts
setTimeout() จะใช้ตั้งเวลาในการเรียกฟังก์ชั่นอะไรซักอย่างclearTimeout() จะใช้กู้ระเบิดเวลา เอ้ย! ใช้ยกเลิกการตั้งเวลาครับtimevar = setTimeout("AnyFunction()",10000) timevar คือ ชื่อ Object ใช้แทนการตั้งเวลาครับ (คุณต้องตั้งชื่อให้น่ะ)AnyFunction() ก็คือ function อะไรก็ได้ ที่คุณต้องการให้เรียก เมื่อถึงเวลาที่กำหนด10000 ก็คือ ระยะเวลาครับ ในที่นี้ตั้งเป็น 10000 ms หรือ 10 วินาทีครับ
ตัวอย่างการใช้ครับ
<![CDATA[
<HEAD>
<TITLE>Timeout Program</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function setTimer() {
timer=setTimeout("alert('Too slow!')",10000)
}
function clearTimer() {
clearTimeout(timer)
alert("Congradulations!")
}
// --></SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
setTimer()
// --></SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Click here within ten seconds."
ONCLICK="clearTimer()">
</FORM>
</font></font></font></font></font></table><br>
<input type=button value="Run Example" onclick="example=window.open('jsex20.html','ex')">
<p> <font face="CordiaUPC">จบแล้วครับ การใช้ Object window ถ้าคุณสังเกตุดีๆ จะเห็นว่าความสามารถบางอย่างถูกนำไปใช้แล้ว
ไม่ว่าจะเป็นการแสดงข้อความใน statubar การใช้ timeout การอ้างอิง ถึง frame ใช่แล้วครับ
คุณสามารถทำได้ในระดับหนึ่งแล้ว ขึ้นอยู่กับว่า คุณสามารถเอามันไปประยุกต์ได้แค่ไหนเท่านั้นเองครับ
</font>
<p><font face="CordiaUPC"> ในบทต่อไป จะเป็น Object Document ซึ่งสัมพันธ์กับ window
พอสมควร โปรดติดตามตอนต่อไปครับ </font>
<td valign=top> </td>
<p align=right>
<a href="jstuep9.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"><img src="nxcpd.gif" name="next" border=0></a><br>
<a href="jstue.html" onmouseover="document.content.src='btct.gif'" onmouseout="document.content.src='btctd.gif'"><img src="btctd.gif" name="content" border=0></a><br>
<a href="index.html" onmouseover="document.indexp.src='bthp.gif'" onmouseout="document.indexp.src='bthpd.gif'"><img src="bthpd.gif" name="indexp" border=0></a><br>
<CENTER>
</center><img src="../../../visit.geocities.com/visit.gifฟ1003936870" border=0 width=1 height=1>
<IMG SRC="http://geo.yahoo.com/serv?s=76001077&t=1003936870" ALT=1 WIDTH=1 HEIGHT=1>
</HTML>
]]>
