ทำเว็บโปรเจคจบด้วยภาษา JavaScript (JS)

 

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

แอดมินได้ทำหัวข้อย่อยเอาไว้แล้วนะครับ สามารถเลือกอ่านตามหัวข้อได้เลย JavaScript (JS) คืออะไร? ประวัติของ JavaScript หลักการทำงานของ JavaScript ข้อดี ข้อเสียของ JavaScript สรุปการใช้งาน JavaScript ฉบับคนทำวิจัย

JavaScript (JS) คืออะไร?

        JavaScript หรือเรียกย่อๆ ว่า JS เป็นภาษาโปรแกรมแบบไดนามิก (Dynamic programming language) ถูกออกแบบมาเพื่อสร้างเว็บไซต์ที่สามารถโต้ตอบกับผู้ใช้ได้ และยังสามารถทำงานที่ซับซ้อนได้ ทำให้เว็บเพจที่เรามองเห็นในบราวเซอร์มีความชีวิตชีวา ตัวอย่างเช่น การปรับเปลี่ยนส่วนหนึ่งของหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บใหม่ทั้งหมด หรือการตรวจสอบข้อมูลที่ผู้ใช้ป้อนเข้ามาก่อนที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ โดยในปัจจุบันมีการใช้งานอย่างแพร่หลายทั่วไปในการพัฒนาเว็บและได้กลายเป็นภาษาที่เกี่ยวข้องกับเทคโนโลยีอินเทอร์เน็ต (Internet) มีความหลากหลายทั้งในส่วนของการพัฒนา front-end และ back-end โดยสามารถทำงานร่วมกับ HTML และ CSS ซึ่งเป็นภาษาพื้นฐานในการสร้างเว็บไซต์ได้ ดังนั้น ถ้า HTML เป็นโครงสร้างพื้นฐานของบ้าน และ CSS เป็นสิ่งตกแต่งภายใน การกำหนดสีของตัวบ้าน แล้ว JavaScript ก็คือระบบไฟฟ้า ที่ทำให้สิ่งตกแต่งเหล่านั้นสามารถทำงานได้

ประวัติของ JavaScript

        ภาษา JavaScript เป็นภาษาโปรแกรมมิ่งที่ถูกพัฒนาขึ้น Netscape Inc. (เน็ตสเคป) ในปี 1995 โดย Brendan Eich ซึ่งตอนนั้นถูกเรียกว่า "Live Script" เปิดตัวครั้งแรกในเวอร์ชัน 2.0 สามารถทำงานบนเว็บเบราว์เซอร์ Netscape Navigator ซึ่งต่อมากลายเป็น Mozilla Firefox ในภายหลัง แต่เนื่องจากมีความใกล้ชิดกับภาษา Lisp ทำให้ทีมพัฒนาพบว่าชื่อ "Live Script" ทำให้เกิดความสับสน จึงได้เปลี่ยนชื่อเป็น "JavaScript" โดยใช้ชื่อของภาษา Java ที่เป็นภาษายอดนิยมในช่วงนั้นเพื่อเพิ่มความนิยมให้กับภาษา JavaScript แต่อย่างไรก็ตาม สองภาษานี้มีลักษณะและวัตถุประสงค์ที่แตกต่างกันสิ้นเชิง Java มีบทบาทในการพัฒนาโปรแกรมสำหรับเครื่องคอมพิวเตอร์และเว็บเซอร์เวอร์ ในขณะที่ JavaScript เน้นในเรื่องของการพัฒนาแอปพลิเคชันเว็บและเพจเว็บ โดยมีความเป็นมาดังนี้

รูปแสดงความเป็นมาของโปรแกรมภาษา JavaScript

