ก่อนเริ่มเรียน JavaScript ต้องรู้อะไรบ้าง

สิงหาคม 17, 2023

ก่อนเริ่มเรียน JavaScript ต้องรู้อะไรบ้าง

by Natthawut Chaiya nattawut.c@aware.co.th

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

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

JavaScript คืออะไร

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

JavaScript เป็นภาษาสคริปต์ ซึ่งมีข้อดีในการสร้างระบบอัตโนมัติ ช่วยเชื่อมข้อมูลต่าง ๆ จากระบบเข้าด้วยกัน จัดการให้ข้อมูลสามารถมีปฏิสัมพันธ์กับผู้ใช้งาน นอกจากนี้ยังมีหลักการเขียนที่เข้าใจง่ายและใช้งานได้บนหลายระบบปฏิบัติการ แต่หากพูดถึงด้านการแปลงข้อมูล JavaScript จะจัดเป็นภาษาโปรแกรมแบบ Interpreted กล่าวคือ เป็นภาษาที่เหมือนมีล่ามเข้ามาช่วยแปลงสารระหว่างนักพัฒนาและคอมพิวเตอร์อยู่ตลอดเวลา ซึ่งกระบวนการนี้จะทำให้ต้องเสียเวลาในการพัฒนาโค้ดมากกว่าภาษาที่ใช้กระบวนการคอมไฟล์แบบทั่วไป โดยเฉพาะเมื่อต้องแปลงโค้ดเดิมวนซ้ำ ๆ อย่างไรก็ดีมีการพัฒนา JIT (Just-in-time) Compiler เข้ามาช่วยลดเวลาในการพัฒนาโค้ดเป็นอย่างมาก ทำให้นักพัฒนาสามารถพัฒนาโปรแกรมต่าง ๆ ผ่าน JavaScript ได้สะดวกสบายยิ่งขึ้น

