The Window Object

The window Object หมายถึงหน้าต่างปัจจุบันของ browser ถ้าคุณเขียน code แบบนี้
document.write("write this text to the current window")
มันก็จะเขียนข้อความนี้ลงไปใน webpage และจะได้ผลเหมือนกับ
window.document.write("write this text to the current window")
เนื่องจาก document เป็น properties ของ window ไงครับ

Opening and Closing Window
ตอนที่คุณเริ่มเปิด 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> ก็ได้ครับ
ส่วน close() ก็ใช้ ชื่อ variable ต่อด้วย .close() ได้เลย

ตัวอย่างการสร้าง window ใหม่

exam=window.open("http://www.sanook.com","sanook")

ปิดด้วยคำสั่งนี้ครับ

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

ตาราง 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 ครับ
test1=window.open("http://www.sanook.com","sanook","toolbar=0")
test2=window.open("http://www.sanook.com","sanook","toolbar=1 menubar=0 scrollbar=0")
test3=window.open("http://www.sanook.com","sanook","toolbar=1 width=300 height=300")
Comunicating With the User

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

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

ส่วนการใช้ก็เอาข้อความไปใส่เลย (มอง properties เป็นตัวแปร string ได้เลยครับ)
การทำตัวอักษรวิ่งบน statusbar ก็ใช้วิธีนี้แหละ แล้วเอาไปประยุกต์กับการใช้ loop อีกที

Using the Window Synonyms

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

Working with Timeouts

setTimeout() กับ clearTimeout() เป็น methods ที่ทำงานแบบระเบิดเวลาได้โดย
setTimeout() จะใช้ตั้งเวลาในการเรียกฟังก์ชั่นอะไรซักอย่าง
clearTimeout() จะใช้กู้ระเบิดเวลา เอ้ย! ใช้ยกเลิกการตั้งเวลาครับ
การใช้ setTimeout กับ clearTimeout ก็ไม่ได้ยุ่งยากมากมายอะไรเลยครับ ดูเลยละกัน setTimeout ใช้อย่างนี้ครับ
timevar = setTimeout("AnyFunction()",10000)
timevar คือ ชื่อ Object ใช้แทนการตั้งเวลาครับ (คุณต้องตั้งชื่อให้น่ะ)
AnyFunction() ก็คือ function อะไรก็ได้ ที่คุณต้องการให้เรียก เมื่อถึงเวลาที่กำหนด
10000 ก็คือ ระยะเวลาครับ ในที่นี้ตั้งเป็น 10000 ms หรือ 10 วินาทีครับ

ตัวอย่างการใช้ครับ

<HTML> <HEAD> <TITLE>Timeout Program</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <FORM> <INPUT TYPE="BUTTON" VALUE="Click here within ten seconds." ONCLICK="clearTimer()"> </FORM> </BODY> </HTML>

จบแล้วครับ การใช้ Object window ถ้าคุณสังเกตุดีๆ จะเห็นว่าความสามารถบางอย่างถูกนำไปใช้แล้ว ไม่ว่าจะเป็นการแสดงข้อความใน statubar การใช้ timeout การอ้างอิง ถึง frame ใช่แล้วครับ คุณสามารถทำได้ในระดับหนึ่งแล้ว ขึ้นอยู่กับว่า คุณสามารถเอามันไปประยุกต์ได้แค่ไหนเท่านั้นเองครับ

ในบทต่อไป จะเป็น Object Document ซึ่งสัมพันธ์กับ window พอสมควร โปรดติดตามตอนต่อไปครับ