• ในปี 1996: JavaScript ถูกส่งมอบให้องค์กรมาตรฐานของอินเตอร์เน็ต (Internet Engineering Task Force - IETF) และได้รับการรับรองเป็นมาตรฐานในชื่อ ECMAScript เป็นชื่อทางเลือกและตราสัญลักษณ์ของภาษา JavaScript 
• ในปี 1997: ECMAScript 1 ออกมาเป็นการกำหนดมาตรฐานอย่างแรกสำหรับ JavaScript ซึ่งประกอบด้วยฟีเจอร์พื้นฐานในการเขียนโปรแกรม เช่น ตัวแปร การตรวจสอบเงื่อนไข การวนซ้ำ (Loop) ฟังก์ชัน และอื่น ๆ
• ในปี 1998: ECMAScript 2 เพิ่มการสนับสนุนฟังก์ชันทางคณิตศาสตร์ที่รวมถึงการทำงานกับเลขทศนิยมและจำนวนเต็ม เพิ่มเติมถึงการจัดการกับอักขระพิเศษเช่น Unicode ซึ่งเป็นการที่สำคัญในการพัฒนาเว็บที่รองรับภาษาและสัญลักษณ์ที่หลากหลาย
• ในปี 1999: ECMAScript 3 เพิ่มขอบเขตประกาศตัวแปร (variable scope) โดยใช้ var แบบฟังก์ชัน (function scope) นั่นคือตัวแปรที่ถูกประกาศภายในฟังก์ชันสามารถเข้าถึงได้เฉพาะภายในฟังก์ชันนั้น ๆ และวิธีการใช้ object literal และสามารถเพิ่มคุณสมบัติ (properties) และเมธอด (methods) ให้กับออบเจ็กต์ได้ นอกจากนี้ยังมีการทำงานกับอาร์เรย์ (Arrays) โดยสามารถเข้าถึงสมาชิกในอาเรย์ด้วยดัชนี (index) และใช้เมธอดพื้นฐาน เช่น push, pop, splice เพื่อจัดการกับข้อมูลในอาเรย์
• ในปี 2003: ECMAScript 4 เพิ่มระบบชนิดข้อมูลที่สมบูรณ์แบบ (Type Annotation) และรองรับคลาส (Class) โดยสนับสนุนการสืบทอดคลาสเหมือนกับภาษาโปรแกรมที่มีชื่อเสียงอื่น ๆ
• ในปี 2009: ECMAScript 5 (ES5) เพิ่ม เอาท์โพรโมตซ์ strict mode ที่ช่วยลดข้อผิดพลาดในการเขียนโค้ด การทำงานกับ JSON (JavaScript Object Notation) ซึ่งสามารถแปลงเป็น Object ใน JavaScript ได้โดยอัตโนมัติ
• ในปี 2015: ECMAScript 6 (ES6) หรือ ES2015 ออกมา เป็นรุ่นที่มีการเพิ่มฟีเจอร์อย่างต่อเนื่องและเป็นที่นิยม ซึ่งประกอบด้วย Arrow Functions, Classes, Modules, Promises, และ Template Literals เป็นต้น
  

        หลังจากนั้น มีการออกเวอร์ชันใหม่ๆ ของ ECMAScript เพิ่มขึ้นเรื่อยๆ ไป เช่น ES2016, ES2017, ES2018 ซึ่งให้ฟีเจอร์ที่มีประสิทธิภาพและใหม่ๆ มากมายในการเขียนโปรแกรม

หลักการทำงานของ JavaScript

        JavaScript เป็นภาษาที่ทำงานภายใต้เว็บเบราว์เซอร์ (Web Browser) สามารถใช้งานได้ทั้งบน client-side และ server-side ในฝั่ง client-side JavaScript ช่วยในการสร้าง UI ที่ตอบสนองและสร้างปฏิสัมพันธ์กับผู้ใช้ ส่วนในฝั่ง server-side สามารถจัดการกับฐานข้อมูล รวมถึงการจัดการสื่อสารผ่านเครือข่ายได้ ซึ่งทำงานโดยใช้สถาปัตยกรรมแบบเหตุการณ์ (event-driven) และโมเดลหน้าจอเดียว (single-threaded) เพื่อให้การทำงานของเว็บเบราว์เซอร์เป็นไปอย่างราบรื่นและไม่หยุดชะงักในขณะที่รอการตอบสนองจากผู้ใช้ด้วย JavaScript Engine ทำหน้าที่ในการแปลและประมวลผลโค้ด JavaScript ให้กลายเป็นคำสั่งที่เครื่องคอมพิวเตอร์เข้าใจโดยมีรายละเอียดดังนี้

