บทเรียนที่ 19 การส่งข้อมูลไปที่ชุดคำสั่ง
จุดมุ่งหมายของบทความนี้ คือ พาคุณเข้าไปให้ลึกยิ่งขึ้นในเรื่องของการใช้จาวาสคริปกับแบบฟอร์ม ซึ่งส่วนนี้ จำเป็นต้องอาศัยความเข้าใจลำดับชั้นของตัวถูกกระทำ(hierarchy of objects) และการทำงานของชุดคำสั่ง โดยส่วนมากแล้ว จาวาสคริปจะถูกนำมาใช้กับแบบฟอร์ม เพื่อตรวจสอบข้อมูลที่ผู้ใช้กดเข้ามา
สคริป...
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function doit()
{
alert("document.myform.fname.value คือ "
+ document.myform.fname.value)
var swd="สวัสดี "
alert(swd + document.myform.fname.value
+ " " + document.myform.lname.value)
alert("ความยาวของชื่อ(รวมสระ)เท่ากับ "
+ document.myform.fname.value.length)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
คุณมีชื่อว่าอะไรครับ ?
<INPUT TYPE="text" NAME="fname"><p>
คุณมีนามสกุลว่าอะไรครับ ?
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" style="font-size:18px"
VALUE="โปรดกรอกชื่อและนามสกุล แล้วกดที่นี่"
onClick="doit()">
</FORM>
</BODY>
</HTML>
ผลของสคริปนี้ (ขออภัยครับ ใช้บนเว็บนี้ไม่ได้ ทดลองเอาเองนะครับ)
คุณมีชื่อว่าอะไรครับ ?
คุณมีนามสกุลว่าอะไรครับ ?
มาแยกโครงสร้างสคริปกันครับ
· มาดูที่ในส่วนของแบบฟอร์มกันก่อนครับ
<FORM NAME="myform">
คุณมีชื่อว่าอะไรครับ ?
<INPUT TYPE="text" NAME="fname"><p>
คุณมีนามสกุลว่าอะไรครับ ?
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" style="font-size:18px"
VALUE="โปรดกรอกชื่อและนามสกุล แล้วกดที่นี่"
onClick="doit()">
</FORM>
คุณมีชื่อว่าอะไรครับ ?
<INPUT TYPE="text" NAME="fname"><p>
คุณมีนามสกุลว่าอะไรครับ ?
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" style="font-size:18px"
VALUE="โปรดกรอกชื่อและนามสกุล แล้วกดที่นี่"
onClick="doit()">
</FORM>
· เราตั้งชื่อแบบฟอร์มว่า "myform" ส่วนชื่อของกล่องข้อความแรกในแบบฟอร์มเราตั้งว่า "fname" ซึ่งเอาไว้ถามชื่อผู้ใช้ ส่วนกล่องข้อความถัดมาที่ถามนามสกุลผู้ใช้ เราตั้งชื่อว่า "lname" ตอนนี้ทุกๆสิ่งก็มีชื่อหมดแล้วครับ
· อะไรก็ตามที่ผู้ใช้พิมพ์ลงในกล่องข้อความ จะเป็นค่า(value)ของกล่องข้อความนั้น หรือเป็นของชื่อที่เราตั้งไว้ให้กับกล่องข้อความนั้น เข้าใจมั้ยครับ ? เช่น สิ่งที่พิมพ์ลงไปในกล่องข้อความชื่อ fname ก็จะเป็น value ของ fname
· เมื่อผู้ใช้กดปุ่ม(Button) onClick ก็จะทำให้ชุดคำสั่ง doit( ) ทำงาน สังเกตว่าหลังการกำหนดประเภทของแบบฟอร์มว่าเป็นแบบปุ่ม(INPUT TYPE="button") ผมใช้ style="font-size:18px" เพื่อปรับให้ตัวอักษรบนปุ่มใหญ่ขึ้นกว่าปกติครับ นี่เป็นการกำหนด style(แปลว่า รูปแบบ) ซึ่งเอาไว้ตกแต่งและจัดรูปแบบเอกสาร HTML ครับ แฮ่ๆ นอกเรื่องไปหน่อย แต่หากใครอยากทราบเพิ่มเติมบอกได้นะครับ จะได้แยกทำพิเศษนอกจากเรื่องจาวาสคริปนี้
· เรามาดูที่ชุดคำสั่งกันครับ
function doit()
{alert("document.myform.fname.value คือ "
+ document.myform.fname.value)
var swd="สวัสดี "
alert(swd + document.myform.fname.value
+ " " + document.myform.lname.value)
alert("ความยาวของชื่อ(รวมสระ)เท่ากับ "
+ document.myform.fname.value.length)
}
{alert("document.myform.fname.value คือ "
+ document.myform.fname.value)
var swd="สวัสดี "
alert(swd + document.myform.fname.value
+ " " + document.myform.lname.value)
alert("ความยาวของชื่อ(รวมสระ)เท่ากับ "
+ document.myform.fname.value.length)
}
· ส่วนของ... "document.myform.fname.value คือ " ...ไม่ใช่คำสั่งนะครับ ดูดีๆ เพราะมีเครื่องหมายคำพูดหุ้มอยู่ จึงเป็นข้อความธรรมดาทั้งหมด
· จะเห็นว่าไม่มีการส่งค่าเข้าไปในวงเล็บของชุดคำสั่ง แต่ถ้าคุณดูคำสั่งที่เรียงตามลำดับชั้นของตัวถูกกระทำ คุณจะเห็นว่าค่าที่ผู้ใช้พิมพ์ลงไปจะถูกเรียกขึ้นมา
· ในคำสั่งที่ว่า ใช้ตัวถูกกระทำระดับสูงสุด(จริงๆแล้วเป็น window แต่ละได้)คือ document ตามมาด้วยแบบฟอร์ม (ซึ่งใช้ชื่อว่า myform) และตามมาด้วยตัวถูกกระทำที่อยู่ในแบบฟอร์มนั้น (ซึ่งใช้ชื่อว่า fname) แล้วตามมาด้วย .value ซึ่งใส่เพื่อเรียกค่าที่ผู้ใช้พิมพ์ลงไป
· ต่อมาเรากำหนดให้ swd คือคำว่า "สวัสดี " ซึ่งจะถูกนำไปใช้ในกล่องข้อความเตือน
· เมื่อผู้ใช้กดปุ่ม กล่องข้อความเตือน จะขึ้นบอกชื่อแรกของผู้ใช้
· เมื่อกด OK กล่องเตือนที่สองจะโผล่ขึ้นมา บอกว่า... สวัสดี ชื่อ นามสกุล ซึ่งเป็นข้อมูลที่ได้จากกล่องข้อความทั้งสอง
· และสุดท้ายกล่องข้อความเตือนขึ้นบอก ความยาวของตัวอักษรรวมสระไทยที่ผู้ใช้พิมพ์ลงไป ซึ่งมาจาก document.myform.fname.value.length length แปลว่าความยาวครับ เราจึงใส่ไปหลัง value เพื่อเรียกค่าความยาวของข้อความ
· length เป็นส่วนประกอบ(property)ตัวหนึ่ง
แบบฝึกหัด
ให้คุณสร้างเอกสาร HTML ที่มีแบบฟอร์มหนึ่งอันที่มีชื่อว่า aform ซึ่งแสดงสองกล่องข้อความ อันแรกถามจังหวัดที่ผู้ใช้ชื่นชอบ อันที่สองถามประเทศที่ผู้ใช้อยากไปเที่ยว เมื่อผู้ใช้กดปุ่ม ชุดคำสั่งจะ กำหนดตัวแปรแทนค่า "คุณชอบจังหวัด " แล้วเรียกกล่องข้อความเตือน 2 กล่องดังต่อไปนี้
1. คุณชอบจังหวัดชื่อจังหวัด ...แต่อยากไปประเทศ ชื่อประเทศ
2. แสดงความยาวของชื่อจังหวัดที่ผู้ใช้พิมพ์ลงไป
เฉลย
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function doit()
{
var swd="คุณชอบจังหวัด "
alert(swd + document.aform.fname.value+
" ...แต่อยากไปเที่ยวประเทศ "+ document.aform.lname.value)
alert("ความยาวของชื่อจังหวัด(รวมสระ)เท่ากับ "
+ document.aform.fname.value.length)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aform">คุณชอบจังหวัดอะไรครับ ?
<INPUT TYPE="text" NAME="fname"><p>คุณอยากไปเที่ยวประเทศอะไรครับ ?
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" style="font-size:18px"
VALUE="โปรดกรอกจังหวัดและประเทศ แล้วกดที่นี่"
onClick="doit()">
</FORM>
</BODY>
</HTML>
<HEAD>
<SCRIPT type="text/javascript">
function doit()
{
var swd="คุณชอบจังหวัด "
alert(swd + document.aform.fname.value+
" ...แต่อยากไปเที่ยวประเทศ "+ document.aform.lname.value)
alert("ความยาวของชื่อจังหวัด(รวมสระ)เท่ากับ "
+ document.aform.fname.value.length)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aform">คุณชอบจังหวัดอะไรครับ ?
<INPUT TYPE="text" NAME="fname"><p>คุณอยากไปเที่ยวประเทศอะไรครับ ?
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" style="font-size:18px"
VALUE="โปรดกรอกจังหวัดและประเทศ แล้วกดที่นี่"
onClick="doit()">
</FORM>
</BODY>
</HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น