ภาษา JavaScript

ลิงค์ชั้นเรียน 

คลิกที่นี่เข้าห้องเรียน

 

JavaScript คืออะไร

JavaScript เป็นภาษาโปรแกรมที่นักพัฒนาใช้ในการสร้างหน้าเว็บแบบอินเทอร์แอคทีฟ ตั้งแต่การรีเฟรชฟีดสื่อโซเชียลไปจนถึงการแสดงภาพเคลื่อนไหวและแผนที่แบบอินเทอร์แอคทีฟ ฟังก์ชันของ JavaScript สามารถปรับปรุงประสบการณ์ที่ผู้ใช้จะได้รับจากการใช้งานเว็บไซต์ และในฐานะที่เป็นภาษาในการเขียนสคริปต์ฝั่งไคลเอ็นต์ จึงเป็นหนึ่งในเทคโนโลยีหลักของ World Wide Web ยกตัวอย่างเช่น เมื่อคุณท่องเว็บแล้วเห็นภาพสไลด์ เมนูดร็อปดาวน์แบบคลิกให้แสดงผล หรือสีองค์ประกอบที่เปลี่ยนแบบไดนามิกบนหน้าเว็บ นั่นคือคุณเห็นเอฟเฟกต์ของ JavaScript

JavaScript นำไปใช้ทำอะไร

 

แต่ก่อนเว็บเพจเป็นแบบคงที่คล้ายกับหน้าหนังสือ โดยหลักแล้วหน้าเพจคงที่แสดงข้อมูลในเค้าโครงที่ตายตัว และไม่ได้ทำทุกอย่างที่ตอนนี้เราคาดหวังจากเว็บไซต์สมัยใหม่ JavaScript เกิดขึ้นในฐานะเทคโนโลยีฝั่งเบราว์เซอร์เพื่อทำให้เว็บแอปพลิเคชันมีความเป็นไดนามิกมากขึ้น เมื่อใช้ JavaScript เบราว์เซอร์จะสามารถตอบสนองต่อการโต้ตอบของผู้ใช้และเปลี่ยนแปลงเค้าโครงเนื้อหาบนเว็บเพจได้

เมื่อภาษาผ่านการพัฒนาอย่างเต็มที่ นักพัฒนา JavaScript ก็สร้างไลบรารี เฟรมเวิร์ก และแนวทางปฏิบัติในการเขียนโปรแกรม แล้วเริ่มนำ JavaScript ไปใช้นอกเว็บเบราว์เซอร์ วันนี้ คุณสามารถใช้ JavaScript สำหรับทั่งการพัฒนาฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ เราให้ตัวอย่างกรณีการใช้พบที่พบบ่อยบางส่วนในหัวข้อย่อยต่อไปนี้:

แต่ก่อนเว็บเพจเป็นแบบคงที่คล้ายกับหน้าหนังสือ โดยหลักแล้วหน้าเพจคงที่แสดงข้อมูลในเค้าโครงที่ตายตัว และไม่ได้ทำทุกอย่างที่ตอนนี้เราคาดหวังจากเว็บไซต์สมัยใหม่ JavaScript เกิดขึ้นในฐานะเทคโนโลยีฝั่งเบราว์เซอร์เพื่อทำให้เว็บแอปพลิเคชันมีความเป็นไดนามิกมากขึ้น เมื่อใช้ JavaScript เบราว์เซอร์จะสามารถตอบสนองต่อการโต้ตอบของผู้ใช้และเปลี่ยนแปลงเค้าโครงเนื้อหาบนเว็บเพจได้

เมื่อภาษาผ่านการพัฒนาอย่างเต็มที่ นักพัฒนา JavaScript ก็สร้างไลบรารี เฟรมเวิร์ก และแนวทางปฏิบัติในการเขียนโปรแกรม แล้วเริ่มนำ JavaScript ไปใช้นอกเว็บเบราว์เซอร์ วันนี้ คุณสามารถใช้ JavaScript สำหรับทั่งการพัฒนาฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ เราให้ตัวอย่างกรณีการใช้พบที่พบบ่อยบางส่วนในหัวข้อย่อยต่อไปนี้:

JavaScript ทำงานอย่างไร