รูปภาพแสดงการทำงานของภาษา JavaScript

1. Parsing (การแยกวิเคราะห์): ในขั้นตอนนี้ JavaScript Engine จะอ่านและแยกวิเคราะห์โค้ด JavaScript เพื่อแปลงเป็นโครงสร้างข้อมูลที่เรียกว่า Abstract Syntax Tree (AST) ซึ่งเป็นโครงสร้างที่แสดงถึงโครงสร้างและความหมายของโค้ด
2. Interpreter (การคอมไพล์): หลังจาก Parsing เสร็จสิ้น JavaScript Engine จะแปลง AST เป็นรหัสคำสั่งที่รันบนเครื่องคอมพิวเตอร์ แต่ไม่ใช่เป็นรหัสเครื่อง แต่เป็น Intermediate Representation (IR) ซึ่งเป็นรหัสคำสั่งที่เป็นกลางระหว่างโค้ดต้นฉบับและรหัสเครื่อง ตัวแปลงรับ AST และเปลี่ยนมันเป็น bytecode หรือรหัสที่เครื่องคอมพิวเตอร์เข้าใจ ซึ่ง bytecode นี้ถูกเก็บไว้ในหน่วยความจำชั่วคราว
3. Optimization (การเพิ่มประสิทธิภาพ): ในขั้นตอนนี้ JavaScript Engine จะวิเคราะห์ IR เพื่อทำการเพิ่มประสิทธิภาพให้กับรหัสโดยการปรับปรุงรูปแบบของรหัส และทำการค้นหารูปแบบที่ทำให้การทำงานเร็วขึ้น
4. Execution (การทำงาน):  JavaScript Engine จะทำการรันรหัส IR หรือรหัสเครื่องที่ถูกแปลงมา โดยทำงานตามลำดับของคำสั่งที่ได้รับ และประมวลผลข้อมูลตามที่โค้ดกำหนด
5. Memory Heap (หน่วยความจำที่ใช้เก็บข้อมูล) เมื่อ JavaScript สร้างตัวแปรหรืออ็อบเจ็กต์ หน่วยความจำที่เรียกว่า Memory Heap จะถูกใช้เก็บข้อมูลเหล่านี้
6. Call Stack (สแต็กของการเรียกฟังก์ชัน) Call Stack เป็นโครงสร้างที่ใช้เก็บคำสั่งฟังก์ชันที่กำลังถูกเรียกใช้งาน โดยเมื่อฟังก์ชันเสร็จสิ้นการทำงาน จะถูกนำออกจาก Call Stack
   

ข้อดี ข้อเสียของ JavaScript

ข้อดี

