วันอาทิตย์ที่ 22 พฤศจิกายน พ.ศ. 2558

JavaScript คืออะไร
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) เช่น
    • 5.00E2 จะหมายถึงค่า 5.00 คูณด้วย 10 ยกกำลัง 2 จะมีค่าเป็น 500
    • 3.141E5 จะหมายถึงค่า 3.141 คูณด้วย 10 ยกกำลัง 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)">
รายการสีแดง คือรายการที่ปรับเปลี่ยนได้
อ้างอิงที่



ทำความรู้จักคำศัพท์ในหน้าเว็บไซต์



ทำความรู้จักคำศัพท์ในหน้าเว็บไซต์
     ในการทำเว็บไซต์โดยทั่วๆ ไป จะมีคำศัพท์ที่เกี่ยวข้องและเป็นคำศัพท์ที่ค่อนข้างจะตายตัวเสมอ และสามารถเป็นที่เขาใจของผู้ที่ทำเว็บเป็นและทำเว็บไม่เป็น เรามาดูคำศัพท์ ที่มักจะได้ยินกันบ่อยๆ ดังนี้
  • เว็บเพจ (Web Page)  คือ ไฟล์เอกสารในภาษา HTML ซึ่งมีการแสดงผลในรูปแบบที่ต้องการ

     
  • ไฟล์สคริปต์ (Script) หรือเรียกสั้นๆ ว่า สคริปต์ เป็นไฟล์ที่มีการแทรกคำสั่งในภาษา PHP เข้าไป ซึ่งไฟล์นั้นอาจจะมีเฉพาะคำสั่งอย่างเดียว หรือเป็นแค่ส่วนที่แทรกเข้าไปในเว็บเพจปกติก็ได้

  • เว็บแอพพลิเคชั่น เว็บแอพพลิเคชั่น (Web Application) เป็นการนำเอาเว็บเพจ และไฟล์สคริปต์หลายๆ ไฟล์มาเรียบเรียงเพื่อทำงานตามวัตถุประสงค์ที่ต้องการ เช่น เว็บบอร์ด,ระบบสมัครสมาชิก, ระบบซื้อขายของออนไลน์,อัมบั้มภาพ, blog เป็นต้น

    เรียนรู้วิธีเริ่มเขียนสคริปต์ PHP ครั้งแรก

    หมวดหมู่ : พัฒนาเว็บไซต์เขียนโปรแกรมHTML and CSSHTML5 and CSS3JavaScriptPHP and MySQL
    เรียนรู้วิธีเริ่มเขียนสคริปต์ PHP ครั้งแรก
    การเริ่มเขียน PHP ขั้นแรกนั้น ไม่อยากเลย เรามาดูวิธีการเขียนสคริปไปพร้อมกัน ในที่นี้จะขอยกตัวอย่างการเขียน แบบเป็นการทักทายกันง่ายๆ โดยมีขั้นตอน ดังนี้

    1. ให้เราเปิดโปรแกรม Dreamweaver ขึ้นมาที่หัวข้อ Create New แล้วคลิกเลือ PHP ดังรูป


    2. Dreamweaver จะเปิด Editor ขึ้นมา จะสังเกตว่าได้เขียนสคริปต์บางส่วนไว้แล้ว ดังรูป


    3. แต่เนืองจากตอนนี้ Editor ของ Dreamweaver ยังไม่สามารถแสดงผลภาษาไทยได้ เราจึงต้องปรับแต่งค่าโดย คลิกเมณู Edit > Preferences.... ดังรูป


    4. ปรับแต่งตัวเลือกที่รายการ Fonts และ New Document 
    5. กดปุ่ม OK ดังรูป


    6. พิมพ์สคริปต์ในภาษา PHP ดังนี้



    7. บันทึกไฟล์โดยคลิกเมณู file > Save As.... ดังรูป



    8. เลือกตำแหน่งที่จะบันทึกไฟล์ที่โฟล์เดอร์ใดก็ได้ ที่เราได้โหลด Appserv มาติดตั้งไว้แล้ว
    9. ที่ช่อง File name ให้ตั้งชื่อไฟล์ว่า อะไรก็ได้ แล้วแต่เราแต่ให้เหมาะสมกับงานที่ทำ
    10. ที่ช่อง Save as type: คลิกเลือก PHP Files (เมื่อเลือกเสร็จแล้ว จะมีนามสกุล .php ต่อท้ายให้อัติโนมัติ) ดังรูป


    11. คลิกปุ่ม Save เพื่อบันทึกไฟล์งานที่เราสร้าง ไฟล์ PHP ก็จะเสร็จสมบูรณ์

    ตำแหน่งการเขียน JavaScript

    หมวดหมู่ : พัฒนาเว็บไซต์เขียนโปรแกรมJavaScript
    ตำแหน่งการเขียน JavaScript

    ตำแหน่งการเขียน JavaScript สามารถแบ่งการเขียนได้ ดังตัวอย่างต่อไปนี้

    1. ตำแหน่งส่วนหัวของเอกสาร HTML

    2.ตำแหน่งส่วนตัวของเอกสาร HTML

    3. เป็นค่าในอีเวนต์ (Event) ของแท็กคำสั่ง HTML

    4. เก็บไว้ในไฟล์แยกต่างหาก โดยเก็บไว้ในนามสกุล .js

  • JavaScript คือ

    หมวดหมู่ : พัฒนาเว็บไซต์เขียนโปรแกรมMobile AppsJavaScript
    JavaScript คือ
    Javascript  เป็นภาษาประมวลผล (Programming language) ต่างจาก HTML และ CSS ที่เป็นภาษาสำหรับการแสดงผล (Markup language) ภาษาประมวลผลจะสามารถคำนวณ มีตัวแปร หาค่า บวก ลบ คูณ หารได้ ซึ่งสิ่งเหล่านี้จะไม่มีใน HTML จึงต้องมี JavaScript เพิ่มเข้ามา
    • Javascript  จะเป็นโปรแกรมย่อยเล็ก ๆ ที่สามารถแทรกอยู่ในโค๊ด HTML ได้
    • JavaScript ไม่ใช่ Java และทั้งสองภาษานี้ไม่ได้มาจากผู้ผลิตรายเดียวกัน
    • Java ผลิตจากบริษัท SUN Microsystems ตั้งแต่ปี 2534 เป็นภาษาที่ต้องมีตัวแปรภาษา (Compiler)
    • นอกจากนี้ Java ยังสามารถสร้างแอพพลิเคชันทำงานบนวินโดว์ได้เช่นเดียวกับภาษา C หรือ VB แต่ JavaScript ทำได้แค่เป็นสคริปต์ฝังในหน้าเว็บหนึ่ง ๆ เท่านั้น
    • JavaScript ผลิตมาจากบริษัท Netscape Communications ตั้งแต่ปี 2538
    • JavaScript เป็นภาษาประเภทแปลไป ทำงานไป เหมือนกับการใช้ล่าม (Interpreter) 
    • Java จะมีขีดความสามารถสูงกว่า JavaScript แต่ JavaScript จะใช้งานบนหน้าเว็บได้ง่ายกว่า เพราะเพียงแค่เพิ่มโค๊ด JavaScript ลงไปในหน้าเว็บก็สามารถเรียกดูผลลัพธ์ได้ ต่างจาก Java ที่ต้องใช้ Compiler แปลเป็นภาษาเครื่องก่อน

