Professional Documents
Culture Documents
บทที่ 7
จาวาสคริปต์ (JavaScript)
ข้อดีและข้อเสียของ JavaScript
การทางานของ JavaScript เกิดขึ้นบนบราวเซอร์ (เรียกว่าเป็น client-side script) ดังนั้นไม่ว่าคุณจะ
ใช้ เ ซิ ร์ ฟ เวอร์ อ ะไร หรื อ ที่ ไ หน ก็ ยั ง คงสามารถใช้ จ าวาสคริ ป ต์ ในเว็ บ เพจได้ ต่ า งกั บ ภาษาสคริ ป ต์ อื่ น เช่ น
Perl, PHP, หรือ ASP ซึ่งต้องแปลความและทางานที่ตัวเครื่องเซิร์ฟเวอร์ (เรียกว่า server-side script) ดังนั้นจึง
ต้องใช้บ นเซิร์ ฟเวอร์ ที่ส นั บ สนุ น ภาษาเหล่ านี้เท่านั้น อย่างไรก็ดี จากลั กษณะดังกล่ าวก็ทาให้ JavaScript มี
ข้อจากัด คือไม่สามารถรับและส่งข้อมูลต่างๆ กับเซิร์ฟเวอร์โดยตรง เช่น การอ่านไฟล์จากเซิร์ฟเวอร์ เพื่อนามา
แสดงบนเว็บเพจ หรือรั บข้อมูลจากผู้ชม เพื่อนาไปเก็บบนเซิร์ฟเวอร์ เป็นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้อง
อาศัยภาษา server-side script อยู่
ปั จจุ บั น มีการใช้จ าวาสคริ ป ต์ที่ฝั ง อยู่ ในเว็บเบราว์เซอร์ ในหลายรู ปแบบ เช่น ใช้เพื่อสร้างเนื้อ หาที่
เปลี่ยนแปลงเสมอภายในเว็บเพจ, ใช้เพื่อตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้กรอกก่อนนาเข้าระบบ, ใช้เพื่อ
เข้าถึงข้อมูลที่อยู่ภายใต้โครงสร้างแบบ Document Object Model (DOM) เป็นต้น
นอกจากนี้ จ าวาสคริ ป ต์ ยั ง ถู ก ฝั ง อยู่ ใ นแอปพลิ เ คชั น ต่ า งๆ นอกเหนื อ จากเว็ บ เบราว์ เ ซอร์ ไ ด้ อี ก ด้ ว ย
เช่น widget ของ Yahoo! เป็นต้น โดยรวมแล้วจาวาสคริปต์ถูกใช้เพื่อให้นักพัฒนาโปรแกรม สามารถเขียนสคริปต์
เพื่อสร้างคุณสมบัติพิเศษต่างๆ เพิ่มเติมจากที่มีอยู่บนแอปพลิเคชันดังเดิม โปรแกรมใดๆ ที่สนับสนุนจาวาสคริปต์
จะมีตัวขับเคลื่อนจาวาสคริปต์ (JavaScript Engine) ของตัวเอง เพื่อเรียกใช้งานโครงสร้างเชิงวัต ถุของโปรแกรม
หรือแอปพลิเคชันนั้นๆ
การเขียน JavaScript
การเขียนจาวาสคริปต์จะมีลักษณะการเขียนโค้ดคล้ายกับภาษาจาวาปกติ แต่จะใช้รูปแบบที่สั้นกว่าและ
ใช่ร่วมกับ tag <>
ตัวอย่างเริ่มต้น
เป็นตัวอย่างเริ่มต้นที่จะแสดงผลเป็นหน้าต่างโต้ตอบ (popup) บนเว็บเบราว์เซอร์ โดยที่จะต้อง Save file
เป็นนามสกุล .html และเปิดให้แสดงผลบนเว็บเบราว์เซอร์
3
ชุดคาสั่งและการใช้ Statement
คาสั่งที่เขียนขึ้นจะถูกจัดกกลุ่มเป็น Statements โดยในเบื้องต้น 1 Statements จะมีเพียง 1 บรรทัด
และในตอนท้ายของบรรทัดจะต้องปิดท้ายด้วยเครื่องหมาย Semi Colon (;) เพื่อเป็นการบอกว่าจบการทางาน
ของ Statement นั้น เหมือนในภาษาจาวา ในหนึ่งบรรทัดสามารถมีได้หลาย Statement โดยแต่ละ Statement
จะต้องปิดท้ายด้วย ; เสมอ แต่ไม่นิยมเขียนเช่นนั้น เพราะทาให้อ่านโค้ดได้ยาก แต่ถ้าหาก Statement ยาวเกิน 1
บรรทัด สามารถแยกเขียนเป็นหลายบรรทัดได้
การใส่ Comment
จะใช้การใส่สัญลักษณ์ // นาหน้าข้อความที่ต้องการใช้อธิบายคาสั่ง โดยใส่บรรทัดที่ต้องการหรือใส่ต่อ
ด้านหลังของ Statement เพื่ออธิบายคาสั่งก็ได้ ในกรณีที่ต้องใส่ comment หลายบรรทัด ใช้สัญลักษณ์ /* ตาม
ด้วยข้อความ และปิดท้ายด้วย */
//แสดงหน้าต่าง popup
alert("Hello World"); //แสดงผลคาว่า Hello World
4
การนาจาวาสคริปต์ไปใช้
ตาแหน่งของการใส่โค้ดคาสั่ง มีผลต่อการทางาน เพราะเว็บเบราว์เซอร์จะแปลคาสั่งจากบรรทัดบนไล่ลง
มาทีละบรรทัด ซึ่งการวางโค้ดในบรรทัดที่ต่างกัน ผลลัพธ์บนเว็บเพจก็อาจแตกต่างกันได้ เช่น ถ้าวางโค้ดในการ
แสดงหน้าต่าง ในส่วนของ Head จะไม่พบข้อความภายใน Body แต่ถ้าวางไว้ต่อท้ายจาก Body ก็จะเห็นข้อความ
ใน Body
การเขี ย น JavaScript เราอาจเขี ย นรวมอยู่ ใ นไฟล์ เ ดี ย วกั น กั บ HTML ได้ ซึ่ ง แตกต่ า งจากการเขี ย น
โปรแกรมภาษา Java ที่ต้อง เขียนแยกออกเป็นไฟล์ต่างหาก ไม่สามารถเขียนรวมอยู่ในไฟล์เดียวกับ HTML ได้
วิธีการเขียน JavaScript เพื่อสั่งให้เว็บเพจทางาน มีอยู่ด้วยกัน 2 วิธี ดังนี้
- เขียนด้วยชุดคาสั่งและฟังก์ชันของ JavaScript เอง หรือ
- เขียนตามเหตุการณ์ที่เกิดขึ้นตามการใช้งานจากชุดคาสั่งของ HTML เมื่อเริ่มใช้งาน โปรแกรมบราวเซอร์
จะอ่านข้อมูลจากส่วนบนของเพจ HTML และทางานไปตามลาดับจาก บนลงล่าง (top-down)
โดยเริ่ มที่ส่ ว น < HEAD >...< /HEAD > ก่อนจากนั้นจึงทางานในส่ ว น < BODY >...< /BODY > เป็น
ลาดับต่อมา การทางานของ JavaScript ดูไม่แตกต่างไปจาก HTML มากนัก แต่ HTML จะวางเลย์เอาต์โครงสร้าง
ของอ็อบเจ็กต์ภายใน และส่วนเชื่อมโยงกับเว็บเพจเท่านั้น ในขณะที่ JavaScript สามารถเพิ่มเติมส่วนของการ
เขียนโปรแกรมและลอจิกเข้าไป
การใช้งานภาษา JavaScript ควรมีความรู้พื้นฐานในเรื่อง HTML/XHTML มาก่อน เพราะการใช้งาน
JavaScript โดยทั่วๆ ไป จะเขียน code คาสั่งต่างๆ แทรกลงไปใน code ของ HTML
ตัวอย่าง code JavaScript
1) ตัวอย่างการใช้งานร่วมกับ code HTML เป็น ปุ่ม back กลับไปหน้าก่อนหน้านี้
<input type=”button” value=”Back to Previous Page” onClick=”javascript: history.go(-1)”>
.
2) ตัวอย่างการใช้งานร่วมกับ code HTML ปุ่ม close หน้าต่างปัจจุบัน
<input type=”button” value=”Close Window” onclick=”window.close()”>
5
การประกาศตัวแทน
ตัวแปร (Variable) ใช้เพื่อเก็บข้อมูล โดยที่ตัวแปรมีลักษณะคล้ายกล่องที่ใช้เก็บของ ซึ่งข้อมูลที่แต่ละตัว
แปรจะมีชื่อ โดยจะจองหน่วยความจาเพื่อใช้เก็บข้อมูล การประกาศตัวแปรในจาวาสคริปต์ จะใช้คาว่า var ตาม
ด้วยชื่อตัวแปร แล้วปิดท้าย Statement ด้วย ;
var name;
var Lastname;
var birthdate;
var Day;
Day = 7;
จากโค้ดข้างบนสามารถเขียนย่อได้ดังนี้
var Day = 7;
การเลือกประเภทของตัวแปรอัตโนมัติ
ในจาวาสคริปต์ไม่จาเป็นต้องกาหนดชนิดของตัวแปร เช่น ไม่ต้องกาหนดเป็น Text หรือเป็น Integer
ตัวแปรในจาวาสคริปต์สามารถเก็บข้อมูลได้ทุกประเภท และสามารถปรับเปลี่ยนชนิดของข้อมูลภายหลังได้ การ
กาหนดค่าให้กับตัวแปร หากเป็นข้อความ ข้อมูลจะต้องอยู่ภายในเครื่องหมาย Double Quote “” หรือ Single
Quote ‘’ ก็ได้ ส่วนตัวเลขหรือค่าความจริง true, false ไม่ต้องอยู่ในเครื่องหมายดังกล่าว
ตัวแปรแบบอาร์เรย์
ตัวแปรแบบอาร์เรย์ (Array) หมายถึงตัวแปรซึ่งมีค่าได้หลายค่าโดยใช้ชื่ออ้างอิงเพียงชื่อเดียว ด้วยการใช้
หมายเลขลาดับเป็นตัวจาแนกความแตกต่างของค่าตังแปรแต่ละตัว ถ้าเราจะเรียกตัวแปรชนิดนี้ว่า "ตัวแปรชุด" ก็
เห็นจะไม่ผิดนัก ตัวแปรชนิดนี้มีประโยชน์มาก ลองคิดถึงค่าข้อมูลจานวน 100 ค่า ที่ต้องการเก็บไว้ในตัวแปร
จานวน 100 ตัว อาจทาให้ต้องกาหนดตัวแปรที่แตกต่างกันมากถึง 100 ชื่อ กรณีอย่างนี้ควรจะทาอย่างไรดี แต่
ด้วยการใช้คุณสมบัติอาร์เรย์ เราสามารถนาตัวแปรหลาย ๆ ตัวมาอยู่รวมเป็นชุดเดียวกันได้ และสามารถเรียกใช้ตัว
แปรทั้งหมดโดยระบุผ่านชื่อเพียงชื่อเดียวเท่านั้น ด้วยการระบุหมายเลขลาดับ หรือ ดัชนี(index) กากับตามหลังชื่อ
ตัวแปร ตัวแปรเพียงชื่อเดียวจึงมีความสามารถเทียบได้กับตัวแปรนับร้อยตัว พันตัว (ตัวที่ 1) ในตัวแปรแบบ
อาร์เรย์มีดัชนีเป็น 0 ส่วนตัวแปรต่อ ๆ ไปก็จะมีดัชนีเป็น 1,2,3,... ไปตามลาดับ เมื่อต้องการระบุชื่อตัวแปรแบบ
อาร์เรย์แต่ละตัว ก็จะใช้รูปแบบ name[0], name[1],... เรียงต่อกันไปเรื่อยๆ เราสามารถสร้างตัวแปรอาร์เรย์ใหม่
ด้วย myArray = new Array() ดังนี้
myArray[0] = 17;
myArray[1] = "Nun";
myArray[2] = "Stop";
ค่าคงที่
ค่าคงที่ (Literal หรือ Constant) หมายถึง ค่าของข้อมูลที่เมื่อกาหนดแล้วจะทาการเปลี่ยนแปลงค่าเป็นอย่าง
อื่นไม่ได้ ชนิดข้อมูลของค่าคงที่ได้แก่
เลขจานวนเต็ม (Integer) เป็นตัวเลขที่ไม่มีเศษทศนิยม สามารถเขียนให้อยู่ในแบบ เลขฐานสิบ (0-9),
เลขฐานสิ บ หก (0-9, A-F) หรื อ เลขฐานแปด (0-7) โดยการเขี ย นเลขฐานแปดให้ น าหน้ า ด้ ว ย O
(Octenary) ส่วนการเขียนเลขฐานสิบหกให้นาหน้าด้วย Ox หรือ OX (Hexadenary)
เลขจานวนจริง (Floating) ใช้รูปแบบการเขียนโดยประกอบไปด้วยตัวเลข จุดทศนิยมและตัวเลขยกกาลัง
E (Exponential) เช่น
o 5.00E2 จะหมายถึงค่า 5.00 คูณด้วย 10 ยกกาลัง 2 จะมีค่าเป็น 500
7