1. ติดตั้งและใช้งานง่าย JavaScript เป็นภาษาที่มีสัญญาณเริ่มต้นต่ำ สามารถเริ่มเขียนโค้ดได้ง่ายและรวดเร็ว คุณไม่จำเป็นต้องติดตั้งซอฟต์แวร์เพิ่มเติมหรือคอมไพล์เซิร์ฟเวอร์อย่างมากก่อนใช้งาน
2. มีชุมชนที่แข็งแกร่งและกว้างขวาง มีชุมชนที่กว้างขวางและกระจายตัวทั่วโลก ซึ่งหมายความว่าสามารถหาคำถาม และคำตอบได้ง่ายๆ จากชุมชนนี้ รวมถึงการแลกเปลี่ยนและแบ่งปันโค้ด
3. สามารถทำงานได้ทั้งเครื่องลูกข่าย (Client) และฝั่งเซิร์ฟเวอร์ (Server) สามารถสร้างและควบคุมแอปพลิเคชันที่ทำงานแบบแอปพลิเคชันเดียวทั้งฝั่งผู้ใช้และเซิร์ฟเวอร์
4. การทำงานอย่างรวดเร็ว JavaScript สามารถทำงานได้อย่างรวดเร็วบนเว็บเบราว์เซอร์เนื่องจากเป็นภาษาที่ทำงานบนไคลเอนต์ นั่นหมายความว่าไม่ต้องมีการส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อประมวลผล
5. รองรับ HTML และ CSS สามารถเชื่อมต่อกับ HTML และ CSS ได้ง่าย ทำให้สามารถแก้ไขและปรับแต่งเนื้อหาและรูปแบบของเว็บไซต์ได้ง่าย
   

ข้อเสีย

1. มีความเสี่ยงในการรั่วไหลข้อมูล เนื่องจากทำงานบนไคลเอนต์ ข้อมูลสำคัญที่อาจถูกใช้งานในโค้ด JavaScript อาจถูกเข้าถึงโดยไม่ได้รับอนุญาตถูกต้อง ซึ่งอาจส่งผลให้เกิดปัญหาด้านความปลอดภัยของเว็บไซต์
2. Cross-Browser Compatibility (ปัญหาความเข้ากันได้ของเบราว์เซอร์) บางครั้งอาจมีปัญหาเกี่ยวกับความเข้ากันได้กับเบราว์เซอร์ต่าง ๆ ซึ่งอาจทำให้โค้ดที่เขียนใช้งานได้ดีในเบราว์เซอร์หนึ่ง อาจไม่ทำงานหรือมีปัญหาในเบราว์เซอร์อื่น
3. Type Coercion (การเปลี่ยนชนิดของข้อมูลอัตโนมัติ) มีลักษณะในการควบคุมชนิดข้อมูลที่อัตโนมัติ ทำให้บางครั้งความไม่ตรงตามคาดหวังอาจเกิดขึ้นเมื่อ JavaScript ประมวลผลข้อมูล
4. Callback Hell (ปัญหาที่ทำให้โค้ดซับซ้อน) เมื่อมีการใช้งานการเรียกฟังก์ชันแบบ callback ซ้อนกันมากมายอาจทำให้โค้ดดูซับซ้อนและยากในการอ่านและการบำรุงรักษา ซึ่งบางครั้งเรียกว่า Callback Hell
5. ข้อจำกัดในการเข้าถึงทรัพยากรบนเครือข่าย เนื่องจากข้อจำกัดในการเข้าถึงทรัพยากรบนเครือข่ายโดยตรง การทำงานที่เกี่ยวข้องกับซิงโครไนซ์และเคลื่อนไหวของข้อมูลบนเครือข่ายอาจจำเป็นต้องมีการจัดการอย่างระมัดระวัง

รูปภาพแสดง JavaScript Engine

สรุปการใช้งาน JavaScript ฉบับคนทำวิจัย

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

        ถ้าชอบคอนเทนต์แบบนี้สามารถติดตามข่าวสารและบทความที่เกี่ยวข้องกับงานวิจัยของ makewebproject เพื่ออัปเดทความเคลื่อนไหวของการเขียนโปรแกรมภาษา HTML หากท่านมีข้อเสนอแนะ หรือติดปัญหาส่วนไหนสามารถสอบถามผ่าน Facebook หรือ Line ได้เลยครับ

อ่านข่าวอื่นๆเพิ่มเติมได้ที่ บทความและเทคนิคการทำวิจัย

 

กลับหน้าเทคนิคการทำโปรเจค