การแทรก tag JavaScript ในเอกสาร HTML

หมวดหมู่ : พัฒนาเว็บไซต์Mobile AppsJavaScript
การแทรก tag JavaScript ในเอกสาร HTML
การแทรก tag JavaScript ในเอกสาร HTML

คำสั่งแสดงผลออกหน้าจอ

ตัวอย่าง

ผลลัพธ์ที่ได้

ทำความรู้จักกับ JavaScript กัน

หมวดหมู่ : บทความทั่วไปพัฒนาเว็บไซต์เขียนโปรแกรมJavaScript
ทำความรู้จักกับ JavaScript กัน
JavaScript คืออะไร
JavaScript คือภาษาสคริปท์ที่รันบนเว็บเบราว์เซอร์  เพื่อเพิ่มความสามารถให้กับเว็บเพจ  ทำาให้เว็บเพจสามารถตอบโต้กับผู้ใช้ได้มากขึ้น  ยกตัวอย่างเช่น  ใช้ JavaScript เพื่อสร้างเมนู  เมื่อเลื่อนเมาส์ไปที่เมนูหลัก  ก็จะเห็นเมนูย่อยปรากฏขึ้นมา, หรือใช้ JavaScript เพื่อทำา Tool Tips ให้กับฟอร์ม  เพื่อใช้อธิบายการกรอกแบบฟอร์ม  เป็นต้น  ทั้งหมดนี้ 
HTML เพียงลำาพังไม่สามารถทำาได้  อันที่จริงแล้ว JavaScript เป็นมากกว่านั้น  กล่าวคือ 
  • javaScript คือภาษา ECMAScript ชนิดหนึ่ง 
  • และเป็นภาษาโปรแกรมมิ่งที่ใช้รันและคอนโทรลออบเจกต์ต่างๆใน Host Environments  เช่น รันบนเว็บเบราว์เซอร์ , รันบนเว็บเซิร์ฟเวอร์, รันบนโปรแกรม กราฟฟิก  เป็นต้น
