3 ก.ย. 2554 0 ความคิดเห็น

บทเรียนที่ 10 ตัวสร้างการโต้ตอบ

บทเรียนที่ 10 ตัวสร้างการโต้ตอบ : onUnLoad และ onMouseOut

                    เราจะสอนตัวสร้างการโต้ตอบ 2 ตัวสุดท้าย ซึ่งคุณจะต้องจำเอาไว้ ได้แก่ onMouseOut และ onUnload (เวลาเอาไปใช้ อย่าลืมพิมพ์ตัวใหญ่เล็กให้ถูกต้องด้วย) ผมจัดให้สองอันนี้อยู่ในบทเดียวกัน เพราะทั้งสองจะทำให้เกิดเหตุการณ์ในตอนหลัง ไม่เกิดทันทีแบบเหมือนตัวสร้างการโต้ตอบที่แล้วๆมา
                    คุณรู้แล้วว่า onMouseOver ทำให้เกิดบางสิ่งบางอย่าง(ที่คุณกำหนด)ขึ้น เมื่อคุณลากเมาส์ไปบนจุดหรือบริเวณที่กำหนดไว้ เช่น link ที่เป็นตัวหนังสือ     onMouseOut สามารถทำให้บางสิ่งบางอย่างเกิดขึ้นหลังจากลากเมาส์ออกจาก link     คุณรู้แล้วว่า onLoad จะทำให้เกิดบางสิ่งบางอย่างตอนที่กำลังโหลดหน้านั้น   ตรงกันข้าม...onUnLoad จะทำให้เกิดบางสิ่งบางอย่างเกิดขึ้นหลังจากที่คุณออกจากหน้านั้น(ไม่ใช่ว่า หน้านั้นไม่โหลดจึงจะเกิดเหตุการณ์นะครับ)
สคริป...ตัวอย่างของ onMouseOut
<A HREF="http://www.manager.co.th"
onMouseOver="window.status='เฮ้ย ออกไปเดี๋ยวนี้!'; return true"
onMouseOut="window.status='เฮ้อ ค่อยยังชั่ว ..ขอบคุณมาก'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</A>
สคริปบรรทัดล่างนี้ เป็นตัวอย่างของ onUnLoad
<BODY onUnload="alert('จะไปแล้วเหรอ ?')">



ผลของสคริปด้านบน
                    ลองลากเมาส์เข้าๆ ออกๆ จาก link ข้างล่างดูครับ จะเห็นผลของตัวสร้างการโต้ตอบ onMouseOver และ onMouseOut   ส่วนผลของ onUnLoad นั้น ผมไม่ได้ทำไว้นะครับ ขอให้ทดลองกันเอาเอง



มาแยกโครงสร้างของสคริปกันครับ
                    ถึงตอนนี้ คงไม่ต้องบอกอะไรมากแล้ว คุณก็คงนึกคิดเอาเองได้แล้วว่ามันเกิดอะไรขึ้นบ้าง ...จำได้ไหมครับว่า ในบทที่สี่ ที่เราใช้เครื่องหมายลูกน้ำ( , ) แยกคำสั่งทั้งสองออกจากกัน เพื่อให้คำสั่งทั้งสองมีผลต่อเนื่องกันได้ แต่ในกรณีนี้ เราต้องการให้ คำสั่งทั้งสองมีผลพร้อมกัน คือเราต้องการให้เกิดทั้งตอนที่ลากเมาส์วางบน link และเกิดอีกเหตุการณ์หลังจากลากเมาส์ออกจาก link ด้วย   ดังนั้น เราจึงเขียนแยกคำสั่งกัน โดยที่แต่ละคำสั่งก็มี return true เพื่อให้ข้อความใน status bar ปรากฎอยู่เสมอ
                    ส่วนผลที่เกิดขึ้นหลังออกจากหน้าต่างนั้น ไม่ว่าด้วยวิธีใดก็ตาม เช่น กดปิดหน้าต่าง, กดปุ่ม Back, เปิด link, กด Refresh ฯลฯ ...ถูกสร้างขึ้นโดย การเพิ่ม onUnLoad เข้าไปหลังคำสั่ง BODY ของเอกสาร(ไฟล์) HTML   โปรดใช้เครื่องหมายคำพูดและเครื่องหมายขีดเดียว ให้ถูกต้องตามกฎด้วยครับ