ภาษาโปรแกรมทั้งหมดทำงานด้วยการแปลไวยากรณ์ที่คล้ายภาษาอังกฤษเป็นโค้ดสำหรับเครื่อง จากนั้นระบบปฏิบัติการจะเรียกใช้โค้ดนั้น JavaScript ได้รับการจัดประเภทอย่างกว้าง ๆ ว่าเป็นภาษาเขียนสคริปต์ หรือภาษาที่แปลผลแล้ว โค้ด JavaScript ได้รับการแปลผล—นั่นคือ แปลโดยตรงเป็นโค้ดภาษาสำหรับเครื่อง ด้วยกลไกล JavaScript ในขณะที่ในภาษาโปรแกรมอื่น ๆ คอมไพเลอร์จะคอมไพล์โค้ดทั้งหมดเป็นโค้ดสำหรับเครื่องในขั้นตอนที่แยกต่างหาก ดังนั้น ภาษาเขียนสคริปต์ทั้งหมดจึงเป็นภาษาโปรแกรม แต่ไม่ใช่ว่าภาษาโปรแกรมทั้งหมดจะเป็นภาษาเขียนสคริปต์เสมอไป

กลไก JavaScript

กลไก JavaScript คือโปรแกรมคอมพิวเตอร์ที่เรียกใช้โค้ด JavaScript กลไก JavaScript เคยเป็นเพียงตัวแปลผล แต่กลไกสมัยใหม่ทั้งหมดใช้การคอมไพล์แบบ Just-in-time หรือรันไทม์เพื่อปรับปรุงประสิทธิภาพ

JavaScript ฝั่งไคลเอ็นต์

JavaScript ฝั่งไคลเอ็นต์หมายถึงวิธีที่ JavaScript ทำงานในเบราว์เซอร์ของคุณ ในกรณี กลไก JavaScript จะอยู่ภายในโค้ดเบราว์เซอร์ เว็บเบราว์เซอร์เจ้าใหญ่ ๆ ทั้งหมดจะมาพร้อมกับกลไก JavaScript ในตัว

นักพัฒนาแอปพลิเคชันเว็บจะเขียนโค้ด JavaScript ที่มีฟังก์ชันที่แตกต่างกันสัมพันธ์กับเหตุการณ์ต่าง ๆ เช่น การคลิกเมาส์ หรือการเลื่อนเมาส์ผ่าน ฟังก์ชันเหล่านี้จะเปลี่ยนแปลง HTML และ CSS

ต่อไปนี้เป็นภาพรวมว่า JavaScript ฝั่งไคลเอ็นต์ทำงานอย่างไร:

1   เบราว์เซอร์โหลดเว็บเพจเมื่อคุณเยี่ยมชมเว็บเพจ

2   ระหว่างการโหลด เบราว์เซอร์แปลงหน้าและองค์ประกอบทั้งหมดของหน้า เช่น ปุ่ม ป้าย และกล่องดรอปดาวน์ เป็นโครงสร้างข้อมูลที่เรียกว่าโมเดลอ็อบเจกต์เอกสาร (DOM)

3   กลไก JavaScript ของเบราว์เซอร์แปลงโค้ด JavaScript เป็นไบต์โค้ด โค้ดนี้เป็นตัวกลางระหว่างไวยากรณ์ JavaScript และเครื่อง

4   เหตุการณ์ต่าง ๆ เช่น การคลิกเมาส์บนปุ่ม จะกระตุ้นให้บล็อกโค้ด JavaScript ที่เกี่ยวข้องดำเนินการ จากนั้นกลไกจะแปลผลไบต์โค้ด และทำการเปลี่ยนแปลง DOM

5   เบราว์เซอร์แสดงผล DOM ใหม่

JavaScript ฝั่งเซิร์ฟเวอร์

JavaScript ฝั่งเซิร์ฟเวอร์หมายถึงการใช้ภาษาเขียนโค้ดในลอจิกของเซิร์ฟเวอร์แบ็คเอนด์ ในกรณีนี้ กลไก JavaScript จะอยู่บนเซิร์ฟเวอร์โดยตรง ฟังก์ชัน JavaScript ฝั่งเซิร์ฟเวอร์สามารถเข้าถึงฐานข้อมูล ดำเนินการทางตรรกะแบบต่าง ๆ และตอบสนองต่อเหตุการณ์ต่าง ๆ ที่ถูกกระตุ้นจากระบบปฏิบัติการของเซิร์ฟเวอร์ ข้อได้เปรียบหลักของการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์คือคุณสามารถปรับแต่งการตอบสนองของเว็บไซต์โดยอ้างอิงตามข้อกำหนดของคุณ สิทธิ์เข้าถึงของคุณ และคำขอข้อมูลจากระบบได้เป็นอย่างมาก

ฝั่งไคลเอ็นต์เทียบกับฝั่งเซิร์ฟเวอร์