อย่างไรก็ตาม JavaScript นั้นถูกใช้งานหลักๆบนเว็บเบราว์เซอร์หรือที่เรามักเรียกกันว่า Client-side JavaScript  (Server-side Script ก็ได้แก่ JSP, PHP เป็นต้น)  จึงทำาให้เราเข้าใจว่า JavaScript ทำางานได้แค่บนเว็บเท่านั้น 
นอกจากนี้ JavaScript ยังมีคุณสมบัติและลักษณะทางภาษาดังต่อไปนี้

  • เป็นภาษาสคริปท์ (ใช้การ Interpret แทนการ Compile  นั่นคือรันโค้ดโดยตรงได้เลย 
  • โดยที่ไม่ต้องคอมไพล์ก่อนรันดังเช่นในภาษา C)
  • เป็นภาษา Object-oriented ชนิดหนึ่ง (เป็น OO แบบ Prototype-based ไม่ใช่ Class-based)
  • เป็นภาษา Dynamic-typing  กล่าวคือชนิดของตัวแปรเปลี่ยนแปลงได้
  • และเป็นภาษา Functional-oriented ด้วย  เพราะฟังก์ชันถือได้ว่าเป็น Value  ไม่ได้เป็น
  • เพียงแค่ Syntax อย่างเดียวเท่านั้น

ตัวแปรในภาษา JavaSrcipt

หมวดหมู่ : JavaScript
ตัวแปรในภาษา JavaSrcipt
การตั้งชื่อตัวแปร
           การตั้งชื่อของตัวแปรใน JavaScript สามารถตั้งชื่อตัวอักษรขนาดใหญ่ (A-Z) ตัวอักษรขนาดเล็ก (a-z) เครื่องหมาย (_) หรือตัวเลข (0-9) ได้
ตัวอย่างการตั้งชื่อ
  • Welcome
  • HollyWork 12
  • _123
  • THAILAND
หมายเหตุ: ชื่อตัวแปรใน JavaScript ทั้งตัวอักษรใหญ่หรือตัวอักษรเล็ก ถือเป็นเรื่องที่สำคัญมาก เพราะภาษา JavaScript เป็นภาษาแบบ Case-sensitive ตัวอย่างเช่น Thailand กับ ThaiLand ถือเป็นคนละชื่อกันค่ะ
 
ชนิดของตัวแแปร
JavaScript สามารถจัดเก็บข้อมูลได้เป็น 4 ประเภท ดังนี้
  1. ข้อมูลตัวเลข คือ เก็บเป็นจำนวนเต็มและเป็นทศนิยม เช่น 3, 28 , 1.4142138
  2. ข้อมูลตรรกะ คือ เก็บค่าความจริง (คำสงวน true และคำเท็จ false)
  3. ข้อมูลสตริง คือ เก็บค่าข้อความ เช่น “” , “Good Moning!”
  4. ข้อมูลว่าง คือ เก็บค่าว่างเปล่า คำสงวน (null)

วิธีการเขียน JavaScript

หมวดหมู่ : JavaScript
วิธีการเขียน JavaScript
การเขียน JavaScript จะเป็นการเขียนจากซ้ายไปขวา บนลงล่าง เรียงลำดับลงไปเรื่อยๆ โดยในแต่ละการเขียนจะจบด้วยเครื่องหมาย ; (Semicolon)
ตัวอย่าง

 แต่ถ้าเราสามารถเขียนได้ 2 บรรทัด เราก็ไม่จำเป็นต้องจบคำสั่งด้วย ; ดังตัวอย่างต่อไปนี้

กลุ่มคำสั่ง (JavaScript Blocks)
           โดยทั่วไปคำสั่ง JavaScript สามารถจัดรวมกลุ่มกันได้ โดยใช้เครื่องหมาย {…} เรียกว่า (Curly bracket)
ตัวอย่าง

รูปแบบการเขียนโปรแกรม JavaScript แทรกใน HTML
ตัวอย่างการเขียน JavaScript

ผลลัพธ์ที่ได้

ตัวอย่างคำสงวนภาษา JavaScript

หมวดหมู่ : JavaScript
ตัวอย่างคำสงวนภาษา JavaScript

