บทเรียนที่ 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 รุ่นเก่าที่ไม่เข้าใจจาวาสคริป
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 ให้ทำงาน... ซึ่งวิธีเรียกก็ง่ายๆครับ(นี่เป็นวิธีตามประสบการณ์ของผมนะครับ บทความฝรั่งเป็นอีกแบบ ซึ่งเดี๋ยวจะมาพูดถึงครับ)
เป็นเครื่องหมาย ที่ซ่อนสคริป หาก 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( )
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>
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( )">
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 ใช้ได้เหมือนกันครับ) มันก็ใช้ได้นะครับ จะเชื่อบทความฝรั่งหรือจะเชื่อผม ก็แล้วแต่คุณนะครับ
แล้วทำไมไม่ใช้ 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>
<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>
<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>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น