คำว่าไดนามิกอธิบาย JavaScript ทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ พฤติกรรมไดนามิกคือความสามารถที่จะอัปเดตการแสดงของเว็บเพจเพื่อสร้างเนื้อหาใหม่ตามที่จำเป็น ความแตกต่างระหว่าง JavaScript ฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์อยู่ที่วิธีการที่ JavaScript สร้างเนื้อหาใหม่ โค้ดฝั่งเซิร์ฟเวอร์สร้างเนื้อหาใหม่แบบไดนามิกด้วยการใช้ลอจิกของแอปพลิเคชันและปรับเปลี่ยนข้อมูลจากฐานข้อมูล ส่วน JavaScript ฝั่งไคลเอ็นต์สร้างเนื้อหาใหม่แบบไดนามิกภายในเบราว์เซอร์โดยใช้ลอจิกอินเทอร์เฟซผู้ใช้ และปรับเปลี่ยนเนื้อหาเว็บเพจที่อยู่บนไคลเอ็นต์อยู่แล้ว ความหมายมีความแตกต่างกันเล็กน้อยในสองบริบทแต่ก็มีความเกี่ยวข้องกัน และทั้งสองแนวทางทำงานร่วมกันเพื่อปรับปรุงประสิทธิภาพการใช้งานของผู้ใช้

นอกเหนือจากการนำไปใช้ในคุณสมบัติไดนามิกแล้ว ความแตกต่างอีกประการหนึ่งระหว่างการใช้ JavaScript สองแบบคือทรัพยากรที่โค้ดสามารถเข้าถึงได้ ทางฝั่งไคลเอ็นต์ เบราว์เซอร์จะควบคุมสภาพแวดล้อมรันไทม์ของ JavaScript โค้ดจึงสามารถเข้าถึงได้เพียงทรัพยากรที่เบราว์เซอร์อนุญาตให้โค้ดเข้าถึงเท่านั้น ตัวอย่างเช่น โค้ดไม่สามารถเขียนเนื้อหาลงในฮาร์ดดิสก์ของคุณได้เว้นแต่คุณจะคลิกปุ่มดาวน์โหลด ในทางกลับกัน ฟังก์ชันฝั่งเซิร์ฟเวอร์สามารถเข้าถึงทรัพยากรทั้งหมดของเครื่องเซิร์ฟเวอร์ได้ตามที่จำเป็น

ไลบรารี JavaScript คืออะไร

ไลบรารี JavaScript คือชุดส่วนย่อยของโค้ดที่เขียนไว้ก่อนซึ่งนักพัฒนาเว็บสามารถนำมาใช้ใหม่เพื่อใช้ฟังก์ชันมาตรฐานของ JavaScript โค้ดในไลบรารี JavaScript ถูกใส่เข้าในส่วนที่เหลือของโค้ดของโปรเจกต์ โดยดำเนินการตามความจำเป็น หากคุณมองว่าโค้ดแอปพลิเคชัน JavaScript เป็นบ้าน ไลบรารี JavaScript ก็เป็นเสมือนเฟอร์นิเจอร์สำเร็จรูปที่นักพัฒนาสามารถนำมาใช้เพื่อปรับปรุงการทำงานของบ้าน

ต่อไปนี้เป็นการใช้งานที่พบบ่อยสำหรับไลบรารี JavaScript:

การแสดงข้อมูลเป็นภาพ

การแสดงข้อมูลเป็นภาพมีความสำคัญสำหรับผู้ใช้เพื่อดูสถิติ เป็นต้น ในแผงผู้ดูแล แดชบอร์ด และตัววัดประสิทธิภาพ

ไลบรารีต่าง ๆ เช่น Chart.js, ApexCharts และ Algolia Places มีฟังก์ชันในตัวที่คุณสามารถใช้สร้างแอปพลิเคชันเว็บที่แสดงผลข้อมูลเป็นแผนภาพและแผนที่ได้

การจัดการ DOM

คุณสามารถใช้ไลบรารี เช่น jQuery และ Umbrella JS เพื่อทำให้การพัฒนาเว็บเป็นเรื่องง่าย เพราะไลบรารีเหล่านี้มีโค้ดสำหรับฟังก์ชันมาตรฐานของเว็บไซต์ เช่น แอนิเมชันเมนู แกลเลอรีภาพ ปุ่ม ไลท์บ็อกซ์ และอีกมากมาย

แบบฟอร์ม

การพัฒนาเว็บทั้งหมดใช้แบบฟอร์มสำหรับให้ผู้เยี่ยมชมเว็บไซต์ติดต่อใครสักคน สั่งซื้อผลิตภัณฑ์ และลงทะเบียนเข้าร่วมอีเวนต์ ไลบรารี JavaScript บางอย่าง เช่น wForms, LiveValidation, Validanguage และ qForms ทำให้ฟังก์ชันเกี่ยวกับแบบฟอร์มง่ายขึ้น ซึ่งรวมถึงการสอบทวนแบบฟอร์ม เค้าโครง เงื่อนไข และการเปลี่ยนสภาพ

