Javascript ภาษาสำหรับสร้างและการพัฒนาเว็บไซต์และเว็บแอปพลิเคชันเพื่อให้มีความโต้ตอบและไดนามิกมากขึ้น (Web Application Interavtive)

เนื้อหาเกี่ยวกับ Javascipt

1.  Javascript คืออะไร
2.  Javascript มีหน้าที่อะไร และทำงานอย่างไร
3.  Javascript มีพัฒนาการอย่างไร
4.  Javascript ใช้ประโยชน์อะไรได้บ้าง
5.  บทสรุปของภาษา Javascript 

1. Javscript คืออะไร

JavaScript เป็นภาษาโปรแกรมมิ่งที่ใช้ในการพัฒนาเว็บไซต์และเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบและไดนามิก กับผู้ใช้งานมากขึ้น โดยทำงานร่วมกับ HTML และ CSS และเป็นภาษาที่สามารถทำงานได้ทั้งฝั่งผู้ใช้ (client-side) และฝั่งเซิร์ฟเวอร์ (server-side) ด้วยเทคโนโลยีอย่าง Node.js 

2. หน้าที่และประโยชน์ของ JavaScript

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

ทำงานได้ทั้งฝั่ง client และ server ที่ผ่านมาการทำงานบนเว็บส่วนใหญ่จะทำงานในฝั่ง Server หรือเรียกว่า Server-side จนพัฒนามาเป็น Client-side ที่ทำงานพร้อมกับ Server-side ไปด้วยเพื่อลดการใช้ทรัพยากรในฝั่งของ Server อะไรที่ทำบน Client ได้ ก็ให้ Client ทำงานแทน สามารถที่จะลดการใช้ทรัพยากรฝั่ง Server ลง 

• Client-side โค้ด JavaScript จะทำงานบนเว็บเบราว์เซอร์ของผู้ใช้ ทำให้การตอบสนองรวดเร็ว
• Server-side สามารถใช้ร่วมกับ Node.js เพื่อสร้างแอปพลิเคชันฝั่งเซิร์ฟเวอร์ ทำให้สามารถใช้ JavaScript ได้ทั้งในส่วนหน้าบ้านและหลังบ้านของเว็บไซต์

เป็นภาษาที่เรียนรู้ง่าย: มีโครงสร้างที่ไม่ซับซ้อนมากนัก เหมาะสำหรับผู้เริ่มต้น และมีแหล่งข้อมูลมากมายบนอินเทอร์เน็ต

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

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

3. JavaScript มีพัฒนาการอย่างไร

• ภาษา JavaScript ถูกพัฒนาขึ้นในปี 1994 โดยชาวอเมริกันที่ชื่อว่า Brendan Eich อยู่ภายใต้การควบคุมดูแลของบริษัท Netscape และได้รับการเปิดตัวครั้งแรกในปีถัดมาในชื่อ LiveScript  
• ในปี 1995 Microsoft เปิดตัว Internet Explorerได้สร้างอินเทอร์พรีเตอร์ของตัวเองที่เรียกว่า JScript 
• ปี 1996 Microsoft เปิดตัว JScript ครั้งแรกในปี 1996 พร้อมกับการรองรับ CSS และส่วนขยายของHTML 
• ปี 1997 หลังจากที่ EMCA International  กำหนดนมาตรฐาน ECMAScript ที่มีรากฐานการใช้งานของ JavaScript เป็นพื้นฐานอยู่ในนั้นด้วย โดย ECMAScript
• ปี 2000-2004  เมื่อกำเนิดเบราว์เซอร์ Firefox Firefox ที่ได้รับการตอบรับอย่างดีจากผู้ใช้จำนวนมาก และสามารถแย่งส่วนแบ่งทางการตลาดจาก Internet Explorer ได้อย่างมีนัยสำคัญ 
• ปี 2005 Mozilla ได้เข้าร่วมกับ ECMA International และได้เริ่มพัฒนา มาตรฐาน ECMAScript for XML (E4X) เกิดภาษา ActionScript 3 ซึ่งพัฒนาจากร่าง ECMAScript 4 
• ปี 2009 จนถึงปัจจุบัน Javascript ได้ถูกโอนไปยัง Sun Microsystem
• ปี 2010 กำเนิด Node.js เพื่อรองรับการใช้งานภาษา javascript ทั้งในฝั่ง Service-side และ Client-side

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

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

กลไก JavaScript

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

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

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

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

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

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

• JavaScript ฝั่งเซิร์ฟเวอร์ Server-side

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

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

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

4. ประโยชน์ของ JavaScript มีอะไรบ้าง

• เรียนรู้และใช้งานง่าย

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

ได้รับความเป็นอิสระจากแพลตฟอร์ม

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

• ลดโหลดของเซิร์ฟเวอร์

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

• ปรับปรุงอินเทอร์เฟซผู้ใช้

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

• สนับสนุนกระบวนการทำงานพร้อมกัน

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

5. บทสรุปของ Javascript

ภาษา Javascript เป็นที่นิยมในปัจจุบัน เพราะสาเหตุการใช้งานที่สามารถโต้ตอบ และมีความเป็นไดนามิก รองรับความต้องการของผู้ใช้งาน จนพัฒนามาเพื่อให้ใช้งานได้แฟลตฟอร์ม ภายใต้แนวคิดของภาษา Java ที่ว่า "เขียนครั้งเดียว รันได้แฟลต์ฟอร์ม" สามารถทำงานทั้งในฝั่ง Service-side และ Client-side ได้อีกด้วย ดังนั้นโปรแกรมเมอร์ส่วนใหญ่จึงหันมาพัฒนา แอบฟลิเคชั่นด้วยภาษา Javascript 

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