แบบฝึกหัด
ให้คุณใช้ชุดคำสั่งหนึ่งชุด , onUnLoad หนึ่งตัว , onMouseOver หนึ่งตัว และ onMouseOut หนึ่งตัว เพื่อที่จะทำสิ่งต่อไปนี้
·         สร้างหน้าที่มีข้อความที่เป็น link (เหมือนในตัวอย่างข้างบน แต่คิดข้อความเอาเองก็ได้)
·         เมื่อลากเมาส์ไปวางบน link นั้น จะมีข้อความขึ้นที่ status bar ว่า... สวัสดีผู้ใช้ ชื่อ Browser ของผู้ใช้ : คลิ๊กที่นี่
·         เมื่อลากเมาส์ออกจาก link นั้น จะมีข้อความขึ้นที่ status bar ว่า... คุณจะออกจาก URLหรือที่อยู่ของหน้านั้น ในเร็วๆนี้
·         หลังจากคลิ๊กที่ link จะมีกล่องข้อความเตือนขึ้นมาว่า... จะไปแล้วเหรอ นี่เพิ่งจะ เวลาปัจจุบัน(กี่นาฬิกา กี่นาที)
·         เวลาควรจะสร้างด้วยชุดคำสั่ง เพื่อให้เป็นเวลาหลังจากที่คลิ๊กจริงๆ
·         ห้ามใช้ onClick เพื่อเรียกกล่องข้อความเตือน ให้ใช้ onUnLoad อย่างเดียว
เฉลย
<html>
<body onUnLoad="a()">
<a href="http://www.pantip.com"
onMouseOver="window.status='
สวัสดีผู้ใช้ '+
navigator.appName+' :
คลิ๊กที่นี่'; return true"

onMouseOut="window.status='
คุณจะออกจาก '+
location.href+'
ในเร็วๆนี้'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</a>

