บทเรียนที่ 6 กล่องรับค่าและตัวแปร

บทเรียนที่ 6 กล่องรับค่าและตัวแปร

 
                    บทเรียนนี้จะพูดถึงการสร้างกล่องเล็กๆ ที่จะให้ผู้ใช้กรอกข้อมูลลงไป แล้วนำข้อมูลนั้นมาสร้างเป็นตัวแปรเพื่อที่เราจะนำตัวแปรนั้นมาใช้งานได้ทั่วทั้งเว็บ ...อย่างไรก็ตาม ตอนนี้คุณจะกลับเข้าสู่การเขียนจาวาสคริปเต็มรูปแบบเหมือนบทเรียนเริ่มแรกอีกครั้ง จากที่บทก่อนๆ เขียนลงในโค้ด HTML สำหรับตัวสร้างการโต้ตอบ... เต็มรูปแบบที่ผมหมายถึง ก็คือเริ่มต้นด้วย <script language="javascript"> หรือ <script type="text/javascript">(ใช้ได้เหมือนกัน) และจบด้วย </ScRiPt>(ตัวใหญ่เล็กไม่สำคัญ) เมื่อสักครู่นี้ ผมได้ถามชื่อคุณไป เมื่อคุณกด OK(หรือ Cancel) .. สคริปที่ผมทำไว้จะเอาสิ่งที่คุณพิมพ์เก็บไว้ในรูปของตัวแปร(ภาษาอังกฤษใช้ variable แปลว่าค่าที่เปลี่ยนแปลงได้ หรือค่าที่เป็นตัวแทน สำหรับในกรณีนี้) เมื่อข้อความที่คุณพิมพ์ลงไปอยู่ในรูปของตัวแปรเรียบร้อยแล้ว ผมก็สามารถนำตัวแปรนี้มาใช้ โดยวางไว้หลังคำว่าสวัสดี อย่างที่คุณเห็นข้างบนล่ะครับ บทนี้อาจจะยาวสักหน่อย เพราะผมจะย้อนให้คุณนึกถึงสิ่งที่คุณทำไปแล้วในบทแรกๆ

สคริปที่ถามชื่อคุณ...

<SCRIPT type="text/javascript">

/* จาวาสคริปนี้ใช้สำหรับ ถามข้อมูล
จากผู้ใช้ แล้ววางข้อมูลนั้นลงในเว็บ */
var name = prompt ("คุณมีชื่อว่าอะไรครับ","ใส่ชื่อของคุณลงในนี้")
document.write("สวัสดีครับคุณ" + name + " ขอต้อนรับเข้าสู่บทเรียนที่ 6 !")

</SCRIPT>

ผลของสคริปนี้...

สวัสดีครับคุณnull ขอต้อนรับเข้าสู่บทเรียนที่ 6 !

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

