บทเรียนที่ 12 การเปิดหน้าต่างใหม่ด้วยชุดคำสั่ง
ในบทเรียนที่ 11 เราเปิดหน้าต่างใหม่โดยใช้คำสั่ง window.open ซึ่งหน้าต่างใหม่นั้นจะถูกแทนที่ด้วยเอกสาร HTML ในที่อยู่ที่เรากำหนดไว้ ส่วนในที่นี้ เราจะสร้างชุดคำสั่งเรียกหน้าต่างใหม่ โดยใช้เนื้อหาจากหน้าต่างเก่า เหมือนกับว่าแยกหน้าหนึ่ง ออกเป็นสองหน้า
สคริป...
<SCRIPT type="text/javascript">
function openw()
{
var a=window.open("", "newwin",
"height=300,width=500")
a.document.write("<HTML>")
a.document.write("<TITLE>หน้าต่างใหม่</TITLE>")
a.document.write("<BODY BGCOLOR='00ffff'>")
a.document.write("<CENTER>")
a.document.write("<font size=+1>นี่คือหน้าต่างใหม่</font><P>")
a.document.write("<a href='c:/' target='main'>กดที่นี่<BR>เพื่อเปิดหน้าต่างใหม่กว่า</a><p>")
a.document.write("<P><HR WIDTH='60%'><P>")
a.document.write("<a href='' onClick='self.close()'>กดที่นี่เพื่อปิดหน้าต่าง</a><p>")
a.document.write("</CENTER>")
a.document.write("</HTML>")
}
</SCRIPT>
และภายในคำสั่ง BODY...
onLoad="openw()"
หรือใส่ openw() ไว้ก่อนหรือหลังชุดคำสั่ง(function)
function openw()
{
var a=window.open("", "newwin",
"height=300,width=500")
a.document.write("<HTML>")
a.document.write("<TITLE>หน้าต่างใหม่</TITLE>")
a.document.write("<BODY BGCOLOR='00ffff'>")
a.document.write("<CENTER>")
a.document.write("<font size=+1>นี่คือหน้าต่างใหม่</font><P>")
a.document.write("<a href='c:/' target='main'>กดที่นี่<BR>เพื่อเปิดหน้าต่างใหม่กว่า</a><p>")
a.document.write("<P><HR WIDTH='60%'><P>")
a.document.write("<a href='' onClick='self.close()'>กดที่นี่เพื่อปิดหน้าต่าง</a><p>")
a.document.write("</CENTER>")
a.document.write("</HTML>")
}
</SCRIPT>
และภายในคำสั่ง BODY...
onLoad="openw()"
หรือใส่ openw() ไว้ก่อนหรือหลังชุดคำสั่ง(function)
ผลของสคริปนี้
มีผลคล้ายกับแบบฝึกหัดในบทที่แล้ว แต่จะแตกต่างกันตรงที่ เราไม่ต้องสร้างสองหน้า เพียงหน้าเดียวก็สามารถทำได้ กดที่ link ทางขวาเพื่อดูผลของสคริปนี้... กดที่นี่เพื่อดูผลของสคริป
เรามาแยกโครงสร้างของจาวาสคริปนี้กันครับ
ผมใช้ชุดคำสั่งที่ชื่อว่า openw() ซึ่งตามมาด้วยปีกกาเปิด(ต้องใส่ทุกครั้งหลังคำ function ..() )คลุมคำสั่งภายในทั้งสองด้าน ต่อมาถึงส่วนสำคัญครับ... เรากำหนดให้ a เป็นตัวแทนของคำสั่งเปิดหน้าต่างใหม่
var a=window.open("", "newwin","height=300,width=500")
รูปแบบภายในของคำสั่งเปิดหน้าต่างใหม่จะแตกต่างจากตัวอย่างในบทที่แล้ว ตรงที่ไม่มีการระบุ URL (เห็นเครื่องหมายคำพูดที่ไม่มีอะไรอยู่ภายในไหมครับ ?) ซึ่งจะเป็นการบอก Browser ให้หาข้อมูลของหน้านั้นจากสคริป มันจะเหมือนกับคำสั่งปิดหน้าต่างที่ไม่มีการใส่ URL เข้าไป แต่ Browser จะไม่ปิดหน้าต่าง หากมีบางสิ่งบางอย่างให้โหลด เช่นเดียวกับกรณีนี้ Browser จะไม่มาอ่านสคริปหากมีบางสิ่งบางอย่างให้โหลด
ต่อไปเราจะมาเริ่มสร้างไฟล์ HTML ลงในหน้าต่างใหม่ นี่คือบรรทัดแรก
ต่อไปเราจะมาเริ่มสร้างไฟล์ HTML ลงในหน้าต่างใหม่ นี่คือบรรทัดแรก
a.document.write("<HTML>")
รูปแบบคำสั่งนี้ คุ้นๆไหมครับ หากใช้ลำดับชั้นของตัวถูกกระทำ เราอธิบายได้ว่า... a เป็นตัวแทนของหน้าต่างใหม่ แล้วตามด้วยส่วนประกอบ document ตามด้วยวิธีกระทำ write ซึ่งจะเขียนสิ่งที่อยู่ในวงเล็บลงไปในหน้าต่างใหม่ ซึ่งเริ่มด้วย <HTML> ซึ่งก็คือ รูปแบบการเริ่มเขียนไฟล์ HTML ส่วนบรรทัดต่อมา
a.document.write("<TITLE>หน้าต่างใหม่</TITLE>")
เป็นการเขียนคำสั่ง HTML ที่สร้างหัวเรื่องของหน้าต่าง(ข้อความในแถบน้ำเงินบนสุดของหน้าต่าง) ส่วนบรรทัดถัดๆมาเป็นการเขียนคำสั่งเปลี่ยนสีพื้นหลัง จัดกลาง เขียนข้อความ และทำ link สองอัน ลงในหน้าต่างใหม่ แล้วสองบรรทัดสุดท้ายของการเขียนเป็นการจบการจัดกลางและจบ HTML
อย่าลืม : การเขียนโค้ด HTML ในคำสั่ง document.write ห้ามใช้เครื่องหมายคำพูด ให้ใช้เครื่องหมายขีดเดียว
อย่าลืม : การเขียนโค้ด HTML ในคำสั่ง document.write ห้ามใช้เครื่องหมายคำพูด ให้ใช้เครื่องหมายขีดเดียว
แบบฝึกหัด
สำหรับแบบฝึกหัดวันนี้... ให้คุณสร้างหน้าที่เมื่อเปิดขึ้นมาแล้ว มีอีกหน้าต่างโผล่ขึ้นมาทันที ซึ่งหน้าต่างใหม่นั้นมีพื้นหลังสีเขียว(green) มีหัวเรื่องของหน้าว่า.. สวัสดีค่ะ/ครับคุณ ชื่อผู้ใช้ ...คุณสามารถถามชื่อผู้ใช้ด้วยกล่องรับค่า ...แล้วใส่ link ที่ปิดหน้าต่างในหน้าที่เปิดใหม่ด้วย
เฉลย
SCRIPT type="text/javascript">
openw()
function openw()
{ var b=prompt('คุณชื่ออะไรครับ','')
var a=window.open("","newwin",
"height=300,width=500")
a.document.write("<HTML>")
a.document.write("<TITLE>สวัสดีครับคุณ "+b+"</TITLE>")
a.document.write("<BODY BGCOLOR='green' >")
a.document.write("<CENTER>")
a.document.write("<font size=+1>นี่คือหน้าต่างใหม่</font><P>")
a.document.write("<P><HR WIDTH='60%'><P>")
a.document.write("<a href='' onClick='self.close()'>กดที่นี่เพื่อปิดหน้าต่าง</a>")
a.document.write("</CENTER>")
a.document.write("</HTML>") }
</SCRIPT>
openw()
function openw()
{ var b=prompt('คุณชื่ออะไรครับ','')
var a=window.open("","newwin",
"height=300,width=500")
a.document.write("<HTML>")
a.document.write("<TITLE>สวัสดีครับคุณ "+b+"</TITLE>")
a.document.write("<BODY BGCOLOR='green' >")
a.document.write("<CENTER>")
a.document.write("<font size=+1>นี่คือหน้าต่างใหม่</font><P>")
a.document.write("<P><HR WIDTH='60%'><P>")
a.document.write("<a href='' onClick='self.close()'>กดที่นี่เพื่อปิดหน้าต่าง</a>")
a.document.write("</CENTER>")
a.document.write("</HTML>") }
</SCRIPT>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น