หมายเหตุ: JavaScript ไม่มีความเกี่ยวข้องกับ Java ที่เป็นภาษาโปรแกรมอีกตัว หลายคนกล่าวว่าที่มาของชื่ออาจมาจากแผนทางการตลาดในขณะที่ Java กำลังอยู่ในช่วงขาขึ้นเลยอยากตั้งชื่อคล้ายเพื่อดึงความสนใจ (ข้อมูลจาก https://www.webucator.com/article/why-javascript-is-called-javascript/) และ JavaScript ก็คนละอย่างกับ JScript ซึ่งเป็น JavaScript ในเวอร์ชันของ Microsoft ในขณะที่ JavaScript เป็นของ Oracle

หน้าที่การทำงานอย่างคร่าว ๆ ของ JavaScript คือ

JavaScript สามารถเปลี่ยนเนื้อหา HTML ได้ เปลี่ยนค่าภายใน HTML Attributes ได้ เปลี่ยนสไตล์ CSS ของ HTML ได้ ซ่อนส่วน HTML ที่ไม่ต้องการ และแสดงส่วน HTML ที่ต้องการได้

JavaScript ใช้ทำอะไร?

เนื่องจาก JavaScript ถูกใช้ในการพัฒนาเว็บ และสามารถใช้สำหรับการพัฒนาทั้งส่วนหน้า (front-end) และส่วนหลัง (Back-end) เราจึงจำเป็นต้องรู้จัก framework ของ JavaScript เพื่อศึกษาและพัฒนาต่อยอดด้วย ซึ่ง framework ยอดนิยมแยกประเภทได้ดังนี้

Front End: React, AngularJS, Vue.js

Back End: Node.js, Next.js, Express.js, Nuxt

Testing: Jest, Mocha, Storybook, Cypress, Jasmine, Playwright

พัฒนาเว็บไซต์

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

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

พัฒนาแอปพลิเคชันบนมือถือ

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

พัฒนาเกม

เกมที่ใช้ JavaScript พัฒนาจะเป็นเกมสามารถเล่นบนเบราว์เซอร์หรือโทรศัพท์มือถือ ซึ่งเหมาะสำหรับคนที่อยากลองฝึกพัฒนาเกมง่าย ๆ (ส่วนพวกเกมยักษ์ใหญ่จะใช้ภาษา C++ ในการพัฒนา เพราะทั้งประมวลผลได้เร็วและมีประสิทธิภาพอย่างมาก) ยกตัวอย่างเกมที่ทำจาก JavaScript คือ 2048 เกมเลื่อนตัวเลขคูณสอง หรือเกม Scrabble อย่าง Words With Friends 2 ที่ใช้ React Native ในการสร้าง (สำหรับใครที่สนใจว่าทำไมทีมผู้พัฒนาเลือก React Native ในการสร้างสามารถอ่านต่อได้ที่นี่ https://medium.com/zynga-engineering/why-how-words-with-friends-is-adopting-react-native-b24a405f421c )

การเรียน JavaScript มีข้อดีอย่างไร?

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

เรียน JavaScript ที่ไหน?

สำหรับการเรียนคอร์สขั้นพื้นฐาน ขอแยกเป็น 2 ประเภทคือ คอร์สที่เป็นตัวอักษรและคอร์สที่เป็นวิดีโอ

โดยคอร์สที่เป็นเนื้อหาตัวหนังสือ สามารถศึกษาได้จาก educative ชื่อคอร์ส Introduction to JavaScript: First Steps จาก Arnav Aggrawal โดยจะมีการสอนหัวข้อที่แบ่งเป็นหมวดหมู่ชัดเจน เป็นเนื้อหาภาษาอังกฤษ และมีแบบทดสอบให้ด้วย อีกแหล่งข้อมูลที่เหมาะกับการศึกษาภาษา JavaScript เบื้องต้น คือ แหล่งข้อมูลจาก Codecademy ที่พร้อมให้ผู้เรียนได้ทดสอบทำแบบฝึกหัดและเขียนโค้ดจริงผ่านเว็บไซต์ ส่วนคอร์สที่เป็นวิดีโอ มีคอร์สจาก Udemy ที่แนะนำคือ JavaScript Essentials จาก Lawrence Turton ที่แนะนำข้อมูลเบื้องต้นต่าง ๆ และ Basic Coding in JavaScript [2019] จาก Zack Freedman ที่นำเครื่องมือไปใช้ในการแก้ปัญหาในหลากหลายรูปแบบ รวมไปถึงการสร้างเกมและการแก้ไขปัญหาทางคณิตศาสตร์ โดยทั้งสองคอร์สเป็นคอร์สฟรีที่มีผู้เรียนจำนวนมาก ซึ่งบรรยายเป็นภาษาอังกฤษ (มีซับไตเติลอัตโนมัติ)

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

แนะนำ :

Codeacademy – https://www.codecademy.com/resources/docs/javascript

Udemy – https://www.udemy.com/course/javascript-essentials/ และ https://www.udemy.com/course/javascript-basics-start-coding-in-5-minutes-2019/ kw=Basic+Coding+in+JavaScript&src=sac

Youtube – Born to Dev

ฝึกเขียน JavaScript ได้อย่างไร

ในที่นี้ขอแยกวิธีการทดสอบ JavaScript ออกเป็น 3 แบบ

ใช้แค่เบราว์เซอร์ เช่น Google Chrome สามารถทำได้ 2 แบบ แบบแรกคือ กดคลิกขวาตามด้วย inspect จากนั้นเลือกหัวข้อ console จากนั้นลบข้อมูลแล้วพิมพ์โค้ดได้เลย แต่วิธีนี้จะมีปัญหาตรงที่หากปิดเว็บที่เขียนโค้ดไว้ โค้ดที่เขียนก็จะหายไปหมด ส่วนวิธีที่ 2 คือการพิมพ์จากแหล่งอื่น จากนั้นนำมาทดสอบที่เบราว์เซอร์ แต่วิธีนี้ก็จะมีจุดอ่อนอยู่ที่ผู้พัฒนาจะไม่สามารถตรวจสอบข้อผิดพลาดในขณะที่พิมพ์ได้ (หากปิดการใช้งาน JavaScript บนเบราว์เซอร์อยู่สามารถกดปุ่ม 3 จุด ไปที่ Setting และเลือก Privacy and security จากนั้นเลื่อนลงจะเจอหัวข้อ Content ซึ่งมีหัวข้อย่อยชื่อว่า JavaScript กดเข้าไปและกดเปิดอนุญาตการใช้งาน)
ติดตั้ง Visual Studio Code ซึ่งเป็นโปรแกรมช่วยตัดแต่งโค้ดฟรี และมีภาษาโปรแกรมหลายอย่างให้เลือกใช้ อีกทั้งมีระบบตรวจสอบข้อผิดพลาดและสีที่บ่งบอกถึงฟังก์ชัน ซึ่งมีประโยชน์อย่างมากสำหรับการเขียนโค้ด
ใช้แหล่งทดสอบออนไลน์บนเบราว์เซอร์ เช่น CodePen, CodeSandbox, JSFiddle , code.visualstudio และอื่น ๆ อีกมากมาย

JavaScript ใช้ทำงานในตำแหน่งอะไร

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

Front-end developer นักพัฒนาเว็บไซต์ผู้ดูแลระบบหน้าบ้าน โดยอาชีพนี้จะเน้นไปที่การสร้างและออกแบบอินเทอร์เฟซที่น่าสนใจ รวมไปถึงการสร้างเครื่องมือต่าง ๆ ที่ทำให้เว็บมีปฏิกิริยาตอบโต้กับผู้ใช้เข้าชมเว็บได้
Back-end developer นักพัฒนาเว็บไซต์ผู้ดูแลระบบหลังบ้าน โดยใช้ js ที่ใช้งานด้วยภาษา JavaScript ไปพัฒนาระบบหลังบ้านที่ทำหน้าที่จัดการกับคำขอและการตอบสนองต่าง ๆ รวมไปถึงจัดการเรื่องการประมวลผลและข้อมูลที่เกี่ยวข้องการทำงานของระบบ
Full-stack developer นักพัฒนาเว็บไซต์ที่มีความเข้าใจทั้งระบบหน้าบ้านและระบบหลังบ้านของการดูแลพัฒนาเว็บไซต์ และเป็นผู้ประสานระหว่างนักพัฒนาของแต่ละฝั่งเพื่อทำให้การดำเนินงานสะดวกและเรียบร้อย
Mobile developer นักพัฒนาแอปพลิเคชันบนมือถือ โดยจะใช้ React native หรือ Ionic ในการสร้างแอปพลิเคชันบนมือถือที่สามารถใช้ได้บนหลายแพลตฟอร์ม