เดี๋ยวก่อน! ตรงเครื่องหมาย /* กับ */ ...มันหมายความว่าอะไรกันนี่ !?
                    อย่าเพิ่งงงไปครับ เครื่องหมายใหม่ทั้งสองอันที่ปิดข้อความข้างบนทั้งสองด้านนั้น ให้ผลเช่นเดียวกับเครื่องหมายทับสองครั้ง ( // ) ยังจำได้ไหมครับ ว่าอะไรก็ตามที่อยู่หลังเครื่องทับสองครั้ง Browser(โปรแกรมเน็ตที่คุณใช้อ่านเว็บผมอยู่นี่ไงครับ) จะไม่นำมาคิด ไม่นำออกมาแสดงผล แต่ส่งผลเฉพาะภายใน บรรทัดนั้น บรรทัดเดียวเท่านั้นนะครับ หากคุณจะเพิ่มเติมต่อไปยังบรรทัดต่อมา คุณก็ต้องใส่ // นำหน้าสิ่งที่คุณจะเพิ่ม เพื่อไม่ให้ Browser เอาสิ่งที่คุณเพิ่มไปคิด
                    ส่วนเครื่องหมาย /* กับ */ ก็ช่วยกันไม่ให้ Browser เอาสิ่งที่อยู่ภายในไปคิดเช่นเดียวกันครับ แต่ว่าเจ้านี่ มันส่งผลแบบข้ามบรรทัดได้ คุณจะเพิ่มเติมไปกี่บรรทัดก็แล้วแต่ หากใส่เครื่องหมาย /* ไว้ในบรรทัดแรกๆ แล้วใส่เครื่องหมาย */ ไว้หลังบรรทัดท้ายๆ สิ่งที่อยู่ภายในนั้น คอม(Browser)ก็จะไม่เอามาคิดเลยครับ ถึงแม้ว่าจะมีเป็นร้อยเป็นพันบรรทัดก็ตาม หากภายในเป็นคำสั่งมากมายยาวเหยียด คอมก็จะไม่นำมาประมวลผลเลยครับ ซึ่งก็แล้วแต่คุณจะนำไปใช้ครับ แต่สำหรับผม เครื่องหมาย /* กับ */ เอาไว้ใช้คลุมชุดคำสั่งที่เราไม่ต้องการให้มันทำงาน ในเวลาที่ทดสอบสคริปที่กำลังสร้าง หรือคลุมเก็บไว้เผื่อจะเอามาใช้ ก็ลบเครื่องหมายทั้ง 2 ด้านออก แล้ว copy คำสั่งไปวางในจุดที่ต้องการครับ


การกำหนดตัวแปร

                    หัวข้อนี้เป็นส่วนสำคัญของบทนี้ครับ การที่จะสร้างตัวแปร คุณต้องกำหนดชื่อของตัวแปรก่อน ซึ่งใช้ภาษาอังกฤษตัวอักษรหรือคำเดียว คำนี้ไม่ต้องมีความหมายอะไรก็ได้ แต่ห้ามใช้ตัวเลขนำหน้า เช่น "a"   "b"   "dog"   "ggpp"   "a1" ...จำได้ไหมครับว่าตอนที่เราสร้างตัวถูกกระทำ มาแทนที่ new Date( ) ในบทที่ 3   เรากำหนดชื่อตัวแปรนั้นว่า "a" แล้วจึงนำตัวแปรนั้นมาแทนตัวถูกกระทำในการเรียกค่า เวลา เช่น ค่านาที...เราใช้ a.getMinutes( ) และวางค่านาทีไว้ใน document.write เพื่อแสดงค่านาทีออกมา   แต่หากเราต้องการแสดงค่าวันและเวลาสัก 10 แห่ง บนเว็บของเรา   เราก็ต้องพิมพ์ a.getMinutes( ) และค่าเวลาอื่นๆ ไว้ในที่ต่างๆของโค้ด 10 แห่งใช่รึเปล่าครับ คราวนี้ คงจะต้องพิมพ์ยาวเฟื้อย น่าเบื่อแน่ๆ

                    แต่ปัญหาที่ว่าจะน้อยลงครับ หากเราแทนค่าคำสั่งที่ยาวๆอันหนึ่ง ด้วยตัวแปรที่สั้นๆตัวหนึ่ง แล้วนำตัวแปรนั้นไปใช้กับทั้งเว็บ   เช่น เราอาจกำหนดชื่อตัวแปรเป็น X แล้วเราจะให้ X เป็นตัวแทนของ a.getMinutes( )   โดยพิมพ์ลงไปในจาวาสคริปว่า...

var X = a.getMinutes( )

แล้วคุณก็จะสามารถนำ X ไปใส่ไว้ใน document.write ซึ่งจะมีกี่ที่ก็แล้วแต่ จะเห็นได้ว่ามันช่วยให้คุณไม่ต้องพิมพ์ a.getMinutes( ) ยาวๆครับ   แต่ X ที่นำไปใช้ต้องเป็น X ตัวใหญ่แบบนี้เสมอนะครับ ถ้าคุณใช้ x เล็กแทน จะ Error ครับ ซึ่งเป็นข้อแม้ว่าหากกำหนดแบบไหน(ตัวอักษรเล็กหรือใหญ่) ตอนนำไปใช้ ก็ต้องใช้แบบนั้นเสมอครับ

เอาล่ะครับ มาดูการกำหนดตัวแปรของบทนี้กันเถอะ ยังไม่ต้องสนใจคำว่า prompt นะครับ

var name = prompt ("คุณมีชื่อว่าอะไรครับ","ใส่ชื่อของคุณลงในนี้")

สังเกตว่าผมใช้รูปแบบการเขียนดังต่อไปนี้ครับ

·         var   บอกว่าสิ่งที่จะตามมานี้เป็นชื่อตัวแปร

·         name   นี่คือชื่อของตัวแปรครับ จริงๆแล้วผมอาจใช้ชื่อที่สั้นกว่า เช่น a   แต่เหตุผลที่ใช้ชื่อที่มีความหมาย ก็เพื่อให้จำง่ายครับ ว่ามันคืออะไร แทนค่าสิ่งไหน

·         อย่าลืมว่า ตัวอักษรใหญ่เล็กมีผลต่อการตั้งชื่อ   dog ในที่นี้คนละชื่อกับ Dog หรือ dOg นะครับ

·         ข้อความที่ตั้งชื่อไม่ต้องไปหุ้มมันด้วยเครื่องหมายคำพูดนะครับ อย่าง "name" นี่ Error ครับ

·         เครื่องหมายเท่ากับ (=)   ใช้บอกว่าชื่อตัวแปรมีค่าเท่ากับผลลัพท์ของคำสั่งที่อยู่ทางขวาของเครื่องหมายเท่ากับ

·         ในกรณีนี้ ชื่อตัวแปรจะเป็นตัวแทนข้อมูลที่ได้จากกล่องรับค่า

กล่องรับค่า

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

var name = prompt ("คุณมีชื่อว่าอะไรครับ","ใส่ชื่อของคุณลงในนี้")

มันก็เหมือนเดิมครับ แฮ่ๆ...จริงๆแล้วไม่ต้องมี var name =   ก็ได้ครับ เพียงได้ค่าที่คุณพิมพ์ลงไป จะไม่สามารถนำไปใช้ทำอะไรได้เลย

คุณอาจจะสงสัยภายในของคำสั่ง prompt ว่า.....

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

·         แล้วถ้าเราลบ "ใส่ชื่อของคุณลงในนี้" ให้หมด ลบเครื่องหมายลูกน้ำข้างซ้ายและเครื่องหมายคำพูดทิ้งไปด้วยล่ะ มันจะว่างเปล่าอีกไหม..........คำตอบคือ ไม่ว่างครับ ออกนอกบ้าน มีธุระด่วน...เฮ้ย ! ...เอ่อ... มันจะขึ้นว่า undefined หมายความว่าไม่ได้กำหนดว่าเป็นข้อความหรือเป็นอะไรเลยสักอย่าง

·         หากคุณกด OK โดยไม่ทำการแก้ไขสิ่งใดในกล่องรับค่า ผลที่จะแสดงออกมาก็จะเป็นสิ่งนั้นครับ

·         หากคุณกด OK โดยที่กล่องรับค่าว่างเปล่า(เพราะคุณลบมัน หรือว่าว่างอยู่แล้ว) ผลที่จะแสดงออกมาจะได้ภาษาอังกฤษคำว่า null หมายถึงไม่มีอะไรเลย (ลองทำดูครับ กับหน้านี้ก็ได้ด้วย Refresh หรือ ปุ่ม F5)

ถึงเวลารวมทุกๆส่วนเข้าหากัน

ตอนนี้คุณมีความรู้ในแต่ละส่วนเรียบร้อยแล้ว เราจะกลับเข้าสู่โครงหลักของจาวาสคริปอีกครั้ง

var name = prompt ("คุณมีชื่อว่าอะไรครับ","ใส่ชื่อของคุณลงในนี้")
document.write("สวัสดีครับคุณ" + name + " ขอต้อนรับเข้าสู่บทเรียนที่ 6 !")

เราจะมาอธิบายแต่ละส่วนเรียงกันไปครับ...

·         var name =     เรากำหนดชื่อตัวแปรเป็น name เท่ากับผลลัพท์ของคำสั่ง...

·         prompt ("คุณมีชื่อว่าอะไรครับ"     ซึ่งถามผู้ใช้ว่า "คุณมีชื่อว่าอะไรครับ"

·         ,"ใส่ชื่อของคุณลงในนี้")และในแถบขาวๆของกล่องรับค่าจะแสดงว่า "ใส่ชื่อของคุณลงในนี้"

·         จบคำสั่งบรรทัดแรกครับ ซึ่งผมอยากบอกว่า คุณสามารถพิมพ์คำสั่ง document.write ตามลงไปในบรรทัดเดียวกัน ได้เลยครับ เพียงแต่ต้องคั่นด้วยเครื่องหมายจุดลูกน้ำ( ; ) แบบนี้ครับ...
..............ของคุณลงในนี้");document.write(..........

·         document.write("สวัสดีครับคุณ" + name + " ขอต้อนรับเข้าสู่บทเรียนที่ 6 !")

document.write(     ใช้เขียน "สวัสดีครับคุณ"     และต้องใส่เครื่องหมายบวก + เพื่อเชื่อมข้อความกับตัวแปรเข้าด้วยกัน(กฏหนึ่งของจาวาสคริป) และเขียนค่าตัวแปรของ name (หากคุณพิมพ์ไปว่า "name" ซึ่งอยู่ในรูปข้อความ ไม่ใช่ตัวแปร เวลาผลก็จะแสดงออกมาเป็น....สวัสดีครับคุณname) และสุดท้ายเขียนเพิ่ม(+) คำว่า "ขอต้อนรับเข้าสู่บทเรียนที่ 6 !" ปิดท้ายด้วยวงเล็บปิด ) แสดงว่าเสร็จสิ้นการเขียนแล้ว

โปรดทำความเข้าใจกับตัวแปรอย่างถ่องแท้นะครับ เพราะถูกใช้อย่างกว้างขวางและบ่อยครั้งในภาษานี้ ซึ่งถือว่าตัวแปรมีประโยชน์มากทีเดียว

แบบฝึกหัด

ให้เขียนสิ่งที่คุณเรียนมาทั้งหมด...

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