<script language="javascript">
function a(){var a=new Date()
b=a.getHours();c=a.getMinutes()
alert("
จะไปแล้วเหรอ นี่เพิ่งจะ "+b+" นาฬิกา "+c+" นาทีเอง")}
</script>
</body>
</html>
0 ความคิดเห็น

บทเรียนที่ 9 การสร้างชุดคำสั่ง

บทเรียนที่ 9 การสร้างชุดคำสั่ง

                    บทเรียนที่แล้วมา เราสร้างคำสั่งแบบทีละตัว แต่คราวนี้เราจะฝึกให้คุณสร้างคำสั่งแบบเป็นชุดครับ ซึ่งในชุดหนึ่งสามารถมีคำสั่งจำนวนมากอยู่ภายในได้   จึงอาจพูดได้ว่า คุณสามารถรวมคำสั่งจาวาสคริปเป็นสิบ เป็นร้อย ลงในคำสั่งเดียว
สคริป...
<SCRIPT type="text/javascript">

<!-- ซ่อนสคริป ในกรณีที่เปิดโดย Browser รุ่นเก่าที่ไม่เข้าใจจาวาสคริป

function a( )
{
var d = new Date( )
var y = d.getFullYear( )
var m = d.getMonth( ) + 1
var d = d.getDate( )
var t = m + '/' + d + '/' + y + ' '
defaultStatus = "คุณมาถึงหน้านี้เมื่อ " + t
}

// จบการซ่อน -->
</SCRIPT>
ขอนอกเรื่องหน่อยครับ... ตรงเครื่องหมาย <!-- และ // -->
                    เป็นเครื่องหมาย ที่ซ่อนสคริป หาก Browser ที่เปิดสคริปเป็น Browser รุ่นเก่าที่ไม่เข้าใจจาวาสคริป หากไม่ใส่เครื่องหมายนี้ เวลาเปิดออกมาด้วย Browser รุ่นเก่า   Browser นั้นจะอ่านจาวาสคริปทั้งหมดในรูปของตัวอักษรธรรมดาครับ(ถ้ามีคำสั่งอยู่มาก ก็จะขึ้นมาเต็มหน้า) จึงต้องป้องกันไว้ด้วยวิธีนี้ (แต่ปัจจุบัน ผู้ใช้แทบจะทั้งหมด ใช้ Browser ที่อ่านจาวาสคริปได้หมดแล้วมั้งครับ ผมคิดเช่นนั้น ผมเลยไม่ได้ใช้เครื่องหมายนี้)

กลับเข้าเรื่องต่อครับ...
                    ให้คุณสังเกตที่ function a( )   คำว่า function หมายถึงชุดคำสั่งครับ ซึ่งเริ่มต้นที่เครื่องหมายปีกกาเปิด {   และเสร็จสิ้นที่เครื่องหมายปีกกาปิด }   ส่วน a( ) เป็นชื่อของชุดคำสั่งนั้น ที่ต้องใส่วงเล็บเปิดปิด ก็เพื่อให้รู้ว่าชื่อ a เป็นชุดคำสั่งไงครับ แต่ชุดคำสั่ง a   ไม่สามารถทำงานได้ทันที(หากคุณ copy สคริปข้างบนไปทดลองดู จะพบว่าไม่มีอะไรขึ้นมาเลย และไม่ Error ด้วย) ต้องสร้างคำสั่งเรียกชุดคำสั่ง a ให้ทำงาน... ซึ่งวิธีเรียกก็ง่ายๆครับ(นี่เป็นวิธีตามประสบการณ์ของผมนะครับ บทความฝรั่งเป็นอีกแบบ ซึ่งเดี๋ยวจะมาพูดถึงครับ)
<SCRIPT type="text/javascript">
a( )
function a( )
{
var d = new Date( );
var y = d.getFullYear( )
var m = d.getMonth( ) + 1
var d = d.getDate( )
var t = m + '/' + d + '/' + y + ' '
defaultStatus = "คุณมาถึงหน้านี้เมื่อ " + t
}
</SCRIPT>
สังเกตเห็นสิ่งที่เพิ่มเข้ามาในสคริปนี้มั้ยครับ... นั่นคือ a( ) ซึ่งเมื่อ Browser เปิดขึ้นมาเห็น a( ) เข้า   ก็จะเข้าไปอ่านสิ่งที่อยู่ใน function a( )   ซึ่งไม่จำเป็นต้องใส่ a( ) ไว้หน้า function a ( )   ใส่ไว้ตอนท้ายของสคริปก็ได้ครับเช่นสคริปข้างล่างนี้ ก็ให้ผลเช่นเดียวกัน
<SCRIPT type="text/javascript">
function a( )
{
var d = new Date( )
var y = d.getFullYear( )
var m = d.getMonth( ) + 1
var d = d.getDate( )
var t = m + '/' + d + '/' + y + ' '
defaultStatus = "คุณมาถึงหน้านี้เมื่อ " + t
}
a( )
</SCRIPT>

การเรียกชุดคำสั่งด้วยตัวสร้างการโต้ตอบ onLoad
                    เป็นวิธีเรียกชุดคำสั่ง ตอนเปิดไฟล์(หรือเว็บ) โดยนำตัวสร้างการโต้ตอบนี้ไปวางไว้หลังคำสั่ง HTML ที่ชื่อ body
<SCRIPT type="text/javascript">
function a( )
{
var d = new Date( );
var y = d.getFullYear( );var m = d.getMonth( ) + 1;var d = d.getDate( )
var t = m + '/' + d + '/' + y + ' '
defaultStatus = "คุณมาถึงหน้านี้เมื่อ " + t
}
</SCRIPT>

<BODY onLoad="a( )">

มาแยกโครงสร้างจาวาสคริปกันครับ
·         <SCRIPT type="text/javascript">     เริ่มเขียนจาวาสคริป
·         function a( )     คือชุดคำสั่ง a ที่ยังเข้าไม่ได้ในตอนแรก
·         {     บอกว่าจากจุดนี้เป็นต้นไปเป็นของชุดคำสั่ง a
·         var y = d.getFullYear( )     คือการกำหนดให้ y เป็นตัวแทนของคำสั่งเรียกค่าปี ค.ศ. หรือเรียกได้ว่า y คือค่าของปี ค.ศ.
·         ;     ใส่เพื่อบอกว่าจบการกำหนดค่าแล้วและพร้อมที่จะรับคำสั่งต่อไป(หรือกำหนดค่าอื่น) ในบรรทัดเดียวกัน
·         var m = d.getMonth( ) + 1;var d = d.getDate( )     กำหนดให้ m เป็นค่าเดือน และ d เป็นค่าวัน
·         var t = m + '/' + d + '/' + y + ' '     กำหนดให้ t เป็นตัวแทนของวันเดือนปีที่อยู่ในรูป... วัน/เดือน/ปี ค.ศ.   ซึ่งสามารถใช้เครื่องหมายคำพูด(สองขีด) แทนเครื่องหมายขีดเดียวในตัวอย่างได้
·         defaultStatus = "คุณมาถึงหน้านี้เมื่อ " + t     คำว่า defaultStatus มาจากคำสั่งเต็มคือ window.defaultStatus (คุ้นๆ มั้ยครับ) โดย defaultStatus คือส่วนประกอบของหนึ่งของ window ...จุดประสงค์ของคำสั่งนี้คือวางข้อความลงใน status bar
แล้วทำไมไม่ใช้ window.status ล่ะ ?...
เป็นคำถามที่ดีครับ...ส่วนคำอธิบายนั้น ด็อกเตอร์ฝรั่งเขาบอกว่า คุณใช้มันไม่ได้เพราะรูปแบบนี้(window.status) ใช้สำหรับตัวสร้างการโต้ตอบ เช่น onClick ซึ่งอยู่ในคำสั่ง HTML แต่ในกรณีนี้ไม่ได้อยู่ในคำสั่ง HTML เราจึงใช้ defaultStatus มาแก้ค่าดั้งเดิม(ว่างเปล่าในตอนแรก)ของ status bar
แต่.......ผมลองเปลี่ยน defaultStatus มาเป็น status(ย่อจาก window.status ใช้ได้เหมือนกันครับ) มันก็ใช้ได้นะครับ จะเชื่อบทความฝรั่งหรือจะเชื่อผม ก็แล้วแต่คุณนะครับ
·         }     ใส่เพื่อบอกว่าขอบเขตของชุดคำสั่ง a จบแล้ว
·         </SCRIPT>     จบจาวาสคริป
·         <BODY     คนที่มีความรู้ HTML จะรู้ว่านี่คืออะไร..ให้ผ่านไปได้เลยครับ ส่วนคนที่ยังไม่รู้...นี่คือการเริ่มต้นของคำสั่งที่ใช้แยกไฟล์ HTML ออกเป็น 2 ส่วนครับ BODY แปลว่า ลำตัว     ซึ่งถือได้ว่าเป็นส่วนหลักของ HTML     อีกส่วนหนึ่งคือ HEAD ครับ แปลว่า หัว ซึ่งปกติจะอยู่ส่วนหน้าของ BODY ซึ่งปกติแล้วภายใน HEAD จะเป็นเนื้อหาที่เอาไว้บอกลักษณะของไฟล์ HTML ทั้งหมด โดยทั่วไปแล้วไฟล์ HTML จะมีรูปแบบเช่นนี้ครับ(คำสั่ง HTML ใช้ตัวใหญ่หรือเล็กก็ได้ ไม่มีผลอะไร)

<html>
<head>

...คำสั่งต่างๆที่ใช้บรรยายลักษณะของเนื้อหาและอาจมีจาวาสคริป...

</head>

<body>

...เนื้อหาและคำสั่งต่างๆรวมทั้งอาจมีจาวาสคริป...(ที่คุณฝึกฝนมา อยู่แค่เฉพาะส่วนนี้ บรรทัดนี้ไงครับ)

</body>
</html>
·         onLoad="a( )">     นี่เป็นตัวสร้างการโต้ตอบอันใหม่ของเราครับ onLoad(อย่าลืมใช้ตัวใหญ่เล็กตามนี้) เป็นคำสั่งบอก Browser ว่าระหว่างที่โหลดข้อมูลอยู่ ให้ทำสิ่งต่อไปนี้..คือ... เข้าไปยังชุดคำสั่ง a    ..เท่าที่ผมเห็นมา onLoad จะใช้กับ คำสั่ง BODY เท่านั้น และส่วนใหญ่ หลังเครื่องหมายเท่ากับ จะตามมาด้วยชื่อชุดคำสั่ง แต่คุณสามารถแทนที่ชุดคำสั่ง หรือเพิ่มเติมได้ด้วย คำสั่งปกติ( ตัวถูกกระทำ.ส่วนประกอบ หรือ ตัวถูกกระทำ.วิธีกระทำ) ได้ครับ ...แต่อย่าลืมว่า เวลาเพิ่มคำสั่งเข้าไปในบรรทัดเดียวกัน ให้ใส่เครื่องหมายจุดลูกน้ำ( ; ) คั่นระหว่างคำสั่งด้วยครับ ไม่งั้น Error
ถ้าเลือกใช้ onLoad แล้วจะวางชุดคำสั่งไว้ในส่วนใดของ HTML ?...
                    ให้วางชุดคำสั่งที่เป็นจาวาสคริปลงใน ส่วนของ HEAD ซึ่งเวลาเปิด(โหลด)หน้านั้นปุ๊บ ชุดคำสั่งก็จะทำงานในทันที หรือคุณจะวางไว้ที่ใดของ HTML ก็ได้ครับ มันจะทำงานได้เหมือนกัน แต่ช้าเร็วต่างกัน... เช่นหากวางไว้ข้างล่างสุด แบบว่าก่อนถึง </BODY> ...จะทำให้หน้านั้น โหลดขึ้นมาแสดงผลบนหน้าจอหมดแล้ว ชุดคำสั่งถึงจะทำงานครับ

                    ทุกๆคำสั่ง(รวมทั้งการกำหนดตัวแปร)ของจาวาสคริป จะเป็นคำสั่งเดียวหรือมากมายหลายคำสั่ง ก็สามารถนำมารวมเป็นชุดคำสั่งเดียวได้ครับ   คุณไม่เชื่อใช่ไหมครับ! ...ไม่เป็นไรครับ แบบฝึกหัดของคุณในวันนี้จะช่วยพิสูจน์ทฤษฎีนี้เอง




แบบฝึกหัด
                    จงสร้างชุดคำสั่งที่เรียกกล่องรับค่าสองกล่อง(หรือหน้าต่าง)     (คำใบ้ : สร้างอันแรกก่อนแล้วสร้างอีกอันในบรรทัดถัดไป) โดยกล่องแรกจะถามชื่อผู้ใช้ กล่องที่สองจะถามนามสกุลผู้ใช้ แล้วตามมาด้วยกล่องข้อความเตือน(alert) ที่มีตัวหนังสืออยู่ภายในว่า
สวัสดีค่ะ/ครับคุณ ชื่อและนามสกุลผู้ใช้ ขอต้อนรับสู่เว็บไซต์ ชื่อเว็บไซท์สมมติของคุณ อันยอดเยี่ยมของดิฉัน/ผม
โดยต้องกำหนดชื่อเว็บไซท์สมมติ(หรือจริง)ให้เป็นตัวแปรด้วย

หากคุณต้องการให้สนุกกว่านี้อีกหน่อย ลองเปลี่ยนคำว่า "อันยอดเยี่ยมของดิฉัน/ผม" ให้แสดงออกในลักษณะอื่นแทนการแสดงออกใน รูปของตัวหนังสือเล็กๆ ในกล่องข้อความเตือนธรรมดาๆ
<html>
<head>
<SCRIPT LANGAUGE="javascript">
function a()
{
var first = prompt("
คุณมีชื่อว่า ?", "")
var last = prompt("
คุณมีนามสกุลว่า ?", "")
var w="
ชื่อเว็บไซท์สมมติของคุณ" //(หรือใช้ var w=document.location ในกรณีที่ใช้กับเว็บจริงของคุณ)
alert("สวัสดีค่ะ/ครับคุณ " +first+" "+last+" ขอต้อนรับสู่เว็บไซท์ "+w+" อันยอดเยี่ยมของดิฉัน/ผม")
}
</SCRIPT>
</head>
<body onLoad="a()">
</body>
<html>
0 ความคิดเห็น

บทเรียนที่ 8 ลำดับชั้นของตัวถูกกระทำ

บทเรียนที่ 8 ลำดับชั้นของตัวถูกกระทำ


                    เรามาหยุดคิดถึงสิ่งเรียนมานะครับ ตอนนี้เรารู้แล้วว่าในจาวาสคริปมีตัวถูกกระทำมากมายหลายอย่าง ซึ่งอาจเป็นข้อความภาษาอังกฤษหรือแทนค่าให้อยู่ในรูปตัวแปร     เรารู้แล้วว่า "ส่วนประกอบ(property)" ใช้บรรยายส่วนประกอบนั้นๆของตัวถูกกระทำ(object)
                    เรายังรู้อีกว่านอกจาก "ส่วนประกอบ"แล้ว.. ตัวถูกกระทำยังมี "วิธีกระทำ(method)" หรือคำสั่ง ที่นำมาใช้กับตัวถูกกระทำได้ ในรูปแบบของ... ตัวถูกกระทำ.วิธีกระทำ( )     ตัวถูกกระทำแต่ละตัว ก็มี "ส่วนประกอบ" และ "วิธีกระทำ" ของตัวเอง แตกต่างกันไป

ต่อจากจุดนี้...เราจะมาเรียนรู้เคล็ดลับของการเข้าใจจาวาสคริป นั่นคือ ลำดับชั้นของตัวถูกกระทำ

อย่าคิดลึกไปครับ...แต่เมื่อคุณเข้าใจในสิ่งนี้ทั้งหมดแล้ว ก็เรียกได้ว่าคุณเข้าถึงแก่นของจาวาสคริปแล้วล่ะ!



ลำดับชั้นของตัวถูกกระทำคือ...

WINDOW

Parent

Self

Top

Frames

Document

Location

 

Href

Image

Form

 

 

 

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

Form

 

 

 


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"

 

 
;