ก่อนเริ่มเรียน JavaScript ต้องรู้อะไรบ้าง
By ปัจจุบันทุกสิ่งทุกอย่างเริ่มผสมผสานเข้ากับเทคโนโลยี รวมกลายเป็นวิถีชีวิตแบบใหม่ที่ช่วยอำนวยความสะดวกสบายมากขึ้น แต่นั้นก็หมายถึงความต้องการของทักษะแต่ละอย่างก็ต้องเปลี่ยนแปลงไปเช่นกัน ถึงเวลาแล้วที่เราควรเรียนรู้ทักษะใหม่เพื่อปรับให้เข้ากับโลก หากต้องพูดถึงทักษะที่เหมาะกับโลกปัจจุบัน ทักษะที่สำคัญที่สุดอย่างหนึ่งก็คงหนีไม่พ้นทักษะการเขียนโปรแกรม แต่เมื่อนึกถึงการเขียนโปรแกรมก็จะเกิดคำถามต่อมาว่า แล้วจะเลือกเรียนภาษาตัวไหนดี เพราะมีตัวเลือกเยอะแยะเต็มไปหมด หากต้องเลือกที่การพัฒนาดูแลเว็บไซต์หรือการออกแบบแอปพลิชันบนมือถือซึ่งเป็นทักษะจำเป็นอย่างหนึ่งในปัจจุบันก็คงต้องนึกถึง 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
ฝึกเขียนอย่างไร
ในที่นี้ขอแยกวิธีการทดสอบ JavaScript ออกเป็น 3 แบบ
- ใช้แค่เบราว์เซอร์ เช่น Google Chrome สามารถทำได้ 2 แบบ แบบแรกคือ กดคลิกขวาตามด้วย inspect จากนั้นเลือกหัวข้อ console จากนั้นลบข้อมูลแล้วพิมพ์โค้ดได้เลย แต่วิธีนี้จะมีปัญหาตรงที่หากปิดเว็บที่เขียนโค้ดไว้ โค้ดที่เขียนก็จะหายไปหมด ส่วนวิธีที่ 2 คือการพิมพ์จากแหล่งอื่น จากนั้นนำมาทดสอบที่เบราว์เซอร์ แต่วิธีนี้ก็จะมีจุดอ่อนอยู่ที่ผู้พัฒนาจะไม่สามารถตรวจสอบข้อผิดพลาดในขณะที่พิมพ์ได้ (หากปิดการใช้งาน JavaScript บนเบราว์เซอร์อยู่สามารถกดปุ่ม 3 จุด ไปที่ Setting และเลือก Privacy and security จากนั้นเลื่อนลงจะเจอหัวข้อ Content ซึ่งมีหัวข้อย่อยชื่อว่า JavaScript กดเข้าไปและกดเปิดอนุญาตการใช้งาน)
- ติดตั้ง Visual Studio Code ซึ่งเป็นโปรแกรมช่วยตัดแต่งโค้ดฟรี และมีภาษาโปรแกรมหลายอย่างให้เลือกใช้ อีกทั้งมีระบบตรวจสอบข้อผิดพลาดและสีที่บ่งบอกถึงฟังก์ชัน ซึ่งมีประโยชน์อย่างมากสำหรับการเขียนโค้ด
- ใช้แหล่งทดสอบออนไลน์บนเบราว์เซอร์ เช่น CodePen, CodeSandbox, JSFiddle และอื่น ๆ อีกมากมาย
JavaScript ใช้ในการทำงานตำแหน่งอะไร
หากพูดถึง JavaScript ก็ต้องนึกถึงการพัฒนาเว็บไซต์และการพัฒนาแอปพลิเคชันบนมือถือ จึงทำให้งานในกลุ่มนี้เป็นที่ต้องการอย่างมาก ยกตัวอย่างอาชีพที่ใช้ JavaScript ในการทำงาน
- Front-end developer นักพัฒนาเว็บไซต์ผู้ดูแลระบบหน้าบ้าน โดยอาชีพนี้จะเน้นไปที่การสร้างและออกแบบอินเทอร์เฟซที่น่าสนใจ รวมไปถึงการสร้างเครื่องมือต่าง ๆ ที่ทำให้เว็บมีปฏิกิริยาตอบโต้กับผู้ใช้เข้าชมเว็บได้
- Back-end developer นักพัฒนาเว็บไซต์ผู้ดูแลระบบหลังบ้าน โดยใช้ Node.js ที่ใช้งานด้วยภาษา JavaScript ไปพัฒนาระบบหลังบ้านที่ทำหน้าที่จัดการกับคำขอและการตอบสนองต่าง ๆ รวมไปถึงจัดการเรื่องการประมวลผลและข้อมูลที่เกี่ยวข้องการทำงานของระบบ
- Full-stack developer นักพัฒนาเว็บไซต์ที่มีความเข้าใจทั้งระบบหน้าบ้านและระบบหลังบ้านของการดูแลพัฒนาเว็บไซต์ และเป็นผู้ประสานระหว่างนักพัฒนาของแต่ละฝั่งเพื่อทำให้การดำเนินงานสะดวกและเรียบร้อย
- Mobile developer นักพัฒนาแอปพลิเคชันบนมือถือ โดยจะใช้ React native หรือ Ionic ในการสร้างแอปพลิเคชันบนมือถือที่สามารถใช้ได้บนหลายแพลตฟอร์ม
โดยสรุปแล้ว JavaScript ถือเป็นภาษาโปรแกรมตัวหนึ่งที่ใช้งานง่ายและเขียนสะดวก เหมาะสำหรับผู้ที่ต้องการเรียนการเขียนโปรแกรมตั้งแต่พื้นฐาน นอกจากนี้ด้วยประสิทธิภาพในการพัฒนาเว็บไซต์และการพัฒนาแอปพลิเคชันบนมือถือที่นับได้ว่าเป็นสิ่งสำคัญสำหรับการพัฒนาของโลกสมัยใหม่ ทำให้ทักษะด้าน JavaScript เป็นที่ต้องการและมีความแพร่หลาย และด้วยเหตุนี้ตราบใดที่การเรียนรู้ยังไม่มีที่สิ้นสุด เราควรลองเปิดรับและลองเรียนรู้เพื่อพัฒนาทักษะใหม่ ๆ ไปพร้อมกัน เพื่อเติบโตและเปลี่ยนแปลงตัวเองในวันนี้ ให้กลายเป็นผู้ที่มีทักษะความรู้ความเข้าใจที่หลากหลายในภายหน้า
ขณะนี้ ITRM ได้เปิดรับสมัครงานในตำแหน่ง Front-end Developer (Angular) กับ Mobile Developer (React Native/ iOS/ Android) สามารกดอ่านข้อมูลเพิ่มเติมของตำแหน่งงานได้ที่นี่