โดยส่วนใหญ่ทั่วไปคำสงวนจะมีหน้าที่เฉพาะของตัวเองอยู่แล้ว ห้ามนำมาใช้ในการตั้งชื่อแท็ก หรือตัวแปรใดๆ ก็ตาม ฯลฯ สมมติถ้าเราไม่ทำตามอาจจะทำให้โปรแกรมทำงานผิดพลาดได้ หรือถ้าจำเป็นต้องใช้จริงให้เปลี่ยนเป็นตัวอักษรใหญ่ เพราะJavaScript นั้นถือเป็นภาษาที่ใช้ตัวอักษรเล็กในการทำงาน สำหรับการตั้งชื่อตัวแปรในภาษา Java Script นั้น คุณสามารถตั้งชื่อตัวแปรได้โดยใช้ ตัวอักษรในภาษาอังกฤษ A-Z ทั้งตัวพิมพ์ใหญ่ และตัวพิมพ์เล็ก ตัวเลข 0 - 9 โดยที่คุณไม่สามารถใช้ตัวอักษรพิเศษอื่นๆได้ ยกเว้นเครื่องหมาย _ (Under Scroll) และ $ เท่านั้นที่สามารถใช้งานได้

การเขียน JavaScript ในส่วนของ HTML

หมวดหมู่ : JavaScript
การเขียน JavaScript ในส่วนของ HTML

ในการเขียนโค้ดในภาษา HTML เราจะสามารถแทรกคำสั่งของภาษา JavaScript ไว้ในส่วนใดๆ ก็ได้ใน HTML ซึ่งเราสามารถแยกได้เป็น 5 หัวข้อ ดังนี้ เรามาดูตัวอย่างการเขียนไปพร้อมๆ กันค่ะ
1. ในส่วนหัวของ HTML จะถูกแทรกภาษา JavaScript เข้าไปดังนี้
ตัวอย่าง

2. ในส่วนตัวของเอกสาร HTML จะสามารถแทรกได้เฉพาะส่วนของเว็บเพจที่อยู่ใต้โค้ด JavaScript เท่านั้น
ตัวอย่าง

3. ในส่วนของ Event ของแท็กคำสั่ง HTML คือการระบุคำสั่ง JavaScript ในตำแหน่งที่ระบุเท่านั้น
ตัวอย่าง

4. เก็บไว้ในไฟล์แยกต่างหาก โดยอาจจะเก็บไว้ที่นามสกุล .js
ตัวอย่าง

5. เขียนไว้อย่างอิสระนอกโครงสร้างภาษา HTML        
เช่น อาจจะเขียนวางไว้ก่อนหน้าหรือหลังหรือจะวางไว้ระหว่าง …ก็ได้เหมือนกัน
แต่ปัจจุบันไม่เป็นที่นิยมกัน เพราะบราวเซอร์บางรุ่นไม่สามารถรองรับได้
 

การสร้างเว็บด้วย JavaScript

หมวดหมู่ : JavaScript
การสร้างเว็บด้วย JavaScript
มาทำความรู้จักภาษา JavaScript
          JavaScript เป็นภาษาแบบประมวลผลซึ่งมีความแตกต่างจากภาษา HTML และ CSS ซึ่งเป็นภาษาแบบแสดงผล โดยสังเกตข้อแตกต่างกันได้ง่ายๆ คือ ใน HTML นั้นจะไม่มีการคำนวณหรือตัวแปร บวก ลบ คูณ หาร เลย มีแต่นั้น JavaScript เท่านั้นที่สามารถทำได้
        ก่อนที่เราจะไปรู้จักคำสั่งต่างๆ ของ JavaScript เรามารู้ประวัติกันเล็กน้อย
  • ภาษา JavaScript เป็นโปรแกรมย่อยๆ ที่สามารถรวมกันได้ในการเขียนในโค้ด HTML
  • ภาษา JavaScript และ Java ไม่เหมือนกัน คือ JavaScript สามารถสร้างแอพพลิเคชั่นได้บนหน้าเว็บเท่านั้น ส่วน Java  นั้นสามารถทำงานบนหน้าเว็บหรือในส่วนของฝั่งวินโดว์ได้
  • โปรแกรม JavaScript เป็นโปรแกรมฟรี สามารถนำมาใช้งานได้ทุกคน
          ปัจจุบันโปรแกรม JavaScript มีคู่แข่งขันที่สำคัญคือ โปรแกรม JScript ของฝั่ง Mocrosoft เรามารู้ความเป็นมาของ JScript กันเล็กน้อยค่ะ ภาษา JScript มีส่วนคล้ายคลึงกับภาษา JavaScript เป็นอย่างมาก โดยมีการผสมผสานระหว่างภาษา Visual Basic กับ JavaScript กลายมาเป็น Jscript ในปัจจุบันที่เราเห็นบนหน้าเว็บทั่วไป
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)