ฟังก์ชันคณิตศาสตร์และข้อความ

แอปพลิเคชันเว็บมากมายต้องแก้สมการทางคณิตศาสตร์และประมวลผลข้อมูลวันที่ เวลา และข้อความ แทนที่จะส่งคำขอดังกล่าวทั้งหมดไปยังเซิร์ฟเวอร์ การจัดการคำขอเหล่านี้บางส่วนบนฝั่งไคลเอ็นต์จะมีประสิทธิภาพมากกว่า นักพัฒนาเว็บทำเช่นนี้ได้ด้วยการใช้ไลบรารี JavaScript เช่น Date.js, Sylvester และ JavaScript URL Library

เฟรมเวิร์ก JavaScript คืออะไร

เช่นเดียวกับไลบรารี JavaScript เฟรมเวิร์ก JavaScript คือชุดส่วนย่อยของโค้ดที่เขียนไว้ก่อนซึ่งทำหน้าที่ต่าง ๆ และสามารถนำมาใช้ซ้ำได้ อย่างไรก็ตาม ในขณะที่ไลบรารี JavaScript เป็นเครื่องมือเฉพาะทางสำหรับการใช้งานตามต้องการ เฟรมเวิร์ก JavaScript คือชุดเครื่องมือที่ครบถ้วนที่ช่วยก่อร่างและจัดระเบียบแอปพลิเคชันเว็บใด ๆ หากคุณมองว่าแอปพลิเคชัน JavaScript เป็นบ้าน เฟรมเวิร์ก JavaScript ก็เป็นเสมือนพิมพ์เขียวที่ใช้สร้างบ้าน

ต่อไปนี้เป็นตัวอย่างบางส่วนของการใช้เฟรมเวิร์ก JavaScript:

การพัฒนาแอปพลิเคชันเว็บและแอปพลิเคชันบือถือ

AngularJS คือเฟรมเวิร์กที่ทำให้การพัฒนาและทดสอบแอปพลิเคชันเว็บง่ายขึ้น เช่น แอปพลิเคชันอีคอมเมิร์ซ แอปพลิเคชันในเวลาจริง และแอปพลิเคชันวิดีโอ React Native เป็นอีกเฟรมเวิร์กหนึ่งที่สนับสนุนการพัฒนาแอปพลิเคชันมือถือที่แสดงผลแบบเนทีฟสำหรับ iOS และ Android

การพัฒนาเว็บแบบตอบสนอง

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

การพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์

Node.js คือเฟรมเวิร์ก JavaScript โอเพ่นซอร์สฝั่งเซิร์ฟเวอร์ที่เรียกใช้โค้ด JavaScript นอกเบราว์เซอร์ นักพัฒนาใช้เฟรมเวิร์กนี้เพื่อสร้างแอปพลิเคชันฝั่งเซิร์ฟเวอร์บนเครือข่ายที่ปรับขนาดได้ รวดเร็ว และเชื่อถือได้ เฟรมเวิร์กนี้สามารถจัดการคำขอ HTTP และ Data Stream สนับสนุนระบบไฟล์ และจัดการกระบวนการแบ็คเอนด์หลายกระบวนการพร้อมกัน
 

แนะนำภาษา JavaScript การติดตั้ง Node.js และภาษา JavaScript โครงสร้างไวยากรณ์ของภาษา การรับค่าและการแสดงผล ประเภทข้อมูล ตัวแปร ค่าคงที่ ตัวดำเนินการ ตัวดำเนินการ II คำสั่งเลือกเงื่อนไข if els
คำสั่งเลือกเงื่อนไข switch case คำสั่งวนซ้ำ while, do while คำสั่งวนซ้ำ for loop ฟังก์ชัน String String methods อาเรย์ Array methods ออบเจ็ค คลาสและออบเจ็ค Inheritances Encapsulation Static method and static property Getter and Setter Exceptions and Error Modules Map Set วันที่และเวลา

ส่วนเสริม

• Escape characters
• การจัดเรียงข้อมูลในอาเรย์
• เมธอด filter, map, reduce
• คำสั่งวนซ้ำ for in และ for of
• การแปลงประเภทข้อมูล
• การตรวจสอบประเภทข้อมูล
• ตัวดำเนินการระดับบิต
• Arrow function
• Callback function
• Promise
• คำสั่ง async/await
• การสุ่มตัวเลข
• การจัดรูปแบบการแสดงผลวันที่