JavaScript เป็นภาษายุคใหม่สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ตที่กำลังได้รับความนิยมอย่างสูง เราสามารถเขียน โปรแกรม JavaScript เพิ่มเข้าไปในเว็ปเพจเพื่อใช้ประโยชน์สำหรับงานด้านต่าง ๆ ทั้งการคำนวณ การแสดงผล การรับ-ส่งข้อมูล และที่ สำคัญคือ สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทันใด นอกจากนี้ยังมีความสามารถด้านอื่น ๆ อีกหลายประการที่ช่วยสร้างความน่าสนใจให้ กับเว็บเพจของเราได้อย่างมาก ภาษาจาวาสคริปต์ถูกพัฒนาโดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript
ลักษณะการทำงานของ JavaScript
JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนเอาสารด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ทำงานร่วมกับ ภาษา HTML และภาษาจาวาได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server) โดยมีลักษณะการทำงานดังนี้ 1. Navigator JavaScript เป็น Client-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งไคลเอนต์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ใช้ ไม่ว่าจะเป็นเครื่องพีซี เครื่องแมคอินทอช หรือ อื่น ๆ) จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ 2. LiveWire JavaScript เป็น Server-Side JavaScript ซึ่งหมายถึง JavaScript ที่ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่อง คอมพิวเตอร์ของผู้ให้บริการเว้บ โดยอาจจะเป็นเครื่องของซันซิลิคอมกราฟิกส์ หรือ อื่น ๆ) สามารถใช้ได้เฉพาะกับ LIveWire ของเน็ตสเคป โดยตรง
JavaScript กับ HTML
การเขียน JavaScript เราอาจเขียนรวมอยู่ในไฟล์เดียวกันกับ HTML ได้ ซึ่งแตกต่างจากการเขียนโปรแกรมภาษา Java ที่ต้อง เขียนแยกออกเป็นไฟล์ต่างหาก ไม่สามารถเขียนรวมอยู่ในไฟล์เดียวกับ HTML ได้ วิธีการเขียน JavaScript เพื่อสั่งให้เว็ปเพจทำงาน มีอยู่ด้วยกัน 2 วิธี ดังนี้ - เขียนด้วยชุดคำสั่งและฟังก์ชันของ JavaScript เอง หรือ - เขียนตามเหตการณ์ที่เกิดขึ้นตามการใช้งานจากชุดคำสั่งของ HTML เมื่อเริ่มใช้งาน โปรแกรมบราวเซอร์ จะอ่านข้อมูลจากส่วนบนของเพจ HTML และทำงานไปตามลำดับจาก บนลงล่าง (top-down) โดยเริ่มที่ส่วน < HEAD >...< /HEAD > ก่อนจากนั้นจึงทำงานในส่วน < BODY >...< /BODY > เป็นลำดับต่อมา การทำงานของ JavaScript ดูไม่แตกต่างไปจาก HTML เท่าใดนัก แต่ HTML จะวางเลย์เอาต์โครงสร้างของอ็อบเจ็กต์ภายใน และส่วนเชื่อมโยงกับเว็บเพจเท่านั้น ในขณะที่ JavaScript สามารถเพิ่มเติมส่วนของการเขียนโปรแกรมและลอจิกเข้าไป
< FORM NAME ="statform" >
< INPUT type="text" name="username" size = 20 >
< INPUT type="text" name="userage" size = 3 >
< /FORM >
สมาชิก (ในที่นี้คือ INPUT 2 ชุด) ในแบบฟอร์ม statform ทำหน้าที่สะท้อนไปยังอ็อบเจ็กต์ document.statform.username และ document.statform.userage จากการอ้างอิงโดย JavaScript ทำให้เราสามารถนำอ็อบเจ็กต์นี้มาใช้งานได้ทันทีที่แบบฟอร์มนี้ถูก กำหนดขึ้นมา อย่างไรก็ตาม เราไม่สามารถใช้อ็อบเจ็กต์นี้ก่อนที่แบบฟอร์ม statform จะถูกกำหนดขึ้นมาได้ ตัวอย่างต่อไปนี้จะแสดงถึง ค่าต่าง ๆ ของอ็อปเจ็กต์ในสคริปต์ที่อ้างถึงแบบฟอร์ม
ตัวอย่าง
< SCRIPT >
document.write(document.statform.username.value) document.write(document.statform.userage.value)
< /SCRIPT >
ถ้าเราเขียนสคริปต์ไว้ก่อนคำสั่งกำหนดแบบฟอร์ม เราจะพบความผิดพลาดจากการเรียกใช้อ็อปเจ็กต์ที่ไม่ได้มีอยู่จริงในโปรแกรม Navigator
ตัวแปร
การทำงานของโปรแกรมคอมพิวเตอร์ไม่ว่าจะเป็นโปรแกรมชนิดใดก็ตาม ส่วนใหญ่ แล้วมักมีขั้นตอนและกลไกการทำงานเป็นแบบอย่างเฉพาะตัว โดยเฉพาะเรื่องเกี่ยวกับรูปแบบของภาษา การใช้ประโยคข้อคำสั่ง การใช้ข้อมูลและ ตัวแปร ฯลฯ ภาษา JavaScript ก็เช่นกัน การทำความเข้าใจและ การใช้ข้อมูลจึงเป็น พื้นฐานสำคัญก่อนที่จะนำไปสู่การเรียนรู้เกี่ยวกับการเขียนโปรแกรมด้วย JavaScript ขั้นซับซ้อนต่อไป
ตัวแปร
ตัวแปร (Variable) หมายถึง ชื่อหรือสัญลักษณ์ที่ตั้งขึ้นสำหรับการเก็บค่าใด ๆ ที่ไม่คงที่ โดยการจองเนื้อที่ในหน่วยความจำของระบบเครื่องที่เก็บข้อมูลซึ่งสามารถอ้างอิงได้ มีขนาดขึ้นอยู่กับชนิดของข้อมูลและค่าของข้อมูล ซึ่งค่าในตัวแปรนี้สามารถเปลี่ยนแปละได้ตามคำสั่งในการประมวลผล
การตั้งชื่อ
การตั้งชื่อ (Identifier or Name) เป็นชื่อที่ตั้งขึ้นมาเพื่อกำหนดให้เป็นชื่อของโปรแกรมหลัก, ฟังก์ชัน, ตัวแปร, ค่าคงที่, คำสั่ง และคำสงวน โดยมีหลักการตั้งชื่อว่า
ขึ้นต้นด้วยตัวอักษรในภาษาอังกฤษ ตามด้วยตัวอักษรหรือตัวเลขใด ๆ ก็ได้
ห้ามเว้นช่องว่าง
ห้ามใช้สัญลักษณ์พิเศษ ยกเว้นขีดล่าง (_) และดอลล่าร์ ($)
สำหรับความยาวของชื่อใน JavaScript จะมีความยาวเท่าใดก็ได้ แต่ที่นิยมใช้ ไม่เกิน 20 ตัวอักษร
การตั้งชื่อมีข้อพึงระวังว่า จะต้องไม่ซ้ำกับคำสงวน (Reserve word) และตัวอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์ใหญ่
ควรจะตั้งชื่อโดยให้ชื่อนั้นมีสื่อความหมายให้เข้ากับข้อมูล สามารถอ่านและเข้าใจได้
ตัวอย่างชื่อที่ถูกต้อง Hahaha, I_Love_you, Doll$ เป็นต้น
คำสงวน
คำสงวน (Reserve word) เป็นคำที่มีความหมายเฉพาะตัวในภาษา JavaScript สงวนไม่ให้มีการตั้งชื่อซ้ำกับชื่อโปรแกรม, ฟังก์ชัน, ตัวแปร, ค่าคงที่ และคำสั่ง คำสงวน สามารถเรียกใช้ได้ทันทีโดยไม่ต้องมากำหนดความหมายใหม่แต่อย่างใด
ชนิดข้อมูลของตัวแปร
ชนิดของข้อมูลของตัวแปร (Data Type) เป็นการกำหนดประเภทค่าของข้อมูลให้กับตัวแปร เพื่อให้เหมาะสมกับการอ้างอิงข้อมูลจากตัวแปรในการใช้งาน ชนิดข้อมูลของตัวแปรนั้นมีอยู่ด้วยกัน 4 ชนิด ได้แก่
number หมายถึง ข้อมูลชนิดตัวเลข ประกอบด้วย เลขจำนวนเต็ม (Integer) และเลขจำนวนจริง (Floating)
logical หมายถึง ข้อมูลทางตรรกะ มี 2 สถานะ คือ จริง (True) และเท็จ (False)
string หมายถึง ข้อมูลที่เป็นข้อความ ซึ่งจะต้องกำหนดไว้ในเครื่องหมายคำพูด ("...")
null หมายถึง ไม่มีค่าข้อมูลใดๆ ซึ่งค่า null ใช้สำหรับการยกเลิกพื้นที่เก็บค่าของตัวแปรออกจากหน่วยความจำ
การประกาศตัวแปร
การประกาศตัวแปร (Declarations) เป็นการกำหนดชื่อและชนิดข้อมูลให้กับตัวแปรเพื่อนำไปใช้ในโปรแกรม โดยการตั้งชื่อจะต้องคำนึงถึงค่าของข้อมูลและ ชนิดของข้อมูลที่อ้างอิง นอกจากนี้การตั้งชื่อควรให้สื่อความหมายของข้อมูล และอักษรของชื่อจะจำแนกแตกต่างกันระหว่างอักษรตัวพิมพ์เล็กกับอักษรตัวพิมพ์
รูปแบบ
Var ชื่อตัวแปร; เป็นรูปแบบการประกาศตัวแปรปกติ
หรือ
Var ชื่อตัวแปร = ข้อมูล; เป็นรูปแบบการกำหนดค่าเริ่มต้น
ในกรณีที่ต้องการกำหนดตัวแปรหลายตัวในบรรทัดเดียวกันให้ใช้เครื่องหมาย คอมม่า ( , ) คั่นระหว่างชื่อตัวแปรและปิดท้ายด้วยเครื่องหมายเซมิโคล่อน ( ; )
การกำหนดค่าให้กับตัวแปร
รูปแบบ
ชื่อตัวแปร = ค่าของข้อมูล
โดยที่
ค่าของข้อมูล ได้แก่
1. ข้อมูลที่เป็นตัวเลข โดยกำหนดตัวเลขไปได้เลย เช่น num = 500
2. ข้อมูลในทางตรรกะ ได้แก่ จริง (True) หรือ เท็จ (False) เช่น test = True;
3. ข้อมูลสตริง ให้กำหนดอยู่ในเครื่องหมายคำพูด ("...") เช่น name = "Adisak";
ตัวแปรมี 2 จำพวก หากเรากำหนดชื่อตัวแปรไว้ที่โปรแกรมหลักโดยไม่ได้อยู่ภายในขอบเขตฟังก์ชันใด ๆ เราเรียกว่าเป็นตัวแปรแบบโกลบัล (global) ตัวแปรจำพวกนี้จะมีค่าคงอยู่ในหน่วยความจำตลอกการทำงานของโปรแกรม ทำให้สามารถเรียกใช้ได้จากทุก ๆ ส่วนของโปรแกรม รวมถึงภายในฟังก์ชันต่าง ๆ ด้วย
แต่ถ้ากำหนดตัวแปรไว้ภายในขอบเขตฟังก์ชันใด ๆ เราจะเรียกว่าเป็นตัวแปรแบบ โลคัล (local) เพราะจะเป็นตัวแปรที่มีค่าคงอยู๋ และสามารถเรียกใช้ได้เฉพาะ ภายในขอบเขตของฟังก์ชันนั้น ๆ เท่านั้น
ตัวแปรแบบอาร์เรย์
ตัวแปรแบบอาร์เรย์ (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 จะหมายถึงo ค่า 5.00 คูณด้วย 10 ยกกำลังo 2 จะมีค่าเป็น 500
o 3.141E5 จะหมายถึงo ค่า 3.141 คูณด้วย 10 ยกกำลังo 5 จะมีค่าเป็น 314,1000
ค่าบูลีน (Boolean) เป็นค่าคงที่เชิงตรรกะ คือมีค่าเป็น จริง(True) และ เท็จ(False) เท่านั้น
ข้อความสตริง (String) เป็นค่าคงที่แบบข้อความที่อยู่ภายในเครื่องหมายคำพูด ("..." หรือ '...') เช่น "บริษัท เอ็กซ์ทรีม จำกัด", 'นางนฤมล เวชตระกูล'
รหัสคำสั่งพิเศษ
รหัสคำสั่งพิเศษ (Character escape code) เป็นการกำหนดรหัสเพื่อควบคุมงานพิมพ์สตริงโดยใช้เครื่องหมาย \ (Backslash) นำหน้าตัวอักษรที่ต้องการกำหนดเป็นรหัส เพื่อให้กลายเป็นรหัสคำสั่งพิเศษ
รหัส Character escape code
\b หมายถึง ลบไปทางซ้าย (Back Space)
\f หมายถึง เลื่อนกระดาษไปอีก 1 หน้า (Form Feed)
\n หมายถึง ขึ้นบรรทัดใหม่ (New Line)
\r หมายถึง ตรวจสอบการกด Enter (Return) และการเลื่อนขึ้นบรรทัดใหม่ของหน้าระดาษ
\t หมายถึง เลื่อนตำแหน่งไปทางขวา 1 ช่วงแท็บ (Tab)
\\ หมายถึง เติมเครื่องหมาย \ (Backslash)
\" หมายถึง เติมเครื่องหมายคำพูด
ตัวอย่าง
ถ้าเราต้องการให้ตัวแปร yoyo เก็บข้อความ C:\JavaScript จะกำหนดดังนี้
yoyo = "C:\\JavaScript" ; จะได้ผลลัพธ์เป็น C:\JavaScript
ตัวอย่าง
ถ้าต้องการแสดงเครื่องหมายคำพูด ("...") ในประโยคข้อความ เช่นต้องการให้ตัวแปร Know เก็บข้อความ คุณรู้จัก "จาวาสคริปต์" แล้วหรือยังจะกำหนดดังนี้
Know = "คุณรู้จัก \"จาวาสคริปต์\" แล้วหรือยัง"
ให้สังเกตว่าเราจะใช้ (\") ในการควบคุมการพิมพ์
ข้อคำสั่ง (Statement)
ข้อคำสั่ง (Statement) คือ ถ้อยแถลงหรือข้อความคำสั่งที่สั่งให้จาวาสคริปต์ ดำเนินงานตามลำดับที่ได้สั่งไว้ การเขียนข้อคำสั่งจะสิ้นสุดหรือจบข้อคำสั่งด้วยเครื่องหมาย เซมิโคล่อน(;)
ตัวอย่างการกำหนดข้อคำสั่ง 2 คำสั่ง
กำหนดให้ตัวแปร name เก็บชื่อ Adisak
ให้พิมพ์ประโยคข้อความว่า My name is Adisak จะกำหนดได้ดังนี้
name = "Adisak";
document.write("My name is "+name);
นิพจน์
นิพจน์ (Expression) เป็นข้อคำสั่งที่ใช้กำหนดค่าของข้อมูล เช่น การบวกตัวเลข การเปรียบเทียบข้อมูล โดยการกำหนดชื่อของตัวแปร ตามด้วยเครื่องหมายที่ต้องการกระทำ (Operations) ต่อข้อมูลเป็นผลให้เกิดค่าข้อมูลใหม่ค่าหนึ่งให้กับตัวแปรเพื่อนำไปใช้งาน
นิพจน์ JavaScript มีด้วยกัน 3 ชนิดดังนี้
1. นิพจน์คณิตศาสตร์ (Arithmetic) เป็นนิพจน์ที่ใช้เครื่องหมายทางคณิตศาสตร์เป็นตัวกระทำ ผลลัพธ์ที่ได้จะมีค่าเป็นตัวเลขให้กับตัวแปร
เช่น ให้ตัวแปร num เก็บตัวเลข 5000 จะเขียนได้ดังนี้
num = 5000;
2. นิพจน์ตรรกะ (Logical) เป็นนิพจน์ในการเปรียบเทียบข้อมูลโดยใช้เครื่องหมายในการเปรียบเทียบเพื่อตรวจสอบข้อมูลในการเปรียบเทียบว่าจริงหรือเท็จ
เช่น กำหนดให้
a = 50;
b = 70;
c = b>a;
ผลลัพธ์ที่ได้คือ c จะมีค่าเป็นจริง (True)
3. นิพจน์ข้อความ (String)
เป็นนิพจน์เกียวกับการกำหนดข้อความ การเชื่อประโยคข้อความ ใช้ประมวลผลข้อความในลักษณะต่าง ผลลัพธ์ที่ได้จึงมีค่าเป็ฯตัวอักษรหรือข้อความเสมอ
เช่น ให้ตัวแปร name เก็บชื่อ Adisak จะเขียนได้ดังนี้
name = "Adisak";
ตัวดำเนินการ
ตัวดำเนินการ (Operator) หมายถึง เครื่องหมายกำหนดกรรมวิธีทางคณิตศาสตร์, พีชคณิต, บูลีน, การเปรียบเทียบ ระหว่างข้อมูล 2 ตัว ซึ่งเรียกว่า โอประแรนด์(Operand) โดยอาจมีค่าเป็นตัวเลข ข้อความ ค่าคงที่ หรือตัวแปรต่าง ๆ
ชนิดของตัวดำเนินการ
ตัวดำเนินการคณิตศาสตร์
ตัวดำเนินการคณิตศาสตร์ (Arithmetic operator) หมายถึง ใช้สำหรับคำนวณโอประแรนด์ที่เป็นค่าคงที่หรือตัวแปรก็ได้ โดยให้ค่าผลลัพธ์เป็นตัวเลขค่าเดียว โอประเรเตอร์ เชิงคณิตศาสตร์ที่คนส่วนใหญ่รู้จักคุ้นเคยกันมากที่สุดได้แก่
+ หมายถึง เครื่องหมายการบวก
- หมายถึง เครื่องหมายการลบ
* หมายถึง เครื่องหมายการคูณ
/ หมายถึง เครื่องหมายการหาร
% หมายถึง เครื่องหมายหาเศษที่ได้จากการหารที่เรียกว่า โมดูลัส(Modulus)
++ หมายถึง เครื่องหมายการเพิ่มค่าที่เรียกว่า อินครีเมนต์(increment) โดยจะเพิ่มค่าครั้งละ 1
-- หมายถึง เครื่องหมายการลดค่าที่เรียกว่า ดีครีเมนต์(decrement) โดยจะลดค่าครั้งละ 1
(-) หมายถึง เครื่องหมายแปลงค่าให้กลายเป็นค่าตรงกันข้ามกับค่าเดิมที่เรียกว่า ยูนารีนีเกชัน (unary negation)
เช่น x = 20 % 3; ผลลัพธ์คือ x จะมีค่าเป็น 2
เช่น ถ้า x = -100 ดังนั้น -x จะมีค่าเท่ากับ 100 เป็นต้น
ตัวดำเนินการเชิงเปรียบเทียบ
ตัวดำเนินการเชิงเปรียบเทียบ (Comparison operator) หมายถึง เครื่องหมายในการเปรียบเทียบข้อมูล ผลลัพธ์ที่ได้จะมีค่าตรรกบูลลีนเป็น จริง (True) และ เท็จ (False) ได้แก่
== หมายถึง เครื่องหมายเท่ากับ
!= หมายถึง เครื่องหมายไม่เท่ากับ
> หมายถึง เครื่องหมายมากกว่า
>= หมายถึง เครื่องหมายมากกว่าหรือเท่ากับ
< หมายถึง เครื่องหมายน้อยกว่า
<= หมายถึง เครื่องหมายน้อยกว่าหรือเท่ากับ
ตัวดำเนินการกำหนดค่า
ตัวดำเนินการกำหนดค่า (Assignment operator) หมายถึง เครื่องหมายในการกำหนดให้ตัวแปรที่อยู่ทางฝั่งซ้าย มีค่าเท่ากับค่าเดิมในตัวแปรนั้น "กระทำ" (บวก, ลบ, คูณ, หาร) กับอีกตัวแปรหนึ่งที่อยู่ทางฝั่งขวา ได้แก่
x = y หมายถึง กำหนดค่า y ให้กับตัวแปร x
x += y หมายถึง เพิ่มค่า y ให้กับตัวแปร x (x = x + y)
x -= y หมายถึง ลบค่า y ออกจากตัวแปร x (x = x - y)
x *= y หมายถึง กำหนดค่า x คูณกับค่า y ให้กับตัวแปร x (x = x * y)
x /= y หมายถึง กำหนดค่า x หารกับค่า y ให้กับตัวแปร x (x = x / y)
x %= y หมายถึง กำหนดเศษที่ได้จากการหารค่า x ด้วยค่า y ให้กับตัวแปร x (x = x % y)
x <<= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้าย y บิต (x = x << y)
x >>= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต (x = x >> y)
x >>>= y หมายถึง เลื่อนบิตแบบซีโรฟิลล์ในตัวแปร x ไปทางขวา y บิต (x = x >>> y)
x &= y หมายถึง เก็บค่า x AND y ในตัวแปร x (x = x & y)
x ^= y หมายถึง เก็บค่า x XOR y ในตัวแปร x (x = x ^ y)
x |= y หมายถึง เก็บค่า x OR y ในตัวแปร x (x = x | y)
ตัวดำเนินการเชิงตรรกะ
ตัวดำเนินการเชิงตรรกะ (Logical operator) เป็นเครื่องหมายที่ให้ค่าจริง (True) และ เท็จ (False) ในการเปรียบเทียบ ประกอบด้วยเครื่องหมาย
&& หมายถึง และ(AND) จะเป็นจริงเมื่อค่าที่ใช้เปรียบเทียบทั้ง 2 ค่าเป็นจริงทั้งคู่
|| หมายถึง หรือ(OR) จะเป็นจริงเมื่อค่าที่ใช้เปรียบเทียบทั้ง 2 ค่าเป็นจริงทั้งคู่หรือจริงเพียงค่าใด ค่าหนึ่ง
! หมายถึง ปฎิเสธ(NOT) เป็นการแปลงค่าตรงกันข้าม จากจริงจะเป็นเท็จ และ จากเท็จจะเป็นจริ
ตัวดำเนินการเชิงข้อความ
ตัวดำเนินการเชิงข้อความ (String operator) เป็นการเชื่อมประโยคข้อความเข้าด้วยกัน (concatenation) โดยใช้เครื่องหมายบวก (+) เป็นตัวกระทำ
เช่น Name = "Bodin";
Say = "Hey "+Name;
ผลลัพธ์ที่ได้ Say จะมีข้อความเป็น Hey Bodin
ตัวดำเนินการระดับบิต
ตัวดำเนินการระดับบิต (Bitwise operator) เป็นการดำเนินการเชิงตรรกะในระดับบิต โดยจะใช้มุมมองในแบบเลขฐาน 2 มาจัดการกับข้อมูล นั่นคือ ข้อมูลตัวเลขนั้นจะถูกแปลงเป็นเลขฐานสองในหน่วยความจำในขณะที่มีการดำเนินการเชิงตรรกะในระดับบิต ซึ่งโดยปกติแล้วการกระทำใน JavaScript จะอยู่ในระดับตัวอักษร ที่เรียกว่า ระดับไบต์ (byte) โดยตัวดำเนินการระดับบิตมีรายละเอียดดังนี้
x & y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ AND ระหว่าง x กับ y
x | y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ OR ระหว่าง x กับ y
x ^ y หมายถึง ให้ผลลัพธ์การเทียบบิตแบบ XOR ระหว่าง x กับ y
~x หมายถึง เพิ่มค่าบิตให้ 1 จากนั้นจะให้ผลลัพธ์ของบิตมีค่าตรงข้าม
x << y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้าย y บิต
x >> y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต
x >>> y หมายถึง เลื่อนบิตแบบซีโรฟิลล์ในตัวแปร x ไปทางขวา y บิต
ลำดับความสำคัญของตัวดำเนินการ
ลำดับที่ 1 ( )
ลำดับที่ 2 ++ -- ! ~
ลำดับที่ 3 * / %
ลำดับที่ 4 + -
ลำดับที่ 5 << >> >>>
ลำดับที่ 6 < <= > >=
ลำดับที่ 7 == !=
ลำดับที่ 8 &
ลำดับที่ 9 ^
ลำดับที่ 10 |
ลำดับที่ 11 &&
ลำดับที่ 12 ||
ลำดับที่ 13 = += -= *= /= %= <<= >>= >>>= &= ^= !=
การสร้างตัวแปรอาร์เรย์
ก่อนที่จะมีการใช้งานอาร์เรย์นั้น เรา จะต้องทำการปะกาศตัวแปรที่มีลักษณะเป็นอาร์เรย์เสียก่อน เพื่อให้โปรแกรมรู้จักชื่อของตัวแปรที่จะกำหนดเป็นอาร์เรย์ พร้อมถึงการกำหนดขนาดของพื้นที่ในหน่วยความจำสำหรับเก็บค่าของข้อมูล รายละเอียดของการประกาศสร้างตัวแปรอาร์เรย์ มีดังต่อไปนี้
การประกาศตัวแปรอาร์เรย์
ชื่อตัวแปรอาร์เรย์ = new Array (จำนวนสมาชิก);
รายละเอียดมีดังนี้
จำนวนสมาชิก หมายถึง การกำหนดการจองพื้นที่ในหน่วยความจำ ให้กับตัวแปรเพื่อรองรับข้อมูลที่กำหนด โดยปกติจะกำหนดหรือไม่ก็ได้ เพราะอาร์เรย์ของจาวาสคริปต์มีความยืดหยุ่นมากสำหรับในการรับจำนวนสมาชิก
การกำหนดค่าให้กับตัวแปรอาร์เรย์
ตัวแปร [Index] = ข้อมูล;
รายละเอียดมีดังนี้
Index หมายถึง หมายเลขลำดับของพื้นที่ที่เก็บข้อมูลโดยเริ่มนับตั้งแต่ 0, 1, 2, ... เป็นต้นไป
โปรแกรมตัวอย่าง การกำหนดค่าให้ตัวแปร Array
กำหนดให้ตัวแปร MyArray เป็นตัวแปรอาร์เรย์ มีจำนวนสมาชิก 3 พื้นที่ ประกอบไปด้วยข้อมูล
ตัวแปรอาร์เรย์ MyArray ลำดับที่ 0 เก็บข้อมูล "First"
ตัวแปรอาร์เรย์ MyArray ลำดับที่ 1 เก็บข้อมูล "Second"
ตัวแปรอาร์เรย์ MyArray ลำดับที่ 2 เก็บข้อมูล "Third"
การรับข้อมูลให้กับตัวแปรอาร์เรย์
การรับข้อมูลให้กับตัวแปรอาร์เรย์ เป็นวิธีการในการกำหนดค่าให้กับตัวแปรอาร์เรย์ โดยป้อนข้อมูลที่ต้องการผ่านแป้นพิมพ์โดยใช้คำสั่ง PROMPT( ... ) ในการรับข้อมูลมีรายละเอียดดังนี้
ตัวแปร [Index] = prompt("ข้อความนำ", "ค่าเริ่มต้น");
รายละเอียดมีดังนี้
ตัวแปร หมายถึง ตัวแปรที่อ้างอิงเพื่อรอรับเก็บข้อมูลที่ป้อนได้จากแป้นพิมพ์
Index หมายถึง หมายเลขลำดับของพื้นที่ที่เก็บข้อมูล โดยเริ่มนับตั้งแต่ 0, 1, 2, ...
ข้อความนำ หมายถึง ข้อความที่ต้องการให้ปรากฎแสดงในกรอบโต้ตอบเพื่อบอกว่าต้องการให้ทำอะไร
ค่าเริ่มต้น หมายถึง ค่าของข้อมูลหรือข้อความใด ๆ ที่ต้องการให้ปรากฎในช่องของการกรอกข้อมูลบนกรอบโต้ตอบ จะกำหนดหรือไม่ก็ได้ แต่ถ้าไม่กำหนดค่าเริ่มต้นใด ๆ ภายในกรอบการกรอกข้อมูล จะแสดงข้อความ undefined ออกมา
เมื่อมีการป้อนข้อมูลที่ต้องการแล้ว จะมีปุ่มคำสั่งให้เลือกดังนี้
ปุ่ม OK จะทำหน้าที่นำข้อมูลที่ป้อนนั้นมาเก็บลงยังตัวแปรที่กำหนด
ปุ่ม Cancel จะทำหน้าที่ยกเลิกข้อมูล ทำให้ตัวแปรที่รอรับค่านั้นไม่มีค่าข้อมูลใด ๆ จะมี ผลให้ตัวแปรนั้นพิมพ์คำว่า null ออกมา ซึ่งหมายถึงไม่มีค่านั่นเอง
การกำหนดค่าเริ่มต้นให้กับอาร์เรย์
การกำหนดค่าเริ่มต้นให้กับอาร์เรย์ (Intial value) เป็นการกำหนดค่าโดยตรงให้กับตัวแปรอาร์เรย์ ในขณะที่มีการประกาศเริ่มใช้ตัวแปรอาร์เรย์ ค่าที่กำหนดนี้ถือว่าเป็นค่าเริ่มต้นในการกำหนดค่าใด ๆ ให้กับตัวแปรอาร์เรย์ ค่าเหล่านี้มักใช้ในกรณีเหมือนค่าคงที่ใช้สำหรับเปรียบเทียบหรือใช้สำหรับอ้างอิงกับข้อมูลอื่น ๆ และโดยทั่วไปก็ยังคงมีการใช้งานและกำหนดค่าเหมือนตัวแปรอาร์เรย์ปกติ มีรูปแบบการกำหนดดังนี้
รูปแบบ
ชื่อตัวแปรอาร์เรย์ = new Array (ข้อมูล1, ข้อมูล2, ... );
รายละเอียดมีดังนี้
ข้อมูล หมายถึง ค่าของข้อมูลที่กำหนดโดยตรงให้กับตัวแปรอาร์เรย์
ส่วนเรื่องการจองพื้นที่ในหน่วยความจำให้กับตัวแปนอาร์เรย์ จะขึ้นอยู่กับจำนวนของข้อมูลที่กำหนด เช่นต้องการกำหนดตัวเลข 120, 150, 200 เป็นค่าเริ่มต้อนให้กับตัวแหรอาร์เรย์ num เขียนได้ดังนี้
num = new Array(120,150,200);
นั่นหมายถึงตัวเลข 120, 150 และ 200 จะถูกเก็บลงยังตัวแปรอาร์เรย์ num[0], num[1], num[2] ตามลำดับ
ฟังก์ชันและเมธอด
ฟังก์ชัน (Function) โดยเนื้อแท้แล้วก็คือโปรแกรมย่อย เป็นส่วนของโปรแกรมที่ถูกกำหนดให้ทำงานใดงานหนึ่งจนสำเร็จ มีประโยชน์ตรงที่ช่วยเหลือการทำงาน หรือตอบสนองการทำงานต่อโปรแกรมหลัก เมื่อมีการเรียกใช้งาน และมีประโยชน์ทำให้โครงสร้างของโปรแกรม มีขนาดเล็กลง เมื่อมีการเรียกใช้งานเดิมซ้ำๆ หลายๆ ครั้ง แทนที่จะเขียนคำสั่งเดิมเพิ่มขึ้นใหม่ซ้ำๆ หลายครั้ง ทำให้ดูสิ้นเปลืองเนื้อที่ ซ้ำซ้อนและเสียเวลาการทำงาน นอกจากนี้ฟังก์ชันยังทำให้โปรแกรมอ่านได้ง่ายขึ้น สะดวกในการหาจุดที่ผิดและง่ายต่อการปรับปรุงแก้ไขพัฒนาโปรแกรมให้ดียิ่งขึ้น
ชนิดของฟังก์ชัน
ฟังก์ชันใน ภาษาJavaScript มีอยุ่ด้วยกัน 2 แบบ คือ
ฟังก์ชันมาตรฐาน (Standard Function) เป็นแบบชื่อของฟังก์ชันที่มีอยู่แล้วในภาษา JavaScript เราสามารถนำเอาไปใช้งานได้ทันที
ฟังก์ชันสร้างขึ้นเอง (User-defined Function) เป็นแบบชื่อของฟังก์ชันที่ผู้ใช้สร้างขึ้นมาใช้เอง เพื่อกำหนดให้ทำงานใดงานหนึ่งจนสำเร็จ เราอาจจะเรียกฟังก์ชันสร้างขึ้นเองนี้สั้นๆ ว่าฟังก์ชัน (Function)ก็ได้
การเรียกใช้ฟังก์ชัน
เป็นการกำหนดทิศทางการทำงานของคำสั่ง หรือ กำหนดส่วนของโปรแกรมให้ทำงานใดงานหนึ่งจนสำเร็จ โดยอ้างอิงชื่อฟังก์ชันของการทำงานที่ต้องการผลของการเรียกใช้ฟังก์ชันจะมีการส่งค่าคืนกลับไปยังโปรแกรมส่วนที่เรียก โดยใช้ชื่อฟังก์ชันเป็นตัวเก็บค่าเปรียบเสมือนหนึ่งกับเป็นตัวแปร
เมื่อต้องการใช้งานก็ให้พิมพ์ชื่อฟังก์ชันนี้ลงไปตรง ๆ แต่จะต้องจำให้แม่นว่าต้องพิมพ์ให้เหมือนทั้งชื่อและตัวอักษรตัวพิมพ์ใหญ่-เล็ก มีรูปแบบการเรียกใช้ดังนี้
รูปแบบ
ตัวแปร = ชื่อฟังก์ชัน();
โดยกำหนดให้
ตัวแปร ทำหน้าที่เก็บผลลัพธ์ที่ได้จากการอ้างอิงเรียกใช้ฟังก์ชัน เพื่อให้ทำงานใดงานหนึ่งจนสำเร็จ
การสร้างฟังก์ชันขึ้นใช้เอง
การสร้างฟังก์ชันขึ้นใช้เอง (User-defined Function) เป็นแบบชื่อของฟังก์ชันที่ผู้ใช้สร้างขึ้นมาเพื่อกำหนดให้ทำงานใดงานหนึ่งจนสำเร็จ การสร้างฟังก์ชันนั้นจะขึ้นต้นด้วยคำว่า function ตามด้วยชื่อของฟังก์ชันที่ต้องการ มีรายละเอียดดังนี้
รูปแบบ
function ชื่อฟังก์ชัน (พารามิเตอร์1, พารามิเตอร์2, ...)
{ ข้อคำสั่ง
............
............
}
โดยกำหนดให้
ชื่อฟังก์ชัน (function name) - หมายถึง ชื่อของฟังก์ชันที่สร้างขึ้น ที่ไม่ไปซ้ำกับชื่อของฟังก์ชันอื่น
พารามิเตอร์ (parameter) - หมายถึง ค่าของข้อมูลหรือตัวแปรที่อ้างอิง(arguement) แล้วส่งผ่านไปยังฟังก์ชัน ต้องระบุอยู่ภายในเครื่องหมายวงเล็บเท่านั้น โดยจะมีพารามิเตอร์เพียงตัวเดียว, หลายตัว หรือไม่มีเลยก็ได้ กรณีที่มีพารามิเตอร์หลาย ๆตัว แต่ละตัวจะต้องเขียนแยกออกจากกันด้วยเครื่องหมายจุลภาค (,)
ข้อคำสั่ง (statements) - หมายถึง คำสั่งต่าง ๆ ที่ประกอบขึ้นเพื่อให้ดำเนินงานภายในฟังก์ชัน ต้องกำหนดคำสั่งต่าง ๆ ภายใต้เครื่องหมายวงเล็บปีกกา { ... }
การวางตำแหน่งฟังก์ชัน
สำหรับการวางตำแหน่งฟังก์ชันในภาษาJavaScript ก็มีลักษณะเช่นเดียวกับการวางตำแหน่งสคริปต์ นั่นคือจะวางไว้ในส่วนของ <HEAD> หรือวางไว้ในส่วนของ <BODY>อย่างไรก็ขึ้นอยู่กับว่าต้องการให้ฟังก์ชันนนั้นถูกโหลดใช้งานก่อนหรือหลังตามลำดับการเรียกใช้งานอย่างไร
ในกรณีที่ฟังก์ชันนั้นมีการถูกเรียกใช้บ่อยครั้งจากส่วนอื่น ๆ ของโปรแกรม ทางคณะผู้จัดทำแนะนำว่า ควรจะกำหนดฟังก์ชันไว้ในส่วนของ <HEAD> เพราะเมื่อมีการเรียกใช้โหลดเว็บเพจขึ้นมา ฟังก์ชันต่าง ๆ ที่กำหนดในส่วน <HEAD> จะถูกโหลดเข้ามาเก็บไว้ในหน่อยความจำก่อนเป็นอันดับแรก ทำให้เราสามารถเรียกใช้ฟังก์ชันจากตำแหน่งใดๆ บนเอกสาร HTML หรือบนขอบเขต <SCRIPT> ได้อย่างต่อเนื่อง และนอกจากนี้ฟังก์ชันยังสามารถเรียกใช้ฟังก์ชันอื่นๆ ที่กำหนดในส่วน <HEAD> ทำงานร่วมกันได้อีกด้วย
รูปแบบ
<html>
<head><tiltle> ข้อความแถบเรื่อง </title>
<script Language = "JavaScript">
<!-- ข้อความหมายเหตุ ...
function ชื่อฟังก์ชัน (พารามิเตอร์1, พารามิเตอร์2, ...)
{ ข้อคำสั่ง ;
................
}
กลุ่มโค้ดคำสั่งของภาษาจาวาสคริปต์
// ข้อความหมายเหตุ -->
</script>
</head>
<body>
ข้อความเอกสาร html
................................
<script Language = "FavaScript">
กลุ่มโค้ดคำสั่งของภาษาจาวาสคริปต์
....................................................
</script>
</body>
</html>
โดยกำหนดให้
กลุ่มโค้ดคำสั่งของภาษาจาวาสคริปต์ หมายถึง คำสั่งใด ๆ หรือ ฟังก์ชัน หรือ การเรียกใช้ฟังก์ชันที่ต้องการใช้งาน
หน้าต่างเตือนเมื่อคลิกบนปุ่ม
<form>
<input type="button" value="message" onClick="alert('this is the message'); return true">
</form>
หมายเหตุ
ทดลองนำไปใช้ปุ่ม Tag อื่นๆ ของ FORM ดูสิครับ เช่น
ตัวอย่างการประยุกต์ใช้กับ Radio Button
<FORM>
<p>HTML เป็นคำย่อของ ?
<p> 1: <INPUT TYPE="radio" NAME="radio" value="เก่งมากครับ"
onClick="alert(value)">
HyperText Markup Language <br>
2: <INPUT TYPE="radio" NAME="radio" value="แน่ใจหรือครับว่าถูก ลองดูใหม่สิครับ"
onClick="alert(value)">
HyperText Making Language <br>
3: <INPUT TYPE="radio" NAME="radio" value="แน่ใจหรือครับว่าถูก ลองดูใหม่สิครับ"
onClick="alert(value)">
HyperText Marking Learning
</FORM>
ตัวอย่างการประยุกต์ใช้กับ Button
<form>
<p><font face="MS Sans Serif, Microsoft Sans Serif" size="1">HTML
เป็นคำย่อของ ? </font>
<p><font face="MS Sans Serif, Microsoft Sans Serif" size="1">
1:
<input type="button" name="button" value="HyperText Markup Language " onClick="alert('เก่งมากครับ'); return true">
</font>
<p><font face="MS Sans Serif, Microsoft Sans Serif" size="1">2:
<input type="button" name="button" value="HyperText Making Language " onClick="alert('ลองดูอีกทีสิครับ'); return true">
</font>
<p><font face="MS Sans Serif, Microsoft Sans Serif" size="1">3:
<input type="button" name="button" value="HyperText Marking Learning " onClick="alert('ผิดแล้วล่ะครับ'); return true">
</font>
</form>
หน้าต่างเดือนก่อนปิดหน้าเว็บ
เคยเห็นไหมครับ บางเว็บพอคลิกปิด จะมีหน้าต่างเล็กๆ แสดงข้อความกล่าวลา เช่น "ขอบคุณที่เยี่ยมชม แล้วอย่าลืมกลับมาเรียกชมอีกน่ะครับ"
ไม่ยากเลยครับ แค่เอารหัสคำสั่งที่แสดงด้วยสีแดง ไปเติมในส่วนแท็ก Body ดังนี้
<body onUnload="window.alert('ตรงนี้เติมข้อความเองน่ะครับ')">
ตรวจสอบบราวเซอร์
โดยปกติชุดคำสั่งในการสร้างเอกสารเว็บ จะมีการพัฒนาแตกต่างกันไปตามค่ายของบราวเซอร์ ดังนั้นหากต้องการแสดงผลหน้าเว็บให้สมบูรณ์ในแต่ละบราวเซอร์ ควรกำหนดหน้าเว็บแยกตามค่ายของบราวเซอร์ เช่น หน้าแรกของเว็บควรสร้างไว้ 2 หน้า โดยหน้าหนึ่งสำหรับแสดงผลบนบราวเซอร์ค่าย Microsoft อีกหน้าหนึ่งสำหรับ Netscape เป็นต้น
แล้วนำรหัสคำสั่ง JavaScript นี้ไปใส่ไว้ในหน้า index.html เพื่อทำการตรวจสอบบราวเซอร์ โปรแกรมจะทำการตรวจสอบ แล้วแสดงผลหน้าเว็บตามค่าบราวเซอร์นั้นๆ ต่อไป
<SCRIPT LANGUAGE="JavaScript">
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
url=("ระบุชื่อไฟล์ .html ที่สร้างสำหรับ IE");
else
url=("ระบุชื่อไฟล์ .html ที่สร้างสำหรับ Netscape")
</SCRIPT>
สร้าง Background แบบแปลกๆ
อยากให้หน้าเว็บมี BG ที่เปลี่ยนสีได้ตลอดเวลา ลองดูชุดคำสั่งนี้ดูสิครับ
ชุดคำสั่งแรก ให้ใส่ไว้ในส่วน Head Sectoin
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var col=new initArray("4b","5b","8b","8b");
function stop() {
document.bgColor = '#FFFFFF';
clearTimeout(loopID);
}
function start() {
col[1]="red"
col[2]="yellowgreen"
col[3]="yellow"
col[4]="whitesmoke"
col[5]="white"
col[6]="wheat"
col[7]="violet"
col[8]="turquoise"
col[9]="tomato"
col[10]="thistle"
pos++;
if (pos<0||pos>10) {
pos = 0;
}
document.bgColor = col[pos];
loopID = setTimeout("start()",50);
}
// End -->
</SCRIPT>
</HEAD>
ชุดคำสั่งที่สอง ใส่ไว้ใน Body Section
<BODY onLoad="start()">
เปลี่ยนรูปร่างของเมาส์
เบื่อรูปร่างของเมาส์ไหมครับ ไม่ยากเลย ลองดูสิครับ
<a href="ไฟล์ลิงก์" style="cursor:hand">ข้อความ</a>
style="cursor:hand"
style="cursor:crosshair"
style="cursor:text"
style="cursor:wait"
style="cursor:e-resize"
style="cursor:help"
style="cursor:move"
ปุ่มควบคุมเดินหน้า ถอยกลับ
หน้าเว็บแบบ Presentation คงอยากได้ปุ่ม Back และ ปุ่ม Next ใช่ไหมครับ ไม่ยากเลย ลองดูรหัสคำสั่งนี้สิครับ
<FORM>
//รหัสสำหรับปุ่ม Back
<INPUT TYPE="button" VALUE=" BACK " onClick="history.go(-1)">
//รหัสสำหรับปุ่ม Next
<INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)">
</FORM>
ปฏิทินแบบที่ 1
อยากได้ปฏิทินแบบนี้ไหมครับ
June 2005
Su M Tu W Th F Sa
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
ลองใช้รหัสนี้ดูสิครับ
<SCRIPT LANGUAGE="JavaScript">
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT>
ปฏิทินแบบที่ 1 ปรับเป็นภาษาไทย
อยากได้ปฏิทินแบบนี้ไหมครับ
มิถุนายน 2005
อา จ อ พ พฤ ศ ส
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
ลองใช้รหัสนี้ดูสิครับ
<script language="JavaScript">
monthnames = new Array(
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>อา</td>");
document.write("<td align=center>จ</td>");
document.write("<td align=center>อ</td>");
document.write("<td align=center>พ</td>");
document.write("<td align=center>พฤ</td>");
document.write("<td align=center>ศ</td>");
document.write("<td align=center>ส</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</script>
ตัวเลขแบบสุ่ม
การสุ่มตัวเลข ก็เป็นฟังก์ชันมาตรฐานที่มักมีการนำไปประยุกต์ใช้กันหลายรูปแบบ แล้วคุณจะรู้ว่าตัวเลขของคุณของค่าเท่าใด
ขั้นตอนที่ 1 สร้างรหัส JavaScript ไว้ใน Head Section
<SCRIPT language="JavaScript"><!--
var maxNumber = 1000;
var randomNumber = Math.round(maxNumber * Math.random());
//--></SCRIPT>
ขั้นตอนที่ 2 สร้างรหัส JavaScript สำหรับการแสดงผลไว้ใน Body Section
ตัวเลขของคุณคือ
<SCRIPT language="JavaScript"><!---->
document.write(randomNumber);
//--></SCRIPT>
รายการสีแดง คุณสามารถปรับเปลี่ยนได้อิสระ
แสดงผลหน้าเว็บแบบ Fade สี
สร้างรหัส JavaScript ไว้ใน Head Section
SCRIPT LANGUAGE="JavaScript">
<!--
hexa = new Array(16);
for(var i = 0; i < 10; i++) hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function setbgColor(r, g, b) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
if (document.body) document.body.style.backgroundColor="#"+hr+hg+hb;
else document.bgColor = "#"+hr+hg+hb;
}
var sr,sg,sb,er,eg,eb,step,at;
function setBg() {
setbgColor(
Math.floor(sr * ((step-at)/step) + er * (at/step)),
Math.floor(sg * ((step-at)/step) + eg * (at/step)),
Math.floor(sb * ((step-at)/step) + eb * (at/step)));
at++;
if (at<=step) setTimeout("setBg()",5);
}
function fade(a,b,c,d,e,f,g) {
sr=a;sg=b;sb=c;er=d;eg=e;eb=f;step=g;at=1;
setBg();
}
function swtStart() {fade(ค่าสี R1,ค่าสี G1, ค่าสี B1, ค่าสี R2, ค่าสี G2, ค่าสี B2, ตัวเลขความหน่วง);}
window.onload=swtStart;
// -->
</SCRIPT>
ค่าสีและความหน่วงที่ต้องกำหนดเอง เช่น fade(0,0,0,255,255,255,100);
ข้อความเลื่อนใน Status Bar
สร้างรหัส JavaScript ไว้ใน Head Section
<SCRIPT language="JavaScript">
<!-- hide javascript
function scrollmessage(count) {
var m1 = "ข้อความ 1";
var m2 = "...ข้อความ 2";
var m3 = "...ข้อความ 3";
var m4 = "...ข้อความ 4";
var msg=m1+m2+m3+m4;
var out = " ";
var c = 1;
if (count > 100) {
count--;
cmd="scrollmessage("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (count <= 100 && count > 0) {
for (c=0 ; c < count ; c++) {
out+=" ";
}
out+=msg;
count--;
window.status=out;
cmd="scrollmessage("+count+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (count <= 0) {
if (-count < msg.length) {
out+=msg.substring(-count,msg.length);
count--;
window.status=out;
cmd="scrollmessage("+count+")";
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollmessage(100)",75);
}
}
}
// done hiding -->
</SCRIPT>
จากนั้นเพิ่ม Attribute ให้กับ Body Tag ดังนี้
<BODY onLoad="scrollmessage(100)">
รายการสีแดง คือรายการที่ปรับเปลี่ยนได้
อ้างอิงที่
http://www.nectec.or.th/courseware/index.htmlhttp://www.nectec.or.th/courseware/internet/javascipt/index.html
