ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

บทที่ 8 Windows Object

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 16:40:44 10/05/2013
  Page View (1998) แบ่งปัน

บทที่ 8 Windows

   window Object หมายถึงหน้าต่างปัจจุบันของ browser เป็น Object ที่เก็บทุกๆอย่างใน 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() ได้เลย

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

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 value="Alert" 
onclick="window.alert('An alert dialog box')">
<input value="Confirm" 
onclick="window.confirm('An confirm dialog box')">
<input 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 วินาทีครับ

ที่มาจาก : realdev.truehits.ne



องค์ความรู้ที่มีผู้อ่านมากสุด
บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต

สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 2 เรื่องของตัวแปร JavaScript
JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 10 Form Java
คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 11 Links
บทที่ 11 Links

โดย... กฤษณี โภโต

บทที่ 12 Images
บทที่ 12 Images

โดย... กฤษณี โภโต