บทเรียนที่ 18 การใช้ประโยชน์กล่องข้อความ(text box)

บทเรียนที่ 18 การใช้ประโยชน์กล่องข้อความ(text box)

                    บทนี้ก้าวข้ามบทเรียนที่ 17 ไปอีกขั้นนึง จากที่คุณเคยส่งข้อมูลไปสู่ชุดคำสั่ง แต่คราวนี้คุณจะนำเอาข้อความที่ผู้ใช้พิมพ์ลงไปในกล่องข้อความ มาเข้าสู่การค้นหาของ google

สคริป...

<script language="javascript">
//สคริปนี้ทำได้แต่การค้นหาด้วยภาษาอังกฤษเท่านั้น
function a()
{var a=document.f.find.value
var b="http://www.google.co.th/search?hl=th&ie=UTF-8&q=" + a
window.open(b)}
</script>
<center><h1>ค้นหาด้วย google</h1>
<form name="f">
<input name="find" type="text"
value="ใส่สิ่งที่ต้องการค้นหา(ภาษาอังกฤษเท่านั้น)" size="60">
<input type="button" value="เข้าสู่การค้นหา" onClick="a()">
</form></center>

ผลของสคริปนี้(หากกล่องข้อความมีปัญหาให้คุณทดลองเองนะครับ)

ค้นหาด้วย google

มาแยกโครงสร้างของสคริปกันครับ

                    ที่ผมบอกว่าค้นหาได้แต่ภาษาอังกฤษ ไม่ได้หมายความว่า ไม่มีวิธีที่ค้นหาด้วยภาษาไทยนะครับ เพียงแต่ว่ามันจะยุ่งยากมากกว่านี้เยอะครับ(อีกอย่างคือผมไม่ได้ทำเอาไว้ด้วยครับ แต่พอจะรู้แนวการทำอยู่ เดี๋ยวคุณอ่านไปเรื่อยๆ ก็จะรู้แนวการทำเหมือนผมครับ)

                    การสร้างสคริปนี้ได้จำเป็นต้องมีความรู้ลำดับชั้นของตัวถูกกระทำ(ภาษาอังกฤษใช้ hierarchy of object)ที่ถูกต้อง ซึ่งคุณจำเป็นต้องใช้ความรู้นี้อยู่บ่อยๆในการเขียนจาวาสคริป

·         function a()
{var a=document.f.find.value
เริ่มจากตอนต้นของสคริป ในชุดคำสั่ง a มีการกำหนดให้ a (การกำหนดชื่อตัวแปรและกำหนดชื่อชุดคำสั่งใช้ชื่อซ้ำกันได้ครับ) เท่ากับ ผลของบางสิ่งใน document และบางสิ่งใน f และบางสิ่งใน find ซึ่งสิ่งสุดท้ายนี้มีค่า(value หรือในที่นี้คือ ข้อความ)อยู่   หรือสรุปให้เข้าใจง่ายคือ ข้อความในกล่องข้อความที่มีชื่อว่า find ซึ่งอยู่ในแบบฟอร์มที่ชื่อว่า f ซึ่งแบบฟอร์มนี้อยู่ในเอกสาร HTML (document)

·         var b="http://www.google.co.th/search?hl=th&ie=UTF-8&q=" + a
ส่วนถัดมาเป็นการกำหนดให้ตัวอักษร b แทนค่า ที่อยู่ของเว็บไซท์กูเกิ้ลขณะที่ทำการค้นหาอยู่สมมติว่า ผมพิมพ์ลงไปในกล่องข้อความในเว็บกูเกิ้ลว่า world แล้วกดปุ่มค้นหา เมื่อหน้าเปลี่ยน และผลการค้นหาที่ได้ขึ้นมา ที่อยู่ในหน้านั้นคือ...

http://www.google.co.th/search?hl=th&ie=UTF-8&q=world

ซึ่งเหมือนกับในสคริปใช่มั้ยครับ เพียงแต่คำที่เราใช้ค้นหามา จากข้อความที่ผู้ใช้พิมพ์ลงไป จึงต้องบวก a เข้าไปแทน

·         window.open(b)}
ต่อมาเป็นคำสั่งเปิดหน้าต่างใหม่ ซึ่งใช้ที่อยู่สำหรับการค้นหาคำนั้นในเว็บไซท์กูเกิ้ล(ค่า b)

·         ต่อมาเรามาดูที่แบบฟอร์มกันครับ กล่องข้อความมีหน้าที่รับข้อความที่ต้องการค้นหา ส่วนปุ่มมีหน้าที่ทำให้ชุดคำสั่งทำงาน โดยผ่านตัวสร้างการโต้ตอบ onClick

·         แล้วบรรทัดสุดท้าย ก็จัดการจบการสร้างแบบฟอร์ม และการจัดกลาง

·         ที่ผมบอกว่าการทำสคริปค้นหาภาษาไทยจะยุ่งยาก เพราะว่ากูเกิ้ลไม่ได้ใช้คำไทยตรงๆมาค้นหาครับ แต่จะแปลงเป็นรหัสอะไรสักอย่างที่ผมไม่ทราบครับ ซึ่งรหัสแต่ละอันนั้น แทนตัวอักษรภาษาไทยแต่ละตัวครับ ให้ลองเข้าไปในเว็บไซท์กูเกิ้ลแล้วลอง ค้นหาว่า... ก ไก่ ตัวเดียวดูสิครับ จะเห็นรหัสที่แทนตัวอักษร ก ไก่ นั้น อยู่หลังสุดของที่อยู่(ดูใน Address) หากใครรู้วิธีแปลงรหัสแล้วแทนค่า a ก่อนคงจะไม่มีปัญหา แต่ผมไม่รู้วิธีสิครับ ผมก็จะต้องไปไล่ค้นหาแต่ละตัวอักษรในกูเกิ้ล ว่าแต่ละตัวมีรหัสอะไรบ้าง แล้วนำมาเข้าคำสั่ง if ทำหน้าที่แปลงข้อความแต่ละตัวอักษรเป็นรหัสให้หมด ซึ่งวิธีนี้ดูยุ่งมากใช่มั้ยครับ

---

แบบฝึกหัด

                    ให้คุณแก้ไขสคริปในตัวอย่างเพื่อให้สามารถค้นหาด้วย Yahoo หรือเว็บที่ใช้ค้นหาต่างๆ ทั้งไทยและต่างประเทศ ที่ไม่ใช่ google และไม่จำเป็นต้องใช้ค้นหาเว็บอย่างเดียวนะครับ ใช้เว็บที่ค้นหาภายในเว็บตัวเองก็ได้ครับ   โดยก่อนจะทำการค้นหา ให้มีกล่องข้อความเตือน โผล่ขึ้นมาว่า... ทำการค้นหา... คำหรือข้อความที่ผู้ใช้พิมพ์ลงไป

ผมไม่ขอทำเฉลยไว้นะครับ เพราะแนวทางการทำนั้นไม่ยากครับ แต่การเลือกเว็บสิครับ จะทำให้เฉลยได้เป็นร้อยเป็นพันแบบเลยมั้งครับ (อ้างไปโน่น ผมขี้เกียจทำเองแหล่ะครับ แต่บทที่ผ่านๆมาที่มันสั้นลงเรื่อยๆ ไม่ใช่เพราะผมขี้เกียจนะครับ เพราะบทความฝรั่งก็สั้นเช่นนี้เหมือนกันครับ แฮ่ม!)