Window

การเปิด ปิด window

          ตอนที่คุณเริ่มเปิด Browser ขึ้นมา มันจะสร้างและเปิดหน้าต่างขึ้นมา 1 หน้า เพื่อเริ่มต้นที่ Startup Page ของคุณใช่ไหมครับ นี่เป็นวิธีการที่ธรรมดาที่สุดในการสร้าง window object

          ส่วนใหญ่แล้ว window นี้จะเปิดอยู่ตลอดถ้าคุณยังไม่ออกจากโปรแกรมไปซะก่อน เมื่อคุณ พิมพ์ http://realdev.truehits.net ลงไป 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 และ

ก็ได้ครับ

ส่วน close() ก็ใช้ ชื่อ variable ต่อด้วย .close() ได้เลย
ตัวอย่างการสร้าง window ใหม่

exam=window.open("http://realdev.truehits.net","realdev")

ปิดด้วยคำสั่งนี้ครับ (เพราะชื่ออ็อบเจกต์คือ exmp)

exam.close()

(ต้องเปิดหน้าต่างไว้ก่อนนะ)

ตาราง option ในการเปิด window

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 ครับ

test1=window.open("http://realdev.truehits.net","realdev","toolbar=0")
test2=window.open("http://realdev.truehits.net","realdev","toolbar=1,menubar=0,scrollbar=0")
test3=window.open("http://realdev.truehits.net","realdev","toolbar=1,width=300,height=300")

การติดต่อกับผู้ใช้

Methods ที่น่าเล่นอีกประเภทหนึ่งก็คือ การโต้ตอบกับผู้ใช้ ซึ่งก็มีอยู่ 3 Method คือ alert(),confirm() และ prompt() ครับ

alert()ใช้แสดงข้อความและปุ่ม OK เพื่อบอกอะไรซักอย่างกับผู้ใช้ผ่านทาง dialog box
confirm() จะคล้ายๆกับ alert() แต่จะมีปุ่ม Cancle เพิ่มขึ้นมา สำหรับถามผู้ใช้ ว่าแน่ใจหรือไม่ ถ้าผู้ใช้กด OK จะคืนค่าเป็น true ถ้าผู้ใช้กด Cancle จะคืนค่าเป็น false
prompt() ใช้แสดงข้อความแล้วก็ ช่องใส่ข้อมูลให้ผู้ใช้กรอกข้อความ

  

สามปุ่มข้างบนนี้มี code อย่างนี้ครับ

<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!')">

การแสดงข้อความใน Status bar

          ใน Object window มี properties ที่ใช้ควบคุมข้อความใน statusbar อยู่ 2 ตัวครับ

window.defaultStatus เป็นข้อความ Default ของ statusbar
window.status เป็นข้อความที่ปรากฏขึ้นเป็นครั้งคราว (อย่างเช่น เวลาคุณเอา mouse ไปทับ links)

ส่วนการใช้ก็เอาข้อความไปใส่เลย (มอง properties เป็นตัวแปร string ได้เลยครับ)

การใช้ window Synonyms

          ในการอ้างอิงถึง window คุณไม่จำเป็นต้องใช้เพียงคำว่า window หรือแค่ชื่อที่คุณตั้งไว้ก็ได้ เนื่องจาก window มี properties ที่ใช้แทน window ได้เช่น

window.self จะหมายถึง window ปัจจุบันที่กำลังอ้างอิงอยู่
window.parent ใช้กับกรณีที่มีหลาย frame โดยหมายถึง node แม่ของมัน
window.opener ก็คือ window ที่เปิด window ปัจจุบันขึ้นมา
window.top หมายถึง window ที่อยู่ node ระดับบนสุด 

การใช้ synonyms จะมีประโยชน์มากในการควบคุม Objects ที่อยู่ใน frame อื่น

ตั้งเวลาทำงานด้วย Timeout

          Timeout() กับ clearTimeout() เป็น methods ที่ทำงานแบบระเบิดเวลาได้โดย

setTimeout() จะใช้ตั้งเวลา เมื่อคนบกำหนดเวลาก็จะเรียกฟังก์ชั่นขึ้นมาทำงาน
clearTimeout() จะใช้ยกเลิกการตั้งเวลาครับ นอกจากนี้ยังมีอีก 2 ฟังก์ชั่นที่เกี่ยวกับการตั้งเวลาคือ
setInterval() คล้าย setTimeout() แต่จะทำงานเป็นวนรอบ เมื่อครบกำหนดเวลาก็จะเรียกฟังก์ชั่น แล้วก็จะเริ่มจับเวลาต่อทันที
clearInterval() ใช้ยกเลิกการจับเวลาด้วย setIntervel()

การใช้ setTimeout กับ clearTimeout ก็ไม่ได้ยุ่งยากมากมายอะไรเลยครับ ดูเลยละกัน setTimeout ใช้อย่างนี้ครับ

timevar = setTimeout("AnyFunction()",10000)

timevar คือ ชื่อ Object ใช้แทนการตั้งเวลาครับ (คุณต้องตั้งชื่อให้น่ะ)
AnyFunction() ก็คือ function อะไรก็ได้ ที่คุณต้องการให้เรียก เมื่อถึงเวลาที่กำหนด
10000 ก็คือ ระยะเวลาครับ ในที่นี้ตั้งเป็น 10000 ms หรือ 10 วินาทีครับ