บทเรียนที่ 8 ลำดับชั้นของตัวถูกกระทำ
เรามาหยุดคิดถึงสิ่งเรียนมานะครับ ตอนนี้เรารู้แล้วว่าในจาวาสคริปมีตัวถูกกระทำมากมายหลายอย่าง ซึ่งอาจเป็นข้อความภาษาอังกฤษหรือแทนค่าให้อยู่ในรูปตัวแปร เรารู้แล้วว่า "ส่วนประกอบ(property)" ใช้บรรยายส่วนประกอบนั้นๆของตัวถูกกระทำ(object)
เรายังรู้อีกว่านอกจาก "ส่วนประกอบ"แล้ว.. ตัวถูกกระทำยังมี "วิธีกระทำ(method)" หรือคำสั่ง ที่นำมาใช้กับตัวถูกกระทำได้ ในรูปแบบของ... ตัวถูกกระทำ.วิธีกระทำ( ) ตัวถูกกระทำแต่ละตัว ก็มี "ส่วนประกอบ" และ "วิธีกระทำ" ของตัวเอง แตกต่างกันไป
ต่อจากจุดนี้...เราจะมาเรียนรู้เคล็ดลับของการเข้าใจจาวาสคริป นั่นคือ ลำดับชั้นของตัวถูกกระทำ
อย่าคิดลึกไปครับ...แต่เมื่อคุณเข้าใจในสิ่งนี้ทั้งหมดแล้ว ก็เรียกได้ว่าคุณเข้าถึงแก่นของจาวาสคริปแล้วล่ะ!
ลำดับชั้นของตัวถูกกระทำคือ...
| WINDOW | |||
| Parent | Self | | Frames |
| |
| |
| Href |
| |
| |
| Src |
| Text |
| Button |
| Checkbox |
จากแผนภาพ จะเห็นว่า WINDOW (Parent,Self,Top และ Frames เป็นชื่ออีกรูปแบบของ window ครับ แต่ยังไม่ต้องสนใจตอนนี้ เราจะเก็บไว้พูดถึงในบทอื่น) จะอยู่ด้านบนสุดแล้วแตกสาขาลงมาเรื่อยๆ เหมือนว่า WINDOW เป็นใหญ่สุด แล้วมีลูกๆติดสอยห้อยตามมา... ใช่แล้วครับ window(หน้าต่างที่คุณเปิดอ่านอยู่นี้) เป็นตัวถูกกระทำที่ใหญ่ที่สุด ไม่มีตัวถูกกระทำใดใหญ่กว่า window ...จึงไม่สามารถใช้ window เป็นส่วนประกอบได้ ส่วนตัวที่ย่อยลงมาด้านล่าง window นั้นสามารถใช้เป็นส่วนประกอบ ของ window ได้ทั้งหมดครับ เพียงแต่ต้องเขียนไล่ลงมาตามลำดับชั้น เช่น ผมจะเขียน link ได้โดย...
window.location.href="http://www.google.co.th"
แต่ในบทที่แล้ว ในสคริปตัวอย่างใช้ location.href ใช้มั้ยครับ ไม่ได้เขียน window นำหน้าเลย รวมทั้งสคริปอื่นๆด้วย เช่น document.bgColor ,navigator.appName (navigator ก็เป็นส่วนประกอบของ window เช่นกัน แต่ผมไม่ได้แสดงไว้ในแผนภาพครับ) ...ที่เป็นเช่นนี้เพราะว่า window มีอันเดียวใช่มั้ยครับ ? และทุกสิ่งทุกอย่างก็อยู่ภายใน window ใช่มั้ยครับ ? ดังนั้นเราจึงไม่จำเป็นต้องใช้ window นำหน้าเลย(แต่ใช้ ก็ไม่ผิดครับ แต่เสียเวลาพิมพ์เปล่าๆ) เพียงแต่ใช้ตัวถูกกระทำลำดับชั้นที่รองจาก window นี่เป็นตัวอย่างหนึ่งของการเขียนคำสั่งแบบไล่ลำดับชั้นลงมาครับ (หากไม่เขียนไล่ลำดับชั้นลงมา Error ครับ)...
document.mypic.src = "http://www.abcde.com/pic1.gif"
คำสั่งข้างบนนี้(ยังไม่ต้องสนใจว่ามันเอาไว้ใช้ทำอะไรนะครับ) มีตัวถูกกระทำใหญ่สุดคือ window แต่เราไม่เขียน เพราะอยู่มีตัวเดียวและโปรแกรมจะรู้อยู่แล้ว ตามมาด้วย document ซึ่งเป็นส่วนประกอบของ window และตามมาด้วย mypic ซึ่งเป็นชื่อสมมติของรูปภาพ(Image) และตามมาด้วย src ซึ่งมาจากชื่อเต็มภาษาอังกฤษว่า source(แปลว่า ต้นกำเนิดหรือที่อยู่) ตามมาด้วยเครื่องหมายเท่ากับ และท้ายสุดคือที่อยู่ของรูปภาพบนอินเตอร์เน็ทคือ...http://www.abcde.com/pic1.gif (ที่รู้ว่าเป็นรูปภาพเพราะท้ายสุดของชื่อเว็บไซท์ที่ลงท้ายด้วย จุดจีไอเอฟ(.gif) นั้นเป็นชื่อสกุลหนึ่งของไฟล์รูปภาพครับ) คำสั่งนี้จึงหมายถึงให้รูปภาพชื่อ mypic เปลี่ยน( = )ที่อยู่(หรือเปลี่ยนภาพ)ไปเป็น http://www.abcde.com/pic1.gif
เรามาแยกส่วนประกอบของลำดับชั้นกันครับ
| WINDOW | |||
| Parent | Self | Top | Frames |
| Location |
| Document |
| Href |
| Image |
| |
| Src |
| Text |
| Button |
| Checkbox |
· สิ่งที่น่าสับสนในเรื่องนี้คือ... ตัวถูกกระทำหลายตัว สามารถใช้เป็นส่วนประกอบได้ ในเวลาเดียวกัน
· window เป็นได้เพียงตัวถูกกระทำ
· document เป็นส่วนประกอบของ window ...แต่ก็เป็นตัวถูกกระทำตัวหนึ่ง
· form เป็นส่วนประกอบของ document ...แต่ก็เป็นตัวถูกกระทำของอีกสามส่วนประกอบ!
· สิ่งที่เป็นได้เพียงส่วนประกอบได้แก่ src และ value(ไม่ได้แสดงบนแผนผัง value คือส่วนประกอบของ text , button และ checkbox)
· แผนผังไม่ได้แสดงตัวถูกกระทำและส่วนประกอบทั้งหมดนะครับ แต่เอามาเพียงตัวหลักๆ ให้คุณได้พอเข้าใจหลักของมันว่า...ต้องเขียนไล่จากด้านบนลงล่างตามลำดับ ดังนั้นคุณต้องไม่เขียนอย่าง... document.mytext.myform หรือ mypic.src.document ซึ่งผิดลำดับที่ว่า..จากใหญ่มาเล็กและจากซ้ายไปขวา
· ในการใช้จาวาสคริปเพื่อแสดงข้อความที่อยู่ในแบบฟอร์ม คุณต้องใช้ส่วนประกอบชื่อว่า.. value เช่น document.myform.mytext.value หากเขียนแบบ.. document.myform.mytext จะแสดงเพียงสถานะของ mytext ไม่แสดงข้อความที่อยู่ใน mytext
ตัวอย่างของการใช้ value
<form name="a">
<input type="text" name="b" value="นี่คือข้อความ">
</form>
<script language="javascript">
document.write(document.a.b.value)
</script>
ผลของสคริปนี้...(ขออภัยครับ เว็บนี้ไม่สามารถแสดงผลของสคริปได้ เพราะเขา(เว็บที่ผมใช้) ไม่ยอมให้สร้างแบบฟอร์มที่ถูกต้องได้ ขอให้คุณทดลองเอาเอง)
นี่เป็นสคริปที่ดึงเอาข้อความจากแถบข้อความที่อยู่ในโค้ด HTML มาแสดงบนหน้าจอ ...สังเกตภายในคำสั่ง document.write( ) ผมใช้ document เป็นตัวถูกกระทำที่ตามมาด้วยส่วนประกอบคือ ชื่อของ form (ผมตั้งชื่อว่า a ) แล้วชื่อของฟอร์มนี้ก็เป็นตัวถูกกระทำของ ชื่อแถบข้อความ(text) ที่ตั้งชื่อว่า b ...และสุดท้ายใส่จุดและ value ลงไปเพื่อเรียกข้อความที่อยู่ใน b พอจะเข้าใจไหมครับ...มันจะเป็นการเขียนไล่ลำดับลงมาโดยใช้ชื่อของตัวถูกกระทำแต่ละชั้นมาเป็นตัวแทน
ถ้าไม่ตั้งชื่อล่ะ แล้วจะเขียนยังไง เขียนได้ไหม...
เขียนได้ดังนี้ครับ...
<form>
<input type="text" value="นี่คือข้อความ">
</form>
<script language="javascript">
document.write(document.forms[0].elements[0].value)
</script>
ผมจะไม่แสดงผลของสคริปนะครับ เพราะให้ผลเหมือนกับข้างบน.....สังเกตว่าตอนนี้ในโค้ด HTML ไม่มีการตั้งชื่อเลยแต่ว่า มีการเปลี่ยนแปลงภายในคำสั่ง document.write...จุดที่เปลี่ยนคือจาก ชื่อของ form กลายเป็น... forms[0] ซึ่งหมายถึง form ในลำดับแรก โดยนับจากบรรทัดบนสุด(หรือมาเป็นอันดับแรก)ของไฟล์ HTML (notepad) หากเป็นแบบฟอร์มลำดับที่สอง ให้ใช้ forms[1] ..แฮ่ๆ จะแปลกๆหน่อยนะครับ เพราะคอมฯ ไม่ได้นับเหมือนที่เรานับ ตัวถัดๆไปก็ใช้ forms[ลำดับที่ลบหนึ่ง]...เข้าใจใช่มั้ยครับ ว่าต้องลบหนึ่ง เพื่อให้เป็นไปตามที่คอมนับ
ถัดมา... เป็นชื่อของ text ซึ่งเปลี่ยนเป็น elements[0] ซึ่งหมายถึง แบบฟอร์มแรกสุดใน form นั้น ซึ่งในที่นี้แบบฟอร์มแรกสุดเป็นแถบข้อความ ...ห้ามใช้ texts[0] แทนนะครับ จะทำให้ Error ผู้สร้างเขากำหนดมาให้ใช้ elements[ลำดับที่ลบหนึ่ง] มาเป็นตัวแทนแบบฟอร์มทุกชนิด(text , button , checkbox)ครับ
แบบฝึกหัด
สมมติว่าเว็บหน้าหนึ่งมีรูปภาพหนึ่งรูปที่มีชื่อว่า pic1 มีตัวหนังสือสีดำและพื้นหลังสีขาว มีแบบฟอร์มอันเดียว ซึ่งมีส่วนที่เป็นปุ่ม(Button) 3 อัน จงเขียนรูปแบบคำสั่งตามลำดับชั้นของตัวถูกกระทำ(ลงใน notepad หรือเศษกระดาษ) โดยเริ่มจาก window (แม้ว่าไม่จำเป็นก็ตามที) ซึ่งมีทั้งหมด 4 คำสั่งดังนี้
1. คำสั่งที่เปลี่ยนรูปภาพชื่อ pic1 ไปเป็นรูปภาพซึ่งอยู่ที่ http://www.abcd.com/pic2.jpg
2. คำสั่งเปลี่ยนสีตัวอักษร(fgColor)ของเว็บหน้านั้นทั้งหมด ให้เป็นสีขาว
3. คำสั่งเปลี่ยนสีพื้นหลัง(bgColor)ของเว็บหน้านั้น ให้เป็นสีดำ
4. คำสั่งเรียกข้อความที่อยู่บนปุ่ม(Button) ลำดับที่ 3 ของเว็บนั้น โดย
ยกตัวอย่างเช่น คำสั่งสร้าง link ไปยัง hotmail เขียนได้โดย... window.location.href="http://www.hotmail.com"
ไม่มีความคิดเห็น:
แสดงความคิดเห็น